Posts

Create your first SXA Custom Components in Sitecore XM Cloud Using Next.Js

Image
XM Cloud comes preloaded with basic components for text, images, page content, and more. In my previous blogs, I covered how to create and manage components in XM Cloud using the Component Builder. In this post, I’ll provide a step-by-step guide to building custom components in Next.js within the XM Cloud environment. Why Custom Components Matter Developing custom components is a standard approach to creating unique elements that enhance your pages' design, functionality, and user experience. Step 1: Creating a New Headless Module To create a custom component in Sitecore XM Cloud, you first need to set up a Headless Module. Here's how: Navigate to Settings -> Project -> [Site Name] in XM Cloud. Right-click your project, select Insert , and then click Headless Module . In the popup window, choose a name for the module (e.g., Custom Component ) and assign it to a folder. For this tutorial, we created a "Tutorial Site" folder under Feature to store our custom mod

What’s New in Sitecore XM Cloud

Image
  In the September 2024 release for XM Cloud, Sitecore introduced a range of exciting features designed to simplify website management, making it easier for teams to collaborate within a single, centralized application. This update includes enhanced tools for managing site collections, creating new websites, setting site configurations, handling languages, editing hosts, and other features tailored for large-scale, multi-site environments. Let’s take a closer look at each feature. Site Collections - Simplified Creation and Management One of the key updates in the September release is the enhanced ability to create and manage Site Collections. Site collections provide a structured way to organize sites, allowing content and templates to be shared seamlessly across sites within a collection. With XM Cloud Sites, you can now create new site collections by providing a Display Name and a System or Item Name, ensuring stable, technical references. Site Collections help group sites in a way t

Exploring XM Cloud Component Builder: Show Dynamic Content

Image
In my previous blogs on XM Cloud , I covered how to create and display static data using the component builder, as well as how to style and build different versions of a component. In this post, I'll focus on creating a dynamic data source for components. Dynamic content enables components to be flexible and reusable across different contexts. Content such as text, images, videos, and links can be populated from various sources, like CMS content, APIs, or a GraphQL URL. Components are composed of elements such as buttons, cards, or other components, and each element can have a data source assigned to it. There are two primary options for displaying content within a component: Static - You can define static content for an attribute, such as entering alt text for an image or uploading an image directly. Mapped - You can map the attribute to dynamic content (text, image, or link) from a data source previously added to your XM Cloud environment. This dynamic content can be used mul

Exploring XM Cloud Component Builder: Create Versions

Image
  In my previous  blog , I discussed  how to style a component, modify elements, and customize themes. In this post, I'll focus on creating different versions of a component. In XM Cloud Components, a component can have multiple visual representations, known as component versions. These versions allow us to personalize components for specific audiences in Pages. Additionally, versions and breakpoints can be used to create responsive bundles, enabling components to adjust their appearance based on screen width. Adding a Version to a Component To add a new version to a component: In the Components Builder, scroll to the bottom of the page and click Add version . If this version is intended for responsive design, specify the breakpoints at which it should be displayed. Duplicating a Component Version Once you've styled and configured a component, you can duplicate it to easily create versions with different layouts without starting from scratch. To duplicate a component version: I

Exploring XM Cloud Component Builder: Add Styling To Your Component Part 3

Image
  In my previous  blog , I discussed on  how  to apply rules to the elements and how to implement theme . In the current blog, I'll discuss on Style a component, an elements and customize the theme . In XM Cloud Components , themes are managed in the Styles builder, allowing you to apply them to components with a single click. In a previous blog, I explained that themes consist of pre-built elements and style rules, designed to simplify the styling process by applying multiple styles at once. How to Style a Component Using a Theme: In the Components library, select the component you want to style. In the Components builder, locate the version you want to style and click Current theme in the top-right corner. In the right-hand panel, under the Themes tab, select the theme you wish to apply. The component will now be styled according to the chosen theme. Customizing a Theme You can tailor a theme by selecting alternative styles for certain categories of elements. This is possible o