Code:
AttributeMachine.prototype.Generate_Discount = function (discount) { var discount_div; discount_div = document.createElement('div'); discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount; return discount_div; }; AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) { var swatch_container = document.querySelector('#&mvt:attributemachine:swa tch_element_id;'); var swatch = document.createElement('li'); var img = document.createElement('img'); img.src = option.image; img.setAttribute('alt', option.prompt); img.setAttribute('title', option.prompt); swatch.classList.add('o-list-inline__item'); swatch.setAttribute('data-code', option.code); swatch.setAttribute('data-color', option.prompt); swatch.appendChild(img); setTimeout(function () { if (swatch_container) { var swatch_element = swatch_container.querySelector('ul'); var swatch_select = document.querySelector('[data-hook="attribute-swatch-select"]'); var swatch_selected = swatch_select.options[swatch_select.selectedIndex].text; var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]'); var swatchElements = swatch_element.querySelectorAll('li'); swatch_element.removeAttribute('style'); swatch_element.classList.add('o-list-inline'); /** * Adds the selected swatch name to the label. */ swatch_name_element.textContent = swatch_selected; /** * Adds an active class to the selected swatch. */ swatchElements.forEach(function (swatchElement) { var swatchColor = swatchElement.getAttribute('data-code'); var swatchImage = swatchElement.querySelector('img'); if (swatchColor === swatch_select.options[swatch_select.selectedIndex].value) { swatchImage.classList.add('x-product-layout-purchase__swatches--active'); } else { swatchImage.classList.remove('x-product-layout-purchase__swatches--active'); } }); } }, 0); return swatch; }; AttributeMachine.prototype.Swatch_Click = function (input, attribute, option) { var swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]'); var i; for (i = 0; i < input.select.options.length; i++) { if (input.select.options[i].value === option.code) { input.select.selectedIndex = i; } } if (attribute.inventory) { this.Attribute_Changed(input); } swatch_name_element.innerHTML = option.prompt; this.Generate_Swatch(input, attribute, option); }; MivaEvents.SubscribeToEvent('variant_changed', function (data) { AJAX_Call_Module(Update_Volume_Pricing, 'runtime', 'discount_volume', 'Runtime_VolumePricing_Load_Product_Variant', 'Product_Code=' + encodeURIComponent(data.product_code) + '&' + 'Variant_ID=' + encodeURIComponent(data.variant_id)); }); const Update_Volume_Pricing = function (priceData) { const volumePricingContainer = document.querySelector('[data-volume-pricing]'); if (priceData.success === 1 && priceData.data.length > 0) { volumePricingContainer.innerHTML = [ '<table class="o-table o-table--fixed c-table-simple">', '<thead>', '<tr class="c-table-simple__row">', '<th class="c-table-simple__cell">Quantity</th>', '<th class="c-table-simple__cell">Price</th>', '</tr>', '</thead>', '<tbody data-pricing-grid>', '</tbody>', '</table>' ].join(''); let tableBody = volumePricingContainer.querySelector('[data-pricing-grid]'); priceData.data.forEach(function (entry) { const pricingRow = document.createElement('tr'); const quantityCell = document.createElement('td'); const priceCell = document.createElement('td'); pricingRow.classList.add('c-table-simple__row'); quantityCell.classList.add('c-table-simple__cell'); priceCell.classList.add('c-table-simple__cell'); if (entry.low === entry.high) { quantityCell.innerText = entry.low; } else if (entry.high) { quantityCell.innerText = entry.low + ' - ' + entry.high; } else { quantityCell.innerText = entry.low + '+'; } priceCell.innerText = entry.formatted_price; pricingRow.append(quantityCell, priceCell); tableBody.append(pricingRow); }); } else { volumePricingContainer.innerHTML = ''; } };
Leave a comment: