Vue Storefront 2 integration with plentymarkets

This project is a plentymarkets integration for Vue Storefront 2. The project takes a monorepo approach and contains all packages required to run the application.

Stay connected

---

Getting started

This section walks you through the first steps of working with the app.

Requirements

• Download NodeJS v14. If some of your projects require other NodeJS versions, use a node version manager like nvm or nvm-windows to quicky switch between the different versions.
• Install the Yarn package manager.

Installation

1. Fork the repository.
2. Clone your fork.
3. To install the project dependencies, run yarn.
4. To build the project, run yarn build.
5. To start the project in development mode, run yarn dev.

Configuration

• To connect the app to your plentymarkets system, open packages/theme/middleware.config.js and edit the url.
• To update your theme, edit the following files:
  • packages/theme/assets/scss/theme.scss for global variables
  • packages/theme/tailwind.config.js for utility classes
  • packages/theme/themeConfig.js for media files
• To update the available locales and currencies, open packages/theme/nuxt.config.js and edit i18n. Note that when editing internationalisation, you also have to configure your plentymarkets system accordingly. When adding languages, you also have to add new translations in packages/theme/lang.
• To update cookie groups and decide when to load additional scripts, edit packages/theme/cookieConfig.js.

Project overview

This project extends Vue Storefront. This means it relies on Nuxt 2, VueJS 2 and TypeScript.

📓 Vue components use the composition API.

Package structure

Package	Responsibilities
api-client	Queries data from external systems, for example to exchange data with the connected plentymarkets system.
composables	Handles the app state and all major app logic. By default, most composables extend core storefront functionality.
theme	Contains the presentation of the app.

For further information on each package, refer to that package's README.

Workflow

This section provides an overview of how to use the packages when adding new functionality. For example, imagine you want to display information from https://petstore.swagger.io/v2/pet/findByStatus?status=available.

1. Create a new API in packages/api-client.
2. Create a new inteface for the API.
3. Build the api-client package with yarn build.
4. Create a new composable in packages/composables.
5. In the composable, create a method that uses the API to fetch information.
6. In the composable, create a property that stores the fetched information.
7. Import the property in a Vue component in packages/theme.

How to start if you want to contribute?

Want to contribute? Ping us on the plentymarkets channel on our Discord!

Also, before getting started, check out to the contribution guide.

Resources

Vue Storefront:

• Vue Storefront Documentation
• Vue Storefront Boilerplate
• Storefront UI Library

General:

• Nuxt Documentation
• Introduction to Vue | Composition API FAQ
• HTTP Toolkit

Support

If you have any questions about this integration we will be happy to answer them on plentymarkets channel on our Discord.

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind welcome!