We are proud to announce our Prestashop integration with Vue Storefront. The integration was created by our community partner Binshops, and it's entirely open source.

This article will give you a small overview of the PrestaShop integration with Vue Storefront, and we will also take a quick look at the prerequisites and available features.

Over the years, PrestaShop has become a well-known, reliable, and popular eCommerce solution.

Now PrestaShop integration with Vue Storefront allows shop owners to leverage the power of PrestaShop together with Vue Storefront, creating a seamless headless experience for their users.

The idea is simple: eCommerce core from PrestaShop and storefront using Vue Storefront. This way, we get the best of both worlds.

The PrestaShop integration is open-source and is available on GitHub, and the documentation can be found at https://docs.vuestorefront.io/prestashop/

As you know, PrestaShop comes with the Webservices feature out of the box. But Webservices API provides access to database tables and models that is good for integrating applications like accounting applications.

We at Binshops created a REST API module that gives us the ability to get APIs for business logic, for example, API for getting featured products, categories and searching.

The module uses PrestaShop front controllers, so there is no significant difference between REST API controllers and the standard controllers. In REST API, they just return JSON instead of HTML, bringing the power of PrestaShop core to the API.

So, the module can be used to develop storefront applications, and here we are using it to develop our Vue Storefront integration.

Also, just like the PrestaShop classic theme, this PWA depends on some native modules. Here is the list of modules:

• Menu Module: to load categories for the menu
• Product Comments Module: to list and create comments
• Faceted Search Module: for filtering and product search
• Featured products

Other parts of the PWA are independent of native and third-party modules until now, like checkout steps, loading category products, and product detail. But in the future, we may add some other dependencies like the wishlist module.

Join us in this community project, and help develop it even further!

Join the Vue Storefront Discord channel and go to the #prestashop channel for any questions related to the integration.

What’s included in the initial release

The PrestaShop integration is an ongoing project, and the current version (1.0.0) supports fundamental features in PrestaShop. Let's check what’s included in the initial release.

• Authentication
  • Login/register/logout
• Cart management
  • Update cart - Add to cart - remove from the cart
  • Remove a specific product
• User Profile
  • Account info/ edit
  • Password change
  • Order history
  • Order details
• Catalog
  • Product detail
    • Product combinations
    • Product features
    • List comments (Product comments module)
    • Add a comment (Product comments module)
  • Category products
  • Product search (Faceted search module)
  • Product filters / Faceted search (Faceted search module)
• Checkout
  • Log in / Create an account
  • Address
    • Create address
    • Remove address
  • Get carriers and select one
  • Payment options: pay by check - bank wire
• Home
  • Menu: categories (Menu module)
  • Featured products (Featured products module)

How to use the integration

Before starting, make sure you have installed Node 14 or higher. Now let’s set up the environment:

1. First, we need to expose our PrestaShop REST endpoints. Download and install PrestaShop REST API and install it just like any other PrestaShop module. No additional configuration is required.
2. Clone the PrestaShop Integration template repository:git clone https://github.com/vuestorefront-community/template-prestashop
3. Run yarn install to install dependencies
4. Change the API url to your shop in this file: packages/theme/middleware.config.js
5. Run yarn build to build the project
6. Run yarn dev to start the project

Quick Start Video for Vue Storefront & PrestaShop integration