"Page is loaded" events

These events notify you when the page switch is triggered, or the page gets partially or fully loaded:

Ecwid.OnPageSwitch

This method allows tracking and preventing page switches on the storefront. It is triggered when a user is about to switch a page (a new page is not yet loaded).

The method works synchronously and contains the page argument in its callback function. Use it to identify the page where users go and prevent page loading by returning a false value.

Code example:

Ecwid.OnPageSwitch.add(function(page) {
    if (page.type === "PRODUCT") {
        window.location.href = "index.html?type=product&id=" + page.productId
        return false
    } else if (page.type === "CATEGORY") {
        window.location.href = "index.html?type=category&id=" + page.categoryId
        return false
    }
})

Ecwid.OnPageLoad

This event triggers instantly when the page DOM is loaded. This method doesn't wait for the Ecwid product browser and its contents to fully load and therefore doesn't return any details about the opened page.

Code example:

Ecwid.OnPageLoad.add(function() {
    console.log("Page DOM has just loaded");
});

Ecwid.OnPageLoaded

This method allows you to track the full page load – a moment when both DOM and product browser are loaded and ready for customization.

It contains a callback function with page argument containing information about a loaded page.

Code examples:

Product page details

Ecwid.OnPageLoaded.add(function(page){
  console.log(JSON.stringify(page));
});

// prints
// 
// {
//   "type":"PRODUCT",
//   "categoryId":0,
//   "hasPrevious":false,
//   "mainCategoryId":0,
//   "name":"Desk Black 101x50x76.5 cm Engineered Wood",
//   "nameTranslated":{
//     "cs":"",
//     "en":"Desk Black 101x50x76.5 cm Engineered Wood"
//   },
//   "productId":561386461
// }

Search page details

Ecwid.OnPageLoaded.add(function(page){
  console.log(JSON.stringify(page));
});

// prints
// 
// {
//     "type": "SEARCH",
//     "filterParams": {
//         "attributes": {
//             "UPC": ["1003"],
//             "Brand": ["LEGO-LEGO"]
//         },
//         "categories": [172786255],
//         "includeProductsFromSubcategories": true,
//         "options": {
//             "Mark": ["I"]
//         }
//     },
//     "hasPrevious": true,
//     "offset": 0,
//     "sort": "relevance"
// }
```

Cart page details

Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == "CART") {
      console.log(page);
  }
});

// prints
//
// {
//     "type": "CART",
//     "hasPrevious": false
// }

page argument fields:

Field	Type	Description
type	string	Storefront page type. One of: SIGN_IN - Sign-in page for customers. ACCOUNT_SETTINGS - Main customer account page. ORDERS - Page where customers can see their order history. ACCOUNT_SUBSCRIPTION - Page where customers can see their subscription products. ADDRESS_BOOK - Page where customers can see their saved addresses page. FAVORITES - Page where customers can see products added to favorites. RESET_PASSWORD - Page where customers can reset their account password. CATEGORY - Any category page. PRODUCT - Any product page. SEARCH - Products search page. CART - First page of the checkout where customers can enter their email. CHECKOUT_ADDRESS - Checkout page where customers enter their address for delivery. CHECKOUT_DELIVERY - Checkout page where customers choose the shipping/pickup option. CHECKOUT_ADDRESS_BOOK - Checkout page where customers select one of the saved addresses. CHECKOUT_PAYMENT_DETAILS - Checkout page where customers select payment option ORDER_CONFIRMATION - Checkout page customers see after placing an order. Sometimes referred to as the "Thank you for order" page. ORDER_FAILURE - Page customers see in case of failed payment. DOWNLOAD_ERROR - Page customers see in case of failed file download (for digital products only).
name	string	Name of the currently opened category or product. Available for CATEGORY and PRODUCT page types.
nameTranslated	object translations	Available translations for the page name.
keywords	string	Keywords for searching orders on the customer account page or products on the product search page. Available for ORDERS, and SEARCH page types.
offset	number	Offset for the current list of orders or products on the page starting from 0. Available for SEARCH, and CATEGORY page types.
productId	number	Internal product ID. Available for PRODUCT page type.
variationId	number	Internal product variation ID. Available for PRODUCT page type.
categoryId	number	Internal category ID. Is 0 for the main store category. Available for CATEGORY page type.
mainCategoryId	number	Default category ID for the product. Available for PRODUCT page type.
orderId	string	ID of a placed order. Available for ORDER_CONFIRMATION page type.
sort	string	Sorting order for products on the page. One of: normal - Default product sorting from store settings. relevance - Most relevant to search criteria products first. addedTimeDesc - New products first. priceAsc - Sort products by price (from low to high). priceDesc - Sort products by price (from high to low). nameAsc - Sort products by name (from A to Z). nameDesc - Sort products by price (from Z to ). Available for SEARCH and CATEGORY page types.
errorType	string	Type of error when digital product download has failed. One of: expired - Download link expired. invalid - Download link is incorrect limit - Number of maximum allowed downloads for the link has been reached. Available for DOWNLOAD_ERROR page type.
key	string	Internal product file ID. Available for DOWNLOAD_ERROR page type.
filterParams	object filterParams	Filter parameters used in a product search. Available for SEARCH and CATEGORY page types.

filterParams

Field	Type	Description
attributes	object attributes	List of selected attributes and their values for product search. Format: object where each key is the attribute's name (string) and value is the list of selected values for that attribute (array of strings). Check the code example above.
options	object options	List of selected product options and their values for product search. Format: object where each key is the option's name (string) and value is the list of selected values for that option (array of strings). Check the code example above.
categories	array of numbers	List of selected category IDs for product search. Check the code example above.
includeProductsFromSubcategories	boolean	Defines if the search includes products from subcategories of selected categories. One of: true - Search includes subcategories. false - Search doesn't include subcategories.
keyword	string	Currently applied keyword for searching products on the category or product search pages. Available for CATEGORY, and SEARCH page types.
inventory	number	Defines if the search includes only products "in stock" (with stock more than 0). One of: instock - Search includes only "in stock" products. "" - Search also includes "out of stock" products.
hasPrevious	number	Defines if a customer had already visited other store pages before this one. One of: true - This is not an entry page. false This is an entry page for the customer.

translations

Object with text field translations in the "lang": "text" format, where the "lang" is an ISO 639-1 language code. For example:

{
    "en": "Sample text",
    "nl": "Voorbeeldtekst"
}

Translations are available for all active store languages. Only the default language translations are returned if no other translations are provided for the field. Find active store languages with GET /profile request > languages > enabledLanguages.