menu

SFRA / Client-side JS / Global

Methods

addSpinner($target)

Show a spinner inside a given element

Parameters:
Name Type Description
$target element

Element to block by the veil and spinner. Pass body to block the whole page.
Source:

appendToUrl(url, params) → {string}

appends params to a url

Parameters:
Name Type Description
url string

Original url
params Object

Parameters to append
Source:
Returns:

result url with appended parameters

Type
string

appendToUrl(url, params) → {string}

appends params to a url

Parameters:
Name Type Description
url string

Original url
params Object

Parameters to append
Source:
Returns:

result url with appended parameters

Type
string

applyModals(scope)

Apply modal classes needed for mobile suggestions

Parameters:
Name Type Description
scope Object

Search input field DOM element
Source:

attributeSelect(selectedValueUrl, $productContainer)

updates the product view when a product attribute is selected or deselected or when changing quantity

Parameters:
Name Type Description
selectedValueUrl string

the Url for the selected variation value
$productContainer jQuery

DOM element for current product
Source:

chooseBonusProducts(data)

Retrieves url to use when adding a product to the cart

Parameters:
Name Type Description
data Object

data object used to fill in dynamic portions of the html
Source:

clearBillingAddressFormValues()

clears the billing address form values

Source:

clearCreditCardForm()

clears the credit card form

Source:

clearForm(form) → {void}

Remove all validation. Should be called every time before revalidating form

Parameters:
Name Type Description
form element

Form to be cleared
Source:
Returns:
Type
void

clearFormErrors(form) → {void}

Remove all validation. Should be called every time before revalidating form

Parameters:
Name Type Description
form element

Form to be cleared
Source:
Returns:
Type
void

clearModals()

Remove modal classes needed for mobile suggestions

Source:

clearPreviousErrors(parentSelector)

Clear the form errors.

Parameters:
Name Type Description
parentSelector string

the parent form selector.
Source:

clearShippingForms(order)

Clear out all the shipping form values and select the new address in the drop down

Parameters:
Name Type Description
order Object

the order object
Source:

confirmDelete(actionUrl, productID, productName, uuid)

replace content of modal

Parameters:
Name Type Description
actionUrl string

url to be used to remove product
productID string

pid
productName string

product name
uuid string

uuid
Source:

createCarousel(imgs, $productContainer)

Dynamically creates Bootstrap carousel from response containing images

Parameters:
Name Type Description
imgs Array.<Object>

Array of large product images,along with related information
$productContainer jQuery

DOM element for a given product
Source:

createCategoryAnchor($parentElement) → {Array}

Rerieves data attributes from parent element and converts to gretel compatible recommenders array

Parameters:
Name Type Description
$parentElement jQuery

parent element where recommendations will show.
Source:
Returns:
  • containing an anchor object
Type
Array

createErrorNotification(message)

Create an alert to display the error message

Parameters:
Name Type Description
message Object

Error message to display
Source:

createErrorNotification(message)

re-renders the order totals and the number of items in the cart

Parameters:
Name Type Description
message Object

Error message to display
Source:

createErrorNotification(message)

Create an alert to display the error message

Parameters:
Name Type Description
message Object

Error message to display
Source:

createNewShipment(url, shipmentData) → {Object}

Does Ajax call to create a server-side shipment w/ pliUUID & URL

Parameters:
Name Type Description
url string

string representation of endpoint URL
shipmentData Object

product line item UUID
Source:
Returns:
  • promise value for async call
Type
Object

createProductAnchor($parentElement) → {Array}

Processes a recommendation tile, with an already initialized product specific anchors array

Parameters:
Name Type Description
$parentElement jQuery

parent element where recommendations will show.
Source:
Returns:
  • containing an anchor object
Type
Array

displayMessage(data, button)

appends params to a url

Parameters:
Name Type Description
data string

data returned from the server's ajax call
button Object

button that was clicked for email sign-up
Source:

displayMessage(data, button)

Display the returned message.

Parameters:
Name Type Description
data string

data returned from the server's ajax call
button Object

button that was clicked for contact us sign-up
Source:

editMultiShipAddress(element)

Hide and show to appropriate elements that allows the user to edit multi ship address information

Parameters:
Name Type Description
element jQuery

The shipping content
Source:

editOrEnterMultiShipInfo(element, mode)

perform the proper actions once a user has clicked enter address or edit address for a shipment

Parameters:
Name Type Description
element jQuery

The shipping content
mode string

the address mode
Source:

enterMultishipView(element)

Hide and show to appropriate elements to show the multi ship shipment cards in the enter view

Parameters:
Name Type Description
element jQuery

The shipping content
Source:

fillDomElement(einsteinResponse, $parentElement)

fills in the carousel with product tile html objects

Parameters:
Name Type Description
einsteinResponse string

string html for product tiles
$parentElement jQuery

parent element where recommendations will show.
Source:

fillModalElement(editProductUrl)

replaces the content in the modal window for product variation to be edited.

Parameters:
Name Type Description
editProductUrl string

url to be used to retrieve a new product model
Source:

fillModalElement(selectedValueUrl)

replaces the content in the modal window on for the selected product variation.

Parameters:
Name Type Description
selectedValueUrl string

url to be used to retrieve a new product model
Source:

findItem(array, match) → {Object|null}

Finds an element in the array that matches search parameter

Parameters:
Name Type Description
array array

array of items to search
match function

function that takes an element and returns a boolean indicating if the match is made
Source:
Returns:
  • returns an element of the array that matched the query.
Type
Object | null

getAddressFieldsFromUI(form) → {Object}

returns address properties from a UI form

Parameters:
Name Type Description
form Form

the Form element
Source:
Returns:
  • a JSON object with all values
Type
Object

getAddToCartUrl() → {string}

Retrieves url to use when adding a product to the cart

Source:
Returns:
  • The provided URL to use when adding a product to the cart
Type
string

getAttributesHtml(attributes) → {string}

Generates html for product attributes section

Parameters:
Name Type Description
attributes array

list of attributes
Source:
Returns:
  • Compiled HTML
Type
string

getChildProducts() → {Array.<string>}

Retrieves the bundle product item ID's for the Controller to replace bundle master product items with their selected variants

Source:
Returns:
  • List of selected bundle product item ID's
Type
Array.<string>

getContent($element, $target) → {undefined}

This function retrieves another page of content to display in the content search grid

Parameters:
Name Type Description
$element JQuery

the jquery element that has the click event attached
$target JQuery

the jquery element that will receive the response
Source:
Returns:
Type
undefined

getCookie(cookieName) → {string}

Get cookie value by cookie name from browser

Parameters:
Name Type Description
cookieName string

name of the cookie
Source:
Returns:

cookie value of the found cookie name

Type
string

getEinsteinUtils() → {Object}

Validates and Return the cquotient namespace provided by the commerce cloud platform

Source:
Returns:
  • einsteinUtils or null
Type
Object

getModalHtmlElement()

Generates the modal window on the first call.

Source:

getModalHtmlElement()

Generates the modal window on the first call.

Source:

getOptions($productContainer) → {string}

Retrieve product options

Parameters:
Name Type Description
$productContainer jQuery

DOM element for current product
Source:
Returns:
  • Product options and their selected values
Type
string

getPidValue($el) → {string}

Retrieves the relevant pid value

Parameters:
Name Type Description
$el jquery

DOM container for a given add to cart button
Source:
Returns:
  • value to be used when adding product to cart
Type
string

getQuantitySelected($el) → {string}

Retrieves the value associated with the Quantity pull-down menu

Parameters:
Name Type Description
$el jquery

DOM container for the relevant quantity
Source:
Returns:
  • value found in the quantity input
Type
string

getQuantitySelector($el) → {jquery}

Retrieve contextual quantity selector

Parameters:
Name Type Description
$el jquery

DOM container for the relevant quantity
Source:
Returns:
  • quantity selector DOM container
Type
jquery

getSuggestions(scope)

Retrieve suggestions

Parameters:
Name Type Description
scope Object

Search field DOM element
Source:

getSuggestionsWrapper(scope) → {JQuery}

Retrieves Suggestions element relative to scope

Parameters:
Name Type Description
scope Object

Search input field DOM element
Source:
Returns:
  • .suggestions-wrapper element
Type
JQuery

handleArrow(direction)

Handle Search Suggestion Keyboard Arrow Keys

Parameters:
Name Type Description
direction Integer

takes positive or negative number constant, DIRECTION_UP (-1) or DIRECTION_DOWN (+1)
Source:

handleMoreContentBelowIcon(scope)

Determines whether the "More Content Below" icon should be displayed

Parameters:
Name Type Description
scope Object

DOM element, usually the input.search-field element
Source:

handlePostCartAdd(response)

Updates the Mini-Cart quantity value after the customer has pressed the "Add to Cart" button

Parameters:
Name Type Description
response string

ajax response from clicking the add to cart button
Source:

handleRefinements($results) → {undefined}

Keep refinement panes expanded/collapsed after Ajax refresh

Parameters:
Name Type Description
$results Object

jQuery DOM element
Source:
Returns:
Type
undefined

handleVariantResponse(response, $productContainer)

Parses JSON from Ajax call made whenever an attribute value is [de]selected

Parameters:
Name Type Description
response Object

response from Ajax call

Properties
Name Type Description
product Object

Product object

Properties
Name Type Description
id string

Product ID
variationAttributes Array.<Object>

Product attributes
images Array.<Object>

Product images
hasRequiredAttrsSelected boolean

Flag as to whether all required attributes have been selected. Used partially to determine whether the Add to Cart button can be enabled
$productContainer jQuery

DOM element for a given product.
Source:

hiddenSlides(element)

Makes the next element to be displayed next unreachable for screen readers and keyboard nav

Parameters:
Name Type Description
element jQuery

the current carousel that is being used
Source:

isMobileSearch(scope) → {boolean}

Determines whether DOM element is inside the .search-mobile class

Parameters:
Name Type Description
scope Object

DOM element, usually the input.search-field element
Source:
Returns:
  • Whether DOM element is inside div.search-mobile
Type
boolean

loadFormErrors(parentSelector, fieldErrors)

Display error messages and highlight form fields with errors.

Parameters:
Name Type Description
parentSelector string

the form which contains the fields
fieldErrors Object

the fields with errors
Source:

loadRecommendations()

Gets all placeholder elements, which hold einstein recommendations queries the details from the einstein engine and feeds them back to the dom element

Source:

maps()

Uses google maps api to render a map

Source:

miniCartReportingUrl(url)

Makes a call to the server to report the event of adding an item to the cart

Parameters:
Name Type Description
url string | boolean

a string representing the end point to hit so that the event can be recorded, or false
Source:

optionValueForAddress(shipping, selected, order, optionsopt) → {Object}

returns a formed

Parameters:
Name Type Attributes Description
shipping Object

the shipping object (shipment model)
selected boolean

current shipping is selected (for PLI)
order order

the Order model
options Object <optional>

options
Source:
Returns:
  • the jQuery / DOMElement
Type
Object

parseHtml(html) → {Object}

Parses the html for a modal window

Parameters:
Name Type Description
html string

representing the body and footer of the modal window
Source:
Returns:
  • Object with properties body and footer.
Type
Object

parseHtml(html) → {Object}

Parses the html for a modal window

Parameters:
Name Type Description
html string

representing the body and footer of the modal window
Source:
Returns:
  • Object with properties body and footer.
Type
Object

parseHtml(html) → {QuickViewHtml}

Parse HTML code in Ajax response

Parameters:
Name Type Description
html string

Rendered HTML from quickview template
Source:
Returns:
  • QuickView content components
Type
QuickViewHtml

parseResults(response) → {undefined}

Parse Ajax results and updated select DOM elements

Parameters:
Name Type Description
response string

Ajax response HTML code
Source:
Returns:
Type
undefined

populateAddressSummary(parentSelector, address)

Populate the Billing Address Summary View

Parameters:
Name Type Description
parentSelector string

the top level DOM selector for a unique address summary
address Object

the address data
Source:

positionSuggestions(scope)

Positions Suggestions panel on page

Parameters:
Name Type Description
scope Object

DOM element, usually the input.search-field element
Source:

processNonSwatchValues(attr, $productContainer)

Process attribute values associated with an attribute that does not have image swatches

Parameters:
Name Type Description
attr Object

Attribute

Properties
Name Type Description
id string

Attribute ID
values Array.<Object>

Array of attribute value objects

Properties
Name Type Description
value string

Attribute coded value
url string

URL to de/select an attribute value of the product
isSelectable boolean

Flag as to whether an attribute value can be selected. If there is no variant that corresponds to a specific combination of attribute values, an attribute may be disabled in the Product Detail Page
$productContainer jQuery

DOM container for a given product
Source:

processRecommendationsTile($parentElement, einsteinUtils, anchorsArray)

Processes a recommendation tile, with an already initialized category specific anchors array

Parameters:
Name Type Description
$parentElement jQuery

parent element where recommendations will show.
einsteinUtils Object

cquotient object
anchorsArray Array

array of objects representing anchors
Source:

processResponse(response)

Process Ajax response for SearchServices-GetSuggestions

Parameters:
Name Type Description
response Object | string

Empty object literal if null response or string with rendered suggestions template contents
Source:

processSwatchValues(attr, $productContainer, msgs)

Process the attribute values for an attribute that has image swatches

Parameters:
Name Type Description
attr Object

Attribute

Properties
Name Type Description
id string

Attribute ID
values Array.<Object>

Array of attribute value objects

Properties
Name Type Description
value string

Attribute coded value
url string

URL to de/select an attribute value of the product
isSelectable boolean

Flag as to whether an attribute value can be selected. If there is no variant that corresponds to a specific combination of attribute values, an attribute may be disabled in the Product Detail Page
$productContainer jQuery

DOM container for a given product
msgs Object

object containing resource messages
Source:

removeSpinner($veil)

Remove existing spinner

Parameters:
Name Type Description
$veil element

jQuery pointer to the veil element
Source:

screenSize(element) → {Object}

Get display information related to screen size

Parameters:
Name Type Description
element jQuery

the current carousel that is being used
Source:
Returns:

an object with display information

Type
Object

Search for stores with new zip code

Parameters:
Name Type Description
element HTMLElement

the target html element
Source:
Returns:

false to prevent default event

Type
boolean

selectShippingMethodAjax(url, urlParams, el)

Does Ajax call to select shipping method

Parameters:
Name Type Description
url string

string representation of endpoint URL
urlParams Object

url params
el Object

element that triggered this call
Source:

shippingFormResponse(defer, data)

Handle response from the server for valid or invalid form fields.

Parameters:
Name Type Description
defer Object

the deferred object which will resolve on success or reject.
data Object

the response data with the invalid form fields or valid model data.
Source:

showConsentModal()

Renders a modal window that will track the users consenting to accepting site tracking policy

Source:

showControls($parentElement)

Renders the einstein response into a given dom element

Parameters:
Name Type Description
$parentElement jQuery

parent element where recommendations will show.
Source:

tearDownSuggestions()

Tear down Suggestions panel

Source:

toggleSuggestionsIcon(action)

Toggle search field icon from search to close and vice-versa

Parameters:
Name Type Description
action string

Action to toggle to
Source:

updateApproachingDiscounts(approachingDiscounts)

re-renders the approaching discount messages

Parameters:
Name Type Description
approachingDiscounts Object

updated approaching discounts for the cart
Source:

updateAttrs(attrs, $productContainer, msgs)

Routes the handling of attribute processing depending on whether the attribute has image swatches or not

Parameters:
Name Type Description
attrs Object

Attribute
attr.id string

Attribute ID
$productContainer jQuery

DOM element for a given product
msgs Object

object containing resource messages
Source:

updateAvailability(data, uuid)

Updates the availability of a product line item

Parameters:
Name Type Description
data Object

AJAX response from the server
uuid string

The uuid of the product line item to update
Source:

updateAvailability(response, $productContainer)

Updates the availability status in the Product Detail Page

Parameters:
Name Type Description
response Object

Ajax response object after an attribute value has been [de]selected
$productContainer jQuery

DOM element for a given product
Source:

updateBillingAddressFormValues(order)

updates the billing address form values within payment forms

Parameters:
Name Type Description
order Object

the order model
Source:

updateBillingAddressSelector(order, customer)

updates the billing address selector within billing forms

Parameters:
Name Type Description
order Object

the order model
customer Object

the customer model
Source:

updateBillingInformation(order, customer, optionsopt)

Updates the billing information in checkout, based on the supplied order model

Parameters:
Name Type Attributes Description
order Object

checkout model to use as basis of new truth
customer Object

customer model to use as basis of new truth
options Object <optional>

options
Source:

updateCartTotals(data)

re-renders the order totals and the number of items in the cart

Parameters:
Name Type Description
data Object

AJAX response from the server
Source:

updateDom($results, selector) → {undefined}

Update DOM elements with Ajax results

Parameters:
Name Type Description
$results Object

jQuery DOM element
selector string

DOM element to look up in the $results
Source:
Returns:
Type
undefined

updateMultiShipInformation(order)

Update the checkout state (single vs. multi-ship)

Parameters:
Name Type Description
order Object

checkout model to use as basis of new truth
Source:

updateOptions(optionsHtml, $productContainer)

Updates DOM using post-option selection Ajax response

Parameters:
Name Type Description
optionsHtml OptionSelectionResponse

Ajax response optionsHtml from selecting a product option
$productContainer jQuery

DOM element for current product
Source:

updateOrderProductSummaryInformation(order)

updates the order product shipping summary for an order model

Parameters:
Name Type Description
order Object

the order model
Source:

updatePaymentInformation(order)

Updates the payment information in checkout, based on the supplied order model

Parameters:
Name Type Description
order Object

checkout model to use as basis of new truth
Source:

updatePLIShippingSummaryInformation(productLineItem, shipping, order, optionsopt)

Update the read-only portion of the shipment display (per PLI)

Parameters:
Name Type Attributes Description
productLineItem Object

the productLineItem model
shipping Object

the shipping (shipment model) model
order Object

the order model
options Object <optional>

options for updating PLI summary info

Properties
Name Type Attributes Description
keepOpen Object <optional>

if true, prevent changing PLI view mode to 'view'
Source:

updateProductDetails(data, uuid)

Updates details of a product line item

Parameters:
Name Type Description
data Object

AJAX response from the server
uuid string

The uuid of the product line item to update
Source:

updateProductLineItemShipmentUUIDs(productLineItem, shipping)

Update the hidden form values that associate shipping info with product line items

Parameters:
Name Type Description
productLineItem Object

the productLineItem model
shipping Object

the shipping (shipment model) model
Source:

updateQuantities(quantities, $productContainer)

Updates the quantity DOM elements post Ajax call

Parameters:
Name Type Description
quantities Array.<UpdatedQuantity>
$productContainer jQuery

DOM container for a given product
Source:

updateShippingAddressFormValues(shipping)

updates the shipping address form values within shipping forms

Parameters:
Name Type Description
shipping Object

the shipping (shipment model) model
Source:

updateShippingAddressSelector(productLineItem, shipping, order, customer)

updates the shipping address selector within shipping forms

Parameters:
Name Type Description
productLineItem Object

the productLineItem model
shipping Object

the shipping (shipment model) model
order Object

the order model
customer Object

the customer model
Source:

updateShippingInformation(shipping, order, customer, optionsopt)

Update the shipping UI for a single shipping info (shipment model)

Parameters:
Name Type Attributes Description
shipping Object

the shipping (shipment model) model
order Object

the order/basket model
customer Object

the customer model
options Object <optional>

options for updating PLI summary info

Properties
Name Type Attributes Description
keepOpen Object <optional>

if true, prevent changing PLI view mode to 'view'
Source:

updateShippingMethodList($shippingForm)

Update list of available shipping methods whenever user modifies shipping address details.

Parameters:
Name Type Description
$shippingForm jQuery

current shipping form
Source:

updateShippingMethods(shipping)

updates the shipping method radio buttons within shipping forms

Parameters:
Name Type Description
shipping Object

the shipping (shipment model) model
Source:

updateShippingSummaryInformation(shipping, order)

updates the order shipping summary for an order shipment model

Parameters:
Name Type Description
shipping Object

the shipping (shipment model) model
order Object

the order model
Source:

updateSortOptions(response) → {undefined}

Update sort option URLs from Ajax response

Parameters:
Name Type Description
response string

Ajax response HTML code
Source:
Returns:
Type
undefined

updateStoresResults(data)

Renders the results of the search and updates the map

Parameters:
Name Type Description
data Object

Response from the server
Source:

updateTotals(totals)

updates the totals summary

Parameters:
Name Type Description
totals Array

the totals data
Source:

validateBasket(data)

Checks whether the basket is valid. if invalid displays error message and disables checkout button

Parameters:
Name Type Description
data Object

AJAX response from the server
Source:

validateForm(event) → {boolean}

Validate whole form. Requires this to be set to form object

Parameters:
Name Type Description
event jQuery.event

Event to be canceled if form is invalid.
Source:
Returns:
  • Flag to indicate if form is valid
Type
boolean

viewMultishipAddress(element)

Hide and show to appropriate elements to show the multi ship shipment cards in the view mode

Parameters:
Name Type Description
element jQuery

The shipping content
Source:

Type Definitions

OptionSelectionResponse

Type:
Properties:
Name Type Description
priceHtml string

Updated price HTML code
options Object

Updated Options

Properties
Name Type Description
id string

Option ID
values Array.<UpdatedOptionValue>

Option values
Source:

QuickViewHtml

Type:
Properties:
Name Type Description
body string

Main Quick View body
footer string

Quick View footer content
Source:

UpdatedOptionValue

Type:
Properties:
Name Type Description
id string

Option value ID for look up
url string

Updated option value selection URL
Source:

Infocenter Retirement: On June 30, 2023, the Infocenter was retired, and documentation currently hosted on the Infocenter will be published to Salesforce Help, Commerce Cloud Developer Center, and Salesforce B2C Commerce Developer Documentation Resources. For more information, see the release note.