in ,

PrestaShop Integration with Vue Storefront is ready!

PrestaShop Integration with Vue Storefront is ready!_628e7da1c936c.png

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.

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
  • 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)

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

What do you think?

Silver 1

Written by yulica

Leave a Reply

Your email address will not be published.

      Learning Go – day 2_628e7dc07675a.png

      Learning Go – day 2

      Recommend me webdev softwares and packages I need to try_628e7d7db0428.gif

      Recommend me webdev softwares and packages I need to try