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 shown itself to greatly help a merchant connect with and provide customers a high quality mobile experience without sacrifice to 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. There are many reasons and uses-cases to insert 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 can make the file harder to maintain. An idea is to store the changes in different files, depending on the desired component or area to be adjusted.

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

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 of your experiences. And be sure to share our blog with others in the community.

Case Studies

Meet our clients

From startups backed by Mark Cuban and Sir Richard Branson, to some of the biggest eCommerce operations in the world, Atwix helps our clients deliver unparalleled eСommerce experiences. We’re proud to work with the following companies: