This repository provides a starting point for merchants and developers wishing to integrate features from our existing Magento modules into a Venia storefront project.
Our extensions are only compatible with Venia; however, we hope they offer useful examples to developers integrating into other kinds of PWA frameworks.
So far, we’ve demonstrated how to integrate Chat, Tracking and Email Capture (see Our extensions below). Future releases will deliver additional packages.
As a minimum, you will need:
- a functioning Venia storefront, installed as per Magento’s instructions
- a Magento instance with the dotdigital integration enabled
- to install one or more of our Magento GraphQl modules (see below)
Our extensions are published separately to NPM. If you wish to use our code as is, you can add these extensions using yarn, for example:
yarn add @dotdigital/pwa-studio-tracking
In our extensions, we’ve used PWA Studio’s Targets and Targetables to demonstrate how to extend your storefront using our code. We’ve made certain decisions about how to target and override the Venia component tree. If these don’t suit your project, you can copy our code and use pieces of it as you need.
We have two GraphQl modules that support our extensions:
- dotmailer/dotmailer-magento2-extension-graph-ql (required for tracking and email-capture)
- dotmailer/dotmailer-magento2-extension-chat-graph-ql (required for chat)
@dotdigital/pwa-studio-chat adds:
- a component to deliver the chat widget
- a sign-in wrapper to update the chat profile after a customer signs in to their account
The widget will only display if Chat is enabled in Magento.
@dotdigital/pwa-studio-email-capture adds:
- a
NewsletterSignupcomponent. This subscribes email addresses exactly as per regular Magento; our module in Magento picks up the submission and handles the data from there. If a guest cart exists, we’ll attempt to update the quote table with the email address at submit. - a
handleBlurprop for theGuestFormcomponent. This adds an onBlur handler to capture an email address at guest checkout.
Easy Email Capture in both contexts respects the settings in Stores > Configuration > dotdigital > Configuration > Abandoned Carts.
Our @dotdigital/pwa-studio-tracking extension will add the following types of tracking:
- Page Tracking
- ROI Tracking
- Web Behavior Tracking
Tracking scripts will only be added if the required configuration settings are enabled in Magento (see Stores > Configuration > dotdigital > Configuration > Tracking).
User identification is currently implemented in the @dotdigital/pwa-studio-email-capture extension.
@dotdigital/pwa-studio-page-builder adds support for the Dotdigital Form content type in Page Builder. Use this extension to have your pages and forms display via Page Builder on your PWA storefront.
Known issues and limitations:
- Note that our support for Page Builder in Magento is currently limited to Adobe Commerce.
- Adding both embedded- and popover-style forms to a single page is currently not supported.
We have included upward.yml files in the Chat and Page Builder extensions. We found we needed to customise some content security policy rules to ensure everything displayed correctly in a production environment. They are intended as a guide only; merchants should review these, referring back to the @magento/upward-security-headers upward.yml, before deployment.
We welcome contributions to this toolkit. You may wish to:
- Report a bug: create a GitHub issue including description, repro steps, Magento and extension version numbers
- Fix a bug: please clone and use our develop branch to submit your pull request
- Request a feature on our roadmap