\").append($.parseHTML(html));\n\n var header = $html.find(\".modal-header\");\n var image = $html.find(\".modal-image\");\n var body = $html.find(\".product-wrapper\");\n\n return { header: header, image: image, body: body };\n}\n\n/**\n * replaces the content in the modal window on for the selected product variation.\n * @param {string} selectedValueUrl - url to be used to retrieve a new product model\n */\nfunction fillModalElement(selectedValueUrl) {\n $(\"#workroomDetailsModal .modal-body\").spinner().start();\n $.ajax({\n url: selectedValueUrl,\n method: \"GET\",\n success: function (data) {\n var parsedHtml = parseHtml(data);\n\n $(\"#workroomDetailsModal .modal-body, #workroomDetailsModal .modal-header\").empty();\n $(\"#workroomDetailsModal .modal-header\").replaceWith(parsedHtml.header);\n $(\"#workroomDetailsModal .modal-image\").replaceWith(parsedHtml.image);\n $(\"#workroomDetailsModal .modal-body\").html(parsedHtml.body);\n $(\"#workroomDetailsModal\").modal(\"show\");\n\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n}\n\n/**\n * Generates the modal window on the first call.\n *\n */\nfunction getModalHtmlElement() {\n if ($(\"#workroomDetailsModal\").length !== 0) {\n $(\"#workroomDetailsModal\").remove();\n }\n var htmlString = \"\"\n + \"
\"\n + \"
\"\n + \"
\"\n + \"\"\n + \"
\"\n + \"\"\n + \"
\"\n + \"
\"\n + \"
\"\n + \"
\"\n + \"
\";\n $(\"body\").append(htmlString);\n}\n\nmodule.exports = {\n parseHtml: parseHtml,\n fillModalElement: fillModalElement,\n getModalHtmlElement: getModalHtmlElement\n};\n","var baseModule = require(\"bassett/product/base\");\nvar workroom = require(\"bassett/product/workroom\");\nvar workroomHelpers = require(\"bassett/product/workroomHelpers\");\n\nvar SELECTORS = {\n CUSTOMIZER_META: \".pdp-customizer-meta\",\n CUSTOMIZER_CONTAINER: \"#pdp-customizer-container\",\n CUSTOMIZER_PREVIEW: \"#pdp-customizer-preview\",\n MAIN_IMAGES_CONTAINER: \".pdp-images-main-container\",\n CUSTOMIZER_PREVIEW_CONTAINER: \".pdp-images-customizer-preview-container\",\n ADD_TO_CART_BUTTON: \"button.add-to-cart-drive-customizer\",\n CHANGE_PRODUCT_PREVIEW_BUTTON: \".pdp-images-change-preview-container\",\n CUSTOMIZER_SLIDE: \".slide-inside--customizer\"\n};\n\n/**\n * Updates wishlist icon\n * as every time customizer attributes are changed new recipe should be generated and may or may not be in the wishlist\n * @param {jQuery} element - element based on which icon should be updated\n * @param {Object} data - the data returned from the AJAX call\n */\nfunction updateWishlistIcon(element, data) {\n var iconEmpty = element.closest(\".product-detail .product-main-region\").find(\".wishlist-add\");\n var iconFilled = element.closest(\".product-detail .product-main-region\").find(\".wishlist-remove\");\n if (iconEmpty && iconEmpty.length) {\n iconEmpty.toggleClass(\"d-none\", data.isInlist);\n }\n if (iconFilled && iconFilled.length) {\n iconEmpty.data(\"recipeId\", \"\");\n iconFilled.toggleClass(\"d-none\", !data.isInlist);\n }\n}\n\n/**\n * display message on page based on add to list response data\n * @param {string} data - data returned from the server's ajax call\n * @param {string} listName - list name to handle message for\n * @param {Object} button - button that was clicked to add a product to the list (optional)\n * @param {Object} iconEmpty - icon that was clicked to add a product to the wishlist (optional)\n * @param {Object} iconFilled - icon that was clicked to remove a product from the wishlist (optional)\n */\nfunction displayMessage(data, listName, button, iconEmpty, iconFilled) {\n $.spinner().stop();\n var status;\n if (data.success) {\n status = \"alert-success\";\n if (iconEmpty && iconEmpty.length) {\n iconEmpty.toggleClass(\"d-none\");\n }\n if (iconFilled && iconFilled.length) {\n iconFilled.toggleClass(\"d-none\");\n }\n } else {\n status = \"alert-danger\";\n }\n\n if ($(\".add-to-\" + listName + \"-messages\").length === 0) {\n $(\"body\").append(\"
\");\n }\n $(\".add-to-\" + listName + \"-messages\").append(\n \"
\" + data.msg + \"
\"\n );\n\n setTimeout(function () {\n $(\".add-to-\" + listName + \"-messages\").remove();\n if (button && button.length) {\n button.removeAttr(\"disabled\");\n }\n }, 5000);\n}\n\n/**\n * Returns widget's meta object with get method\n */\nfunction getWidgetMeta() {\n var metaContainer = $(SELECTORS.CUSTOMIZER_META);\n return {\n get: function (attrName) {\n return metaContainer.data(attrName);\n },\n set: function (attrName, attrValue) {\n metaContainer.data(attrName, attrValue);\n }\n };\n}\n\n/**\n * Updates prices and promos info on page based on response data\n * @param {Object} response - products response\n */\nfunction updatePricesAndPromotions(response) {\n var salePriceTile = response.driceCustomizerPrice.sales.pdpTileFormat;\n var salePriceDecimal = response.driceCustomizerPrice.sales.decimalPrice;\n var listPriceTile = response.driceCustomizerPrice.list.pdpTileFormat;\n var listPriceDecimal = response.driceCustomizerPrice.list.decimalPrice;\n\n $(\".prices\").each(function () {\n $(this).find(\".price\").find(\".sales\").find(\".synchrony-price-widget\").text(salePriceDecimal);\n $(this).find(\".price\").find(\".sales\").find(\".value\").text(salePriceTile).attr(\"content\", salePriceDecimal);\n $(this).find(\".price\").find(\".list\").find(\".synchrony-price-widget\").text(listPriceDecimal);\n $(this).find(\".price\").find(\".list\").find(\".value\").text(listPriceTile).attr(\"content\", listPriceDecimal);\n\n var salesPriceFloat = parseFloat(salePriceDecimal);\n var listPriceFloat = parseFloat(listPriceDecimal);\n if (salesPriceFloat < listPriceFloat) {\n $(this).find(\".list\").removeClass(\"d-none\");\n } else {\n $(this).find(\".list\").addClass(\"d-none\");\n }\n });\n baseModule.methods.calculateSavings();\n var selectedQty = 1;\n if (response.quantity) {\n selectedQty = response.quantity;\n } else if (response.products && response.products.length > 0 && response.products[0].quantities) {\n response.products[0].quantities.map(function (quantity) { // eslint-disable-line array-callback-return\n if (quantity.selected) {\n selectedQty = quantity.value;\n }\n });\n }\n var priceSelector = $(\".cart-and-ipay .prices .price .value\");\n var price = Math.round($(priceSelector[0]).text().replace(/[^0-9.-]+/g, \"\"));\n var finalPrice = price * selectedQty;\n\n priceSelector.text(\"$\" + finalPrice.toFixed(0).replace(/(\\d)(?=(\\d{3})+(?:\\.\\d+)?$)/g, \"$1,\"));\n}\n\n/**\n * Updates availability and add to cart button on page based on response data\n * @param {Object} response - products response\n * @param {jQuery} $productContainer - product container element\n */\nfunction updateAvailabilityAndAddToCart(response, $productContainer) {\n var allAvailable = response.products.every(function (product) {\n return product.available;\n });\n var allReadyToOrder = response.products.every(function (product) {\n return product.readyToOrder;\n });\n var disabled = (!allAvailable || !allReadyToOrder);\n\n $(\"div.availability\", $productContainer)\n .data(\"ready-to-order\", allReadyToOrder)\n .data(\"available\", allAvailable);\n\n $(SELECTORS.ADD_TO_CART_BUTTON).each(function () {\n $(this).prop(\"disabled\", disabled);\n });\n\n if (disabled) {\n $(\".prices-add-to-cart-actions\", $productContainer).addClass(\"disabled-actions\");\n } else {\n $(\".prices-add-to-cart-actions\", $productContainer).removeClass(\"disabled-actions\");\n }\n}\n\n/**\n * Updates specifications based on response data\n * @param {Object} response - products response\n * @param {jQuery} $productContainer - product container element\n */\nfunction updateSpecifications(response, $productContainer) {\n if ((!response.products || response.products.length !== 1) && !response.bundleProduct) {\n return;\n }\n\n var product = response.products && response.products.length === 1 ? response.products[0] : response.bundleProduct;\n\n var responseObject = {\n product: product,\n $productContainer: $productContainer\n };\n\n $(\"body\").trigger(\"product:statusUpdate\", responseObject);\n}\n\n/**\n * Handles Change Sku Response\n * @param {Object} response - products response\n * @param {jQuery} $productContainer - product container element\n * @param {Boolean} isVirtualSku - determines if carousel should switch to 360 view\n * @param {Boolean} preventGalleryRefresh - drive flag for stopping gallery refresh\n */\nfunction handleChangeSkuResponse(response, $productContainer, isVirtualSku, preventGalleryRefresh) {\n updatePricesAndPromotions(response);\n updateAvailabilityAndAddToCart(response, $productContainer);\n updateSpecifications(response, $productContainer);\n updateWishlistIcon($(SELECTORS.CUSTOMIZER_CONTAINER), response);\n baseModule.methods.updateProductImages(response, $productContainer, true, isVirtualSku, preventGalleryRefresh);\n baseModule.methods.updateShippingMessage(response);\n var data = {};\n data.product = response.products[0];\n data.driveCustomizerPrice = response.driceCustomizerPrice;\n $(\"body\").trigger(\"product:afterAttributeSelect\", { data: data, container: $productContainer });\n}\n\n/**\n * Returns Quantity Selector\n * @returns {jQuery} quantity element\n */\nfunction getQuantitySelector() {\n return $(\".quantity-select\");\n}\n\n/**\n * Returns Quantity value\n * @returns {number} quantity\n */\nfunction getBaseQuantity() {\n var qtyElement = getQuantitySelector();\n var qty = qtyElement ? (qtyElement.val() || 1) : 1;\n return qty;\n}\n\n/**\n * Handles Change Sku Ajax\n * @param {string} url - url\n * @param {Object} requestData - requestData\n */\nfunction handleChangeSkuAjax(url, requestData) {\n if (!url || !requestData) {\n return;\n }\n\n var $savingsContainer = $(\".product-detail\").find(\".attributes .savings\");\n var isVirtualSku = requestData.isVirtualSku;\n var preventGalleryRefresh = requestData.preventGalleryRefresh;\n\n $.ajax({\n url: url,\n method: \"POST\",\n data: requestData,\n dataType: \"json\",\n success: function (responseData) {\n if (!responseData.error) {\n var displaySavingsMessage = responseData.displaySavingsMessage;\n $savingsContainer.data(\"savings-message\", displaySavingsMessage);\n handleChangeSkuResponse(responseData, $(\".product-detail\"), isVirtualSku, preventGalleryRefresh);\n $(\"body\").trigger(\"gtm:standartEvent\", {\n event: \"view_item\",\n data: JSON.parse(responseData.gtmItem)\n });\n var htmlAddToCart = \"
\";\n $(\".gtm-add-to-cart-container\").empty().html(htmlAddToCart);\n var htmlAddToWishlist = \"
\";\n $(\".gtm-add-to-wishlist-container\").empty().html(htmlAddToWishlist);\n $(\"body\").trigger(\"pixel:updateAddToCartSku\", responseData);\n $(\"body\").trigger(\"pinterest:updateAddToCartData\", responseData);\n }\n },\n error: function () { }\n });\n}\n\n/**\n * Returns callback function for widget initialization options\n */\nfunction getOnSelectedSkuChangedCallback() {\n var meta = getWidgetMeta();\n var loaded = false;\n\n var onSelectedSkuChangedFunc = function (data) {\n // onSelectedSkuChanged is called on widget load but there is no need to update product preview\n if (!loaded) {\n loaded = true;\n } else {\n $(SELECTORS.CUSTOMIZER_SLIDE).attr(\"data-loaded\", true);\n }\n\n var url = meta.get(\"urlProductDetails\");\n\n var requestData = {\n quantity: getBaseQuantity()\n };\n Object.keys(data).forEach(function (key) {\n if (typeof data[key] === \"object\") {\n requestData[key] = JSON.stringify(data[key]);\n } else {\n requestData[key] = data[key];\n }\n });\n\n meta.set(\"skuData\", JSON.stringify(requestData));\n handleChangeSkuAjax(url, requestData);\n };\n\n return onSelectedSkuChangedFunc;\n}\n\n/**\n * Returns callback function for widget initialization options\n */\nfunction getOnOrderSwatchCallback() {\n var onOrderSwatchFunc = function (id, type, sku) {\n var addToCartUrl = $(\".add-to-cart-url\").val();\n var qty = getBaseQuantity();\n\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: \"POST\",\n data: {\n quantity: qty,\n pid: sku\n },\n success: function (data) {\n baseModule.methods.handlePostCartAdd(data);\n $(\"body\").trigger(\"product:afterAddToCart\", data);\n $.spinner().stop();\n baseModule.miniCartReportingUrl(data.reportingURL);\n },\n error: function (err) {\n baseModule.methods.handlePostCartAdd(err.responseJSON);\n $.spinner().stop();\n }\n });\n } else {\n $.spinner().stop();\n }\n };\n return onOrderSwatchFunc;\n}\n\n/**\n * Returns callback function for widget initialization options\n */\nfunction getOnFavoriteFabricCallback() {\n var meta = getWidgetMeta();\n var onFavoriteFabricFunc = function (sku) {\n var url = meta.get(\"saveFabricUrl\");\n $.spinner().start();\n $.ajax({\n url: url,\n type: \"post\",\n data: {\n pid: sku\n },\n dataType: \"json\",\n success: function (response) {\n displayMessage(response, \"wishlist\");\n },\n error: function (err) {\n displayMessage(err, \"wishlist\");\n }\n });\n };\n return onFavoriteFabricFunc;\n}\n\n/**\n * Returns callback function for widget initialization options\n */\nfunction getOnShowDetailsCallback() {\n var onShowDetailsFunc = function (driveData) {\n if (driveData.sku) {\n var url = $(\"#pdp-customizer-container\").data(\"url\");\n if (url.indexOf(\"?\") > -1) {\n url += \"&pid=\" + driveData.sku;\n } else {\n url += \"?pid=\" + driveData.sku;\n }\n workroomHelpers.getModalHtmlElement();\n $(\"#workroomDetailsModal .modal-body\").spinner().start();\n $.ajax({\n url: url,\n method: \"GET\",\n success: function (dwData) {\n var parsedHtml = workroomHelpers.parseHtml(dwData);\n $(\"#workroomDetailsModal .modal-body, #workroomDetailsModal .modal-header\").empty();\n $(\"#workroomDetailsModal .modal-header\").replaceWith(parsedHtml.header);\n $(\"#workroomDetailsModal .modal-image\").replaceWith(parsedHtml.image);\n $(\"#workroomDetailsModal .modal-body\").html(parsedHtml.body);\n if (driveData.priceDifferenceFormatted) {\n $(\"#workroomDetailsModal .product-info\").append(`
Price difference: ${driveData.priceDifferenceFormatted}
`);\n }\n $(\"#workroomDetailsModal\").modal(\"show\");\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n };\n return onShowDetailsFunc;\n}\n\n/**\n * Returns widget's options object for widget initialization\n */\nfunction getWidgetOptions() {\n var meta = getWidgetMeta();\n\n return {\n apiKey: meta.get(\"apiKey\"),\n products: meta.get(\"product\"),\n site: meta.get(\"site\"),\n priceType: meta.get(\"priceType\"),\n recipe: meta.get(\"editedRecipe\"),\n webOnly: meta.get(\"webOnly\"),\n disableCaching: meta.get(\"disableCaching\"),\n container: document.querySelector(SELECTORS.CUSTOMIZER_CONTAINER),\n previewContainer: document.querySelector(SELECTORS.CUSTOMIZER_PREVIEW),\n onSelectedSkuChanged: getOnSelectedSkuChangedCallback(),\n onOrderSwatch: getOnOrderSwatchCallback(),\n onFavoriteFabric: getOnFavoriteFabricCallback(),\n onShowDetails: getOnShowDetailsCallback()\n };\n}\n\n/**\n * Handles recipe generation and returns promise object\n * @param {Object} customizerInstance - customizer instance\n * @returns {Promise} promise object\n */\nfunction getRecipe(customizerInstance) {\n return customizerInstance.addToCart();\n}\n\n/**\n * Adds recipe to cart and handles server response\n * @param {Object} recipeObj - customizer instance\n */\nfunction addRecipeToCart(recipeObj) {\n var meta = getWidgetMeta();\n var addToCartUrl = meta.get(\"urlAddToCart\");\n var qty = getBaseQuantity();\n var pid = $(\".product-detail:not('.bundle-item')\").data(\"pid\");\n var editedRecipe = meta.get(\"editedRecipe\");\n\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: \"POST\",\n data: {\n recipe: JSON.stringify(recipeObj.recipe),\n selectedSku: JSON.stringify(recipeObj.selectedSku),\n quantity: qty,\n pid: pid,\n masterProductId: meta.get(\"masterProductId\"),\n editedRecipe: editedRecipe\n },\n success: function (data) {\n baseModule.methods.handlePostCartAdd(data);\n $(\"body\").trigger(\"product:afterAddToCart\", data);\n $.spinner().stop();\n baseModule.miniCartReportingUrl(data.reportingURL);\n },\n error: function (err) {\n baseModule.methods.handlePostCartAdd(err.responseJSON);\n $.spinner().stop();\n }\n });\n } else {\n $.spinner().stop();\n }\n}\n\n/**\n * Adds recipe to customer list and handles server response\n * @param {Object} recipeObj - customizer instance\n * @param {jQuery} $element - element that triggered add to list event\n */\nfunction addRecipeToList(recipeObj, $element) {\n var meta = getWidgetMeta();\n var listName;\n var url = meta.get(\"urlSaveRecipe\");\n var button = null;\n var iconEmpty = null;\n var iconFilled = null;\n var listType = $element.data(\"listType\") || 10;\n var pid = $element.closest(\".product-detail\").find(\".product-id\").html() || $element.data(\"pid\");\n var masterDriveProductID = $(\".pdp-customizer-meta\").data(\"master-product-id\");\n var isWishlist = (listType == 10);\n var removeRecipeId = \"\";\n\n if (isWishlist) {\n listName = \"wishlist\";\n iconEmpty = $element.closest(\".product-detail .product-main-region\").find(\".wishlist-add\");\n iconFilled = $element.closest(\".product-detail .product-main-region\").find(\".wishlist-remove\");\n } else {\n listName = \"saveForLaterList\";\n button = $element;\n }\n\n if ($element.hasClass(\"wishlist-remove\")) {\n url = meta.get(\"urlRemoveRecipe\");\n removeRecipeId = iconEmpty.data(\"recipeId\");\n }\n\n if (button && button.length) {\n button.attr(\"disabled\", true);\n }\n\n $.ajax({\n url: url,\n type: \"post\",\n dataType: \"json\",\n data: {\n recipe: JSON.stringify(recipeObj.recipe),\n selectedSku: JSON.stringify(recipeObj.selectedSku),\n type: listType,\n pid: pid,\n masterProductId: meta.get(\"masterProductId\"),\n editedRecipe: meta.get(\"editedRecipe\"),\n recipeId: removeRecipeId,\n bundleParentSKU: masterDriveProductID\n },\n success: function (data) {\n displayMessage(data, listName, button, iconEmpty, iconFilled);\n if (isWishlist && iconEmpty && iconEmpty.length && !removeRecipeId) {\n iconEmpty.data(\"recipeId\", recipeObj.recipe.id);\n }\n },\n error: function (err) {\n displayMessage(err, listName, button, iconEmpty, iconFilled);\n }\n });\n}\n\n/**\n * Handles print image generation and returns promise object\n * @param {Object} customizerInstance - customizer instance\n * @returns {Promise} promise object\n */\nfunction getImage(customizerInstance) {\n return customizerInstance.captureImage();\n}\n\n/**\n * Initialize page events when customizer instance is ready\n * @param {Object} customizerInstance - customizer instance\n */\nfunction initEvents(customizerInstance) {\n $(document).on(\"click\", SELECTORS.ADD_TO_CART_BUTTON, function () {\n $(\"body\").trigger(\"product:beforeAddToCart\", this);\n getRecipe(customizerInstance).then((recipe) => {\n addRecipeToCart(recipe);\n }, () => {\n $.spinner().stop();\n });\n });\n\n $(\"body\").on(\"product:drivePrint\", function () {\n $(\".cz__group-header[aria-expanded='false']\").addClass(\"print-expanded\").trigger(\"click\");\n if ($(\".slide-customizer\").length > 0) {\n getImage(customizerInstance).then(image => {\n $(\".pdp-images-print-container .product-slider-image\").attr(\"src\", image);\n setTimeout(window.print, 100);\n });\n } else {\n setTimeout(window.print, 100);\n }\n });\n\n window.onafterprint = function () {\n setTimeout(function () {\n $(\".print-expanded\").trigger(\"click\").removeClass(\"print-expanded\");\n }, 100);\n };\n\n // Save recipe to custom list (wishlist, save for later, etc)\n $(document).on(\"click\", \".add-to-wish-list-drive-customizer,.add-to-list-drive-customizer\", function (e) {\n e.preventDefault();\n var $element = $(this);\n\n if ($(this).hasClass(\"wishlist-add\")) {\n var gtmWishlistContainer = $(this).closest(\".product-detail\").find(\".gtm-add-to-wishlist-container\");\n var gtmAddToWishlistObj = gtmWishlistContainer.find(\".gtm-add-to-wishlist\").attr(\"data-add-to-wishlist\");\n $(\"body\").trigger(\"gtm:standartEvent\", {\n event: \"add_to_wishlist\",\n data: JSON.parse(gtmAddToWishlistObj)\n });\n }\n\n $.spinner().start();\n getRecipe(customizerInstance).then((recipe) => {\n addRecipeToList(recipe, $element);\n });\n });\n\n $(document).on(\"click\", \".btn-change-quantity-drive-customizer\", function (e) {\n e.preventDefault();\n\n var meta = getWidgetMeta();\n var $qtySelector = getQuantitySelector();\n var currentValue = parseInt($qtySelector.val(), 10);\n var maxValue = parseInt($qtySelector.data(\"max-qty\"), 10);\n var url = $qtySelector.data(\"url\");\n var newValue = +currentValue;\n if ($(this).hasClass(\"btn-increase-quantity\") && maxValue < 100 && maxValue > currentValue) {\n newValue += 1;\n }\n if ($(this).hasClass(\"btn-decrease-quantity\") && currentValue > 1) {\n newValue -= 1;\n }\n if ($(this).hasClass(\"btn-decrease-quantity\") && currentValue == 1) {\n return;\n }\n if (newValue == 1) {\n $(this).closest(\".product-detail\").find(\".btn-decrease-quantity\").addClass(\"disabled\");\n } else {\n $(this).closest(\".product-detail\").find(\".btn-decrease-quantity\").removeClass(\"disabled\");\n }\n $qtySelector.val(newValue);\n var storedSkuDataStr = meta.get(\"skuData\");\n\n if (storedSkuDataStr) {\n var storedSkuData = JSON.parse(storedSkuDataStr);\n var requestData = storedSkuData;\n requestData.quantity = newValue;\n handleChangeSkuAjax(url, requestData);\n }\n });\n\n $(document).on(\"click\", \".cz__image-option-custom-layout\", function () {\n var $pdpImageSlider = $(SELECTORS.MAIN_IMAGES_CONTAINER).find(\".primary-images-carousel .slick-slider\");\n var $customizerSlide = $(SELECTORS.CUSTOMIZER_SLIDE).closest(\".slick-slide\");\n $pdpImageSlider.slick(\"slickGoTo\", $customizerSlide.data(\"slickIndex\"));\n });\n}\n\n/**\n * Sets variant image on page load if the user is editing a recipe\n */\nfunction setImage() {\n var meta = getWidgetMeta();\n var recipeID = meta.get(\"editedRecipe\");\n\n if (recipeID) {\n $(\".pdp-images-change-preview-container\").find(\"button\").trigger(\"click\");\n }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", function initializeWidget() {\n if (window.CustomizerWidget) {\n var options = getWidgetOptions();\n\n var isPageDesignerPDP = $(\".product-detail-page\").length > 0;\n\n // Initialize drive commerce widget\n window.CustomizerWidget.createWidget(options)\n .then((customizerInstance) => {\n initEvents(customizerInstance);\n setImage();\n if (!isPageDesignerPDP) {\n // adds workroom modal listeners\n workroom.addToCart();\n workroom.addToMaterialList();\n workroom.removeFromMaterialList();\n }\n });\n }\n});\n","var base = require(\"./base\");\nvar workroomHelpers = require(\"./workroomHelpers\");\n\n/**\n * Retrieves url to use when adding a product to the cart\n *\n * @return {string} - The provided URL to use when adding a product to the cart\n */\nfunction getAddToCartUrl() {\n if ($(\".material-list-add-to-cart-url\").val()) {\n return $(\".material-list-add-to-cart-url\").val();\n }\n return $(\".add-to-cart-url\").val();\n}\n\n/**\n * Retrieves url to use when adding a product to the cart\n *\n * @param {Object} data - data object used to fill in dynamic portions of the html\n */\nfunction chooseBonusProducts(data) {\n $(\".modal-body\").spinner().start();\n\n if ($(\"#chooseBonusProductModal\").length !== 0) {\n $(\"#chooseBonusProductModal\").remove();\n }\n var bonusUrl;\n if (data.bonusChoiceRuleBased) {\n bonusUrl = data.showProductsUrlRuleBased;\n } else {\n bonusUrl = data.showProductsUrlListBased;\n }\n\n var htmlString = \"\"\n + \"
\"\n + \"
\"\n + \"
\"\n + \"\"\n + \"
\"\n + \"\"\n + \"
\"\n + \"
\"\n + \"
\"\n + \"
\";\n $(\"body\").append(htmlString);\n $(\".modal-body\").spinner().start();\n\n $.ajax({\n url: bonusUrl,\n method: \"GET\",\n dataType: \"json\",\n success: function (response) {\n var parsedHtml = workroomHelpers.parseHtml(response.renderedTemplate);\n $(\"#chooseBonusProductModal .modal-body\").empty();\n $(\"#chooseBonusProductModal .enter-message\").text(response.enterDialogMessage);\n $(\"#chooseBonusProductModal .modal-header .close .sr-only\").text(response.closeButtonText);\n $(\"#chooseBonusProductModal .modal-body\").html(parsedHtml.body);\n $(\"#chooseBonusProductModal\").modal(\"show\");\n $.spinner().stop();\n },\n error: function () {\n $.spinner().stop();\n }\n });\n}\n\n/**\n * Updates the Mini-Cart quantity value after the customer has pressed the 'Add to Cart' button\n * @param {string} response - ajax response from clicking the add to cart button\n */\nfunction handlePostCartAdd(response) {\n $(\".minicart\").trigger(\"count:update\", response);\n var messageType = response.error ? \"alert-danger\" : \"alert-success\";\n // show add to cart toast\n if (response.newBonusDiscountLineItem\n && Object.keys(response.newBonusDiscountLineItem).length !== 0) {\n chooseBonusProducts(response.newBonusDiscountLineItem);\n } else {\n if ($(\".add-to-cart-messages\").length === 0) {\n $(\"body\").append(\n \"
\"\n );\n }\n\n $(\".add-to-cart-messages\").append(\n \"
\"\n + response.message\n + \"
\"\n );\n\n setTimeout(function () {\n $(\".add-to-basket-alert\").remove();\n }, 5000);\n }\n}\n\n/**\n * toggles visibility of material list icons\n * @param {array} iconArray - the array of icon elements to be toggled\n */\nfunction toggleIcon(iconArray) {\n for (var i = 0; i < iconArray.length; i++) {\n $(iconArray[i]).toggleClass(\"d-none\");\n }\n}\n\n/**\n * Displays an error or success message\n * @param {string} data - data returned from the server's ajax call\n * @param {Object} iconEmpty - icon that was clicked to add a product to the list\n * @param {Object} iconFilled - icon that was clicked to remove a product from the list\n */\nfunction displayMessage(data) {\n $.spinner().stop();\n var status;\n if (data.success) {\n status = \"alert-success\";\n } else {\n status = \"alert-danger\";\n }\n\n if ($(\".add-to-material-list-messages\").length === 0) {\n $(\"body\").append(\n \"
\"\n );\n }\n $(\".add-to-material-list-messages\")\n .append(\"
\" + data.msg + \"
\");\n\n setTimeout(function () {\n $(\".add-to-material-list-messages\").remove();\n }, 5000);\n}\n\n/**\n * toggles the public / private status of the material list or material list item\n * @param {string} listID - the material list ID\n * @param {string} itemID - the material list item ID\n * @param {Object} callback - function to run if the ajax call returns with an\n * error so that the checkbox can be reset to it's original state\n */\nfunction updatePublicStatus(listID, itemID, callback) {\n var $publicMaterialListCheckbox = $(\"#isPublicMaterialList\");\n var url = $publicMaterialListCheckbox.data(\"url\");\n $.spinner().start();\n $.ajax({\n url: url,\n type: \"post\",\n dataType: \"json\",\n data: {\n listID: listID,\n itemID: itemID\n },\n success: function (data) {\n if (callback && !data.success) {\n callback();\n }\n displayMessage(data);\n if (data.success) {\n var isPublic = $publicMaterialListCheckbox.is(\":checked\");\n if (isPublic) {\n $publicMaterialListCheckbox.closest(\".material-list-card__footer\").find(\".ml-social-sharing\").removeClass(\"d-none\");\n } else {\n $publicMaterialListCheckbox.closest(\".material-list-card__footer\").find(\".ml-social-sharing\").addClass(\"d-none\");\n }\n }\n },\n error: function (err) {\n if (callback) {\n callback();\n }\n displayMessage(err);\n }\n });\n}\n\n/**\n * Removes material tile from saved material list page\n * @param {jQuery} $tileContainer - The element containing the material tile\n * @param {Boolean} isLastItem - (optional) Determines whether the list is now empty\n */\nfunction removeTileFromPage($tileContainer, isLastItem) {\n var newListLength = $(\".items-number__length\").length ? Number($(\".items-number__length\").text()) - 1 : $(\".material-list-product-tile-container\").length - 1;\n $tileContainer.fadeOut(300, function () {\n $tileContainer.remove();\n $(\".items-number__length\").text(newListLength);\n\n if (isLastItem) {\n $(\".empty__wrapper\").removeClass(\"d-none\");\n }\n });\n}\n\n/**\n * Adds or removes from the material list\n * @param {jQuery} $button - The add or remove button that was pressed\n */\nfunction updateMaterialList($button) {\n var $parent = $button.closest(\".modal-content\").length > 0 ? $button.closest(\".modal-content\") : $button.closest(\".material-list-buttons\");\n var url = $button.attr(\"href\");\n var pid = $button.data(\"pid\");\n\n var iconEmpty = [$parent.find(\".material-list--add\")];\n var iconFilled = [$parent.find(\".material-list--remove\")];\n\n if ($parent.hasClass(\"modal-content\")) {\n var $clpTile = $(\".material-list-buttons[data-pid='\" + pid + \"']\");\n iconEmpty.push($clpTile.find(\".material-list--add\"));\n iconFilled.push($clpTile.find(\".material-list--remove\"));\n }\n\n var type = \"get\";\n var data = {};\n if (!url || !pid) {\n return;\n }\n if (!$button.hasClass(\"material-list--remove\")) {\n data = {\n pid: pid\n };\n type = \"post\";\n } else {\n url += \"&pid=\" + pid;\n }\n\n var isLastItem = $(\".material-list-product__wrapper\").length === 1;\n\n $.spinner().start();\n\n $.ajax({\n url: url,\n type: type,\n dataType: \"json\",\n data: data,\n success: function (response) {\n displayMessage(response);\n if (response.success) {\n if (response.isAccountPage == true) {\n var $tileContainer = $(\".material-list-buttons[data-pid='\" + pid + \"']\").closest(\".material-list-product__wrapper\");\n var $dashboardTileContainer = $(\".material-list--remove.material-list-btn[data-pid='\" + pid + \"']\").closest(\".material-list-item__wrapper\");\n if ($tileContainer.length) {\n var tileContainerClass = $tileContainer.attr(\"class\");\n removeTileFromPage($tileContainer, isLastItem);\n if (response.nextItemTile) {\n var $tileCol = $(\"
\").addClass(tileContainerClass).html(response.nextItemTile);\n $(\".material-list-account-card .row\").append($tileCol);\n }\n if (response.removeLoadMore) {\n $(\".material-list-account-card .more-ml-items\").remove();\n }\n }\n if ($dashboardTileContainer.length) {\n removeTileFromPage($dashboardTileContainer, isLastItem);\n if (!isLastItem) {\n window.location.reload();\n }\n }\n } else {\n toggleIcon(iconEmpty);\n toggleIcon(iconFilled);\n }\n }\n },\n error: function (err) {\n displayMessage(err);\n }\n });\n}\n\n/**\n * renders the list up to a given page number\n * @param {number} pageNumber - current page number\n * @param {boolean} spinner - if the spinner has already started\n * @param {string} focusElementSelector - selector of the element to focus on\n */\nfunction renderNewPageOfItems(pageNumber, spinner, focusElementSelector) {\n var publicView = $(\".materialItemCardsData\").data(\"public-view\");\n var listUUID = $(\".materialItemCardsData\").data(\"uuid\");\n var url = $(\".materialItemCardsData\").data(\"href\");\n if (spinner) {\n $.spinner().start();\n }\n var scrollPosition = document.documentElement.scrollTop;\n var newPageNumber = pageNumber;\n $.ajax({\n url: url,\n method: \"get\",\n data: {\n pageNumber: ++newPageNumber,\n publicView: publicView,\n id: listUUID\n }\n }).done(function (data) {\n $(\".materialItemCards\").empty();\n $(\"body .materialItemCards\").append(data);\n\n if (focusElementSelector) {\n $(focusElementSelector).focus();\n } else {\n document.documentElement.scrollTop = scrollPosition;\n }\n }).fail(function () {\n $(\".more-ml-items\").remove();\n });\n $.spinner().stop();\n}\n\nfunction removeWorkroomItemOnDashbord(url) {\n if (url) {\n $.spinner().start();\n $.ajax({\n url: url,\n type: \"get\",\n dataType: \"json\",\n data: {},\n success: function () {\n window.location.reload();\n },\n error: function (err) {\n displayMessage(err);\n }\n });\n }\n}\n\nmodule.exports = {\n addToCart: function () {\n $(document).on(\"click\", \"button.add-to-cart--workroom\", function () {\n var addToCartUrl;\n var removeUrl;\n\n $(\"body\").trigger(\"product:beforeAddToCart\", this);\n\n addToCartUrl = getAddToCartUrl();\n\n var pid = $(this).attr(\"data-pid\");\n\n var form = {\n pid: pid,\n quantity: 1\n };\n\n var $cartButton = $(this);\n var isMaterialListLanding = $cartButton.closest(\".material-list-landing\").length > 0;\n var isLastItem = $(\".material-list-product-tile-container\").length === 1;\n\n removeUrl = $(this).data(\"removeurl\");\n\n $(this).trigger(\"updateAddToCartFormData\", form);\n if (addToCartUrl) {\n $.ajax({\n url: addToCartUrl,\n method: \"POST\",\n data: form,\n success: function (data) {\n handlePostCartAdd(data);\n $(\"body\").trigger(\"product:afterAddToCart\", data);\n if ($(\".materialList.card.account-card\").length) {\n removeWorkroomItemOnDashbord(removeUrl);\n };\n $.spinner().stop();\n base.miniCartReportingUrl(data.reportingURL);\n if (isMaterialListLanding) {\n var $productWrapper = $cartButton.closest(\".material-list-product-tile-container\");\n removeTileFromPage($productWrapper, isLastItem);\n }\n },\n error: function () {\n $.spinner().stop();\n }\n });\n }\n });\n },\n\n addToMaterialList: function () {\n $(\"body\").on(\"click\", \".material-list--add\", function (e) {\n e.preventDefault();\n updateMaterialList($(this));\n });\n },\n\n removeFromMaterialList: function () {\n $(\"body\").on(\"click\", \".material-list--remove\", function (e) {\n e.preventDefault();\n var $parent = $(this).closest(\".modal-content\").length > 0 ? $(this).closest(\".modal-content\") : $(this).closest(\".material-list-buttons\");\n var dataParent = $parent.hasClass(\"modal-content\") ? \".modal-content\" : \".material-list-buttons\";\n var pid = $(this).data(\"pid\");\n $(\".remove-material-modal .material-list--confirm-removal\").data(\"pid\", pid);\n $(\".remove-material-modal .material-list--confirm-removal\").data(\"parent\", dataParent);\n $(\".remove-material-modal .remove-material-modal__specs__sku\").text(pid);\n $(\".remove-material-modal .remove-material-modal__specs__name\").text($(this).data(\"name\"));\n });\n\n $(\"body\").on(\"click\", \".material-list--confirm-removal\", function (e) {\n e.preventDefault();\n var pid = $(this).data(\"pid\");\n var parent = $(this).data(\"parent\");\n var $button = parent === \".modal-content\" ? $(parent).find(\".material-list--remove\") : $(parent + \"[data-pid='\" + pid + \"']\").find(\".material-list--remove\");\n $(\"#removeMaterialConfirmationModal\").modal(\"hide\");\n updateMaterialList($button);\n });\n },\n\n showDetailsModal: function () {\n $(\"body\").on(\"click\", \".material-details-modal-button\", function (e) {\n e.preventDefault();\n var selectedValueUrl = $(this).attr(\"data-url\");\n workroomHelpers.getModalHtmlElement();\n workroomHelpers.fillModalElement(selectedValueUrl);\n });\n },\n\n moreMLItems: function () {\n $(\"body\").on(\"click\", \".more-ml-items\", function () {\n var pageNumber = $(\".materialItemCardsData\").data(\"page-number\");\n renderNewPageOfItems(pageNumber, true);\n });\n },\n\n copyWishlistLink: function () {\n $(\"body\").on(\"click\", \"#copyShareUrlBtnML\", function () {\n var $btn = $(\"#copyShareUrlBtnML\");\n var shareUrl = $btn.data(\"url\");\n navigator.clipboard.writeText(shareUrl);\n $(\".ml-copy-link-message\").removeClass(\"d-none\");\n setTimeout(function () {\n $(\".ml-copy-link-message\").addClass(\"d-none\");\n }, 3000);\n });\n },\n\n toggleListStatus: function () {\n $(\"#isPublicMaterialList\").on(\"click\", function () {\n var listID = $(this).data(\"id\");\n updatePublicStatus(listID, null, null);\n });\n }\n};\n"],"sourceRoot":""}
![\"${image.alt}](\"${image.url}\")
0 ? \"lazy\" : \"auto\"}\" itemprop=\"image\"/>\n