Extend Storefront themes

Current version: 9.3

In Sitecore 9.2, scripts were moved out of the Storefront Branded Theme so that it only contained stylesheets. This was done to make it simpler to customize and extend the Storefront Branded theme and ease the transition from one version of SXA Storefront to the next.

In Sitecore 9.3, additional script improvements were made in particular to Commerce Services Theme (/sitecore/media library/Base Themes/Commerce Components Theme and /sitecore/media library/Base Themes/Commerce Services Theme).

Script

Improvement

cart-addtocart.js

This script has been updated and the AddCartLine and AddBundleCartLine API calls now provide a response that contains the cart lines object. Since the data argument contains the cart lines object, it is passed in as an argument when invoking the TriggerCartUpdateEvent function.

cart-context.js

This script has been improved so that the TriggerCartUpdateEvent function signature accepts a parameter to receive cart data. The data is then dispatched to all the event handlers that subscribe to the CartUpdate event.

cart-minicart.js

This script has been updated so that, in the OnCartUpdated event handler, the getCartCount is no longer invoked because the cart lines object is now available from the data passed in. The updateCartCount function can be directly invoked by passing in the array length as the argument and, in this way, avoiding the need to invoke the getCartCount function, which will only be invoked when the data passed in is null or undefined.

cart-minicart-model.js

This script has been updated so that the RemoveMinicartLine API call now provides a response that contains the cart lines object. As a result, the removeItem function has changed. Since the Remove MinicartLine API call now returns data when the call is successful, the refreshCartData function is directly invoked with the data passed in as an argument.

cart-lines-model.js

This script has been updated so that the RemoveShoppingCartLine API call now provides a response that contains the cart lines object. As a result, the removeItem function has changed. Since the RemoveShoppingCartLine call now returns data when the call is successful, the data is now being passed in as an argument when invoking the TriggerCartUpdateEvent function.

The UpdateCartLineQuantity call has been updated to provide a response that contains the cart lines object. As a result, the updateQuantity function has changed and data is being passed in as an argument when invoking the TriggerCartUpdateEvent function.

cart-lines.js

This script has changed such that, in the OnCartUpdated event handler, the GetCart API call is no longer invoked because the cart lines object is retrieved from the data passed in. As a result, the updateModel function can be directly invoked by passing in the data as the argument, avoiding the need to invoke the GetCart API call. This call will only be made when the data passed in is null or undefined.

cart-total.js

This script has been updated so that the RemoveMinicartLine and RemoveShoppingCartLine calls provide a response that contains the cart lines object.

In the OnCartUpdated event handler, the GetCart call is no longer invoked because the cart lines object is retrieved from the data passed in. As a result, the updateModel function can be directly invoked by passing in the data as the argument.

In the following table, the old location is prior to Sitecore 9.2 and the new location is Sitecore 9.2 and later.

Script

Description

browser.js

Determines whether the browser is using the mobile version or not.

New location: /sitecore/Media Library/Base Themes/Commerce Core Theme/Scripts

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Common

carousel.js

(previously component-carousel.js)

Handles the slide transition in the carousel component.

New location: /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/Carousel

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components

catalog-productimage.js

(previously product-image.js)

Contains the click event handler for the product image component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/Catalog

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/scripts/components

catalog-productquantity.js

(previously add-to-cart.js)

Contains the event handlers for the controls in the product quantity component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/Catalog

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components

category-navigation.js

Handles styling changes for the category navigation component.

New location:  /sitecore/media library/Base Themes/Commerce Components Theme/Scripts/Navigation

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components

forms.js

Contains submit and AJAX event handlers for all form components.

New location:  /sitecore/Media Library/Base Themes/Commerce Core Theme/Scripts

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Common

language-selector.js

Handles display transition of the language selector component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/LanguageSelection

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components

product-bundle.js

NA

Script removed.

product-facet-component.js

Contains the component initialization function for the product facet component.

Script removed. Code moved into /Project/Storefront/src/Scripts/Commerce/Feature/Catalog/catalog-productfacets.js

search-bar.js

Handles styling changes and contains the click event handler for the search bar component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/SearchBar

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/components

sub-category-navigation.js

(previously sub-category-navigation-component.js)

Handles display transition of the sub-category navigation component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/Navigation

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components/

top-bar-links.js

(previously topbarlinks.js)

Handles display transition of the top bar links component.

New location:  /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts/TopBarLinks

Old location: /sitecore/Media Library/Extension Themes/Storefront Branded Extension/Scripts/Components

Note

You can access all scripts from the Content Editor by going to the /sitecore/Media Library/Base Themes folder.

Extend a script

To extend a script:

  1. In the Content Editor, go to /sitecore/Media Library/Base Themes/Commerce Components Theme/Scripts.

  2. Right-click the script you want to extend and click Scripts, Download.

  3. In the editor of your choice, modify the script as required.

  4. In the Content Editor, select the script and, on the Content tab, in the Media section, click Attach and then go to where the script is saved and click Attach.

  5. On the Media tab, click Save.

  6. On the Publish tab, click Publish to publish your changes.

Add a custom script

To add a custom script:

  1. In the Content Editor, go to /sitecore/Media Library/Extension Themes.

  2. Right-click Storefront Branded Extension and click Insert, Scripts.

  3. In the Message dialog box, enter a name for the new item and click OK.

  4. Select the newly created scripts folder and, on the Folder tab, click Upload file.

  5. In the Upload File dialog box, click Choose File and go to where the custom script is saved and then click Upload.

  6. On the Publish tab, click Save.

  7. On the Publish tab, click Publish to publish your changes.

Do you have some feedback for us?

If you have suggestions for improving this article,