- Summary - Introduction - Prerequisites - Before You Begin - About the Structure - Hands-on Code (Step-by-Step) - Repository - References ## Introduction In this tutorial, you will learn how to create and integrate a custom content type countdown into PWA Studio. By the end of this guide, you will have a fully functional countdown that is editable from Magento's admin panel and rendered in your PWA storefront. ## Prerequisites Before you begin, ensure you have the following: - A working installation of **Magento** and **PWA Studio**. - **Basic knowledge** of React, JavaScript, and Magento PageBuilder. - **Node.js** and **npm** installed in your environment. - PageBuilder Countdown Module ## Before You Begin Before you start coding this content type, ensure the Content Type is installed in your Magento and PWA Studio setup using the [Scaffolding Tool](https://developer.adobe.com/commerce/pwa-studio/tutorials/setup-storefront/). This tool will help set up the basic storefront environment. The content type that we will integrate with PWA Studio is a countdown timer, which you can get from the [repository of this tutorial](https://github.com/GabrielFNLima/magento2-pwa-countdown). ## About the Structure Here is the final structure of the content type: ``` pwa-studio ├── src │ ├── components │ │ └── Countdown │ │ ├── ContentType │ │ │ └── Countdown │ │ │ ├── configAggregator.js │ │ │ ├── countdown.js │ │ │ ├── countdown.module.css │ │ │ └── index.js │ │ ├── countdown.js │ │ ├── detect.js │ │ └── index.js │ └── talons │ └── Countdown │ └── useCountdown.js ├── local-intercept.js │ ``` ## Hands-on Code (Step-by-Step) Now let's start creating the custom content type. ### Step 1: Modify `local-intercept.js` Open the `local-intercept.js` file in your PWA Studio root and update its content as follows: ```jsx function localIntercept(targets) { targets.of('@magento/pagebuilder').customContentTypes.tap( contentTypes => contentTypes.add({ contentType: 'Countdown', importPath: require.resolve("./src/components/Countdown/index.js") }) ); } moduleexports = localIntercept; ``` This code instructs the `@magento/pagebuilder` to add the custom Countdown content type. ### Step 2: Create `configAggregator.js` Create the file `src/components/Countdown/ContentType/Countdown/configAggregator.js` with the following content: ```jsx import { getAdvanced } from "@magento/pagebuilder/lib/utils"; export default (node, props) => { return { targetDate: node.childNodes[0].childNodes[0].attributes[1].value, ...getAdvanced(node), }; }; ``` ### 1. **`targetDate` Extraction:** - We access the date through: `node.childNodes[0].childNodes[0].attributes[1].value`. This navigates through the `node` to reach the attribute that holds the `targetDate`. ### 2. **`getAdvanced(node)` Utility Function:** - `getAdvanced(node)` is a utility function that retrieves additional styling properties from the `node` like padding, margins, border, text alignment, and CSS classes. - These settings allow the countdown timer to inherit any advanced layout configurations made by the user in the Magento Page Builder's editor. ### Step 3: Create Countdown Component Now we will create the countdown component. ### `countdown.js` Create the file `src/components/Countdown/ContentType/Countdown/countdown.js` and add the following code: ```jsx import React from 'react'; import { mergeClasses } from '@magento/venia-ui/lib/classify'; import { arrayOf, bool, shape, string } from 'prop-types'; import defaultClasses from './countdown.module.css'; import { FormattedMessage } from 'react-intl'; import { useCountdown } from '../../../../talons/Countdown/useCountdown'; const Countdown = props => { const { targetDate, textAlign, border, borderColor, borderWidth, borderRadius, isHidden, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, cssClasses } = props; const classes = mergeClasses(defaultClasses, props.classes); const { days, hours, minutes, seconds } = useCountdown({ targetDate }); const formStyles = { textAlign, border, borderColor, borderWidth, borderRadius, isHidden, marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft, }; return (

{days}

{hours}

{minutes}

{seconds}

); }; Countdown.propTypes = { textAlign: string, border: string, borderColor: string, borderWidth: string, borderRadius: string, isHidden: bool, marginTop: string, marginRight: string, marginBottom: string, marginLeft: string, paddingTop: string, paddingRight: string, paddingBottom: string, paddingLeft: string, cssClasses: arrayOf(string), classes: shape({ wrapper: string, field: string, label: string }) }; Countdown.defaultProps = {}; export default Countdown; ``` Let's break down some key parts of the `Countdown` component code: 1. **Props Destructuring**: In the component's `props`, we are receiving several variables, most notably the `targetDate` from the configAggregator.js file. This sc`affolding` represents the end time for the countdown. Along with `targetDate`, we also receive various styling-related variables such as `textAlign`, `border`, and `padding`, which are dynamically passed from Page Builder. Lastly, the `cssClasses` variable comes directly from Page Builder and contains any additional CSS classes that need to be applied to the component. 2. **Calling the Talon**: After destructuring the props, we initialize the `useCountdown` talon. This custom hook (`useCountdown`) is passed the `targetDate` as a prop and, in return, provides the values needed to display the countdown—`days`, `hours`, `minutes`, and `seconds`. These values are automatically updated as time progresses, which ensures that the countdown remains accurate in real-time. 3. **Combining Style Properties**: The `formStyles` variable is an object that combines all the individual style-related variables (such as `border`, `textAlign`, `margin`, and `padding`) from the props. This aggregation makes it easier to apply these styles in one go, directly onto the container `

`, by using the `style` attribute: ```jsx

``` By passing the `formStyles` object here, we ensure that the countdown component reflects any custom styling options configured via the Page Builder, such as margins, padding, and borders. ### `countdown.module.css` Next, create the CSS file `src/components/Countdown/ContentType/Countdown/countdown.module.css`: ```css .wrapper { composes: flex from global; } .field { composes: grid from global; composes: items-center from global; composes: justify-items-center from global; composes: gap-1.5 from global; composes: font-light from global; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; } field div { font-size: 1.5rem; letter-spacing: normal; } .label { composes: text-base from global; margin-top: -5px; letter-spacing: normal; } ``` ### `index.js` Finally, create the `src/components/Countdown/ContentType/Countdown/index.js` file: ```jsx import React from 'react'; import configAggregator from './configAggregator'; export default { configAggregator, component: React.lazy(() => import('./countdown')) } ``` 1. **`configAggregator` Import**: The `configAggregator` is imported from the `configAggregator.js` file. This function is responsible for collecting the necessary data (such as `targetDate`, margins, borders, etc.) from the Page Builder content type and passing it as props to the component. It ensures that all configurations from the admin panel are correctly applied to the component. 2. **Dynamic Component loading**: The `React.lazy()` function is used to lazily load the `countdown` component. 3. **Exporting the Configuration Object**: The file exports a default object containing two key properties: - `configAggregator`: This defines how the content type's configuration data is retrieved and passed into the component. - `component`: This points to the `countdown` component, which is lazy loaded via `React.lazy()`. This file essentially sets up the necessary configurations and ensures that the countdown component is properly integrated with the Page Builder in a performance-efficient manner. ### 1. **`src/components/Countdown/countdown.js`** ```jsx import React from 'react'; import { setContentTypeConfig } from '@magento/pagebuilder/lib/config'; import ContentTypeConfig from './ContentType/Countdown'; setContentTypeConfig('example_countdown', ContentTypeConfig); const Countdown = (props) => { return null; }; export default Countdown; ``` - **`setContentTypeConfig`**: This function registers the custom content type (`example_countdown`) with Page Builder. It accepts two arguments: - The first argument is the content type name (`example_countdown`), which must match the name defined in the XML file located at `app/code/Example/PageBuilderCountdown/view/adminhtml/pagebuilder/content_type/example_countdown.xml`. ![This code snippet defines show the name of content type: "example_countdown."](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ygv44gnsdmthvux68sv7.png) - The second argument, `ContentTypeConfig`, is imported from the `Countdown` folder and includes the component configuration required by Page Builder. - The component itself (`Countdown`) does not render any UI, as it only serves to register the content type. Therefore, it returns `null`. ### 2. **`src/components/Countdown/detect.js`** This file defines a regular expression (RegEx) function to detect if the custom content type is present in the content. ```jsx export default function detectMyCustomType(content) { return /data-content-type=\"example_countdown/.test(content); } ``` - **`detectMyCustomType`**: This function checks if the Page Builder content contains the custom content type (`example_countdown`) by searching for the `data-content-type="example_countdown"` attribute in the rendered HTML. If found, it returns `true`, indicating that the custom content type is present. - The same content type name (`example_countdown`) is used here, matching the one defined in the XML file and the `setContentTypeConfig` function. ### 3. **`src/components/Countdown/index.js`** In this file, we export the components and functionality created above. ```jsx export { default } from './countdown'; export { default as Component } from './countdown'; export { default as canRender } from './detect'; ``` - **Default Export (C`ountdown`)**: This file exports the `countdown` component as the default export. - **Named Export (`Component`)**: The `countdown` component is also exported as a c`omponent`, making it easier to refer to the component when necessary. - **Named Export (`canRender`)**: The `detect` function is exported as `canRender`, which will be used by Page Builder to determine whether the custom content type should be rendered based on the presence of the `data-content-type="example_countdown"` attribute. These files collectively ensure that the custom content type (`example_countdown`) is properly registered, detected, and rendered within the Page Builder environment. ### Step 4: Set up the Talon In this section, we will create a talon to handle the logic behind the countdown timer. If you're unfamiliar with talons, they are hooks used in the Magento PWA Studio to separate logic from components, making code more modular and reusable. For more details, check out [Talons (adobe.com)](https://developer.adobe.com/commerce/pwa-studio/guides/general-concepts/talons/). Now create the talon file `src/talons/Countdown/useCountdown.js`: ```jsx import { useEffect, useState, useCallback } from 'react'; export const useCountdown = ({ targetDate }) => { const validateDate = (date) => { const target = new Date(date); return isNaN(target.getTime()) ? null : target; }; const target = validateDate(targetDate); if (!target) { console.error('Invalid targetDate provided'); return { days: '00', hours: '00', minutes: '00', seconds: '00' }; } const calculateTimeLeft = useCallback(() => { const difference = target - new Date(); if (difference <= 0) return { days: '00', hours: '00', minutes: '00', seconds: '00' }; const time = (unit, mod) => String(Math.floor((difference / unit) % mod)).padStart(2, '0'); return { days: time(1000 * 60 * 60 * 24, Infinity), hours: time(1000 * 60 * 60, 24), minutes: time(1000 * 60, 60), seconds: time(1000, 60), }; }, [target]); const [timeLeft, setTimeLeft] = useState(calculateTimeLeft); useEffect(() => { if (Object.values(timeLeft).every((v) => v === '00')) return; const timer = setInterval(() => setTimeLeft(calculateTimeLeft), 1000); return () => clearInterval(timer); }, [timeLeft, calculateTimeLeft]); return timeLeft; }; ``` - **`validateDate`**: This function ensures the provided `targetDate` is valid. If the date is invalid, it returns `null`, and the countdown will display "00" for all time units. - **`calculateTimeLeft`**: This function calculates the difference between the current time and the `targetDate`. It returns the remaining time formatted as days, hours, minutes, and seconds. - **`useState`**: We use React's `useState` to store the current countdown time, updating it every second. - **`useEffect`**: This hook sets up a timer that updates the countdown every second. If the countdown reaches "00", it stops. ## Repository You can find the complete repository, which includes both the final PWA Studio code and the Magento module used in this tutorial, at the following link: - [https://github.com/GabrielFNLima/magento2-pwa-countdown](https://github.com/GabrielFNLima/magento2-pwa-countdown) ## References - [PWA Studio Docs](https://developer.adobe.com/commerce/pwa-studio/) - [Creating custom components (adobe.com)](https://developer.adobe.com/commerce/pwa-studio/integrations/pagebuilder/custom-components/) - [PageBuilder Countdown Example](https://github.com/commerce-docs/pagebuilder-examples) - [feat 2130 - ability to add PageBuilder Content Type Configs dynamically by vchirkov · Pull Request #2131 · magento/pwa-studio (github.com)](https://github.com/magento/pwa-studio/pull/2131)

devgfnl

How to Create a Custom Countdown Content Type in PWA Studio

Join Our Newsletter. No Spam, Only the good stuff.