High Score Labs News   •   Jul 19, 2022

We are using default Helix project layout. 

Our Homepage will have below components –

Homepage: Page Design structure

Header

Footer

Navigation

Hero Banner or Carousel

Product List Carousel

New Cards

SXA Presentation:

While creating these pages we have to take advantage of various SXA features so that in parallel with development content editors can start adding content on the website. This is where SXA is different.

SXA adds an additional layer, traditionally we have layout, renderings and placeholders which are used to prepare entire page structure, where as in SXA we have page design partial design, partial designs and rendering variants to structure the page.

Page Design: They are set of partial designs that structure your page. Each page will be based on the page design.

To create a page design:

In the content tree, on your site, click Presentation, right-click Page Designs,click Insert, Page Design.

Enter a name for the new page design and click OK.

In the Designing section, select the partial designs that you want to add, click the right arrow   to move them to the list of selected items, and then save it.

You can also override the general theming of your site and assign a specific theme to a page design. In the Themingsection, click the drop-down arrow and select the theme.

Right-click the new page design, and then click Experience Editorto view your design.

To assign a page design to a template:

In the content tree, go to your site, click Presentation, Page Designs.

In the Designingsection, select a template in the left column and, to associate it to a page design, in the right column, select the page design.

Note: You can also create Page Design directly from Experience Editor also.

Partial Design: Set or renderings / components which serves some purpose on the page. That can me static or dynamic. It can be used across multiple page designs. Most commonly Header, Footer and Navigation are the common components.

In our case – we are using Header, Footer, Hero Banner partial designs to be added on Homepage, Blog Article (Made using Page Design) page Header, Footer, Blog Title, Short Description, Long Description, Blog media etc.

To add a partial design in the Experience Editor:

On the ribbon, on the Experience Acceleratortab, click Partial Design, and then click Insert a new Partial Design.

In the Insert Itemdialog box, select Partial Design, enter a name and click OK. SXA now loads an empty page. If you select the navigation check box, you can see you are in the presentation layer.

Now you can add renderings to your partial design by dragging them from the Toolbox to the page. For example, for a header, you could add some layout elements and divide the header in 4 columns on the left and 8 on the right. Drag the Splitter (Columns) rendering to the page and split the layout.

Use the Image (Reusable) rendering to add a logo to the left 4 columns. To do that, drag the Image (Reusable) renderingto the left columns, enter a name and click OK.

In the Select the Associated Contentdialog, select the image and click OK.

When your header is ready after for example adding a slogan to the header, and adding navigation, save it to make it available in the Partial Design menu.

Rendering variants are configurable adaptations of the default renderings. To encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.

To create a rendering variant:

In the Content Editor, click the site and open the Presentation/Rendering Variants This folder lists all the renderings that allow variants.

Right-click the rendering that you want to add the variant to, and then click Insert, Variant Definition.

Enter a name and click OK.

In the Variant Detailssection, specify information in the following fields:

Field used as link target:Provide the field name of the target item. This class is added to the list and navigation items markup (li HTML element). This link is used to override all links when the Is link, Is prefix link, or Is suffix link check boxes are selected.

Allowed in templates: Specifies the pages that the variant is available for. Click the relevant page template, click the right arrow to move it to the list of selected items, and then click Save. If there are no templates selected, the variant is available for all pages.

Compatible renderings: Makes rendering variant available for other renderings. For example, if for a Page Content rendering variant, in the Compatible Renderings field, you specify Title, you can use the rendering variant for the Title rendering as well..

Css Class: Specifies class to render into rendering content element. For example:

·

Item Css class field: Specifies field name of the rendered item from which the CSS class will be taken and rendered into class attribute. Supported for Navigation rendering only6. Optionally, in the Appearancesection, you can add a thumbnail image for the variant. This image will appear in the variants drop-down box and can help content editor select the best variant for their purpose

6. Rendering variants without a thumbnail display with their name only.

.

7.To define the fields that will be displayed, you can add child items to the rendering variant, right-click the variant, click Insert,and then click the relevant item.

These are the child items available for a rendering variant:

Field: displays field name and other field values.

Date: displays data and time in custom format. To be able to display date and time in custom format you have to use the Date item. This item is similar to the Field item but has an additional field: “Date format” that allows you to choose a date and time format. Like the Field item, the Date item can be used as fallback item and can have its own fall back items defined.

Edit Frame: variant item that can be used in the Edit mode.

HTML Tag: enables users to render HTML self-closing tags.

Model: displays properties from the current Model. The SXA renderings model inherits from XA.Foundation.Mvc.Models.RenderingModelBase. In the Property path field, you can enter the path to the property that you want to display.

Model Iterator: displays properties from list of models.

Placeholder: renders a placeholder that enables users to add additional renderings. If you want the user to be able to switch context for the renderings inside this placeholder, go to the VariantDetailssection and select the Switch component context to currently rendered item

Reference: displays field from referenced item. If you want to display a field from a referenced item, you can define this field in the PassThroughField. You can use this variant field for the following fields: LinkField (GeneralLink, DropLink), FileField (File), ImageField (Image), and ReferenceField (Droptree). Reference items can contain have another reference item as its child item. This can be convenient when you want to create a tree of reference items and display fields from items which are referenced in referenced items.

Responsive Image: enables to define the default size as well as the allowed sizes and width of images. Making your images responsive means that your browser serves a different sized version of that image based on the size of the image on your page and the screen resolution. The values entered in the Variant Details section will be combined in a srcset The values in the following screenshot will generate the following img tag:

Copy

• Query: allows to specify a query that will be will be run on current context item. This enables you to query child items or use SXA tokens. For example, if you want the rendering variant to display only for the child items of a certain template. You must start your query with query and then use standard Sitecore query syntax. You can combine Sitecore queries with SXA tokens such as $home and $site.
• Section: used to create groups. Section contains fields such as Tag (to create wrapping element for the section, for example “div”) and CssClass (to add a css class to the wrapping tag). You can nest Section items to create more complex variant structure.
• Template: allows user to define a template which will be used to render part of the HTML.
• Text: displays text. Used to render custom string of for example a description. You can use the following fields: Text, Tag (define additional tag that will wrap text), CssClass (the css class that will be added to the tag), IsLink (if selected then custom text will be additionally wrapped by hyper link to the current item).
• Token: SXA supports tokens $id(renders id of the item), $size (formats size of attached asset), $name (renders name if the item), and $FileTypeIcon (renders span with css classed equal to the file extension). The custom pipeline resolveVariantTokens can be used to extend the set of variant tokens.
• Component: allows to embed a component. For example, for a News heading you can create a variant that includes the Breadcrumb and tag renderings. Does not support embedding the Pagination

  In the Rendering item field, you can select the rendering. In the Rendering parameters field, you can select the datasource. If you leave the datasource empty, the item that would normally be used to render fields will be provided to the component as its datasource. Before you can configure the Rendering Parameters, you must specify the Rendering Item and save it.

  Scriban: allows user to define Scribantemplate which will be used to render part of the HTML.

Contact us today!