Documentation for loadStorefrontScript

Function Declaration

Function Overview

The loadStorefrontScript function is designed to dynamically load and execute specific storefront scripts and styles based on a given group ID. It also allows us to update all storefronts at once when new features are added or existing ones are updated. Options that are frequently requested can be set using the options parameter.

Parameters

groupID (number)

The identifier for the specific script group to be loaded. This determines which module and styles to import.

styling (StylingParameter) (optional)

An optional object to customize the CSS variables used for styling different parts of the storefront. The properties include:

• navbarBackground?: string - Background color of the navbar
• navbarTextColor?: string - Text color in the navbar
• navbarHoverColor?: string - Text hover color in the navbar
• loginbarBackground?: string - Background color of the login bar
• loginbarTextColor?: string - Text color in login bar
• loginbarHoverColor?: string - Text hover color of the login bar
• primaryBackground?: string - Primary background color
• primaryTextColor?: string - Primary text color
• primaryHoverColor?: string - Primary text hover color
• secondaryBackground?: string - Secondary background color
• secondaryTextColor?: string - Secondary text color
• secondaryHoverColor?: string - Secondary text hover color
• tagBrandBackground?: string - Brand tag background color
• tagBrandText?: string - Brand tag text color
• tagDecorationBackground?: string - Decoration tag background color
• tagDecorationText?: string - Decoration tag text color
• tagDimensionsBackground?: string - Dimensions tag background color
• tagDimensionsText?: string - Dimensions tag text color
• tagPackSizeBackground?: string - Pack size tag background color
• tagPackSizeText?: string - Pack size tag text color
• tagSkuBackground?: string - SKU tag background color
• tagSkuText?: string - SKU tag text color

options (OptionsParameter) (optional)

An optional object to customize various display options for the storefront. The properties include:

• hideHomeLink?: boolean - Hides "Home" link in the navbar (default: false)
• hideCompanyShipTo?: boolean - Hides "Ship To Company" section on Shipping Address page (default: false)
• hideAddressBook?: boolean - Hides Address Book and "Add to Address Book" button on Shipping Address page (default: false)
• lockAddressBook?: boolean - Makes Address Book read-only. Users cannot add their own addresses. (default: false)
• enableDropdown?: boolean - When true, makes subcategories collapsable. (default: false)

Usage

Here is an example of how to use the loadStorefrontScript function:

          
          <!-- You should include this script tag in the head of your HTML file. You can set this in the branding profile. -->
          <script src="https://main--vividstorefronts.netlify.app/dist/main.js"></script>

          const groupID = 66;

          const styling = {
              navbarBackground: '#333',
              navbarTextColor: '#fff',
              navbarHoverColor: '#555',
          
              loginbarBackground: '#222',
              loginbarTextColor: '#ccc',
              loginbarHoverColor: '#444',
          
              primaryBackground: '#f1f1f1',
              primaryTextColor: '#000',
              primaryHoverColor: '#ddd',
          
              secondaryBackground: '#e1e1e1',
              secondaryTextColor: '#111',
              secondaryHoverColor: '#bbb',
          };

          const options = {
              hideHomeLink: true,
              hideCompanyShipTo: false,
              hideAddressBook: false,
          };
      
          loadStorefrontScript(groupID, styling, options);