Sitecore

Hello everyone, in this blog we will see, how we can read route data from layout service. So let's start. By Default, we have default field in Sitecore for all default page template.That is PageTitle. We can add our own custom fields also.This fields are exposed using Layout Service.Let's see how we can read it. Sitecore structure Layout Service Front End Code to Read Route Data import {Field,useSitecoreContext,Text } from '@sitecore-jss/sitecore-jss-nextjs'; type CustomRouteTypeContext = { route: { fields: { pageTitle: Field<string>; }; }; }; const ReadApprouteData = () => { const {sitecoreContext: {route: { fields },},} = useSitecoreContext<CustomRouteTypeContext>(); console.log(fields); return( <div> <Text field={fields.pageTitle} /> </div>) }; export default ReadApprouteData If you see, we are using the useSitecoreContext hook to retrieve the route da...

Hello everyone, in this blog we will try to learn how we can fetch the data from Sitecore using GraphQL and build the component in Next JS application. We will utilize the Tiles component which was build in my last blog regarding GraphQL. The blog link is available Here This is just an example as same component can be developed using Layout service also. Lets see the code for the front end and try to see learn what each code function do. import React from "react"; import { GetStaticComponentProps, useComponentProps, JSS_MODE_DISCONNECTED, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss-nextjs'; import { StyleguideComponentProps } from 'lib/component-props'; import config from 'temp/config'; type ListItem = { Image : { src : string; alt : string; } TileLink : { target : string; text : string; url : string; } Title : { value : string; } id : string; } const Tiles = (props:...

Hello everyone, As my learing continues in Sitecore Headless, In this blog we will see how we can create component in Sitecore Headless Next JS. We will take an example of how we can create a Footer component . Also we will try to use all Sitecore fields that are mostly use in our day to day work and how we can render those fields(Rich Text, Link, Multilist, Image, Dictionary etc.) in Headless development. Let's describe the footer component. It has fields mentioned. Footer Label, FooterLogo with Link, Description and List of external links. Footer Label : Dictionary Item FooterLogo : (Image) with Link :(General Link) Description: (Richtext) List of external links : (Multilist) Lets see the Sitecore Structure: Templates Renderings Datasoure Item Placeholder Settings Home Item Presentation Details once we add the component, we can check the same in Layout Service. Layout Service Now after verifying the component in Layout service, its time to build the read t...

Hello Everyone, In this blog let's try to understand some basic GraphQL query that we can use while working in Sitecore Headless Project. I just started learning GraphQL, so thought of sharing my learning with you with some practical scenario that we can encounter.In this blog we will see to fetch normal fields and Multilist field using GraphQL. So Lets get straight to the Point. Imagine a scenario where we are reading Tiles component. We need to show list of Tile along with Tile Header. In this scenario, most of the time we will create a datasource item. That item will have two fields one will be Tile Header and another will be TilesList which will be a multilist field. Also on Top of that, if we want to get some data from Page Item(ex.Home page) like Page Title and Page Description, how we can use GraphQL to get all these datas. Below images are representing the Sitecore CMS structure for the same. TileList Datasource Item Tile Item Home Page Item Now lets see how we c...