Then, we need to import the component that renders CMS Blocks CmsBlockGroup in the loaded component (productFullDetail).
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.
After that, we need to insert the CMS Block component to render the block we need.
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.
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.
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.
Please note, the code changes shown below are applied on a scaffolded PWA Studio project.
// 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;
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.
First, load the component where we want to insert the CMS block – productFullDetail.
local-intercept.js is the default filename for the project’s intercept file. It is declared in the project’s package.json file:
Note: The CMS Block identifier contact-us-info used in the example above is present on a clean Magento instance with sample data installed.
{ ... "pwa-studio": { "targets": { "intercept": "./local-intercept.js" } }
}
We’ll start the project customization by adding the changes in the local-intercept.js file located in the project’s root folder.
So, to insert a CMS Block on a page in PWA Studio we need the following.
