PWA Studio: Insert CMS Block on the Product Page

Connecting online with customers is a journey, not a destination. Consumer demands continually evolve as trends, behaviors and technologies change. Balancing a buyer’s experience with the performance — speed to buy — is always a delicate balance to strike, weighing the scaling needs of a web storefront while maintaining its site reliability and security. That was until progressive web apps (PWA) emerged as a popular eCommerce solution.

A PWA has proven to greatly assist merchants in connecting with customers and providing a high-quality mobile experience without sacrificing browsing performance. At Atwix, an Adobe silver solution partner, we have well-worn experience in designing, building, implementing and supporting clients who now leverage Adobe Commerce PWA Studio (formerly known as Magento PWA Studio). We have decided to share some of what we learned. Please read, comment and share your thoughts.

This entry is focused on the CMS Block. TThere are many reasons and use cases for inserting a CMS Block on pages: either to show a customer notice or to show the store’s working hours. This article shows how to add a CMS Block on the Product Page using PWA Studio extensibility framework.

Please note, the code changes shown below are applied on a scaffolded PWA Studio project.

We’ll start the project customization by adding the changes in the local-intercept.js file located in the project’s root folder.

local-intercept.js is the default filename for the project’s intercept file. It is declared in the project’s package.json file:

{
  ...
  "pwa-studio": {
    "targets": {
      "intercept": "./local-intercept.js"
    }
  }
}

ℹ️ The local-intercept.js is the project’s intercept file where the developer can directly interact with the Targets object to apply customizations to the project’s dependencies – which are, but not limited to @magento/venia-ui, @magento/peregrine, and other packages present on the project that exposes their targets to interceptors (should they be from other packages or for the project).

So, to insert a CMS Block on a page in PWA Studio we need the following.

First, load the component where we want to insert the CMS block – productFullDetail.

Then, we need to import the component that renders CMS Blocks CmsBlockGroup in the loaded component (productFullDetail).

After that, we need to insert the CMS Block component to render the block we need.

// file: local-intercept.js

function localIntercept(targets) {  
    const {Targetables} = require('@magento/pwa-buildpack');  
    const targetables = Targetables.using(targets);

    // 1. load the 'ProductFullDetail' component to be adjusted
    const ProductFullDetailComponent = targetables.reactComponent(  
        '@magento/venia-ui/lib/components/ProductFullDetail/productFullDetail.js'  
    );
    // 2. import the component that helps rendering CMS Blocks
    const CmsBlockGroup = ProductFullDetailComponent.addImport(  
        "CmsBlockGroup from '@magento/venia-ui/lib/components/CmsBlock'"  
    );

    // 3. render the CMS Block right after the Product's <Form /> component.
    ProductFullDetailComponent.insertAfterJSX(  
        '<Form/>',
        `<${CmsBlockGroup} identifiers={['contact-us-info']} />`
    );
}

module.exports = localIntercept;

In a real-life project, consider another approach for applying the above changes, as the file might become larger and larger with every customization. This could make the file more difficult to maintain. One idea is to store the changes in separate files, depending on the component or area that needs adjustment.

Note: The CMS Block identifier contact-us-info used in the example above is present on a clean Magento instance with sample data installed.

Read also: Magento PWA Plugins

With the above changes in place, the CMS Block must be shown at any Product Page. Run yarn watch to see the changes applied and the contents of the CMS Block shown on the page.

Thanks for reading! Please share your feedback and comments. Let us know about your experiences. And be sure to share our blog with others in the community.