PWA for Pimcore eCommerce Framework

Retailers and B2B companies are spending considerable budgets to attract clients to their Web sites. For many retailers, half of their web-traffic is from mobile. For some of them, mobile web is generating even more revenue than desktop.

But then something strange happens. Retailers pay again for these same clients to encourage them to install the mobile app. Then also pay for building and maintaining mobile apps.

Wouldn’t be just much more comfortable to install a mobile app directly from the browser while using mobile? Wouldn’t be much cheaper to have one mobile app to maintain and develop?

Progressive Web App Standard from Google offer this functionality and many more. As The Standard is now widely supported by all major browsers and devices, investment into Progressive Web Apps surely is worth to be considered for 2018.

Pimcore eCommerce Progressive Web Application

Pimcore is widely accepted and respected Content Management platform for managing 360deg. Digital Experience.

Retailers and B2B companies choose it for managing the products (PIM), websites (CMS module) and eCommerce (eCommerce Framework).

As we’ve recently published our Vue Storefront open source project — first Progressive Web App for eCommerce — I thought it would be great to make PWA experience available for Pimcore users and developers!

We spent the last couple of days implementing Pimcore — Vue Storefront integration, and it’s just published the project under the MIT license: https://github.com/DivanteLtd/pimcore2vuestorefront.

The time to market was so short only thanks to Pimcore is one of the most flexible and easy-to-connect platforms on the market. The bridge works exclusively with Pimcore’s API - any changes to the backend code wasn’t required.  I can just summarize our efforts with this: with other platforms, we spent on average three times more working hours on communication bridges.

Integration

The project has been developed using Node.js and Pimcore Web Services as a data source. No development knowledge is required to make it work with Vue Storefront. The project contains the interactive installer. To make it work in a very basic version you just need:

• Your Pimcore URL,

• API key,

• an ID of root category you would like to expose.

Customization

As Pimcore is a very extensible Framework, the data structures and format may vary. By default, we do support standard eCommerce Framework data structures which you can check in Pimcore Advanced eCommerce demo. For demonstration purposes we do support pretty essential elements of eCommerce Framework data structures:

• set of required attributes

• categories

• products: localized attributes, single photo (can be easily extended), variants, prices

You can also schedule a demo on http://vuestorefront.io

Next steps

We’ve observed quite often the scenario of B2B players stepping into eCommerce by publishing the products catalogs first (and only then, after testing the online channel builds in the checkout).

Having the Vue Storefront project ready to go an extra mile, with all eCommerce features supported, we decided to make the customized version for B2B product catalogs.

We’re supporting few catalog layouts, it’s going to work 100% offline and works — of course — ideally with Pimcore. It’s going to be another channel for the customers to present the offer.

If you like the idea, don’t hesitate to contact Divante.

Vue Storefront — key takeaways

Our goal was to create Mobile First eCommerce app which is connected to Magento, Pimcore, Prestashop or any other platform as a Frontend to allow you to use all PWA benefits.

• Black-Friday Ready — Storefront can run without alive web-server no such traffic peak can stop users from making orders.
• Subway, Airplane Seamless Browsing — the app can work without the internet connection and synchronize when internet appears.
• Google Mobile First Index Ready — Google will create and rank its search listings based on the mobile version of the content, even for listings that are shown to desktop users.
• Time to market — Out-of-the-Box Product, Based on accessible and easy to learn Vue.js, developer-friendly approach, excellent documentation.
• Modern Technology Stack Will interest your developers — Node, ES2016, Vue.js and Elastic.
• Open Source — under MIT license. Fast growing community. Today we have more than 60 developers in the community.

Original post published here.