Sitecore Discover - Part 3

By Er. Pranshu Katiyar (Software Engineer) -

Integrating Using Search JS Data Package

Sitecore Search is a headless search engine that enables personalized experiences for visitors. It performs entity-based searches by indexing searchable content and managing these indexes as entities—distinct, search-indexable object types with unique structures that represent various content categories.

The SearchJS Data package can be utilized in any JavaScript project, regardless of framework or flavor, to build search experiences that are configured within Sitecore Search.

Integration architecture:

In your application, which integrates with Sitecore Search using the JS Data package, communication with Search services is handled through a singleton instance called DataProvider. At runtime, DataProvider processes requests constructed with various methods, objects, and types, and returns responses in predefined formats.


Install the JS Data package:

To start development, you'll need to install the JS Data package from NPM. You can accomplish this either through your IDE or by using the terminal.

To install Search JS Data package to your project:

·       In your project Location (C:\Sitecore Serach), in the terminal, run the following:

·       npm install --save @sitecore-search/data


Note: If You Are facing Error Like npm : The term ‘npm' is not recognized as the name of a cmdlet, function, script file, or operable program.

Solution: Go Through/Click On given Solution Urls

Authenticate a Session:

All requests to Search require authentication. You can use the built-in setup method to authenticate your session.

1.     In a TypeScript file named index.ts, copy and paste the following code block.

Location: C:\Sitecore Serach\node_modules\type-fest

import {

  setup,

} from "@sitecore-search/data";

setup({

  customerKey: '<YOUR_CUSTOMER_KEY>',

  apiKey:'<YOUR_API_KEY>',

});

import {

  setup,

} from "@sitecore-search/data";

setup({

  customerKey: '196452776-6854',

  apiKey:'01-cb2539b5-0bbeebadec52f425',

});

1.     In the Customer Engagement Console (CEC), in the Developer Resources section, copy your Customer key and API key values.

2.     In the index.ts file, in the setup function, replace <YOUR_CUSTOMER_KEY> and <YOUR_API_KEY> with the vales you copied for the Customer key and the API key.

Make a widget request object:

Widget-specific parameters are transmitted to Search via WidgetRequest objects.

1.     In the index.ts file, to create widget request objects of widget and entity pairs, paste the following code block, then adjust the imports: 

import {

  setup,

  WidgetRequest,

} from "@sitecore-search/data";

const searchResultsidgetRequest = new WidgetRequest("rfkid_7");

searchResultsWidgetRequest.setEntity("content");

const previewSearchWidgetRequest = new WidgetRequest("rfkid_6");

previewSearchWidgetRequest.setEntity("content");

1.     In the WidgetRequest objects, to set pagination parameters, paste the following code block, then adjust the imports:

searchResultsWidgetRequest.setSearchLimit(10); 

searchResultsWidgetRequest.setSearchOffset(30);

previewSearchWidgetRequest.setSearchLimit(10); 

previewSearchWidgetRequest.setSearchOffset(30);

Make a search request:

The Request object containing context and widget information, is sent to Search. Its parameters include those that apply to all included widgets.

1.     In the index.ts file, to create a request with locale as context, paste the following code block in the file, then adjust the imports.

import {

setup,

Request,

} from "@sitecore-search/data";

const request = new Request();

request.setContextLocaleCountry("us");

request.setContextLocaleLanguage("en");

1.     In the request object, to add WidgetRequest objects individually, paste the following code block, then adjust the imports.

request.addWidgetItem(searchResultsWidgetRequest.toJson());

request.addWidgetItem(previewSearchWidgetRequest.toJson());

2.     Alternatively, in the request object, to add an array of WidgetRequest objects, paste the following code block, then adjust the imports.

request.setWidgetItems( [ searchResultsWidgetRequest.toJson(), previewSearchWidgetRequest.toJson() ] );

Dispatch a search request: 

The DataProvider is a singleton that orchestrates all communication between the UI and Search.

1.     In the index.ts file, paste the following code block, then adjust the imports.

import {

  setup,

  DataProvider,

  Request,

  WidgetRequest,

} from "@sitecore-search/data";

DataProvider.get(request.toJson())

  .then((response) => console.log(JSON.stringify(response, null, 4)))

  .catch((error) => console.log(JSON.stringify(error, null, 4)));

For More Go Through : Integrating using Search JS Data package

For More Details Read My Next Blog

Know More About Sitecore Discover

=====================================================

Thanks For Reading My Blogs

You Can Also Continue Your Learning By Reading These More Blogs - 

 


Comments

Post a Comment

Read More Blogs Here....

Sitecore JavaScript Services

By Er. Pranshu Katiyar (Software Engineer) -
Image
  Sitecore JavaScript Rendering SDK (JSS) What Is Sitecore Jss: Sitecore JSS offers front-end developer of whole new way of working and interacting with Sitecore. Building a JavaScript app on top of Sitecore has never been easier. Simply use your Favourite JavaScript framework and leverage the Sitecore capabilities to power your applications. What is Headless Development: Sitecore Headless Development is based on a rendering host front end and a Sitecore instance back end. This decoupling of logic domains makes a Sitecore solution easy to develop, maintain, scale, and upgrade. Sitecore ASP.NET   Rendering SDK - https://doc.sitecore.com/xp/en/developers/hd/200/sitecore-headless-development/sitecore-asp-net-rendering-sdk.html Getting started with the latest version of Jss Application To develop a JSS application, you need: Ø   An operating system supported by Node (Mac, Windows, Linux). Ø   Node. We recommend using the latest long-term support (LTS)...
Read more

LaMDA Software

By Er. Pranshu Katiyar (Software Engineer) -
Image
  LaMDA Software Introduction: ·     LaMDA is a family of conversational large language models or AI-driven chatbot developed by Google . Originally developed and introduced as Meena in 2020, the first-generation LaMDA was announced during the 2021 Google I/O keynote, while the second generation was announced the following year. it's basically an advanced form of a chatbot.            ·         The acronym stands for " Language Model for Dialogue Applications ". Built on the seq2seq architecture , transformer-based neural networks developed by Google Research in 2017, LaMDA was trained on human dialogue and stories, allowing it to engage in open-ended conversations. ·         Google will release LaMDA to small groups of people in batches, test the app, and work on feedback to make it better, before making it available to the general public. ·     ...
Read more

Component In Sitecore / Create One Column Component In Sitecore:

By Er. Pranshu Katiyar (Software Engineer) -
Image
What is Component / What are Sitecore components: A component defines a part of the page. It can contain layout information, for example, content fields and placeholders, and their positions on the page, as well as business logic or metadata for the page.  In Sitecore, a page consists of a page layout and components. The page layout defines the overall structure of the page. A developer creates the page layout, which can contain placeholders where you can insert components. A component defines a part of a page. Typically, you reuse components on multiple pages. If the component displays content, you can save the content to the page item or to a separate content item. You assign a content item to the component on the page, and you can reuse the content item on other pages. Simple Steps for How to Create one Column Component (For Beginners) Step 1 -   Create a Template name “ ColumnTemplate” Location :   /sitecore/templates/Feature/Composites/ColumnTemplate Step 2 - Cre...
Read more

Blockchain Technology

By Er. Pranshu Katiyar (Software Engineer) -
Image
Blockchain Definition: Ø   A blockchain is a digitized, distributed, consensus-based secure storage of information protected from revision and tampering over the peer-to-peer network. Ø   Most often used in association with cryptocurrencies like BitCoin, blockchain is a digital, distributed, public-ledger technology designed to record transactions in a secure, tamper-proof, yet publicly accessible way that resists tampering or modification. Ø   Blockchain was first introduced in the white paper for Bitcoin in 2009 by unknown person named as Satoshi Nakamoto. Currently, blockchain is used by multiple organizations to tackle their problems and provide a better solution. What exactly is Blockchain: The blockchain is general terms is defined in following manner:   A technology that permits transactions to be recorded permanently.    A technology that removes intermediaries and create trust through the algorithm. A technology that cryptographically secure...
Read more

Sitecore PowerShell : Part 1

By Er. Pranshu Katiyar (Software Engineer) -
Image
  Sitecore PowerShell Extension: Sitecore PowerShell Extensions (SPE) is a module for Sitecore that enables scripting and automation capabilities using PowerShell. PowerShell is a scripting language and shell designed for task automation and configuration management . With SPE, you can create and execute PowerShell scripts within the Sitecore context, allowing you to automate various tasks and operations. Here are some key aspects of Sitecore PowerShell Extensions: Installation You can install SPE using the Sitecore Installation Wizard or install the module manually by copying files to the appropriate directories. Integration with Sitecore SPE integrates with the Sitecore Desktop and Content Editor, providing a PowerShell console directly within the Sitecore interface. Scripting Environment SPE provides a scripting environment where you can write, edit, and execute PowerShell scripts. You can use these s...
Read more

Contact Me/Any Suggestion

Name

Email *

Message *