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: