Discover our new connector between Vue Storefront and Prismic !

Dn’D Agency is proud to announce its new Open Source connector release between the Progressive Web App Vue Storefront and the CMS Prismic.

After the development and release of PIMGento 2 API and then PIMGento API by our teams, Dn’D continues its progression and evolution process. Indeed, in order to meet the market needs, our teams have launched a new connector between Prismic and Vue Storefront, which will allow E-merchants to connect those two solutions and benefit from a powerful and innovative technology.

Efficient, flexible and easy to use, the Prismic and Vue Storefront technologies will be implemented on some future projects carried out by the Dn’D Agency, which reflects our willingness to provide a turnkey solution of the latest generation to meet tomorrow’s web standards.

Why this connector ?

What is Prismic ?

Prismic is a backend CMS content management system for websites and applications allowing to create, publish and manage content with a custom generator, all in SaaS. Fully scalable on front, Prismic provides an intuitive back office, which is more flexible than other CMS such as Drupal or WordPress.

What is Vue Storefront ?

Vue Storefront is a standalone PWA able to connect to Magento backends via the API. Created to address the many challenges facing E-commerce platforms, this Open Source solution offers a set of modern tools that allow companies to create high quality showcases, in order to present their offer at their best.

The connector link Prismic to Vue Storefront in order to display Prismic content directly on Vue Storefront.

Following the other connectors already developed within the Dn’D Agency such as PIMGento 2 API and PIMGento API, this new connector will be available free of charge in Open Source.
Attached to Open Source, this approach allows us to offer our expertise to the community on innovative technologies, in order to promote everyone’s progress and the evangelization of these solutions.

How does it work ?

Pre-requisites : You must have a Prismic instance accessible from your Vue Storefront instance and configure the Prismic APIs URL in the connector. No API key is required.

The connector is divided into two distinct modules, but inseparable in their operation :

• Vue Storefront API – Prismic Connector : module that installs on your instance Vue Storefront API
• Vue Storefront – Prismic Connector : module that installs on your instance Vue Storefront

 
The Vue Storefront API – Prismic Connector module is in charge of querying the Prismic APIs to retrieve tool’s CMS data, reformat its content and add it to the Vue Storefront API GraphQL schema, in order to forward it to the Vue Storefront instance.

Example of a GraphQL schema :

On the other hand, the Vue Storefront – Prismic Connector module will receive and interpret informations from the Vue Storefront API instance to allow their display on your Vue Storefront platform.

Both modules are essential in setting up the link between Prismic and your Vue Storefront instance.

In term of functionalities

Here are the connector native features at the moment :

Retrieving and displaying Prismic CMS blocks on Vue Storefront

• From calls made on your Vue Storefront instance, the connector takes care of retrieving the associated blocks on Prismic via Vue Storefront API
• Calls can be unitary (retrieving a single block) or multiple (retrieving a collection of blocks to display in succession)
• The connector manages the blocks display in a multilingual way

Retrieving, displaying and accessing Prismic CMS pages on Vue Storefront

• From calls made on your Vue Storefront instance, the connector takes care of retrieving the associated pages on Prismic via Vue Storefront API
• The connector also allows the « routing » generation of these pages (URL) from the slug configured on Prismic and their access from Vue Storefront according to the different languages available

Link customization with Prismic

The great interest of the Prismic solution lies in its ability to customize different CMS entities in an advanced way. Each customer will have a specific use of the tool, making the generic set up connection with this system complex.

Nevertheless, beyond the generic management of the pages and CMS blocks present in the connector, it seemed essential for the Dn’D Agency to give the connector users the possibility to add specific links to the different entities configured on their Prismic instance.

By performing specific configurations and development, it’s possible to extend the connector’s functionalities and to adapt it to your needs, according to your Prismic tool utilization.

Interested by the connector ?

► Download the VSF API – Prismic connector
► Download the VSF – Prismic connector

Want to learn more ? The connector documentation explains the different development possibilities about this subject !
Find out more information on the official Vue Storefront forum.