Extend the Storefront Branded theme

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 to ease the transition from one version of SXA Storefront to the next.

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.

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.

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.