Learning Sitecore - Tips and Tricks

This is a very common requirement where we need to achieve the multisite/multitenant capability while developing Next JS frontend application using Sitecore CMS in headless manner. Next.js application uses Next.js Middleware to serve the correct Sitecore site based on the incoming hostname.  Middleware Middleware allows you to run code before a request is completed. It allows you to add additional functionality or perform tasks such as modify response by redirecting, rewriting, modifying the headers. Multisite add-on By default, the Next.js Multisite add-on fetches a list of site information directly from your Sitecore instance, and all sites are statically generated at build time. It also uses Next.js Middleware to serve the correct Sitecore site. But Multisite add-on have there own limitations where config-based site definitions are not currently included. Only SXA-based sites will be fetched.  You can add this add-on using the JSS initializer . An XM Cloud project base...

The Item Service REST API allows you to interact with Sitecore items directly. This is very useful specially when you want to develop a data-driven client application including JavaScript application to interact with the Sitecore items without having Sitecore context.  Sitecore.Services.Client provides two services: ItemService : This service gives you access to regular Sitecore items. EntityService : This service gives you access to business objects that you define. In this article, I will show you the implementation of the Item Service API using .NET Console application. The ItemService REST API allows the following operations: CRUD - Create, Read, Update and Delete Item Sitecore Search Execute Stored Item Queries You may refer the Official Sitecore Documentation – ItemService REST API for more details. Request and Response flow : This is pretty straightforward flow where you need to authenticate first with the respective Sitecore instance and then perform the different re...

A Sitemap is an important part of SEO for any public-facing website. This is a list of URLs you want to crawl by the google bots for indexing. NextJS makes it easy for us to achieve this. So let’s see how to add a sitemap to your NextJS project. What is an XML Sitemap? An XML sitemap or simply sitemap.xml is a file that lists all the important URLs or pages so that search engines can easily crawl them. When we go for /sitemap.xml path in any websites which implemented the Sitemap, we could see an XML file as the result included with all the links in that website.  How to Add an XML Sitemap in a Next.js App? Assumption - You have set up your project using the Sitecore Containers template for Next.js. If not please refer this link . Install the Next-Sitemap package We are going to use a package next-sitemap for generating the sitemap in our Next.js app. The following command will install the package inside our Next.js app. npm i next-sitemap Add the next-sitemap config file In t...

Creating new components is one of the most common tasks while developing JSS applications. Once JSON rendering is defined and exposed to Layout service we need to create the respective component in the front end application which might be developed using React or Next.js. Let's create a Hero Banner component which is very common component for many websites.  Assumption - Y ou have set up your project using the Sitecore Containers template for Next.js. If not please refer this link . Hero Banner component mostly contains the following fields: Background image Heading / Title Sub-Heading/ Sub-Title  CTA Link Let's proceed with the above requirement -  Create the JSON rendering in Sitecore To create the JSON rendering in Sitecore we need to do the following: Create a new template called HeroBanner in  the /sitecore/templates/Project/YOUR_PROJECT folder . In this template, create a new template section and add the following fields: Background Image - Image field Heading...

We can add our own data to the context object at any time by extending the getLayoutServiceContextpipeline provided by the Layout Service. In my previous blog , I discussed about GraphQL approach to fetch the Site Settings item which is absolutely required in many cases where Site specific settings needs to be available across the renderings. As we already know i n Sitecore headless architecture these settings item won't be exposed to Layout service by default since this is not a part of any renderings but many renderings depend on these settings value. So we have the  LayoutServiceContextpipeline provided by the Layout Service to accomplish this task. Let's do it using GetLayoutServiceContext pipeline.   Assumption  - Visual Studio Solution setup is already done based on the project needs or using  getting started  template. Use case - Let's consider this site structure and suppose we have to fetch the highlighted Site Settings using  ...

Use Case - This is a very common requirement where we need to keep some Site specific settings in Sitecore content tree underneath of Site root item.  In Sitecore headless architecture these settings item won't be exposed to Layout service by default since this is not a part of any renderings but many renderings depend on these settings value. Solution -  We can expose the settings item to the front end application either by extending the  JssGetLayoutServiceContext  pipeline  or directly through the GraphQL query from the front end application which is the easiest way of implementing it.  Here we will cover the GraphQL approach and will discuss the other approaches in the upcoming blog. Let's consider this site structure and suppose we have to fetch the highlighted Site Settings using GraphQL. GraphQL Query -  query SearchQuery( $pageSize: Int = 2 $language: String = "en" $rootpath: String = "{F4C787E3-FE05-4211-BD62-1FA238E50A57}") ...

Use case: We have a requirement of Country Language selector component  which will display country name , language and flag information.  Why we need here Custom Rendering Contents Resolver? The requirement looks pretty simple except one point i.e. Country name and flag data which are  available in .Net Culture Info class (System.Globalization.CultureInfo). Hence we need to write the custom resolver here to extract the Country specific data from CultureInfo class. Solution : Here are the steps to create the Custom Rendering Contents Resolver -  Should have Site level languages list available somewhere in the content tree for this component and the applicable languages can be selected from this list. Define your custom resolver under   /sitecore/system/Modules/Layout Service Provide the Assembly information in the Type field for you Custom Contents Resolver. Now create one JSON rendering for this and make sure to use the same Resolver we just created above....