Vue Storefront 3 Integration With plentysystems

Welcome to the plentysystems integration for Vue Storefront 3. For a technical overview of the repository structure, refer to the Guide. The rest of the README details how to configure your plentysystems system and get started with the project.

plentysystems system setup

To run this project, you need a plentysystems system. Get a free 30-day trial on our website or choose one of the available editions.

Plugins

💡 New systems ship with the required plugins pre-installed. If you use a new system, skip to the next step.

For plentyShop PWA to run, you have to install plugins that provide additional REST routes and providers. Carry out the following steps:

1. Log into your plentysystems system.
2. Install the following plugins in the latest version:
   • IO
   • plentyShop LTS
   • PayPal
   • Cash in advance
   • Pay upon pickup
   • DHL Shipping (Versenden)
   • Customer feedback
3. Set the priorities of the plugins, so that IO has the highest priority and plentyShop LTS the second highest. The priorities of all other plugins remains 0.

System configuration

1. Log into your plentysystems system.
2. Go to Setup » Guided Tours and complete Setting up plentyShop.
3. Optional: Go to Setup » Orders » Payment » PayPal and set up your PayPal account.

Local dev setup

This section describes how to run the project locally.

Prerequisites

• Node.js 20+
• Yarn 3
• Personal Access Token with the scope read:packages

Download Node.js from the official website or use nvm to switch to a compatible version. For installation instructions for Yarn, refer to the Yarn documentation.

Repository fork

We recommend working with a fork of this repository. A fork allows you to easily incorporate updates from this boilerplate into your own codebase.

1. Create a fork.
2. Clone the forked repository.

Configuration

Follow the links below for configuration instructions.

• Middleware (required)
• I18N (required)
• Integrations (required)
  • Note: Currently, the app only supports PayPal as additional payment provider.
• PWA (optional)
• Theme (optional)
• Cookies (optional)

Authentication

This project queries data from plentysystems by using other NPM packages as middleware. These packages are published on the GitHub registry. To download packages from GitHub's registry, you have to authenticate. To enable authentication, carry out the following steps:

1. In the root directory, create a new file called .yarnrc.yml.
2. Copy the contents of .yarnrc.yml.example to .yarnrc.yml.
3. In .yarnrc.yml, replace <TOKEN> with the Personal Access Token you created earlier.

Git doesn't track .yarnrc.yml, so you don't have to worry about exposing your token.

Starting the app

1. Open the repository in your command line interface.
2. Run yarn to install all dependencies.
3. Run yarn dev to start the development server. The app will be served with hot reload at localhost:3000.

Deployment

This section describes how to deploy your app on your live domain.

plentysystems system

1. Log into your plentysystems system.
2. Go to CMS » Deployment.
3. Click on :plus: to add a new application.
4. Fill in the required information.
5. Create the application.

You need the generated Upload Endpoint and Access key in the next part.

GitHub

1. In your forked repository, create 2 encrypted secrets:

   • URL_ENDPOINT: The Upload Endpoint from the previous part.
   • URL_ENDPOINT_TOKEN: The Access key from the previous part.

2. In your forked repository, enable the GitHub Action Add zip file to S3 bucket from upload.yml. Update the trigger conditions to determine when to upload your repository to your plentysystems system.

Resources

Features

• Turborepo remote cache build system, with blazingly fast execution of commands (build, lint, test etc.) on your local machine.
• TypeScript support.
• Nuxt.js 3 & Server Side Rendering for great UX, loading and SEO scores.
• Beautiful components built with TailwindCSS and Storefront UI - a lightweight, accessible, and customizable component library built for e-commerce.
• Unit tests with Vitest and Vue Test Utils.
• ESLint for code linting.
• Prettier code formatter.
• Husky for working with Git hooks efficiently.
• Conventional Commits standard for commit messages.
• Staged code linting with lint-staged.
• Progressive Web App features with Vite PWA for Nuxt.
• i18n localisation powered by Nuxt-i18n.
• Vue Storefront SDK ready - integrate headless E-commerce platform with your project easily.
• Vue Storefront Middleware.
• Maximized lighthouse score.

Vue Storefront

• Introduction to learn what is Vue Storefront.
• Vue Storefront Documentation
• Vue Storefront UI Documentation
• Community Chat

License

Distributed under the MIT License. See LICENSE for more information.

Contributing

Please see our contributing.md for more information.

Support

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