SFRA Server-side Javascript - Global 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: