Sign Up
  1. Znode
  2. Solution home
  3. Content Management (CMS) - V10
  4. Znode Page Builder

Page Builder - Multi-locale

TABLE OF CONTENTS

Introduction

Navigation: CMS > Store Experience > Manage Experience

Znode now provides multi-locale support within the Page Builder, enabling users to create and manage content seamlessly across regions that operate in different languages. By default, the locale is selected for the default locale of the store.


Content Pages

  • Existing Pages:
    • For the desired page, either:
      • Click the edit icon, then go to the Page Builder tab from the edit content page screen, or
      • Click the edit icon, then click the Page Builder button from the edit content page screen, or
      • Click the Page Builder icon directly from the Action column.
    • New Pages:
      • Click the Add New button.
      • Enter all required information and save the page.
      • When creating a page, the default global locale appears pre-selected and uneditable.
      • Once the page is created, the locale can be changed from the edit page screen. 
      • After saving, a Page Builder tab appears.
      • Click the tab to open the Page Builder screen for the newly created page.
  • On the CMS > Pages > Content Pages screen, a locale dropdown is available in the header. 
  • This dropdown lists all active locales from all stores and is, by default, set to the global default locale. 
  • When a different locale is selected and the administrator opens a page or navigates to the edit page screen from the list of pages, the page loads in the selected locale. 
  • Hence, the administrator can enter or update the page information in the selected locale.
  • The page structure stays consistent throughout the different locales. Only the content, including the images and videos (or any other type of files) in the components, can vary as per the locales. 
  • If a component is deleted for a locale, it is also deleted for all other locales of that page.
  • Additionally, the configuration applied to the attributes remains consistent across all locales.


Components

Layout Components:

Flex, Column, and Vertical Space: these components do not hold any content directly. They are used to define the structure of the page.


UI Components:

  • Text: 
    • For the “Text” attribute (text box), the content added for the selected locale in the Page Builder gets displayed on the Storefront when the Storefront is set to the same locale.
      • For example, if the “French” locale is selected in the Page Builder and some content is added in the “Text” attribute (text box) and the page is published, then on the Webfront, when the French locale is selected, the content added in the “Text” attribute (text box) for the French locale gets displayed.
  • Heading: 
    • For the “Text” attribute (text box), the content added for the selected locale in the Page Builder gets displayed on the Storefront when the Storefront is set to the same locale.
  • Button Group:
    • When the Button Group is dragged onto the canvas, the default button label “Learn More” is translated according to the locale selected in the Page Builder.
    • For the “Label” attribute, the button label added for the selected locale in the Page Builder gets displayed on the Storefront when the Storefront is set to the same locale.
  • Text Image Widget: 
    • When this component is initially dragged onto the canvas, it appears with its default structure. The content (Message) within the structure is then updated according to the selected locale.
    • For the “Heading”, “Description”, and “Label” (Button label) attributes, the content added for the selected locale in the Page Builder gets displayed on the Storefront when the Storefront is set to the same locale.
    • Different images and their alt text can be added for different locales.
  • Dynamic Widget:
    • Clicking on the setting icon from the tool tip or the “Open Dynamic Widget” button from the attribute opens a pop-up window to add the HTML, CSS, or JavaScript.
    • The code (HTML, CSS, or JavaScript) added for the selected locale in the Page Builder gets displayed/reflected on the Webfront when the Webfront is set to the same locale.
  • Rich Text Widget:
    • Clicking on the setting icon from the tool tip or the “Open Rich Text Widget” button from the attribute opens a pop-up window to add the formatted text.
    • The formatted text added for the selected locale in the Page Builder gets displayed on the Storefront when the Storefront is set to the same locale.

Znode Components:

  • Banner Slider:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure
      • Navigate to: CMS > Banner Sliders.
      • Add a new banner or edit an existing banner. On this screen, all the associated slides/banner images for the banner are listed.
      • Click the gear icon in the action column to open the Manage Banner page.
      • On the header of the page, there is a locale dropdown.
      • Select the desired locale and add the information/content according to the selected locale.
    • When a Banner Slider is dragged onto the canvas and configured using the gear icon, the slider content is displayed from the same locale as the one selected in the Page Builder.
    • Once the page is published, the same content appears on the Webfront when the Webfront is set to the same locale.
  • Important Point:
    • If a component does not have content configured for a specific locale and the Webfront is set to that locale, content from the default locale is displayed.
      • For example, if English is the default locale and French is another active locale, and a component does not have content configured in French but has content in English, then when the Webfront is set to French, the component displays the content from the default English locale.
    • If a component does not have content for the default locale but has content available for another active locale, and if the web front is set to the default locale, then no content appears for that component in the default locale on the web front, and those components will be hidden; only the button and newsletter components will be visible on the webfront and on the pagebuilder canvas for the default locale a message saying the component has no content will be displayed.
      • For example, if English is the default locale and French is another active locale, but English does not have content for a component while French does, then when the Webfront is set to English (the default locale), the components will be hidden; only the button and newsletter components will be visible on the Storefront.
  • Category Carousel:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to: PIM> Categories
      • Add a new category or edit an existing one.
      • If a new category is created, add all the details first for the default locale and save the changes. 
      • On the header of the page, there is a locale dropdown.
      • Select the desired locale and add the information/content according to the selected locale in the fields. 
      • Save the changes. 
    • When a Category Carousel is added to the canvas and categories are configured for it, the category content displayed on the canvas is from the same locale as the one selected in the page builder.
    • Once the page is published, the same content, including SEO details, appears on the Storefront when the Storefront is set to the same locale.
    • If a category does not have content for a specific locale, the content from the default locale gets displayed instead.
  • Offer Banners:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to: CMS > Banner Sliders.
      • Add a new banner or edit an existing banner. On this screen, all the associated slides/banner images for the banner are listed.
      • Click the gear icon in the action column to open the Manage Banner page.
      • On the header of the page, there is a locale dropdown.
      • Select the desired locale and add the information/content according to the selected locale.
    • When an Offer Banner is dragged onto the canvas and configured using the gear icon, the Offer Banner content is displayed from the same locale as the one selected in the Page Builder.
    • Once the page is published, the same content appears on the Storefront when the Storefront is set to the same locale.
  • Product Carousel:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to: PIM> Products
      • Add a new product or edit an existing one.
      • On the Edit Product or Add New Product page, a locale dropdown is available in the page header.
      • Select the desired locale and add the information/content according to the selected locale in the fields. 
      • Save the changes. 
    • When a Product Carousel is added to the canvas and Products are configured for it, the product content displayed on the canvas is from the same locale as the one selected in the page builder.
    • Once the page is published, the same content, including SEO details, appears on the Storefront when the Storefront is set to the same locale.
    • If a product does not have content for a specific locale, the content from the default locale gets displayed instead.
  • Brand Carousel:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to: PIM> Brands
      • Edit an existing Brand.
      • On the Edit Brand page, a locale dropdown is available.
      • Select the desired locale and add the information/content according to the selected locale in the fields. 
      • Save the changes. 
    • When a Brand Carousel is added to the canvas and Brands are configured for it, the Brand content displayed on the canvas is from the same locale as the one selected in the page builder.
    • Once the page is published, the same content, including SEO details, appears on the Storefront when the Storefront is set to the same locale.
    • If a brand does not have content for a specific locale, the content from the default locale gets displayed instead.
  • Ad Space:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure: 
      • Navigate to: CMS> Containers > Ad Space
      • Edit the ad space container
      • Create the variant and save it. 
      • Edit the Variant and change the locale. 
      • Add the content for the locale.
      • Add the content to the new locale.
      • Save the changes. 
    • When an Ad Space is dragged onto the canvas, the content is displayed from the same locale as the one selected in the Page Builder.
    • Once the page is published, the same content appears on the Storefront when the Storefront is set to the same locale.
    • If a variant of an ad space does not have content for a specific locale, the content from the default locale gets displayed instead. 
  • Home Page Promo:
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to: CMS> Containers > Homepage Promo
      • Edit the Homepage Promo container
      • Create the variant and save it. 
      • Edit the Variant and change the locale. 
      • Add the content for the locale.
      • Add the content to the new locale.
      • Save the changes. 
    • When a Homepage Promo is dragged onto the canvas, the content is displayed from the same locale as the one selected in the Page Builder.
    • Once the page is published, the same content appears on the Webfront when the Webfront is set to the same locale.
    • If a variant of an ad space does not have content for a specific locale, the content from the default locale gets displayed instead. 
  • Image Widget: 
    • The different images with alt text can be set for other locales. 
  • Video Widget: 
    • The different videos can be set for other locales. 
  • Newsletter Widget: 
    • When this component is dragged onto the canvas, the values for the Label, Placeholder, and Button text attributes change as per the selected locale of the page builder. 
    • Later, the admin can change these values and save them.
  • Link Panel Widget: 
    • There is an additional locale dropdown on the link panel pop-up. 
    • By selecting different locales from this dropdown, the admin can add different menu items for each locale. 
    • These menu items are then displayed on the pages according to the selected locale of the page.
  • Form Widget:
    • When this component is dragged onto the canvas, an initial message appears. This message is translated according to the locale selected in the page builder.
    • It is a Znode component that can be configured for multiple locales from the Znode settings.
    • Steps to configure:
      • Navigate to the Dev Center> User-defined Fields. 
      • Add new attributes or edit the existing ones. 
      • Make sure the attributes are associated with the “Form Builder” entity type. 
      • Add the attributes details. 
      • From the “Locales/Values” tab, add the locale for the attribute. 
      • Locales for the options or placeholders of an attribute can be added from here. 
      • Save the changes. 
      • (Optional) Create an attribute group, associate attributes with it, and confirm the group is also linked to the Form Builder entity type.
      • Now, navigate to the CMS> Manage Forms. 
      • Create a form by clicking on the “Add New” button and save it. 
      • After saving the form, a “Canvas” field appears on the edit form screen. 
      • From the right side of the screen, add the attributes or attribute group to the form and save it.
    • When a form widget is added to the canvas and configured, the content (attribute labels, placeholders, options) displayed on the form for each form attribute is from the same locale as the one selected in the Page Builder.
    • Once the page is published, the same localized content appears on the Webfront when it is set to that locale.
    • If a form attribute does not have content for a specific locale, the content from the default locale gets displayed instead. 
  • Others:
    • This widget contains a fixed structure of the commerce pages, mentioned below: 
      • Product
      • Category
      • Brand List
      • Brand Details
      • Store Locator
      • Blog List
      • Blog Details
      • Contact Us
      • Feedback
    • When a different locale is selected in the Page Builder, the content within the structure of each commerce page automatically switches to the same locale chosen in the Page Builder.
    • For some of the above pages, the content can be configured from the Znode. Like for: 
      • Product: This is the Product Detail Page (PDP), which displays product information. The product details can be configured in multiple locales. Similarly,
      • Category
      • Brand List
      • Brand Details
      • Blog List
      • Blog Details
    • And for the rest, the locale can not be configured from the Znode; hence, they are handled at the code level. Below is the list: 
      • Store Locator
      • Contact Us
      • Feedback

 CMS Versioning

  • When an administrator makes changes to a page in a specific locale and publishes it for preview, a version history record with the status “Draft” is created. If those changes are then published to production, the status of that record is updated from “Draft” to “Published (Live)”.
  • If the administrator makes changes and directly publishes them to production (by clicking the “Publish” button), a version history record is created with the status “Published (Live)”.
  • When the admin restores a version by selecting it from the version history, that version is restored on the canvas.
  • If the administrator makes changes in one locale, then switches to another locale and makes additional changes, and later saves those preview changes, only one version history record with the status “Draft” is created for both locales. Similarly, if the changes across multiple locales are published directly, only one version history record is created with the status “Published (Live)”.
  • When the admin restores that version, the changes for all the locales get restored.

CMS Versioning Workflow


  • Save for Preview (Single Locale)
    • Admin makes changes for a locale in the page.
    • Clicks Save for Preview.
    • A version history record is created with status “Draft”.
  • Publish to Production (After Preview)
    • If the Draft is later published,
    • The version history record status changes from “Draft” → “Published (Live)”.
  • Direct Publish (Single Locale)
    • Admin makes changes for a locale in the page.
    • Clicks Publish (without saving for preview).
    • A version history record is created directly with status “Published (Live)”.
  • Restore Version
    • When the admin restores a version by selecting it in version history,
    • That version is restored back on the canvas.
  • Multiple Locales – Save for Preview
    • Admin makes changes for a locale in the page.
    • Switches to another locale without saving the changes made to the first locale 
    • Makes changes to the second locale.
    • Saves for Preview.
    • Only one version history record with status “Draft” is created covering changes across all locales.
  • Publish to Production (After Preview)
    • If the Draft is later published,
    • The version history record status changes from “Draft” → “Published (Live)”.
  • Multiple Locales – Direct Publish
    • Admin makes changes across multiple locales.
    • Clicks Publish.
    • Only one version history record with status “Published (Live)” is created covering changes across all locales.
  • Restore with Multiple Locales
    • When restoring such a version,
    • Changes for all locales included in that version are restored.


Important Points

  • When a page is configured for different locales, it must be published for the content to be visible on the Webfront.
  • When a component is dragged onto the canvas, an initial message appears to guide its configuration. This message is also translated into the locale selected in the page builder.
  • The labels used for components and attributes remain in the English language and do not change according to the selected locale.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Znode Page Builder