How to Implement Page Designers Component

Hello @Rayaan Khan M Jahagirdar, to Implement Page Designers Component please follow these steps:

Creating a Page Designer Component:

Step 1: Log in to Business Manager

• Open your web browser and navigate to your Salesforce Commerce Cloud Business Manager.

Step 2: Navigate to Page Designer

• In Business Manager, go to "Merchant Tools" > "Online Marketing" > "Page Designer."

Step 3: Create a New Component Definition

• In Page Designer, select the "Components" tab.
• Click on "New Component Definition."
• Provide a unique ID and name for your component.
• Define properties for your component (e.g., image URLs, text content).
• Save the component definition.

Step 4: Define Component Template (ISML)

• In the component definition, find the "Template" field.
• Create a new ISML template that represents the HTML structure of your component.
• Use ISML tags to include dynamic content based on the properties defined in the component.
• Save the template.

Step 5: Include the Component in homePage.isml

• Open your homePage.isml file in a code editor.

<!-- Include your Page Designer component -->
<isinclude template="path/to/your/component.isml"/>

Step 6: Bind Component Data

• If your component requires dynamic data, fetch it in your homePage.isml or call a controller/service.

<isset name="bannerData" value="${YourController.getBannerData()}"/>
<isinclude template="path/to/your/component.isml" data="${bannerData}"/>

Step 7: Position the Component

• Determine the location on the page where you want your Main Banner or Carousel to appear.
• Place the <isinclude> tag or similar code in the appropriate location within homePage.isml.

Step 8: Test Your Implementation

• Test your changes on a development or staging environment to ensure the component renders correctly and behaves as expected.
• Debug any issues that may arise during testing.

Step 9: Add Styles and Scripts (if needed)

• If your component relies on specific styles or scripts, make sure they are included in your homePage.isml or are globally available.

Step 10: Final Review and Deployment

• Review your code for any potential issues.
• If everything is working as expected, deploy your changes to the production environment.

These steps provide a general guide for creating and implementing a Page Designer component in the Salesforce Commerce Cloud environment. Adjustments may be needed based on your specific project requirements and the platform you are working with.

For more details, please check out these links:

1: Video Link: https://www.youtube.com/watch?v=vEdFPZ6Aprc; this will give you a general idea about page designers.

2. Check the below documents that will help you get a better understanding:

     a- https://developer.salesforce.com/docs/commerce/b2c-commerce/guide/b2c-dev-for-page-designer.html

     b- https://trailhead.salesforce.com/content/learn/modules/b2c-page-designer-developers?_ga=2.261004420.827028000.1701173511-1835071271.1677770387

Best Regards.