How to use snippets in SXA project

  Snippets in SXA


Snippets enable content editors to work more efficiently by reusing predefined sets of renderings on site pages. You can specify the behavior of snippets reuse in the Content Editor. For example, whether you allow content editors to duplicate and change the snippet locally.

Data Source Configuration

A unique feature of the snippet, is that the usage can take a couple of paths depending on intent of usage. Through the Content Editor there are three setting options for a snippet item regarding how to handle the data sources of applied to any renderings placed within the snippet.

  • Do not copy – The default setting. The snippet uses a globally assigned data source. The source of the content is in the site data folder. When you reuse this snippet on different pages and then change it, all instances of the snippet on all pages are updated automatically.

  • Copy global data source to local context upon selection – A copy of the snippet, its configuration, and content are added to the page. Changes made to the snippet are only applied for that specific page.

  • Ask user whether the copy of global data source to local context is required upon selection – This option allows the content editor to choose how to reuse the snippet and displays the following message in the Experience Editor:


Design and Building a Snippet


There are two ways to go about creating our snippet. The first way is working from the context of a page.

  1. Expand the content tree to your Home page.
  2. Right click and select the option for Experience Editor.
  3. Once in Experience Editor, from the Toolbox expand ‘Composites’ section
  4. Click on Snippet
  5. Drag Snippet into the Header placeholder and drop it.

6.  After dropping the Snippet, you’ll be created with the familiar ‘Select the                    Associated Content’ modal. From this modal we will create a new snippet                content item that will be referenced by the rendering by clicking Create next to         the folder we want to place the information into…for this sample click next to             ‘Snippets’ for the current site.

7. Next you will see the ‘Insert Item’ modal, in which we decide what to create…select Snippet Item

8. Provide a name, for the example will call it Global Header.

9. Click OK
Create Snippet - Create Snippet Item10. After creating the ‘Select the Associated Content’ modal will refresh with our new item. Select Global Header and click OK
11. Datasource can be created in two places. The first one (Snippets) refers to the shared location provided by SXA.  the second option Data will create data source under the page itself. The second option can be used if the snippet is limited to a single page.



12. Snippets can exist in shared location with datasouce as a child of snippet so when a snippet will be dragged on page and used.  snippet will be created under that page and datasource will be child to snipeet under page. 





Comments

Post a Comment

Popular posts from this blog

Custom Dropdown in Sitecore form

Image
Custom Dropdown in Sitecore form       1 .  Create a field template         a .   Create a template in /sitecore/templates/System/Forms/Fields.              b.  Inherit this template from Templates/System/Forms/Fields/Dropdown List              c.  Check the  shared  checkbox for all your fields in this template.              d.  Create Standard values. 2 . Create the View Model for custom field and razor view for displaying the form element         a .  Create a class, add the property, and override the InitItemProperties and UpdateItemFields                  methods.             b. Build and deploy.             c. Add a new folder ‘FormsDemo’ and place the view und...
Read more

Search Page in Sitecore SXA

Image
                              There are three parts of this page : 1. Search Box 2. Search Results  3. Filters 1. Set up Search Box : To enable your visitors to search your site, you can add a search box to your pages. By default, the Search Box rendering adds the search text box to the page. You can customize the search box by configuring the item and changing the properties. To add a search box to your page: From the Toolbox, drag the Search Box rendering to the page. In the Select the Associated Content dialog box, for the search box, select the Default item. 3. In the Select the Associated Content dialog box, for the search box, select the Default item. Search results signature – enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page. Search scope – select a scope to limit the se...
Read more