{"version":3,"file":"default\\js\\productTileInclude.js","mappings":";;;;;;;;;;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB,gBAAgB,QAAQ;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,KAAK;AACL;AACA;AACA;;;;;;;;;;;AC5Ia;AACb;AACA;AACA,uBAAuB,mBAAO,CAAC,oHAAoB;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;;;;;;;;;;;AClCa;AACb;AACA;AACA;AACA;AACA,MAAM;AACN;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;;;;;;;UCZA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;;;;;ACtBa;AACb;AACA,qBAAqB,mBAAO,CAAC,uFAAW;AACxC;AACA;AACA,mBAAmB,mBAAO,CAAC,sHAA2B;AACtD,CAAC","sources":["webpack://sfra-startup-kit/./cartridges/app_purina_core/cartridge/client/default/js/productList/ProductTileClass.js","webpack://sfra-startup-kit/./cartridges/app_purina_core/cartridge/client/default/js/productList/productTile.js","webpack://sfra-startup-kit/./cartridges/app_storefront_base/cartridge/client/default/js/util.js","webpack://sfra-startup-kit/webpack/bootstrap","webpack://sfra-startup-kit/./cartridges/app_purina_core/cartridge/client/default/js/productTileInclude.js"],"sourcesContent":["\"use strict\";\r\n\r\n/* globals $ */\r\n\r\nfunction ProductTileClass(element) {\r\n    // prepare dom\r\n    this.element = element;\r\n    // add initialized class for passed element\r\n    this.element.classList.add(\"product-tile-initialized\");\r\n\r\n    this.sizeButtons = this.element.querySelectorAll(\".select-size\") || [];\r\n    this.productImage = this.element.querySelector(\".image-container\");\r\n    this.productTitle = this.element.querySelector(\".pdp-link a.link\");\r\n    this.productPrice = this.element.querySelector(\".price\");\r\n\r\n    // prepare events\r\n    /**\r\n    * Gets the selected size from the product variation attributes\r\n    * @param {Object} data - product data\r\n    * @returns {Object} - the selected size object\r\n    */\r\n    this.getSelectedSize = function (data) {\r\n        return (data?.product?.variationAttributes || [])\r\n            .find(attribute => attribute.attributeId === \"size\")\r\n            ?.values.find(value => value.selected) || {};\r\n    };\r\n    /**\r\n    * Updates the product image with the selected size and url\r\n    * @param {Object} selectedSize - the selected size object\r\n    * @param {string} url - the url to the product page\r\n    */\r\n    this.updateProductImage = function (selectedSize, url, data) {\r\n        let linkElement = this.productImage?.querySelector(\"a\");\r\n        let imageElement = linkElement?.querySelector(\"img\");\r\n        let imageData = selectedSize?.images?.medium?.[0] || null;\r\n\r\n        if (imageElement && imageData) {\r\n            imageElement.title = imageData.title || imageElement.title || \"\";\r\n            imageElement.src = imageData.url || imageElement.src || \"\";\r\n            imageElement.alt = imageData.alt || imageElement.alt || \"\";\r\n        }\r\n\r\n        if (linkElement) {\r\n            linkElement.href = url || linkElement.href || \"\";\r\n        }\r\n        \r\n        // Checks if any of the values in the variationAttributes array are selectable\r\n        function isEmpty(value) {\r\n            return value === null || value === undefined || value === \"\" || (Array.isArray(value) && value.length === 0) || (typeof value === \"object\" && Object.keys(value).length === 0);\r\n        }\r\n        var productData = !isEmpty(data) && \"product\" in data && !isEmpty(data.product) ? data.product : null;\r\n        var variationAttribute = !isEmpty(productData) && \"variationAttributes\" in productData && !isEmpty(productData.variationAttributes[0]) ? productData.variationAttributes[0] : null;\r\n        var variationAttributeValues = !isEmpty(variationAttribute) && \"values\" in variationAttribute && !isEmpty(variationAttribute.values) ? variationAttribute.values : null;\r\n        var isProductInStock = productData && variationAttribute && variationAttributeValues && variationAttributeValues.some(variant => variant && variant.selectable);\r\n\r\n        // update the image container class\r\n        if (!isProductInStock) {\r\n            this.productImage.classList.toggle(\"out-of-stock\", !selectedSize.selectable);\r\n        }\r\n    };\r\n    /**\r\n    * Updates the product title with the given data\r\n    * @param {Object} data - the data object containing the product name\r\n    * @param {string} url - the url of the product page\r\n    */\r\n    this.updateProductTitle = function (data, url) {\r\n        if (this.productTitle) {\r\n            this.productTitle.href = url || this.productTitle.href;\r\n            this.productTitle.textContent = data?.product?.productName || this.productTitle.textContent;\r\n        }\r\n    };\r\n    /**\r\n    * Updates the product price on the page\r\n    * @param {Object} data - the data object containing the product price info\r\n    */\r\n    this.updateProductPrice = function (data) {\r\n        let updatePriceHtml = data?.product?.price?.html;\r\n        if (updatePriceHtml) {\r\n            let updatedPriceElement = document.createElement(\"div\");\r\n            updatedPriceElement.innerHTML = updatePriceHtml;\r\n            let priceElement = updatedPriceElement.querySelector(\".price\");\r\n\r\n            this.productPrice.innerHTML = priceElement.innerHTML;\r\n        }\r\n    };\r\n    /**\r\n    * Adds a class to the size buttons based on the selected size\r\n    * @param {Object} selectedSize - the selected size\r\n    */\r\n    this.addSelectedClass = function (selectedSize) {\r\n        this.sizeButtons.forEach(sizeButton => {\r\n            const isSelected = selectedSize && selectedSize.value === sizeButton.dataset.attrValue;\r\n            sizeButton.classList.toggle(\"selected\", isSelected);\r\n        });\r\n    };\r\n    /**\r\n    * Handles the successful response from the getVariation request\r\n    * @param {Object} data - the response data from the getVariation request\r\n    */\r\n    this.onGetVariationSuccess = function (url, data) {\r\n        let selectedSize = this.getSelectedSize(data);\r\n        this.updateProductImage(selectedSize, url, data);\r\n        this.updateProductTitle(data, url);\r\n        this.updateProductPrice(data);\r\n        this.addSelectedClass(selectedSize);\r\n    };\r\n    /**\r\n    * Retrieves the variation data from the given URL\r\n    * @param {string} url - The URL to retrieve the variation data from\r\n    * @param {string} pdpUrl - The URL to the product page\r\n    */\r\n    this.getVariationData = function (url, pdpUrl) {\r\n        if (url) {\r\n            $.ajax({\r\n                url: url,\r\n                method: \"GET\",\r\n                success: this.onGetVariationSuccess.bind(this, pdpUrl)\r\n            });\r\n        }\r\n    };\r\n\r\n    // bind events to each size button\r\n    this.sizeButtons.forEach(function (sizebutton) {\r\n        let that = this;\r\n        sizebutton.addEventListener(\"click\", function (e) {\r\n            e.preventDefault();\r\n\r\n            // do not deselect the selected size\r\n            if (sizebutton.classList.contains(\"selected\")) {\r\n                return;\r\n            }\r\n\r\n            // get the variation data\r\n            // and update the product image, title and price\r\n            // and add the \"selected\" class to the selected size button\r\n            that.getVariationData(sizebutton.getAttribute(\"value\"), sizebutton.dataset.pdpUrl);\r\n        });\r\n    }, this);\r\n}\r\n\r\nmodule.exports = ProductTileClass;\r\n","\"use strict\";\r\n\r\n/* globals $ */\r\nvar ProductTileClass = require(\"./ProductTileClass\");\r\nvar cache = {};\r\n\r\n/**\r\n* Initializes the DOM elements\r\n*/\r\nfunction initializeDom() {\r\n    cache.$document = $(document);\r\n    cache.$productTiles = cache.$document.find(\".product-tile, .product-tile-pd\");\r\n}\r\n\r\n/**\r\n* Initializes the events for the product tiles\r\n*/\r\nfunction initializeEvents() {\r\n    cache.$productTiles\r\n        .not(\".product-tile-initialized\")\r\n        .toArray()\r\n        .forEach(function (productTile) {\r\n            new ProductTileClass(productTile);\r\n        });\r\n}\r\n\r\nmodule.exports = {\r\n    init: function () {\r\n        setTimeout(function () {\r\n            initializeDom();\r\n            initializeEvents();\r\n        }, 1000);\r\n\r\n    }\r\n};\r\n","'use strict';\r\n\r\nmodule.exports = function (include) {\r\n    if (typeof include === 'function') {\r\n        include();\r\n    } else if (typeof include === 'object') {\r\n        Object.keys(include).forEach(function (key) {\r\n            if (typeof include[key] === 'function') {\r\n                include[key]();\r\n            }\r\n        });\r\n    }\r\n};\r\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","\"use strict\";\r\n\r\nvar processInclude = require(\"base/util\");\r\n\r\n$(document).ready(function () {\r\n    processInclude(require(\"./productList/productTile\"));\r\n});\r\n"],"names":[],"sourceRoot":""}