Information about products in JavaScript

Did you know that in JavaScript you can find information about all products that page contains? Try to type getShoptetProductsList() to browser’s console. Key of object is priceId of product, you can find it within each product as hidden input.

Following examples works on https://classic.shoptet.cz/, but all things described in this article works in all Shoptet templates.

Get information about product from category

// Identify product somehow - for example using data-micro-identifier,
// which is GUID of product
var guid = '9512fff7-302f-11e9-a065-0cc47a6c92bc';
var product = document.querySelector('[data-micro-identifier="' + guid + '"]');
// Get pricelist id of product..
var priceId = product.querySelector('input[name="priceId"]').value;
var productsList = getShoptetProductsList();
// Voila! You've got desirable information about product
console.log(productsList[priceId]);

Get information about products in cart

Assume you’ve got product with id 293 (https://classic.shoptet.cz/sport-a-relax/reebok-nano/). Add this product to cart and type getShoptetDataLayer('cart') – you’ll get:

[0: {code: "293", quantity: 1, priceWithVat: 1309}]

You can get more information about this product this way:

// Get "cart" key from dataLayer
var cart = getShoptetDataLayer('cart');
// Get id of product, in this example id of first item in cart
var productId = cart[0]['code'];

// Iterate over all products and match desired product..
var productsList = getShoptetProductsList();
for (product in productsList) {
    if (productsList.hasOwnProperty(product)) {
        var currentProduct = productsList[product];
        if (currentProduct.content_ids[0] === productId) {
            // Hurray, you've got it
            console.log(currentProduct);
            // Use break to avoid unnecessary iteration
            break;
        }
    }
}

Post navigation