Commerce Shared renderings

Last updated Friday, February 2, 2018 in SXA Storefront for Designer, Developer
Keywords: Design, Development

You can use the renderings in the Commerce Shared group in the SXA toolbox for building different types of pages.

The following image is an example of how the Commerce Shared renderings might appear on a storefront page:

CXA_Live_SharedRenderings.png

This topic describes the following renderings in the Commerce Shared group in the SXA toolbox:

Language Selector

When you add the Language Selector rendering to a page, it appears as a hyperlinked text that displays the current language. This rendering is similar to the Language Selector rendering in the Context group in the SXA toolbox. The difference is that you use the Language Selector rendering from the Commerce Shared group when you want to link the rendering to a language set in the Commerce Control Panel.

Behavior on the live storefront

On the live storefront, when you click the language selector link, the list of available languages expands. You can then select a language.

CXA_RunTime_LanguageSelectorListExpanded.png

Configuration

You can define the languages displayed in the Language Selector rendering in the Language Set item (/sitecore/Commerce/Commerce Control Panel/Shared Settings/Language Sets):

Each language set has a list of selected languages, and a default language:

Picture 3

You specify the language set that applies to your storefront in: sitecore/Commerce/Commerce Control Panel/Storefront Settings/Storefronts/<Your Storefront>/Language Configuration, in the Language Set field:

Picture 4

Top Bar Links

The Top Bar Links rendering displays a number of links for the customer. The links displayed depend on the customer's authentication status. For example, if the customer is not logged in, a Sign in link is displayed; if the customer is logged in, the Sign out link is displayed together with the customer's login name.

Anonymous customer

If the customer is not logged into their account, the Top Bar Links rendering displays the following links by default:

  • Sign in
  • Gift cards

CXA_Live_TopBarLinks.png

Logged in customer

If the customer is logged in, the Top Bar Links rendering displays the following links by default:

  • Username
  • Sign out
  • Account
  • Gift cards

Configuration

In the associated content item, you can add or remove links from the list of links that are displayed in the rendering. Click the Edit link on the Links tab to open the Select Items dialog box:

CXA_CE_TopBarLinks_Select.png

The content items for the individual links can be found in: /sitecore/content/Sitecore/[SITE]/Data/Links/TopBar 

CXA_CE_Links_dataItems.png

For each link, you can configure the following fields:

  • Link – leave the field blank if you want to display a static text.
  • Text – enter the text of the link.
  • Tooltip – enter a tooltip for the link.
  • Show when Authenticated –select to only display the link when the customer is logged in.
  • Show Always –select to always show the link.
  • Generate Secure Link – select to enforce https:// when this link is clicked.

When you place the Search Bar rendering on a page, it displays a text box with placeholder text and a search button identified by a looking-glass icon.

When the customer clicks the search button, the system redirects them to the search result page. The term that the customer entered in the text box is preloaded.

Message Summary

The Message Summary rendering displays messages that have been triggered by other renderings and pushed to the Message Summary. The rendering groups messages by type and displays them in the following order:

  • Errors
  • Warnings
  • Informational messages

The storefront style sheet (CSS) determines the appearance (style) of the different types of messages.

When you drop the Message Summary rendering on a page, it contains placeholder data:

MessageSummary rendering_mock.png

On the live storefront, the rendering is invisible if it does not contain any messages.

Configuration

  • The messages displayed in the Message Summary rendering are Commerce storefront system messages. You can configure the messages in the System Messages folder (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Commerce Terms/System Messages)
Send feedback about the documentation to docsite@sitecore.net.