wideBundle.updateDiv = function(element, valuesToTest, divElement) {
console.log("updating the div");
valuesToTest = valuesToTest.map(val => {
let returnValue = val;
if(typeof val == "number"){
returnValue = val.toString()
}
return returnValue;
})
divs = element.querySelectorAll(divElement);
for (const valueToTest of valuesToTest) {
for (let i = 0; i < divs.length; i++) {
if (divs[i].innerHTML.toLowerCase().trim() == valueToTest.replace(/&/g, "&").trim()) {
divs[i].click();
divs[i].click(); // Double click for some themes with troubles
dispatchClick(divs[i]);
return;
}
else if (divs[i].innerText.toLowerCase().trim() == valueToTest.replace(/&/g, "&").trim()) {
divs[i].click();
divs[i].click(); // Double click for some themes with troubles
dispatchClick(divs[i]);
return;
}
else if (divs[i].innerText.toLowerCase().replace(/&/g, "&").trim() == valueToTest.replace(/&/g, "&").trim()) {
divs[i].click();
divs[i].click(); // Double click for some themes with troubles
dispatchClick(divs[i]);
return;
}
else if(divs[i].hasAttribute('data-replo-set-active-variant') && divs[i].getAttribute('data-replo-set-active-variant').toLowerCase() == valueToTest){
divs[i].click();
divs[i].click(); // Double click for some themes with troubles
dispatchClick(divs[i]);
return;
} else if(divs[i].hasAttribute('option-value') && divs[i].getAttribute('option-value').toLowerCase() == valueToTest){
divs[i].click();
divs[i].click(); // Double click for some themes with troubles
dispatchClick(divs[i]);
return;
}
}
}
}
//Send change event to trigger functions on the theme
wideBundle.fireAllChangeEvent = function(){
//Elements to trigger change event with vanilla JS
var elementsToTrigger = ["variant-selects", 'div[data-pf-type="ProductVariantSwatches"]'];
//Elements to trigger all children with vanilla JS
var elementsToTriggerAll = ["variant-select", "variant-picker", "product-variants", "variant-selector", ".shg-product-variant-select"];
//Elements to trigger all in bubble with vanilla JS
var elementsToTriggerAllBubble = [".product-block-list__item.product-block-list__item--info .product-form__single-selector:checked", ".shopify-product-form .product-options .product-option-list",
".product__variants--select .styled-select select.option-selector",".single-option-selector"];
//Elements to trigger change event with jQuery
var elementsToTriggerJquery = ["#SingleOptionSelector-0", ".option-selectors .selector-wrapper select"];
//Elements to trigger with timeout
var elementsToTriggerTimeout = ["main#mainWrap #productHead #prodForm .form-select-wrapper .single-option-selector",
"#ProductSection-product-template #add-to-cart-form #product-variants select"]
//Trigger Vanilla JS
for (const elementToTrigger of elementsToTrigger) {
var element = document.querySelector(elementToTrigger);
if(element){
if('createEvent' in document){
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);
}
else{
element.fireEvent('onchange');
}
}
}
//Trigger Vanilla JS for all children
for (const elementToTriggerAll of elementsToTriggerAll) {
var element = document.querySelectorAll(elementToTriggerAll);
for(var i = 0; i
1) {
return priceWithCommas = matches[1];
}
return null;
}
// Function to detect if there is whitespaces between to substrings in a giving string
function spaceSubstrings(inputString, substring1, substring2) {
const index1 = inputString.indexOf(substring1);
const index2 = inputString.indexOf(substring2);
if (index1 !== -1 && index2 !== -1) {
const startIndex = Math.min(index1, index2);
const endIndex = Math.max(index1, index2);
const spaceBetween = inputString.substring(startIndex + substring1.length, endIndex);
return /\s/.test(spaceBetween);
}
return false;
}
//Function to check and remove duplicated substrings in a string
function removeDuplicate(originalString, substrings) {
const escapedSubstrings = substrings.map(substring => substring.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
const regexString = escapedSubstrings.map(substring => `(${substring})`).join('|');
const regex = new RegExp(regexString, 'g');
const uniqueSubstrings = [];
const result = originalString.replace(regex, (match, ...groups) => {
const substring = groups.find(group => group !== undefined);
if (!uniqueSubstrings.includes(substring)) {
uniqueSubstrings.push(substring);
return substring;
}
return '';
});
return result;
}
// Function to remove all texts from a string and keep only the provided substrings
function keepSubstrings(price, ...substrings) {
priceNew = removeDuplicate(price, substrings);
const escapedCurrencySymbols = substrings.map(symbol => symbol.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
const regex = new RegExp([...substrings, ...escapedCurrencySymbols].join('|'), 'g');
const matchedSubstrings = priceNew.match(regex) || [];
const filteredResult = matchedSubstrings.filter(str => str !== '');
for(var i=0; i<(filteredResult.length)-1; i++){
if(spaceSubstrings(priceNew, filteredResult[i], filteredResult[i+1])){
filteredResult[i] = filteredResult[i] + ' ';
}
}
return filteredResult.join('');
}
// Function to check if a string has a currency code and return it
function extractCurrencyCode(inputString) {
const currencyCodeRegex = /[A-Z]{3}/;
const matches = inputString.match(currencyCodeRegex);
return matches ? matches[0] : null;
}
//If the user uses Market and another currency is selected we have to replace the symbol
wideBundle.replaceCurrencyForMarket = function(price){
//Exit if the currency is the same as the default
if(typeof Shopify.currency != "undefined" && Shopify.currency.active == wideBundle.settings.currency_code){
return price;
}
symbols = ["MXN $", "US$", "$", "€", "£", "kr", "Kr", "CHF", 'USD', 'PLN', 'zł', 'QAR', 'AED', 'SFr', '₴', 'UAH', 'EUR', 'lei'];
symbols.every(symbol => {
if(price.includes(symbol)){
rawPrice = extractPrice(price);
if(wideBundle.settings.currency_format === 'symbol'){
price = keepSubstrings(price, rawPrice, symbol)
price = price.replace(symbol, wideBundle.currencySymbols[Shopify.currency.active])
}
else if(wideBundle.settings.currency_format === 'both'){
currencyCode = extractCurrencyCode(price);
if(currencyCode == null){
price = keepSubstrings(price, rawPrice, symbol)
price = price.replace(symbol, wideBundle.currencySymbols[Shopify.currency.active]) + ' ' + Shopify.currency.active;
}
else{
price = keepSubstrings(price, rawPrice, symbol, currencyCode)
price = price.replace(symbol, wideBundle.currencySymbols[Shopify.currency.active]);
price = price.replace(currencyCode, Shopify.currency.active);
}
}
else {
price = keepSubstrings(price, rawPrice, symbol)
price = price.replace(symbol, wideBundle.currencyCodes[Shopify.currency.active])
}
return false;
}
return true;
});
return price;
}
wideBundle.updateHiddenPriceFromAjax = function(product){
let priceStructured, compareAtPriceStructured;
product.variants.forEach(variant => { //Format prices we received
priceStructured = wideBundle.formatPriceFromJson(variant.price);
priceStructured = wideBundle.updatePriceSeparator(priceStructured.toString());
if(variant.compare_at_price){
compareAtPriceStructured = wideBundle.formatPriceFromJson(variant.compare_at_price)
compareAtPriceStructured = wideBundle.updatePriceSeparator(compareAtPriceStructured.toString());
compareAtPriceStructured = parseFloat(wideBundle.getAmountFromPrice(priceStructured)) >= parseFloat(wideBundle.getAmountFromPrice(compareAtPriceStructured)) ? "" : compareAtPriceStructured
}
else{
compareAtPriceStructured = "";
}
//Replace the prices in hidden prices and after creating the widget we will use them
const hiddenPriceElement = document.querySelector('.wb_hidden_prices .wb_hidden_price[variant-id="'+variant.id+'"]');
if (hiddenPriceElement) {
hiddenPriceElement.innerHTML = wideBundle.removeDecimal(priceStructured);
}
const hiddenComparedPriceElement = document.querySelector('.wb_hidden_prices .wb_hidden_compared_price[variant-id="'+variant.id+'"]');
if (hiddenComparedPriceElement) {
hiddenComparedPriceElement.innerHTML = wideBundle.removeDecimal(compareAtPriceStructured);
}
});
}
//Replace hidden prices with prices from Ajax if we couldn't get them from the theme JSON
wideBundle.addPricesFromAjax = function(){
if (window.hasOwnProperty("wideBundlePreviewMode") && window?.wideBundlePreviewMode === true) {
return;
}
if(typeof Shopify != "undefined" && typeof Shopify.currency != "undefined"){
//Check if we can't get prices from json
if(wideBundle.isAutomaticDiscount || !wideBundle.getPricesFromJson(document.querySelector('.wb_hidden_prices .wb_hidden_price').getAttribute('variant-id'))){
console.log('doing ajax');
const allOfferProducts = wideBundle.offers.reduce((acc, offerProducts) => {
return [...acc, ...offerProducts];
}, []).filter((product) => product.dynamicGroupUuid === null);
Promise.all(allOfferProducts.filter((product) => {
if (typeof product === typeof undefined || typeof product?.product_handle === typeof undefined) {
return false;
}
if (product.dynamicGroupUuid !== null && product.dynamicGroupSelected === null) {
return false;
}
return true;
}).map((product) => {
return fetch(`${window.Shopify.routes.root}products/${product.product_handle}.js`)
.then(response => response.json());
})).then((productResponses) => {
productResponses.forEach((product) => {
// console.log(product.variants);
// console.log("PriceJson Script not available");
wideBundle.updateHiddenPriceFromAjax(product);
});
wideBundle.updatePriceOnAllOffers(); //Update the offers with the new prices
});
}
}
}
//Remove currency from a price
wideBundle.getAmountFromPrice = function(price) {
// Count occurrences of dots and commas surrounded by two numbers
/*var dotsCount = (price.match(/\d\.\d/g) || []).length;
var commasCount = (price.match(/\d,\d/g) || []).length;
if (dotsCount > 2 || commasCount > 2 || (dotsCount === 1 && commasCount === 1)) {
// Remove the first occurrence of dot or comma surrounded by numbers
price = price.replace(/(\d)([.,])(\d)/, '$1$3');
}*/
var regp = /[^0-9.,]*(\d+(?:[.,]\d+)?)(?:[^0-9.,]|$)/;
match = structuredClone(price).match(regp);
if (match) {
return match[1];
} else {
return price;
}
}
//Get only the current currency format
wideBundle.getCurrentCurrencyOnly = function(price){
if(price != "" && price != null){
return price.replace(/\d+.\d+/g,'{{amount}}').replace(/\d+/g,'{{amount}}');
}
}
//Get the difference between two prices
function getAmountDifference(price, compareAtPrice){
numberForPrice = parseFloat(wideBundle.getAmountFromPrice(price).replace(',', '.')); //Get the amount only for the price
numberForCompareAtPrice = parseFloat(wideBundle.getAmountFromPrice(compareAtPrice).replace(',', '.')); //compare at price
var amountDifference = numberForCompareAtPrice - numberForPrice;
percentDifference = 100 * parseFloat(amountDifference) / numberForCompareAtPrice;
percentDifference = Math.round(percentDifference);
amountDifference = amountDifference.toFixed(2); //We round the price so we can have "34.00" or "34.99"
return {
"amount": amountDifference,
"percent": percentDifference
};
}
//Send observer to change the main price
function observePriceChanges(target) {
const config = {
childList: true,
subtree: true,
characterData: true,
};
const callback = function (mutationsList, observer) {
if (!window.pricesWB) return;
for (let mutation of mutationsList) {
for (let selector of pricesWB) {
let targetMatch = false;
let addedMatch = false;
let removedMatch = false;
if (mutation.target.matches !== undefined && mutation.target.matches(selector)) {
targetMatch = true;
}
Array.from(mutation.addedNodes).forEach(node => {
if (node.matches !== undefined && node.matches(selector)) {
addedMatch = true;
}
});
Array.from(mutation.removedNodes).forEach(node => {
if (node.matches !== undefined && node.matches(selector)) {
removedMatch = true;
}
});
if (mutation.target.nodeType != 3 && mutation.target.nodeType != 8) {
if (mutation.target.querySelector('.first-price-WB') || mutation.target.querySelector('.second-price-WB')) continue;
}
if (targetMatch || addedMatch || removedMatch) {
if (formWB.style.height == '0px' || formWB.style.display === 'none' || wideBundle.manualWidget) {
wideBundle.updateMainPrice();
}
}
}
}
};
const observer = new MutationObserver(callback);
observer.observe(target, config);
}
observePriceChanges(document);
wideBundle.updatePriceOnAllOffers = function(){
const divHiddenPrices = document.querySelector('.wb_hidden_prices');
offers = document.querySelectorAll('.new-form-option');
offers.forEach(offer => {
const offersPointer = Number(offer.getAttribute('data-offers-pointer'));
const offerDb = wideBundle.offers[offersPointer];
const hasVariant = new URLSearchParams(window.location.search.toLowerCase()).get('variant');
const variantIdsSelectedWithType = offerDb.filter((offer) => !offer.product_is_upsell).reduce((ids, offer) => {
let variantId = offer.variants[0].id;
if (hasVariant && offersPointer==0) {
const candidate = offer.variants.find((variant) => variant.id == hasVariant);
if (candidate) variantId = candidate.id;
}
return [...ids, ...(new Array(offer.product_qty).fill({
id: variantId,
productType: offer.product_is_gift ? 'gift' : 'product',
}))];
}, []);
const variantIdsSelected = variantIdsSelectedWithType.map((variant) => variant.id);
const giftVariantIds = wideBundle.getGiftVariantIds(offersPointer);
const upsellVariantIds = wideBundle.getUpsellVariantIds(offersPointer);
const variantsString = offersPointer + "@" + variantIdsSelected.join("+");
const variantPrices = variantIdsSelectedWithType.map((variant, index) => {
const variantId = variant.id;
const hiddenPriceElement = document.querySelector('.wb_hidden_prices .wb_hidden_price[variant-id="' + variantId + '"]');
if (!hiddenPriceElement) return 0;
if (index > (offerDb[0].product_qty - 1) && giftVariantIds.includes(variantId) && variant.productType === 'gift') return 0;
if (index > (offerDb[0].product_qty - 1) && upsellVariantIds.includes(variantId) && variant.productType === 'product') return 0;
return parseFloat(wideBundle.getAmountFromPrice(hiddenPriceElement.textContent).replace(',', '.'));
});
const variantCompareAtPrices = variantIdsSelectedWithType.map((variant, index) => {
const variantId = variant.id;
const hiddenCompareAtPriceElement = document.querySelector('.wb_hidden_prices .wb_hidden_compared_price[variant-id="' + variantId + '"]');
if (!hiddenCompareAtPriceElement || hiddenCompareAtPriceElement.textContent === "") {
const hiddenPriceElement = document.querySelector('.wb_hidden_prices .wb_hidden_price[variant-id="' + variantId + '"]');
if (!hiddenPriceElement) return 0;
return parseFloat(wideBundle.getAmountFromPrice(hiddenPriceElement.textContent).replace(',', '.'));
}
if (index > (offerDb[0].product_qty - 1) && upsellVariantIds.includes(variantId) && variant.productType === 'product') return 0;
return parseFloat(wideBundle.getAmountFromPrice(hiddenCompareAtPriceElement.textContent).replace(',', '.'));
});
document.querySelectorAll(`[data-calculated] [variant-id="${variantsString}"]`).forEach((element) => {
element.parentElement.remove();
});
divHiddenPrices.innerHTML += wideBundle.addOfferCalculatedPrices(offerDb[0], variantIdsSelected, variantPrices, variantCompareAtPrices);
if (offerDb[0].automatic_discount) {
offerID = offersPointer + "@" + variantIdsSelected.join("+");
} else {
if(offer.classList.contains('selectedWB')){
offerID = wideBundle.getSelectedVariantId()[0];
}
else{
offerID = offer.getAttribute('data-variant-id');
}
}
price = offer.querySelector('.first-price-WB');
compareAtPrice = offer.querySelector('.second-price-WB');
if(price){
price.innerHTML = document.querySelector(`.wb_hidden_prices ${offerDb[0].automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_price[variant-id="${offerID}"]`).innerHTML;
handleTranscyPrice(document.querySelector(`.wb_hidden_prices ${offerDb[0].automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_price[variant-id="${offerID}"]`).innerHTML, price);
}
if(compareAtPrice){
compareAtPrice.innerHTML = document.querySelector(`.wb_hidden_prices ${offerDb[0].automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_compared_price[variant-id="${offerID}"]`).innerHTML;
handleTranscyPrice(document.querySelector(`.wb_hidden_prices ${offerDb[0].automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_compared_price[variant-id="${offerID}"]`).innerHTML, compareAtPrice);
}
const priceParent = price.parentNode;
if(priceParent.classList.contains("hidden-unit") && wideBundle.isAutomaticDiscount == false){
const variantUnitPrice = parseFloat(wideBundle.getAmountFromPrice(price.innerHTML).replace(',', '.')) * priceParent.getAttribute('data_offer_cr');
priceParent.parentNode.querySelector('.wb_unit_price').innerHTML = (wideBundle.removeDecimal(wideBundle.updatePriceSeparator(wideBundle.formatPriceForUnit(variantUnitPrice))));
}
//For "you save" text
if(compareAtPrice.innerHTML != '' && wideBundle.settings.economic_display == 1){
percent = offer.querySelector('.percent-wb');
priceEconomic = offer.querySelector('.span-economic-wb');
var priceDifference = getAmountDifference(price.innerHTML, compareAtPrice.innerHTML)
priceDifferenceFormatted = wideBundle.updatePriceSeparator(wideBundle.removeDecimal(wideBundle.getCurrentCurrencyOnly(price.innerHTML).replace('{{amount}}', priceDifference.amount)));
if(percent){
percent.innerHTML = priceDifference.percent;
}
if(priceEconomic){
priceEconomic.innerHTML = priceDifferenceFormatted;
}
savingsText = offer.querySelector('.economic-wb');
if(savingsText){
savingsText.closest(".new-form-option").classList.add("with-economic-text");
savingsText.style.display = "block";
}
}
else{
var savingsText = offer.querySelector('.economic-wb');
if(savingsText){ //Hide the savings text if we have it
savingsText.closest(".new-form-option").classList.remove("with-economic-text");
savingsText.style.display = "none";
}
}
//Free gift
if (offer.classList.contains('offer-free-gift')) {
Array.from(offer.querySelectorAll('.wb-gift-product-wrapper')).forEach((giftOffer) => {
const productPointer = parseInt(giftOffer.querySelector('[data-product-pointer]').getAttribute('data-product-pointer'));
const giftProduct = offerDb[productPointer];
if (!giftProduct) return;
const variantId = giftProduct.variants[0].id;
const giftPriceElement = giftOffer.querySelector('.gift-price-WB');
const giftCompareElement = giftOffer.querySelector('.gift-compare-at-price-WB .crossed-price-WB');
if (giftPriceElement && giftCompareElement) {
const hiddenPrice = document.querySelector(`.wb_hidden_prices .wb_hidden_price[variant-id="${variantId}"]`);
const hiddenCompare = document.querySelector(`.wb_hidden_prices .wb_hidden_compared_price[variant-id="${variantId}"]`);
let giftPrice;
if (giftOffer.classList.contains("wb-gift-product-wrapper--upsell")) {
const totalPrice = wideBundle.getAmountFromPrice(hiddenPrice.innerHTML);
const upsellPrice = Math.max(0, totalPrice - ((totalPrice / 100) * giftProduct.upsell_discount)).toFixed(2);
giftPrice = wideBundle.replaceCurrencyForMarket(wideBundle.formatPrice(wideBundle.removeDecimal(upsellPrice)));
} else {
giftPrice = wideBundle.replaceCurrencyForMarket(wideBundle.formatPrice(wideBundle.removeDecimal("0.00")));
}
giftPriceElement.innerHTML = wideBundle.updatePriceSeparator(giftPrice);
giftCompareElement.innerHTML = hiddenCompare && hiddenCompare.innerHTML !== "" ?
hiddenCompare.innerHTML :
hiddenPrice.innerHTML;
if (
Number(wideBundle.getAmountFromPrice(giftPriceElement.innerHTML) ?? 0).toFixed(2) ===
Number(wideBundle.getAmountFromPrice(giftCompareElement.innerHTML) ?? 0).toFixed(2)) {
giftCompareElement.innerHTML = "";
}
handleTranscyPrice(giftPriceElement.innerHTML, giftPriceElement);
handleTranscyPrice(giftCompareElement.innerHTML, giftCompareElement);
}
});
return;
}
});
wideBundle.updateMainPrice();
}
//Add the main style of the widget
wideBundle.addMainStyle = function (attribute = 'main') {
var mainStyle = `
:root {
/* ===== COLOR VARIABLES ===== */
/* General Colors */
--wb-preview-heading-color: ${wideBundle.settings.preview_heading_color};
--wb-heading-line-color: ${wideBundle.settings.heading_line_color};
--wb-border-color: ${wideBundle.settings.border_color};
--wb-hover-color: ${wideBundle.settings.hover_color};
/* Unselected State Colors */
--wb-unselected-background-color: ${wideBundle.settings.unselected_background_color};
--wb-unselected-border-color: ${wideBundle.settings.unselected_border_color};
--wb-unselected-thumbnail-color: ${wideBundle.settings.unselected_thumbnail_color};
--wb-unselected-message-background-color: ${wideBundle.settings.unselected_message_background_color};
--wb-unselected-message-border-color: ${wideBundle.settings.unselected_message_border_color};
--wb-unselected-free-gift-background-color: ${wideBundle.settings.unselected_free_gift_background_color};
--wb-unselected-free-gift-text-color: ${wideBundle.settings.unselected_free_gift_text_color};
--wb-unselected-free-gift-icon-color: ${wideBundle.settings.unselected_free_gift_icon_color};
--wb-unselected-title-text-color: ${wideBundle.settings.unselected_title_text_color};
/* Selected State Colors */
--wb-background-color: ${wideBundle.settings.background_color};
--wb-thumbnail-color: ${wideBundle.settings.thumbnail_color};
--wb-message-background-color: ${wideBundle.settings.message_background_color};
--wb-message-border-color: ${wideBundle.settings.message_border_color};
--wb-selected-free-gift-background-color: ${wideBundle.settings.selected_free_gift_background_color};
--wb-selected-free-gift-text-color: ${wideBundle.settings.selected_free_gift_text_color};
--wb-selected-free-gift-icon-color: ${wideBundle.settings.selected_free_gift_icon_color};
--wb-selected-title-text-color: ${wideBundle.settings.selected_title_text_color};
/* Text & Content Colors */
--wb-offer-color: ${wideBundle.settings.offer_color};
--wb-offer-selected-color: ${wideBundle.settings.offer_selected_color};
--wb-option-color: ${wideBundle.settings.option_color};
--wb-option-select-color: ${wideBundle.settings.option_select_color};
/* Price Colors */
--wb-price-color: ${wideBundle.settings.price_color};
--wb-price-selected-color: ${wideBundle.settings.price_selected_color};
--wb-price-compared-color: ${wideBundle.settings.price_compared_color};
--wb-price-compared-selected-color: ${wideBundle.settings.price_compared_selected_color};
/* Special Labels & Messages */
--wb-color-best: ${wideBundle.settings.color_best};
--wb-color-best-banner: ${wideBundle.settings.color_best_banner};
--wb-best-selected-color: ${wideBundle.settings.best_selected_color};
--wb-best-selected-color-banner: ${wideBundle.settings.best_selected_color_banner};
--wb-economic-color: ${wideBundle.settings.economic_color};
--wb-economic-selected-color: ${wideBundle.settings.economic_selected_color};
/* Button & Input Colors */
--wb-atc-color: ${wideBundle.settings.atc_color};
--wb-color-button-quantity: ${wideBundle.settings.color_button_quantity};
--wb-color-input-quantity: ${wideBundle.settings.color_input_quantity};
/* ===== TYPOGRAPHY VARIABLES ===== */
/* Heading Typography */
--wb-preview-heading-font-size: ${wideBundle.settings.preview_heading_font_size};
--wb-preview-heading-font-family: inherit;
/* Message Typography - Unselected */
--wb-unselected-custom-fontsize: ${wideBundle.settings.unselected_custom_fontsize};
--wb-font-unselected-custom-sentence: ${wideBundle.settings.font_unselected_custom_sentence != 'auto' ? '"' + wideBundle.settings.font_unselected_custom_sentence + '", Arial, sans-serif' : 'inherit'};
/* Message Typography - Selected */
--wb-selected-custom-fontsize: ${wideBundle.settings.selected_custom_fontsize};
--wb-font-selected-custom-sentence: ${wideBundle.settings.font_selected_custom_sentence != 'auto' ? '"' + wideBundle.settings.font_selected_custom_sentence + '", Arial, sans-serif' : 'inherit'};
/* ===== SPACING & LAYOUT VARIABLES ===== */
/* Border Radius */
--wb-unselected-border-radius: ${wideBundle.settings.unselected_border_radius};
--wb-selected-border-radius: ${wideBundle.settings.selected_border_radius || wideBundle.settings.unselected_border_radius};
/* Border Width */
--wb-border-width: ${wideBundle.settings.border_width || '2px'};
/* Heading Line */
--wb-heading-line-size: ${wideBundle.settings.heading_line_size};
/* ===== TRANSPARENCY/OPACITY VARIABLES ===== */
/* Background Transparency */
--wb-unselected-message-background-transparency: ${wideBundle.settings.unselected_message_background_transparency || '00'};
--wb-message-background-transparency: ${wideBundle.settings.message_background_transparency || '00'};
--wb-unselected-background-transparency: ${wideBundle.settings.unselected_background_transparency || '00'};
--wb-background-transparency: ${wideBundle.settings.background_transparency || '00'};
/* ===== ANIMATION & INTERACTION VARIABLES ===== */
/* Transition Duration */
--wb-transition-duration: ${wideBundle.settings.transition_duration || '0.2s'};
/* Hover Effects */
--wb-hover-scale: ${wideBundle.settings.hover_scale || '1'};
--wb-hover-opacity: ${wideBundle.settings.hover_opacity || '1'};
}
#new-form shopify-buy-it-now-button:nth-of-type(2){ /* Fix a bug where buy now button appears twice */
display: none;
}
#checkout-xx-aa {
color: white;
font-size: 1px;
margin-top: 0px;
margin-bottom: 0px;
display: none;
}
#new-form *, #new-form::before, #new-form::after {
box-sizing: border-box;
}
#new-form, .new-wb-form {
max-width: 700px;
margin: auto;
position: relative;
${wideBundle.settings.rtl == 1 ? 'direction: rtl;' : ''};
}
.product--no-media product-form.product-form{
display: block !important;
}
#new-form .jumpstart-selector .arrow{
display: none !important;
}
#new-form .jumpstart-selector select{
-webkit-appearance: auto;
appearance: auto;
}
.product-detail .product-form.theme-init .option-selectors{
display: none !important;
}
.p-title-WB {
overflow: hidden;
position: relative;
display: flex;
text-align: ${wideBundle.settings.preview_heading_position};
justify-content: center;
}
.p-title-WB__content {
position: relative;
color: ${wideBundle.settings.preview_heading_color};
font-size: ${wideBundle.settings.preview_heading_font_size};
${wideBundle.settings.preview_heading_font_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.preview_heading_font_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.preview_heading_font_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.preview_heading_font_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
${wideBundle.settings.preview_heading_position == 'left' ? 'margin: 0 auto 0 0;' : ''}
${wideBundle.settings.preview_heading_position == 'center' ? 'margin: 0 auto;' : ''}
${wideBundle.settings.preview_heading_position == 'right' ? 'margin: 0 0 0 auto;' : ''}
${wideBundle.settings.preview_heading_position == 'left' && wideBundle.settings.heading_line_display == 1 ? 'padding: 0px 8px 0px 0px;max-width: 90%;' : ''}
${wideBundle.settings.preview_heading_position == 'center' && wideBundle.settings.heading_line_display == 1 ? 'padding: 0px 8px 0px 8px;max-width: 90%;' : ''}
${wideBundle.settings.preview_heading_position == 'right' && wideBundle.settings.heading_line_display == 1 ? 'padding: 0px 0px 0px 8px;max-width: 90%;' : ''}
}
.p-title-WB::before {
display: ${wideBundle.settings.heading_line_display == 1 && (wideBundle.settings.preview_heading_position == 'center' || wideBundle.settings.preview_heading_position == 'right') ? 'block' : 'none'};
content: '';
flex-grow: 1;
height: ${wideBundle.settings.heading_line_size};
background-color: ${wideBundle.settings.heading_line_color};
margin: auto;
}
.p-title-WB::after {
display: ${wideBundle.settings.heading_line_display == 1 && (wideBundle.settings.preview_heading_position == 'left' || wideBundle.settings.preview_heading_position == 'center') ? 'block' : 'none'};
content: '';
flex-grow: 1;
height: ${wideBundle.settings.heading_line_size};
background-color: ${wideBundle.settings.heading_line_color};
margin: auto;
}
.new-form-option{
display:flex;
align-items:center;
${wideBundle.settings.rtl == 1 ? 'padding: 10px 0px 10px 10px;' : 'padding: 10px 10px 10px 0px;'}
cursor:pointer;
border-radius: ${wideBundle.settings.unselected_border_radius};
margin-bottom:15px;
border:2px solid #c6c6c6;
transition: background-color 0.1s ease, border 0.1s ease;
}
.offer-with-gift-flex-wrapper{
display: flex;
align-items: center;
width: 100%;
}
.new-form-option .value-left{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.diagonal-offer{
--d: 10px;
position: relative;
--message: 'special offer';
${wideBundle.settings.display_quantity == 1 && wideBundle.settings.design_code !== '1' && wideBundle.settings.design_code !== '5' ? 'padding-right: 40px !important;' : ''}
}
.diagonal-offer::before {
content: var(--message);
position: absolute;
font-family: sans-serif;
top: 0;
right: 0;
transform: translate(29.29%, -100%) rotate(45deg);
text-align: center;
border: 1px solid transparent;
border-bottom: 0;
transform-origin: bottom left;
padding: 5px 35px calc(var(--d) + 5px);
background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d)
no-repeat var(--c);
background-clip: padding-box;
clip-path: polygon(0 0,100% 0,100% 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),0 100%);
-webkit-mask: linear-gradient(135deg,transparent calc(50% - var(--d) * 0.707),#fff 0) bottom left,
linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)bottom right;
-webkit-mask-size: 300vmax 300vmax;
-webkit-mask-composite: destination-in, xor;
mask-composite: intersect;
max-width: 195px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
z-index: 2;
}
.corner-offer{
--f: 14px;
--r: 20px;
position: absolute;
top: -17px;
padding: .1em .5em;
background: #FA6900;
border-bottom: var(--f) solid #0005;
border-left: var(--r) solid #0000;
clip-path: polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
var(--r) calc(50% - var(--f)/2));
right: calc(-1*var(--f));
height: 45px;
display: flex;
align-items: center;
z-index: 1;
}
.corner-offer-container:not(.offer-free-gift){
position: relative;
padding: 20px 10px 20px 0px !important;
margin-top: 20px;
}
.corner-offer-container.offer-free-gift{
position: relative;
padding: 20px 0px 0px 0px !important;
margin-top: 20px;
}
.corner-offer-container.offer-free-gift .offer-with-gift-flex-wrapper{
padding-right: 10px;
}
.selectable .corner-offer {
background: ${wideBundle.settings.unselected_message_background_transparency !== '00' ? wideBundle.settings.unselected_message_background_color : wideBundle.settings.border_color};
color: ${wideBundle.settings.color_best_banner};
font-size: ${wideBundle.settings.unselected_custom_fontsize};
${wideBundle.settings.font_unselected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_unselected_custom_sentence + '", Arial, sans-serif;' : ''}
${wideBundle.settings.style_blinking == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable.diagonal-offer{
--c: ${wideBundle.settings.unselected_message_background_transparency !== '00' ? wideBundle.settings.unselected_message_background_color : wideBundle.settings.border_color};
color: ${wideBundle.settings.color_best_banner};
}
.selectable.diagonal-offer::before{
font-size: ${wideBundle.settings.unselected_custom_fontsize};
${wideBundle.settings.font_unselected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_unselected_custom_sentence + '", Arial, sans-serif;' : ''}
${wideBundle.settings.style_blinking == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .corner-offer {
background: ${wideBundle.settings.message_background_transparency !== '00' ? wideBundle.settings.message_background_color : wideBundle.settings.border_color};
color: ${wideBundle.settings.best_selected_color_banner};
font-size: ${wideBundle.settings.selected_custom_fontsize};
${wideBundle.settings.font_selected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_selected_custom_sentence + '", Arial, sans-serif;' : ''}
${wideBundle.settings.style_blinking_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB.diagonal-offer{
--c: ${wideBundle.settings.message_background_transparency !== '00' ? wideBundle.settings.message_background_color : wideBundle.settings.border_color};
color: ${wideBundle.settings.best_selected_color_banner};
}
.selectedWB.diagonal-offer::before{
font-size: ${wideBundle.settings.selected_custom_fontsize};
${wideBundle.settings.font_selected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_selected_custom_sentence + '", Arial, sans-serif;' : ''}
${wideBundle.settings.style_blinking_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.checkedWB{
display: block;
width: 17px;
height: 17px;
border: 3px solid #f4f4f4;
background-color: #f4f4f4;
border-radius: 50%;
margin-left: 10px;
margin-right: 10px;
}
.thumbnailWB{
width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "40px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "60px" : "80px")};
border: 1px solid ${wideBundle.settings.unselected_thumbnail_color};
border-radius: 5px;
${wideBundle.settings.rtl == 1 ? 'margin-left: 10px;' : 'margin-right: 10px;'};
}
.selectedWB .thumbnailWB{
width: ${wideBundle.settings.thumbnail_size == "s" ? "40px" : (wideBundle.settings.thumbnail_size == "m" ? "60px" : "80px")};
border: 1px solid ${wideBundle.settings.thumbnail_color};
}
.value-left{
min-width: 40px;
}
.offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "88px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "108px" : "128px")};
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "88px" : (wideBundle.settings.thumbnail_size == "m" ? "108px" : "128px")};
}
.value-right{
${wideBundle.settings.rtl == 0 ? 'text-align: left;' : ''};
}
.title-variant{
text-transform: none;
${wideBundle.settings.rtl == 0 ? 'text-align: left;' : ''};
margin: 0;
color: ${wideBundle.settings.offer_color};
}
.best-title-new{
line-height: 1;
color: ${wideBundle.settings.color_best};
transition: opacity 0.5s ease;
font-weight: bold;
}
.price-new-form{
${wideBundle.settings.rtl == 0 ? 'text-align: left;' : ''};
width: auto;
margin: 0px;
margin-bottom: 0px;
}
.hidden-unit{
display: none !important;
}
.first-unit-WB {
margin-right: 5px;
text-align: left;
width: auto;
margin: 0px;
margin-bottom: 0px;
}
.selectedWB .first-unit-WB {
font-size: ${wideBundle.settings.selected_price_fontsize};
color: ${wideBundle.settings.price_selected_color} !important;
${wideBundle.settings.style_price_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_price_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .first-unit-WB {
font-size: ${wideBundle.settings.unselected_price_fontsize};
color: ${wideBundle.settings.price_color} !important;
${wideBundle.settings.style_price == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_price == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.wb_unit_text{
font-size: 0.85em;
}
.selectedWB .first-price-WB {
font-size: ${wideBundle.settings.selected_price_fontsize};
}
.selectedWB .second-price-WB {
font-size: ${wideBundle.settings.selected_compare_price_fontsize};
}
.selectable .first-price-WB {
font-size: ${wideBundle.settings.unselected_price_fontsize};
}
.selectable .second-price-WB {
font-size: ${wideBundle.settings.unselected_compare_price_fontsize};
}
span.money.first-price-WB, .first-price-WB{
color: ${wideBundle.settings.price_color} !important;
${wideBundle.settings.rtl == 1 ? 'margin-left: 5px;' : 'margin-right: 5px;'}
}
span.money.second-price-WB, .second-price-WB{
color: ${wideBundle.settings.price_compared_color} !important;
text-decoration: line-through !important;
}
.crossed-price-WB{
color: inherit;
text-decoration: line-through !important;
}
.doubly.second-price-WB, .money.second-price-WB{
color: ${wideBundle.settings.price_compared_color};
text-decoration: line-through !important;
}
.spinWB{
display: flex;
width: 80px;
margin-top: 20px;
display: none;
margin-bottom: 20px;
flex: 0 0 80px;
margin-left: auto;
}
.quantity-wb-less{
border-radius: 4px 0px 0px 4px;
background-color: ${wideBundle.settings.bg_button_quantity};
color: ${wideBundle.settings.color_button_quantity};
border: 1px solid #dadada;
display: inline-block;
width: 33%;
padding-top:0px;
padding-bottom:0px;
text-align: center;
cursor: pointer;
vertical-align: 1.5px;
}
.quantity-wb-more{
border-radius:0px 4px 4px 0px;
background-color: ${wideBundle.settings.bg_button_quantity};
color: ${wideBundle.settings.color_button_quantity};
border: 1px solid #dadada;
display: inline-block;
width: 33%;
padding-top:0px;
padding-bottom:0px;
text-align: center;
cursor: pointer;
vertical-align: 1.5px;
}
#new-form .quantity-wb-input, .new-wb-form .quantity-wb-input{
-webkit-appearance: none;
-moz-appearance: none;
background-color: ${wideBundle.settings.bg_input_quantity};
color: ${wideBundle.settings.color_input_quantity};
appearance: none;
width: 34%;
text-align: center;
font-weight: bold;
border: 1px solid #dadada;
border-left: 0;
border-right: 0;
padding-left:0px;
padding-right:0px;
padding-top: 0px;
padding-bottom: 0px;
align-self: stretch;
box-sizing: border-box;
}
.div-select2:first-of-type{
margin-top: 10px;
}
#new-form .select-option-third, .new-wb-form .select-option-third{
margin:0;
line-height:23px;
position:static;
opacity:1;
display:block;
background-position: right 10px center !important;
border-radius:3px;
border: 1px solid ${wideBundle.settings.border_color};
font-size:16px;
${wideBundle.settings.rtl == 1 ? 'float:right;' : 'float:left;'}
min-width:100px;
max-width:auto;
width:auto;
min-height:24px;
height:24px;
padding:0;
padding-left:3px;
${wideBundle.settings.rtl == 1 ? 'padding-right:3px;' : 'padding-right:25px;'}
${wideBundle.settings.rtl == 1 ? 'margin-right:5px;' : 'margin-left:5px;'}
color:black;
}
#new-form .select-option-second, .new-wb-form .select-option-second{
line-height:23px;
position:static;
opacity:1;
display:block;
background-position: right 10px center !important;
border-radius:3px;
border: 1px solid ${wideBundle.settings.border_color};
font-size:16px;
${wideBundle.settings.rtl == 1 ? 'float:right;' : 'float:left;'}
min-width:100px;
max-width:auto;
width:auto;
min-height:24px;
height:24px;
padding:0;
padding-left:3px;
${wideBundle.settings.rtl == 1 ? 'padding-right:3px;' : 'padding-right:25px;'}
margin:0;
${wideBundle.settings.rtl == 1 ? 'padding-right:3px;' : 'padding-right:25px;'}
color:black;
}
#new-form .select-option-first, .new-wb-form .select-option-first{
line-height:23px;
position:static;
opacity:1;
display:block;
background-position: right 10px center !important;
border-radius:3px;
border: 1px solid ${wideBundle.settings.border_color};
font-size:16px;
${wideBundle.settings.rtl == 1 ? 'float:right;' : 'float:left;'}
min-width:100px;
max-width:auto;
width:auto;
min-height:24px;
height:24px;
padding:0;
padding-left:3px;
${wideBundle.settings.rtl == 1 ? 'padding-right:3px;' : 'padding-right:25px;'}
margin:0;
${wideBundle.settings.rtl == 1 ? 'padding-right:3px;' : 'padding-right:25px;'}
color:black;
}
#new-form .wb-swatch-container .select-option-third, .new-wb-form .wb-swatch-container .select-option-third{
margin-left: 0px;
}
#new-form .pretty-select, .new-wb-form .pretty-select{
padding: 0px 0px 0px 0px;
}
#new-form .disclosure .disclosure__toggle svg, .pretty-select svg, .new-wb-form .disclosure .disclosure__togle svg{
display: none;
}
.title-option-wb{
color: ${wideBundle.settings.option_color};
font-size: ${wideBundle.settings.option_fontsize};
margin:0;
margin-top:3px;
${wideBundle.settings.rtl == 1 ? 'margin-left:5px;' : 'margin-right:5px;'}
margin-bottom:10px;
${wideBundle.settings.rtl == 1 ? 'float:right;' : 'float:left;'}
}
.clear{
margin:0;
clear:both;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.economic-wb{
margin-top: 0px;
margin-bottom: 0px;
color: ${wideBundle.settings.economic_color};
}
#new-form-atc, .new-form-atc{
width: 100%;
cursor: pointer;
background-color: ${wideBundle.settings.atc_background};
color: ${wideBundle.settings.atc_color};
border-radius: ${wideBundle.settings.atc_radius};
text-align: center;
font-size: ${wideBundle.settings.atc_font_size};
margin-top: 10px;
margin-bottom: 15px;
${wideBundle.settings.atc_size == 'small' ? 'padding: 10px 0 10px 0;' : ''}
${wideBundle.settings.atc_size == 'medium' ? 'padding: 20px 0 20px 0;' : ''}
${wideBundle.settings.atc_size == 'large' ? 'padding: 30px 0 30px 0;' : ''}
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
${wideBundle.settings.atc_font != 'auto' ? 'font-family: "' + wideBundle.settings.atc_font + '"' : ''}
}
#new-form-atc:hover, .new-form-atc:hover{
background-color: ${wideBundle.settings.hover_color};
}
.new-form-atc .first-price-WB,
.new-form-atc .second-price-WB{
margin: 0 4px;
display: inline;
}
.new-form-atc .second-price-WB{
opacity: 0.85;
}
.before-code-wb{
margin-top: 10px;
}
#new-form .selectable, .new-wb-form .selectable{
background-color: ${wideBundle.settings.unselected_background_color + wideBundle.settings.unselected_background_transparency};
border: ${wideBundle.settings.unselected_border_size} solid ${wideBundle.settings.unselected_border_color};
border-radius: ${wideBundle.settings.unselected_border_radius};
font-weight: normal;
}
.selectable span.money.first-price-WB, .selectable .first-price-WB{
color: ${wideBundle.settings.price_color} !important;
}
.selectable span.money.second-price-WB, .selectable .second-price-WB{
color: ${wideBundle.settings.price_compared_color} !important
}
.selectable .best-title{
color: ${wideBundle.settings.color_best};
border: ${wideBundle.settings.unselected_message_border_size} solid ${wideBundle.settings.unselected_message_border_color};
border-radius: ${wideBundle.settings.unselected_message_border_radius};
background-color: ${wideBundle.settings.unselected_message_background_color + wideBundle.settings.unselected_message_background_transparency};
${wideBundle.settings.unselected_message_background_transparency !== '00' || wideBundle.settings.unselected_message_border_size !== '0px' ? 'margin: 3px 0px; padding: 3px 5px;' : ''}
display: inline-block;
width: 100%;
${wideBundle.settings.unselected_message_background_transparency !== '00' || wideBundle.settings.unselected_message_border_size !== '0px' ? 'width: auto;' : ''}
font-size: ${wideBundle.settings.unselected_custom_fontsize};
${wideBundle.settings.font_unselected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_unselected_custom_sentence + '", Arial, sans-serif;' : ''}
}
.selectable .checkedWB{
background-color: #f4f4f4;
}
.selectable .div-select2{
display: none;
visibility: hidden;
}
.selectable .spinWB{
display: none;
}
.selectable .money{
font-weight: normal !important;
}
#new-form .selectedWB, .new-wb-form .selectedWB{
background-color: ${wideBundle.settings.background_color};
border: ${wideBundle.settings.border_size} solid ${wideBundle.settings.border_color};
border-radius: ${wideBundle.settings.border_radius};
font-weight: bold;
}
.selectedWB .title-variant{
color: ${wideBundle.settings.offer_selected_color};
font-size: ${wideBundle.settings.selected_title_fontsize};
${wideBundle.settings.style_title_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_title_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB span.money.first-price-WB, .selectedWB .first-price-WB{
color: ${wideBundle.settings.price_selected_color} !important;
${wideBundle.settings.style_price_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_price_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB span.money.second-price-WB, .selectedWB .second-price-WB{
color: ${wideBundle.settings.price_compared_selected_color} !important;
${wideBundle.settings.style_compared_price_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_compared_price_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_compared_price_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_compared_price_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .economic-wb{
color: ${wideBundle.settings.economic_selected_color};
font-size: ${wideBundle.settings.selected_savings_fontsize};
${wideBundle.settings.style_economic_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_economic_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .best-title{
color: ${wideBundle.settings.best_selected_color};
border: ${wideBundle.settings.message_border_size} solid ${wideBundle.settings.message_border_color};
border-radius: ${wideBundle.settings.message_border_radius};
background-color: ${wideBundle.settings.message_background_color + wideBundle.settings.message_background_transparency};
${wideBundle.settings.message_background_transparency !== '00' || wideBundle.settings.message_border_size !== '0px' ? 'margin: 3px 0px; padding: 3px 5px;' : ''}
display: inline-block;
width: 100%;
${wideBundle.settings.unselected_message_background_transparency !== '00' || wideBundle.settings.unselected_message_border_size !== '0px' ? 'width: auto;' : ''}
font-size: ${wideBundle.settings.selected_custom_fontsize};
${wideBundle.settings.font_selected_custom_sentence != 'auto' ? 'font-family: "' + wideBundle.settings.font_selected_custom_sentence + '", Arial, sans-serif;' : ''}
}
.selectedWB .checkedWB{
background-color: ${wideBundle.settings.border_color};
}
.selectedWB.offer-discount-system .checkedWB{
outline: 2px solid ${wideBundle.settings.border_color};
border: 2px solid rgb(244, 244, 244);
}
.selectable.offer-discount-system .checkedWB{
background-color: transparent;
}
.offer-discount-system .checkedWB{
width: 12px;
height: 12px;
outline: 2px solid rgb(244, 244, 244);
border: none;
}
.selectedWB .best-title-new{
${wideBundle.settings.style_blinking_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .span-economic-wb{
${wideBundle.settings.style_economic_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_economic_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .div-select2{
${wideBundle.settings.style_variants_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_variants_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_variants_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_variants_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .best-title-new{
${wideBundle.settings.style_blinking == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_blinking == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_blinking == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .span-economic-wb{
${wideBundle.settings.style_economic == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_economic == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .div-select2{
${wideBundle.settings.style_variants == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_variants == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_variants == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_variants == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .title-variant{
color: ${wideBundle.settings.offer_color};
font-size: ${wideBundle.settings.unselected_title_fontsize};
${wideBundle.settings.style_title == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_title == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable span.money.first-price-WB, .selectable .first-price-WB{
${wideBundle.settings.style_price == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_price == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_price == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable span.money.second-price-WB, .selectable .second-price-WB{
${wideBundle.settings.style_compared_price == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_compared_price == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_compared_price == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_compared_price == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .economic-wb{
font-size: ${wideBundle.settings.unselected_savings_fontsize};
${wideBundle.settings.style_economic == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_economic == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_economic == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .spinWB{
display: flex;
}
.selectedWB .spinWB span{
display: flex;
justify-content: center;
align-items: center;
}
.selectedWB select.select-bundle.select-class-second {
color: ${wideBundle.settings.option_select_color} !important;
${wideBundle.settings.option_select_default_settings == 1 ? '' : 'background: ' + wideBundle.settings.option_select_background + '!important;'}
}
.selectedWB select.select-bundle.select-class-first {
color: ${wideBundle.settings.option_select_color} !important;
${wideBundle.settings.option_select_default_settings == 1 ? '' : 'background: ' + wideBundle.settings.option_select_background + '!important;'}
}
.hide-bloc-wb{
display: none !important;
}
#new-form .loading-wb, .new-wb-form .loading-wb{
width: 20px;
height: 20px;
}
#cont-trustbadge-wb, .cont-trustbadge-wb{
text-align: center;
width: 80%;
margin: auto;
}
#cont-trustbadge-wb img, .cont-trustbadge-wb img{
width: 100%;
}
#after-code-wb{
margin-top: 10px;
}
#new-form p:empty, .new-wb-form p:empty{
display: block;
}
.d-flex.form-wb-selected{
display: none !important;
}
.new-form-atc--out-of-stock,
.new-form-atc--out-of-stock[style] {
animation: none !important;
-webkit-animation: none !important;
opacity: 0.5 !important;
}
.new-form-atc--out-of-stock svg,
.new-form-atc--out-of-stock[style] svg {
display: none!important;
}
#new-form .widebundle_error, .new-wb-form .widebundle_error{
color: #cc0000;
text-align: center;
background-color: #ffecec;
padding: 10px;
border: 1px solid #cc0000;
border-radius: 5px;
opacity: 0;
transform: translateY(100%);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
font-size: 14px !important;
font-family: Helvetica !important;
width: 100%;
}
#new-form .widebundle_error.visible, .new-wb-form .widebundle_error.visible {
opacity: 1;
transform: translateY(0);
}
#new-form .widebundle_error a, .new-wb-form .widebundle_error a{
color: #cc0000 !important;
text-decoration: underline !important;
}
.widebundle_error svg{
vertical-align: -10%;
display: inline-block
}
.wb-color-swatch-box {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.wb-color-swatch > input {
visibility: hidden;
position: absolute !important;
}
.wb-color-swatch > input + .wb-color-swatch-radio {
cursor:pointer;
border: 1px solid #ffffff;
outline: 2px solid #c1c1c1;
}
.wb-color-swatch > input:checked + .wb-color-swatch-radio {
border: 1px solid #ffffff;
outline: 2px solid ${wideBundle.settings.border_color};
}
.wb-color-swatch > input:disabled + .wb-color-swatch-radio,
.wb-color-swatch > input:disabled + .wb-color-swatch-radio::after {
opacity: 0.5;
}
.wb-color-swatch-radio {
display: flex !important;
position: relative;
width: 22px;
height: 22px;
margin: 2px;
background: #ffffff;
border: 1px solid #ffffff;
outline: 1px solid #c1c1c1;
border-radius: 100%;
background-size: 100% 100%;
background-position: center;
box-sizing: border-box;
}
.div-discount-system .wb-color-swatch-radio{
margin: 0px 2px 0px 2px;
}
.wb-color-swatch-radio:after {
content: "";
position: absolute;
left: -3px;
top: -3px;
width: 26px;
height: 26px;
background: #e0e0e0;
border-radius: 100%;
box-sizing: border-box;
z-index: -1;
}
.wb-swatch-container .title-option-wb {
width: 100%;
margin: 0;
}
.wb-swatch-container .title-option-wb.label_num_auto_discount_wb {
width: auto;
margin: 0;
margin-right: 5px;
}
.wb-swatch-container {
display: flex;
flex-wrap: wrap;
gap:6px 15px;
margin-bottom: 10px;
}
.wb-swatch-container.div-discount-system{
gap: 0px;
flex-wrap: nowrap;
}
.div-discount-system .wb-color-swatch-box{
margin-right: 5px;
float: left;
}
.div-discount-system .wb-color-swatch{
margin-bottom: 5px;
}
.swatch-3-select,
.swatch-2-select,
.swatch-1-select {
display: none !important;
}
.general_option_label_wb_wrapper {
width: 100%;
display: flex;
gap: 8px;
align-items: center;
padding: 2px 0;
}
.general_option_label_wb{
display: flex;
align-items: center;
gap: 8px;
color: ${wideBundle.settings.option_color};
font-size: ${wideBundle.settings.option_fontsize};
font-weight: 600;
margin-bottom: 5px !important;
margin-top: 7px !important;
}
.general_option_label_wb_wrapper > p.general_option_label_wb {
text-align: left!important;
width: 100%!important;
margin-top: 0!important;
margin-bottom: 0!important;
}
.general_option_label_wb_wrapper > p.general_option_label_wb img {
border-radius: ${wideBundle.settings.design_code == 4 ? '5px' : wideBundle.settings.border_radius};
border: 1px solid ${wideBundle.settings.border_color};
}
.discount_system_select_wb{
-webkit-appearance: auto !important;
-moz-appearance: auto !important;
appearance: auto !important;
background-position: initial !important;
background-image: none !important;
background-repeat: initial !important;
font-size: 0.8em !important;
padding-right: 5px !important;
width: auto !important;
max-width: 80px;
min-width: auto !important;
margin-left: 0px !important;
margin-right: 5px !important;
margin-bottom: 5px !important;
height: 22px !important;
line-height: 22px !important;
min-height: 22px !important;
}
.label_num_auto_discount_wb{
margin-top: -4px !important;
margin-bottom: 0px !important;
}
.div-discount-system{
margin-top: 0px !important;
display: flex;
margin-bottom: 2px;
align-items: center;
}
.general_option_label_wb:first-of-type{
margin-top: 10px !important;
}
.selectable .general_option_label_wb{
display: none;
}
.wb-gift-product-wrapper{
width: 100%;
order: 999;
flex-basis: 100%;
display: flex;
padding: 10px;
align-items: center;
background: #d5d5d5;
justify-content: space-between;
margin-top: 10px;
position: relative;
}
.wb-gift-product-wrapper.wb-gift-product-wrapper--upsell {
display: none;
gap: 10px;
padding-left: 0!important;
}
.wb-gift-product-wrapper--upsell .gift-left-container {
flex-grow: 1;
}
.wb-gift-product-wrapper--upsell .wb-upsell-checkbox {
appearance: none!important;
background: transparent!important;
border: none!important;
position: relative;
flex-shrink: 0;
width: 40px;
height: 40px;
margin: 0;
margin-right: -8px;
padding: 0;
cursor: pointer;
}
.wb-gift-product-wrapper--upsell .wb-upsell-checkbox::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
background: rgb(244, 244, 244);
border: 2px solid ${wideBundle.settings.border_color};
border-radius: 5px;
transform: translate(-50%, -50%);
}
.wb-gift-product-wrapper--upsell .wb-upsell-checkbox:checked::before {
background: ${wideBundle.settings.border_color};
}
.wb-gift-product-wrapper--upsell .wb-upsell-checkbox:checked::after {
content: "";
box-sizing: content-box;
display: block;
content: "";
position: absolute;
top: 14.8px;
left: 15.4px;
border-right: 2px solid rgba(0,0,0,0);
border-bottom: 2px solid rgba(0,0,0,0);
transform-origin: 0% 100%;
width: 3.2px;
height: 8px;
border-color: #ffffff;
transform: translate3d(0, -4px, 0) rotate(45deg);
}
.gift-left-sub-container{
margin-left: 10px;
text-align: left;
}
.offer-free-gift.selectable .wb-gift-product-wrapper .free-gift-text{
display: block;
}
.free-gift-text{
margin: 0;
${wideBundle.settings.rtl == 0 ? 'text-align: left;' : ''};
margin: 0;
color: ${wideBundle.settings.offer_color};
}
.plus-circle {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -12px;
width: 24px;
height: 24px;
background-color: #808080;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
font-family: Helvetica;
}
.wb-user-text-wrapper {
display: none;
flex-direction: column;
gap: 4px;
padding: 10px;
padding-top: 0;
padding-left: 0;
margin-left: 0;
margin-top: 10px;
}
.wb-user-text-wrapper .label-user-text {
font-weight: 400;
font-style: normal;
line-height: 1.25;
}
.wb-user-text-wrapper .input-user-text {
padding: 2px 4px;
min-height: 24px;
font-weight: 400;
font-style: normal;
border: 1px solid ${wideBundle.settings.border_color};
border-radius: ${wideBundle.settings.border_radius};
}
.wb-user-text-wrapper .error-user-text {
display: none;
color: #ff0000;
font-weight: 400;
line-height: 1.25;
}
.wb-user-text-wrapper.wb-user-text-wrapper--has-error .input-user-text {
border-color: #ff0000!important;
}
.wb-user-text-wrapper.wb-user-text-wrapper--has-error .error-user-text {
display: block;
}
.selectedWB .wb-user-text-wrapper {
display: flex;
}
.wb-offer-timer {
border-top-left-radius: calc(${wideBundle.settings.unselected_border_radius} - ${wideBundle.settings.unselected_border_size});
border-top-right-radius: calc(${wideBundle.settings.unselected_border_radius} - ${wideBundle.settings.unselected_border_size});
}
.selectedWB .wb-offer-timer {
border-top-left-radius: calc(${wideBundle.settings.border_radius} - ${wideBundle.settings.border_size});
border-top-right-radius: calc(${wideBundle.settings.border_radius} - ${wideBundle.settings.border_size});
}
.selectedWB .free-gift-text{
color: ${wideBundle.settings.offer_selected_color};
${wideBundle.settings.style_title_selected == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title_selected == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_title_selected == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title_selected == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .free-gift-text{
color: ${wideBundle.settings.offer_color};
${wideBundle.settings.style_title == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.style_title == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.style_title == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.offer-free-gift img:not(.thumbnailWB){
width: 38px;
height: 38px;
}
.gift-left-container{
display: flex;
align-items: center;
}
.gift-price-new-form{
text-align: right;
margin: 0px;
}
.offer-discount-system.offer-free-gift{
padding: 5px 0px 5px 0px;
padding-bottom: 0px;
flex-wrap: wrap;
}
.offer-discount-system.offer-free-gift.selectedWB.with-economic-text{
padding-bottom: 0px;
}
.offer-free-gift .price-new-form{
padding-right: 10px;
}
.offer-free-gift .wb-gift-product-wrapper .general_option_label_wb{
margin: 0px 0px 5px 0px !important;
}
.selectable .wb-gift-product-wrapper{
background-color: ${wideBundle.settings.unselected_free_gift_background_color};
border-bottom-left-radius: ${wideBundle.settings.unselected_border_radius};
border-bottom-right-radius: ${wideBundle.settings.unselected_border_radius};
}
.selectable .wb-gift-product-wrapper .free-gift-text{
color: ${wideBundle.settings.unselected_free_gift_text_color};
${wideBundle.settings.unselected_free_gift_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .wb-gift-product-wrapper .plus-circle{
background-color: ${wideBundle.settings.unselected_free_gift_icon_color};
}
.selectedWB .wb-gift-product-wrapper{
background-color: ${wideBundle.settings.selected_free_gift_background_color};
border-bottom-left-radius: ${wideBundle.settings.border_radius};
border-bottom-right-radius: ${wideBundle.settings.border_radius};
}
.selectedWB .wb-gift-product-wrapper .free-gift-text{
color: ${wideBundle.settings.selected_free_gift_text_color};
${wideBundle.settings.selected_free_gift_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectedWB .wb-gift-product-wrapper .plus-circle{
background-color: ${wideBundle.settings.selected_free_gift_icon_color};
}
.selectable .wb-gift-product-wrapper .free-gift-text {
font-size: ${wideBundle.settings.unselected_free_gift_text_fontsize};
}
.selectedWB .wb-gift-product-wrapper .free-gift-text {
font-size: ${wideBundle.settings.selected_free_gift_text_fontsize};
}
.title-variant--with-custom{
display: inline;
}
.title-custom-text{
font-size: ${wideBundle.settings.unselected_title_text_size};
background-color: ${wideBundle.settings.unselected_title_text_bg};
padding: 4px 10px;
border-radius: ${wideBundle.settings.unselected_title_text_radius};
color: ${wideBundle.settings.unselected_title_text_color} !important;
border: 1px solid ${wideBundle.settings.unselected_title_text_border};
height: fit-content;
width: max-content;
vertical-align: middle;
position: relative;
line-height: 1;
margin-left: 6px;
top: -1px;
${wideBundle.settings.unselected_title_text_font != 'auto' ? 'font-family: "' + wideBundle.settings.unselected_title_text_font + '", Arial, sans-serif;' : ''}
${wideBundle.settings.unselected_title_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_title_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.unselected_title_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_title_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
.selectable .title-custom-text {
font-size: ${wideBundle.settings.unselected_title_text_size};
background-color: ${wideBundle.settings.unselected_title_text_bg};
color: ${wideBundle.settings.unselected_title_text_color} !important;
border-color: ${wideBundle.settings.unselected_title_text_border};
}
.selectedWB .title-custom-text{
font-size: ${wideBundle.settings.selected_title_text_size};
background-color: ${wideBundle.settings.selected_title_text_bg};
color: ${wideBundle.settings.selected_title_text_color} !important;
border-color: ${wideBundle.settings.selected_title_text_border};
border-radius: ${wideBundle.settings.selected_title_text_radius};
${wideBundle.settings.selected_title_text_font != 'auto' ? 'font-family: "' + wideBundle.settings.selected_title_text_font + '", Arial, sans-serif;' : ''}
${wideBundle.settings.selected_title_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_title_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.selected_title_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_title_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
@media screen and (max-width: 600px) {
.title-variant--with-custom {
gap: 4px;
}
}
/* For cards without options - use full height for image */
.wb-gift-card:not(.has-options) .wb-gift-image-wrapper {
height: 100%;
border-radius: 5px;
}
/* Adjusting the content layout when there are options */
.wb-gift-card.has-options .wb-gift-card-content {
display: flex;
flex-direction: column;
}
.wb-gift-card.has-options .wb-gift-image-wrapper {
height: 100%;
width: 100%;
}
.wb-all-free-gifts-container {
margin: 15px 0;
padding: 0;
border: none;
}
.wb-gifts-unlock-message {
text-align: center;
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0 0 15px 0;
}
.wb-gifts-cards-container {
display:flex;
flex-wrap:wrap; /* let the cards break onto new rows */
gap:15px; /* the same gap you already had */
justify-content:center;
}
/* Wrapper for both card and text */
.wb-gift-card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex:0 1 calc(33.333% - 15px); /* 3-per-row minus the gap */
max-width: 130px;
min-width: 90px;
}
.wb-gift-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
border-radius: 5px;
position: relative;
transition: all 0.3s ease;
background-color: #d5d5d5;
width: 100%;
/* Set aspect ratio to be 1:1 with min-height to ensure square */
aspect-ratio: 1/1;
overflow: visible; /* Important for the animations */
}
.wb-gift-plus-icon {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 24px;
background-color: #808080;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
font-family: Helvetica;
z-index: 2;
transition: all 0.3s ease;
}
.wb-gift-available .wb-gift-plus-icon{
background-color: ${wideBundle.settings.selected_free_gift_icon_color};
}
.wb-gift-locked .wb-gift-plus-icon{
background-color: rgb(128, 128, 128);
}
.wb-gift-card-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
/* Text container outside the card */
.wb-gift-text-container {
width: 100%;
margin-top: -20px;
z-index: 10;
text-align: center;
}
.wb-gift-price-display{
font-size:0.8em;
background-color: ${wideBundle.settings.selected_free_gift_background_color};
border-radius:0px 0px 5px 5px;
padding: 1px 5px;
}
.wb-gift-card-wrapper-locked .wb-gift-price-display{
background-color: #dadada;
}
/* New styles for variant selectors outside card */
.wb-gift-variant-selectors-outside {
width: 100%;
margin-bottom: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Hide variant selectors for locked gifts */
.wb-gift-locked + .wb-gift-text-container .wb-gift-variant-selectors-outside {
display: none;
}
.wb-gift-card-text {
margin: 0;
font-size: ${wideBundle.settings.selected_free_gift_text_fontsize};
${wideBundle.settings.selected_free_gift_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.selected_free_gift_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
color: #333;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.2;
}
.wb-gift-card-wrapper-locked .wb-gift-card-text{
font-size: ${wideBundle.settings.unselected_free_gift_text_fontsize};
${wideBundle.settings.unselected_free_gift_text_style == 'none' ? 'font-style: normal !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'bold' ? 'font-style: normal !important;font-weight: bold !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'italic' ? 'font-style: italic !important;font-weight: normal !important;' : ''}
${wideBundle.settings.unselected_free_gift_text_style == 'bold-italic' ? 'font-style: italic !important;font-weight: bold !important;' : ''}
}
/* Image wrapper to allow full-width */
.wb-gift-image-wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
overflow: hidden;
position: relative;
background-color: #f9f9f9;
}
/* Updated image styles */
.wb-gift-card-image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wb-gift-options-label {
margin: 5px 0;
font-size: 12px;
color: #555;
font-weight: 500;
text-align: center;
}
.wb-gift-option-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
flex-wrap: wrap;
}
.wb-gift-select {
font-size: 12px;
padding: 3px 6px;
border: 1px solid #ddd;
border-radius: 3px;
max-width: 95%;
}
.wb-gift-swatch-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
/* Locked gift styles */
.wb-gift-locked {
opacity: 0.9;
background-color: #e4e4e4 !important;
}
.wb-gift-available {
opacity: 1;
}
.wb-gift-lock-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.wb-gift-lock-icon {
opacity: 1 !important;
}
/* Simple bounce animation */
.wb-gift-bounce {
animation: bounceEffect 0.5s ease;
}
.js-wb-dynamic-group {
display: none;
width: 100%;
margin: 0;
padding: 2px 0;
${wideBundle.settings.design_code == 1 ? 'padding-left: 4px;' : ''}
text-align: left;
border: none;
background: transparent;
color: ${wideBundle.settings.offer_color};
}
.js-wb-dynamic-group--slim {
width: 38px;
height: 38px;
margin: 0;
padding: 0;
}
.js-wb-dynamic-group .js-wb-dynamic-group__thumb {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
margin: 0;
background: #ffffff;
color: ${wideBundle.settings.border_color};
font-size: 20px;
font-weight: 700;
font-family: inherit;
line-height: 20px;
border-radius: ${wideBundle.settings.design_code == 4 ? '5px' : wideBundle.settings.border_radius};
border: 1px solid ${wideBundle.settings.border_color};
pointer-events: none;
}
.js-wb-dynamic-group .js-wb-dynamic-group__choose {
width: 100%;
cursor: pointer;
background-color: ${wideBundle.settings.atc_background};
color: ${wideBundle.settings.atc_color};
border-radius: ${wideBundle.settings.design_code == 4 ? '5px' : wideBundle.settings.atc_radius};
text-align: center;
font-size: 12px;
border: 0;
margin: 0;
padding: 6px 15px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
${wideBundle.settings.atc_font != 'auto' ? 'font-family: "' + wideBundle.settings.atc_font + '"' : ''}
}
.js-wb-dynamic-group .js-wb-dynamic-group__choose:hover {
background-color: ${wideBundle.settings.hover_color};
}
.js-wb-dynamic-group .js-wb-dynamic-group__close {
cursor: pointer;
background: transparent;
color: ${wideBundle.settings.border_color};
border: 0;
margin: 0;
padding: 7px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.js-wb-dynamic-group .js-wb-dynamic-group__close:hover {
background: rgb(0 0 0 / 10%);
}
.selectedWB .wb-gift-product-wrapper--upsell {
display: flex;
padding-left: 0!important;
}
.selectedWB .js-wb-dynamic-group {
display: flex;
gap: ${wideBundle.settings.design_code == 1 ? '8px' : '12px'};
align-items: center;
justify-content: flex-start;
color: ${wideBundle.settings.offer_selected_color};
}
.selectedWB .js-wb-dynamic-group--slim {
display: flex;
}
#wb-dynamic-group-popup.wb-dg-popup {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: env(safe-area-inset-top, 0);
left: 0;
width: 100%;
height: 100svh;
overflow: hidden;
z-index: 9999;
}
#wb-dynamic-group-popup .wb-dg-popup__content {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 24px;
width: 100%;
height: 100%;
padding: 16px 24px;
background: #ffffff; /* var(--wb-msg-bg-color, #ffffff); */
}
#wb-dynamic-group-popup .wb-dg-popup__header {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
#wb-dynamic-group-popup .wb-dg-popup__title {
margin: 0;
color: var(--wb-title-color, #000000);
font-family: var(--wb-title-font, inherit);
font-weight: 600;
font-size: var(--wb-title-font-size, 24px);
text-transform: none;
}
#wb-dynamic-group-popup .wb-dg-popup__close-btn {
display: grid;
flex-shrink: 0;
place-content: center;
padding: 8px;
border: none;
border-radius: 50%;
color: var(--wb-atc-color, #ffffff);
background: var(--wb-atc-bg, #000000);
cursor: pointer;
}
#wb-dynamic-group-popup .wb-dg-popup__close-btn:hover {
opacity: 0.8;
}
#wb-dynamic-group-popup .wb-dg-popup__products {
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
list-style: none;
}
#wb-dynamic-group-popup .wb-dg-popup-product {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
padding: 0 12px;
border-top: 1px solid var(--wb-option-border-color, #dadada);
}
#wb-dynamic-group-popup .wb-dg-popup-product:hover {
background: rgb(0 0 0 / 10%);
}
#wb-dynamic-group-popup .wb-dg-popup-product:has(input:checked) {
background: rgb(0 0 0 / 15%);
}
#wb-dynamic-group-popup .wb-dg-popup-product__input {
appearance: none;
display: grid;
place-content: center;
flex-shrink: 0;
background-color: transparent;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
border: var(--wb-msg-border-size, 2px) solid var(--wb-atc-bg, #000000);
border-radius: 0;
cursor: pointer;
}
#wb-dynamic-group-popup .wb-dg-popup-product__input:checked {
background-color: var(--wb-atc-bg, #000000);
}
#wb-dynamic-group-popup .wb-dg-popup-product__input:checked::before {
content: "✓";
place-content: center;
display: grid;
width: 20px;
height: 20px;
color: var(--wb-atc-color, #ffffff);
background: var(--wb-atc-bg, #000000);
font-size: 15px;
font-weight: 600;
line-height: 20px;
}
#wb-dynamic-group-popup .wb-dg-popup-product__label {
display: flex;
gap: 16px;
flex-grow: 1;
flex-shrink: 1;
align-items: center;
max-width: 95%;
padding: 12px 0;
font-weight: 600;
cursor: pointer;
}
#wb-dynamic-group-popup .wb-dg-popup-product__image {
position: relative;
border-radius: 8px;
flex-shrink: 0;
width: 64px;
height: 64px;
}
#wb-dynamic-group-popup .wb-dg-popup-product__image::after {
content: "";
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
position: absolute;
inset: 0px;
}
#wb-dynamic-group-popup .wb-dg-popup-product__thumb {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
#wb-dynamic-group-popup .wb-dg-popup-product__title {
font-size: 18px;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#wb-dynamic-group-popup .wb-dg-popup__footer {
width: 100%;
}
#wb-dynamic-group-popup .wb-dg-popup__submit-btn {
width: 100%;
padding: 16px 32px;
border: none;
border-radius: var(--wb-atc-radius, 8px);
color: var(--wb-atc-color, #ffffff);
background: var(--wb-atc-bg, #000000);
font-family: var(--wb-atc-font, inherit);
font-size: var(--wb-atc-font-size, 18px);
font-weight: 500;
cursor: pointer;
}
#wb-dynamic-group-popup .wb-dg-popup__submit-btn:hover {
opacity: 0.8;
}
#wb-dynamic-group-popup .wb-dg-popup__submit-btn:disabled {
opacity: 0.5!important;
pointer-events: none!important;
}
#wb-dynamic-group-popup .wb-dg-popup__overlay {
display: none;
}
@media screen and (min-width: 520px) {
#wb-dynamic-group-popup.wb-dg-popup {
padding: 32px;
}
#wb-dynamic-group-popup .wb-dg-popup__content {
max-width: 760px;
max-height: 800px;
border-radius: 12px; /* var(--wb-msg-border-radius, 12px); */
}
#wb-dynamic-group-popup .wb-dg-popup__footer {
width: fit-content;
justify-self: end;
}
#wb-dynamic-group-popup .wb-dg-popup__overlay {
position: absolute;
inset: 0;
display: block;
background: rgb(0 0 0 / 40%);
z-index: -1;
}
}
@keyframes bounceEffect {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
`;
addStyleToPage(mainStyle, attribute);
}
//Add the style based on structure used
wideBundle.addStructureStyle = function (attribute = 'structure') {
if(document.querySelector('.block-settings') !== null){
var structure = wideBundle.settings.design_code; //Layout chosen
}
else{
var structure = wideBundle.settings.plan == "monthly" && wideBundle.settings.design_code > 3 ? 0 : wideBundle.settings.design_code; //Layout chosen
}
if (structure == 0) { //For basic and default design
if (wideBundle.settings.display_quantity == 1) { //Add style for quantity button if enabled
var style = `
.value-left .offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "90px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "110px" : "130px")} !important;;
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "90px" : (wideBundle.settings.thumbnail_size == "m" ? "110px" : "130px")} !important;;
}
.selectedWB{
position: relative;
padding-bottom: 10px;
}
.spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: 0px;
margin-left: auto;
}
.quantity-wb-input{
height: 30px;
}
.selectable{
padding-bottom: 10px;
}
@media screen and (max-width: 400px){
.selectedWB{
position: relative;
padding-bottom: 40px;
}
.spinWB{
position: absolute;
height: 25px;
right: 5px;
bottom: 5px;
margin: 0px;
}
.quantity-wb-input{
height: 25px;
}
}
`;
addStyleToPage(style, attribute);
}
}
else if (structure == 1) { //For vertical layout
var style = `
.div-discount-system{
flex-direction: row;
}
.general_option_label_wb:not(.wb-gift-product-wrapper .general_option_label_wb) {
text-align: center;
}
.title-variant{
text-align: center;
margin-top: 10px;
}
.selectedWB .title-variant{
font-size: ${(parseFloat(wideBundle.settings.selected_title_fontsize) -0.2) + 'em' };
}
.selectable .title-variant{
font-size: ${(parseFloat(wideBundle.settings.unselected_title_fontsize) -0.2) + 'em' };
}
.new-form-option .first-unit-WB{
margin-left: auto;
margin-bottom: 0px;
padding-left: 10px;
text-align: center;
display: flex;
flex-direction: column;
}
.price-new-form, .first-unit-WB{
//font-size: ${wideBundle.settings.price_size};
text-align: center;
}
.best-title{
width: 100%;
text-align: center;
display: block;
margin-top: 10px;
}
.economic-wb{
text-align: center;
}
.selectedWB .economic-wb{
font-size: ${(parseFloat(wideBundle.settings.selected_savings_fontsize) -0.1) + 'em' };
}
.selectable .economic-wb{
font-size: ${(parseFloat(wideBundle.settings.unselected_savings_fontsize) -0.1) + 'em' };
}
.p-title-WB{
width: 100%;
flex-basis: 100%;
}
#new-form, .new-wb-form{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.new-form-option{
display: block;
padding: 10px 10px 10px 10px;
margin: 7px;
flex: 1;
}
.offer-with-gift-flex-wrapper{
display: block;
width: 100%;
}
.value-right{
max-width: 100%;
text-align: center;
}
.value-left{
display: block;
}
.value-left img{
margin: 0;
}
.checkedWB{
margin: auto;
margin-top: 5px;
margin-bottom: 10px;
}
#new-form .select-class-second, .new-wb-form .select-class-second{
margin: 2px 0px 0px 0px;
}
#new-form .select-class-first, .new-wb-form .select-class-first{
margin: 2px 0px 0px 0px;
}
.selectedWB .div-select2{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
justify-content: center;
}
.selectedWB .div-select2 p{
margin-top: 7px;
margin-bottom: 3px;
}
.selectable{
border: ${wideBundle.settings.unselected_border_size} solid ${wideBundle.settings.unselected_border_color};
}
.new-form-option .value-left{
flex-direction: column;
}
.wb-swatch-container .title-option-wb {
text-align: center;
}
.wb-swatch-container .title-option-wb.label_num_auto_discount_wb {
text-align: initial;
}
.wb-swatch-container .wb-color-swatch-box {
margin-right: 0;
justify-content: center;
}
.offer-free-gift .value-right{
width: 100%;
}
.offer-free-gift{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.offer-free-gift .wb-gift-product-wrapper{
margin-top: auto;
flex-basis: auto;
}
.offer-free-gift .price-new-form{
padding-right: 0px;
}
.offer-discount-system .block_dropdowns_wb:not(.wb-gift-product-wrapper .block_dropdowns_wb) {
display: flex;
flex-wrap: wrap;
padding: 5px;
justify-content: center;
}
.wb-user-text-wrapper {
margin-left: 0;
width: 100%;
}
`;
if (wideBundle.settings.display_quantity == 1) {
style += `
.selectedWB{
position: relative;
padding-bottom: 5px;
}
.selectedWB .spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: auto;
margin-top: 10px;
}
.selectedWB .quantity-wb-input{
height: 30px;
line-height: 30px;
}
.selectable{
padding-bottom: 5px;
}
`;
}
addStyleToPage(style, attribute);
}
else if (structure == 2) { //For minimalist layout
var style = `
.thumbnailWB{
width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "30px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "40px" : "50px")} !important;
}
.selectedWB .thumbnailWB{
width: ${wideBundle.settings.thumbnail_size == "s" ? "30px" : (wideBundle.settings.thumbnail_size == "m" ? "40px" : "50px")} !important;
}
.offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "78px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "88px" : "98px")} !important;
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "78px" : (wideBundle.settings.thumbnail_size == "m" ? "88px" : "98px")} !important;
}
.new-form-option{
position: relative;
padding: 5px 10px 5px 0px;
}
.offer-with-gift-flex-wrapper{
position:relative;
}
.selectedWB .title-variant{
font-size: ${(parseFloat(wideBundle.settings.selected_title_fontsize) -0.2) + 'em' };
}
.selectable .title-variant{
font-size: ${(parseFloat(wideBundle.settings.unselected_title_fontsize) -0.2) + 'em' };
}
.new-form-option .price-new-form, .new-form-option .first-unit-WB{
${wideBundle.settings.rtl == 1 ? 'margin-right: auto;' : 'margin-left: auto;'}
${wideBundle.settings.rtl == 1 ? 'text-align: left;' : 'text-align: right;'}
margin-bottom: 0px;
padding-left: 10px;
${wideBundle.settings.rtl == 1 ? 'padding-right: 10px;' : ''}
}
.new-form-option .first-unit-WB{
text-align: center;
display: flex;
flex-direction: column;
}
.economic-wb{
margin-top: 0px;
margin-bottom: 0px;
}
span.money.first-price-WB, .first-price-WB{
margin-right: 0px;
white-space: nowrap;
overflow: hidden;
}
span.money.second-price-WB, .second-price-WB{
margin-left: 5px;
white-space: nowrap;
overflow:hidden;
}
.div-select2{
margin-top: 5px;
}
.checkedWB{
width: 12px;
height: 12px;
border: 2px solid rgb(244, 244, 244);
}
.title-option-wb{
margin-bottom: 0px;
}
.diagonal-offer{
padding-right: 40px !important;
}
@media screen and (max-width: 600px){
.title-option-wb{
width: 100%;
margin-bottom: 0px;
}
.div-discount-system .title-option-wb{
width: auto;
margin-bottom: 0px;
}
.thumbnailWB{
width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "30px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "40px" : "40px")} !important;
}
.selectedWB .thumbnailWB{
width: ${wideBundle.settings.thumbnail_size == "s" ? "30px" : (wideBundle.settings.thumbnail_size == "m" ? "40px" : "40px")} !important;
}
.offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "78px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "88px" : "88px")} !important;
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "78px" : (wideBundle.settings.thumbnail_size == "m" ? "88px" : "88px")} !important;
}
}
@media screen and (max-width: 400px){
#new-form .select-option-third, .new-wb-form .select-option-third{
margin-top: 2px;
margin-left: 0px;
}
#new-form .div-discount-system .select-option-third, .new-wb-form .div-discount-system .select-option-third{
margin-top: 0px;
}
#new-form .select-option-second, .new-wb-form .select-option-second{
float: none;
}
#new-form .div-discount-system .select-option-second, .new-wb-form .div-discount-system .select-option-second{
float: left;
}
}
`;
if (wideBundle.settings.display_quantity == 1) {
style += `
.spinWB{
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
.selectedWB{
position: relative;
padding-bottom: 5px;
}
.selectedWB .spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: 0px;
margin-left: 5px;
}
.selectedWB .quantity-wb-input{
height: 30px;
}
.selectable{
padding-bottom: 5px;
}
@media screen and (max-width: 400px){
.selectedWB{
position: relative;
padding-bottom: 40px;
}
.selectedWB .spinWB{
position: absolute;
height: 25px;
right: 5px;
bottom: 5px;
}
.selectedWB .quantity-wb-input{
height: 25px;
}
}
`;
}
//We hve to move the price and quantity to the right of the offer for that layout
var elemsUnit = document.querySelectorAll('.new-form-option .first-unit-WB');
for (var i = 0; i < elemsUnit.length; i++) {
if (!elemsUnit[i].closest(".value-right")) continue;
offerNode = elemsUnit[i].parentNode.parentNode;
offerNode.appendChild(elemsUnit[i]);
}
var elems = document.querySelectorAll('.new-form-option .price-new-form');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
offerNode = elems[i].parentNode.parentNode;
offerNode.appendChild(elems[i]);
if (wideBundle.settings.display_quantity == 1) {
quantityElem = document.querySelectorAll('.spinWB')[i];
offerNode.appendChild(quantityElem);
}
}
addStyleToPage(style, attribute);
}
else if (structure == 3) { //For royal layout
var style = `
.new-form-option .price-new-form, .new-form-option .first-unit-WB{
${wideBundle.settings.rtl == 1 ? 'margin-right: auto;' : 'margin-left: auto;'}
${wideBundle.settings.rtl == 1 ? 'text-align: left;' : 'text-align: right;'}
margin-bottom: 0px;
padding-left: 10px;
${wideBundle.settings.rtl == 1 ? 'padding-right: 10px;' : ''}
}
.new-form-option .first-unit-WB{
text-align: center;
display: flex;
flex-direction: column;
}
span.money.first-price-WB, .first-price-WB{
margin-right: 0px;
white-space: nowrap;
overflow: hidden;
}
span.money.second-price-WB, .second-price-WB{
margin-left: 5px;
white-space: nowrap;
overflow: hidden;
}
.new-form-option{
position: relative;
padding: 5px 10px 5px 0px;
}
.offer-with-gift-flex-wrapper{
position: relative;
}
.with-message .div-select2{
margin-top: 10px;
}
.with-message .title-variant{
margin-bottom: -5px;
}
.economic-wb{
margin-top: 0px;
margin-bottom: 0px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
background-color: ${wideBundle.settings.border_color};
padding: 3px 40px 3px 40px;
border-radius: 5px;
white-space: nowrap;
overflow: hidden;
z-index: 1;
}
.with-economic-text{
padding-bottom: 20px;
margin-bottom: 18px;
}
.value-right.with-message{
padding-bottom: 20px;
}
.diagonal-offer{
padding-right: 40px !important;
}
@media screen and (max-width: 600px){
.title-option-wb{
margin-bottom: 0px;
}
.has-double-select .title-option-wb{
width: 100%;
}
.has-double-select.div-discount-system .title-option-wb{
width: auto;
}
.offer-image img{
width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "30px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "40px" : "60px")};
}
.selectedWB .offer-image img{
width: ${wideBundle.settings.thumbnail_size == "s" ? "30px" : (wideBundle.settings.thumbnail_size == "m" ? "40px" : "60px")};
}
.offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "80px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "90px" : "110px")};
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "80px" : (wideBundle.settings.thumbnail_size == "m" ? "90px" : "110px")};
}
.selectedWB .title-variant{
font-size: ${(parseFloat(wideBundle.settings.selected_title_fontsize) -0.2) + 'em' };
}
.selectable .title-variant{
font-size: ${(parseFloat(wideBundle.settings.unselected_title_fontsize) -0.2) + 'em' };
}
}
@media screen and (max-width: 400px){
#new-form .select-option-third, .new-wb-form .select-option-third{
margin-top: 2px;
margin-left: 0px;
}
#new-form .div-discount-system .select-option-third, .new-wb-form .div-discount-system .select-option-third{
margin-top: 0px;
}
#new-form .select-option-second, .new-wb-form .select-option-second{
float: none;
}
#new-form .div-discount-system .select-option-second, .new-wb-form .div-discount-system .select-option-second{
float: left;
}
}
`;
if (wideBundle.settings.display_quantity == 1) {
style += `
.spinWB{
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
.selectedWB{
position: relative;
padding-bottom: 5px;
}
.selectedWB.with-economic-text{
padding-bottom: 20px;
}
.selectedWB .spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: 0px;
margin-left: 5px;
}
.selectedWB .quantity-wb-input{
height: 30px;
}
.selectable{
padding-bottom: 5px;
}
.selectable.with-economic-text{
padding-bottom: 20px;
}
@media screen and (max-width: 400px){
.selectedWB{
position: relative;
padding-bottom: 40px;
}
.selectedWB.with-economic-text{
padding-bottom: 40px;
}
.selectedWB .spinWB{
position: absolute;
height: 25px;
right: 5px;
bottom: 20px;
}
.selectedWB .quantity-wb-input{
height: 25px;
}
}
`;
}
//We have to move the price and quantity to the right of the offer for that layout
var elemsUnit = document.querySelectorAll('.new-form-option .first-unit-WB');
for (var i = 0; i < elemsUnit.length; i++) {
if (!elemsUnit[i].closest(".value-right")) continue;
offerNode = elemsUnit[i].parentNode.parentNode;
offerNode.appendChild(elemsUnit[i]);
}
var elems = document.querySelectorAll('.new-form-option .price-new-form');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
offerNode = elems[i].parentNode.parentNode;
offerNode.appendChild(elems[i]);
if (wideBundle.settings.display_quantity == 1) {
quantityElem = document.querySelectorAll('.spinWB')[i];
offerNode.appendChild(quantityElem);
}
}
//We have to move the economic price
var elems = document.querySelectorAll('.new-form-option .economic-wb');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
elems[i].closest('.new-form-option').appendChild(elems[i]);
}
addStyleToPage(style, attribute);
}
else if (structure == 4) { //For elegant layout
var style = `
.new-form-option .price-new-form, .new-form-option .first-unit-WB{
${wideBundle.settings.rtl == 1 ? 'margin-right: auto;' : 'margin-left: auto;'}
${wideBundle.settings.rtl == 1 ? 'text-align: left;' : 'text-align: right;'}
margin-bottom: 0px;
padding-left: 20px;
${wideBundle.settings.rtl == 1 ? 'padding-right: 10px;' : ''}
display: flex;
flex-direction: column;
}
.new-form-option .first-unit-WB{
text-align: center;
display: flex;
flex-direction: column;
}
span.money.first-price-WB, .first-price-WB{
margin-right: 0px;
white-space: nowrap;
overflow: hidden;
}
span.money.second-price-WB, .second-price-WB{
margin-left: 5px;
white-space: nowrap;
overflow: hidden;
}
.new-form-option{
position: relative;
padding: 10px 10px 10px 0px;
margin-bottom: 0px;
border-radius: 0px;
border-top: 0px !important;
border-color: ${wideBundle.settings.border_color} !important;
}
.offer-with-gift-flex-wrapper{
position:relative;
}
.with-message .div-select2{
margin-top: 10px;
}
.with-message .title-variant{
margin-bottom: -5px;
}
.checkedWB {
box-shadow: 0 0 0 2px ${wideBundle.settings.border_color};
border: 2px solid #f4f4f4;
border-radius: 5px;
width: 15px;
height: 15px;
}
.economic-wb{
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
background-color: ${wideBundle.settings.border_color};
padding: 3px 40px 3px 40px;
white-space: nowrap;
overflow: hidden;
}
.selectable .economic-wb {
padding: ${parseInt(wideBundle.settings.unselected_border_size) + 3}px 8px 3px ${parseInt(wideBundle.settings.unselected_border_size) + 8}px;
}
.selectedWB .economic-wb {
padding: ${parseInt(wideBundle.settings.border_size) + 3}px 8px 3px ${parseInt(wideBundle.settings.border_size) + 8}px;
}
.selectable.with-economic-text:not(.offer-free-gift.selectable.with-economic-text){
padding-bottom: ${(parseInt(wideBundle.settings.unselected_border_size) / 2) + 30}px !important;
}
.offer-free-gift.selectable.with-economic-text .wb-gift-product-wrapper{
padding-bottom: 20px;
}
.offer-free-gift.selectedWB.with-economic-text .wb-gift-product-wrapper{
padding-bottom: 20px;
}
.selectedWB.with-economic-text:not(.offer-free-gift.selectedWB.with-economic-text){
padding-bottom: ${(parseInt(wideBundle.settings.border_size) / 2) + 30}px !important;
}
.p-title-WB{
background-color: ${wideBundle.settings.border_color};
margin: 0px;
padding: 8px 0px;
overflow: unset;
border-radius: 5px 5px 0px 0px;
}
.p-title-WB__content {
${wideBundle.settings.preview_heading_position == 'left' ? 'margin: 0 auto 0 10px;' : ''}
${wideBundle.settings.preview_heading_position == 'center' ? 'margin: 0 auto;' : ''}
${wideBundle.settings.preview_heading_position == 'right' ? 'margin: 0 10px 0 auto;' : ''}
}
.p-title-WB__arrow{
z-index: 1;
}
.p-title-WB__arrow::before{
content: '';
position: absolute;
top: 100%;
left: calc(50% - 10px);
background-color: ${wideBundle.settings.border_color};
width: 20px;
height: 10px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.corner-offer-container{
margin-top: 0px;
}
.diagonal-offer{
padding-right: 40px !important;
}
#new-form-atc, .new-form-atc{
border-radius: 5px;
}
.settings-preview-main-wrapper{
margin-top: 15px !important;
}
.best-title{
display: inline-block;
}
#new-form .selectable, .new-wb-form .selectable, #new-form .selectedWB, .new-wb-form .selectedWB{
border-radius: 0px;
}
#new-form .selectable .wb-offer-timer,
#new-form .selectedWB .wb-offer-timer,
.new-wb-form .selectable .wb-offer-timer,
.new-wb-form .selectedWB .wb-offer-timer {
border-radius: 0px;
}
#new-form .selectable .wb-gift-product-wrapper,
#new-form .selectedWB .wb-gift-product-wrapper,
.new-wb-form .selectable .wb-gift-product-wrapper,
.new-wb-form .selectedWB .wb-gift-product-wrapper {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
@media screen and (max-width: 600px){
.title-option-wb{
margin-bottom: 0px;
}
.has-double-select .title-option-wb{
width: 100%;
}
.has-double-select.div-discount-system .title-option-wb{
width: auto;
}
.offer-image img{
width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "30px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "40px" : "60px")};
}
.selectedWB .offer-image img{
width: ${wideBundle.settings.thumbnail_size == "s" ? "30px" : (wideBundle.settings.thumbnail_size == "m" ? "40px" : "60px")};
}
.offer-image{
min-width: ${wideBundle.settings.unselected_thumbnail_size == "s" ? "80px" : (wideBundle.settings.unselected_thumbnail_size == "m" ? "90px" : "110px")};
}
.selectedWB .offer-image{
min-width: ${wideBundle.settings.thumbnail_size == "s" ? "80px" : (wideBundle.settings.thumbnail_size == "m" ? "90px" : "110px")};
}
.selectedWB .title-variant{
font-size: ${(parseFloat(wideBundle.settings.selected_title_fontsize) -0.2) + 'em' };
}
.selectable .title-variant{
font-size: ${(parseFloat(wideBundle.settings.unselected_title_fontsize) -0.2) + 'em' };
}
}
@media screen and (max-width: 400px){
.select-option-third{
margin-top: 2px;
margin-left: 0px;
}
.select-option-second{
float: none;
}
}
`;
if (wideBundle.settings.display_quantity == 1) {
style += `
.spinWB{
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
.selectedWB{
position: relative;
padding-bottom: 5px;
}
.selectedWB.with-economic-text{
padding-bottom: 20px;
}
.selectedWB .spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: 0px;
margin-left: 5px;
}
.selectedWB .quantity-wb-input{
height: 30px;
}
.selectable{
padding-bottom: 10px;
}
.selectable.with-economic-text{
padding-bottom: 20px;
}
@media screen and (max-width: 400px){
.selectedWB{
position: relative;
padding-bottom: 40px;
}
.selectedWB.with-economic-text{
padding-bottom: 40px;
}
.selectedWB .spinWB{
position: absolute;
height: 25px;
right: 5px;
bottom: 40px;
}
.selectedWB .quantity-wb-input{
height: 25px;
}
}
`;
}
//We have to move the price and quantity to the right of the offer for that layout
var elemsUnit = document.querySelectorAll('.new-form-option .first-unit-WB');
for (var i = 0; i < elemsUnit.length; i++) {
if (!elemsUnit[i].closest(".value-right")) continue;
offerNode = elemsUnit[i].parentNode.parentNode;
offerNode.appendChild(elemsUnit[i]);
}
//We have to move the price and quantity to the right of the offer for that layout
var elems = document.querySelectorAll('.new-form-option .price-new-form');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
offerNode = elems[i].parentNode.parentNode;
offerNode.appendChild(elems[i]);
if (wideBundle.settings.display_quantity == 1) {
quantityElem = document.querySelectorAll('.spinWB')[i];
offerNode.appendChild(quantityElem);
}
}
//We have to add round corners to last offer for elegant design
var elems = document.querySelectorAll('#new-form, .new-wb-form ');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
formOffers = elems[i].querySelectorAll(".new-form-option");
lastOffer = formOffers[formOffers.length - 1]
lastOffer.style.borderRadius = '0px 0px 5px 5px';
}
//We have to move the economic price
var elems = document.querySelectorAll('.new-form-option .economic-wb');
for (var i = 0; i < elems.length; i++) {
elems[i].closest('.new-form-option').appendChild(elems[i]);
}
addStyleToPage(style, attribute);
}
else if (structure == 5) { //For solid layout
var style = `
.selectedWB .title-variant{
margin-top: 10px;
font-size: ${(parseFloat(wideBundle.settings.selected_title_fontsize) -0.2) + 'em' };
}
.selectable .title-variant{
margin-top: 10px;
font-size: ${(parseFloat(wideBundle.settings.unselected_title_fontsize) -0.2) + 'em' };
}
.best-title{
width: auto;
display: block;
margin-top: 10px;
}
.economic-wb{
margin: 0px auto;
position: absolute;
background-color: white;
padding: 4px 8px;
overflow: hidden;
//max-width: 80%;
rotate: -3deg;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 1;
}
.selectable .economic-wb{
bottom: ${-10 - parseInt(wideBundle.settings.unselected_border_size)}px;
border: 3px solid ${wideBundle.settings.background_color};
}
.selectedWB .economic-wb{
bottom: -18px;
border: 3px solid ${wideBundle.settings.background_color};
}
.with-economic-text{
position: relative;
padding-bottom: 20px;
margin-bottom: 18px;
}
.p-title-WB{
width: 100%;
flex-basis: 100%;
}
.selectable.corner-offer-container{
padding-top: 10px !important;
}
.selectedWB.corner-offer-container{
padding-top: 0px !important;
}
#new-form, .new-wb-form{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.new-form-option{
display: block;
padding: 0px;
margin: 7px 1px;
flex: 1;
border-radius: 0px;
padding-bottom: 30px;
}
.offer-with-gift-flex-wrapper{
display: block;
width: 100%;
}
.selectedWB .best-title {
width: auto;
}
.value-right{
max-width: 100%;
display: flex;
flex-direction: column;
}
.offer-free-gift .value-right{
width: 100%;
}
.offer-free-gift{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.offer-free-gift .wb-gift-product-wrapper{
margin-top: auto;
flex-basis: auto;
}
.value-right > *{
margin-right: 10px !important;
margin-left: 10px !important;
}
.value-right .price-new-form, .value-right .first-unit-WB{
margin: 0px !important;
padding-left: 8px;
padding-bottom: 5px;
}
.value-left{
display: block;
}
.value-left img{
margin: 5px 0px;
}
.selectedWB .price-new-form, .selectedWB .first-unit-WB{
margin: 0px 0px 10px 0px !important;
top: 10px;
position: relative;
border-bottom: 1px solid white;
}
.selectedWB .value-left{
top: 10px;
position: relative;
}
.selectable .price-new-form, .selectable .first-unit-WB{
border-bottom: 1px solid ${wideBundle.settings.unselected_border_color};
}
.checkedWB{
display: none;
}
#new-form .select-class-second.discount_system_select_wb, .new-wb-form .select-class-second.discount_system_select_wb{
margin: 0px 0px 0px 0px;
}
#new-form .select-class-second, .new-wb-form .select-class-second{
margin: 2px 0px 0px 0px;
}
#new-form .select-class-first.discount_system_select_wb, .new-wb-form .select-class-first.discount_system_select_wb{
margin: 0px 0px 0px 0px;
}
#new-form .select-class-first, .new-wb-form .select-class-first{
margin: 2px 0px 0px 0px;
}
.selectedWB .div-select2{
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 5px;
justify-content: center;
}
.selectedWB.offer-discount-system .div-select2{
flex-direction: row;
align-items: flex-start;
margin-bottom: 0px;
justify-content: normal;
}
.selectedWB .div-select2 p{
margin-top: 7px;
margin-bottom: 3px;
}
.selectable{
border: ${wideBundle.settings.unselected_border_size} solid ${wideBundle.settings.unselected_border_color};
margin-top: 20px;
}
.selectedWB{
border: 0px !important;
border-bottom: 8px solid ${wideBundle.settings.border_color} !important;
}
.new-form-option .value-left{
flex-direction: column;
}
.selectable.offer-discount-system.selectedWB.with-economic-text{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.offer-free-gift .value-right{
margin-bottom: 10px;
}
#new-form .selectable, .new-wb-form .selectable, #new-form .selectedWB, .new-wb-form .selectedWB{
border-radius: 0px;
}
.wb-user-text-wrapper {
margin-left: 0;
width: 100%;
}
#new-form .selectable .wb-offer-timer,
#new-form .selectedWB .wb-offer-timer,
.new-wb-form .selectable .wb-offer-timer,
.new-wb-form .selectedWB .wb-offer-timer {
border-radius: 0px;
}
#new-form .selectable .wb-gift-product-wrapper,
#new-form .selectedWB .wb-gift-product-wrapper,
.new-wb-form .selectable .wb-gift-product-wrapper,
.new-wb-form .selectedWB .wb-gift-product-wrapper {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
`;
if (wideBundle.settings.display_quantity == 1) {
style += `
.selectedWB{
position: relative;
}
.selectedWB .spinWB{
position: static;
height: 30px;
right: 5px;
bottom: 5px;
margin: auto;
margin-top: 10px;
}
.selectedWB .quantity-wb-input{
height: 30px;
line-height: 30px;
}
`;
}
//We have to move the price under thumbnail
var elems = document.querySelectorAll('.new-form-option .price-new-form');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
elems[i].parentNode.insertBefore(elems[i], elems[i].parentNode.firstChild);
}
//We have to move the unit price under thumbnail
var elems = document.querySelectorAll('.new-form-option .first-unit-WB');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
elems[i].parentNode.insertBefore(elems[i], elems[i].parentNode.firstChild);
}
//We have to move the economic price
var elems = document.querySelectorAll('.new-form-option .economic-wb');
for (var i = 0; i < elems.length; i++) {
if (!elems[i].closest(".value-right")) continue;
elems[i].closest('.new-form-option').appendChild(elems[i]);
}
addStyleToPage(style, attribute);
//We have to add a padding at end of offer depends on economic text height
/*var elems = document.querySelectorAll('.new-form-option .economic-wb');
for (var i = 0; i < elems.length; i++) {
if(elems[i].clientHeight !== 0){
elems[i].parentNode.setAttribute('style', "padding-bottom:" + elems[i].clientHeight + "px !important");
}
if(elems[i].clientWidth !== 0){
elems[i].setAttribute('style', "margin-left: -" + elems[i].offsetWidth /2 + "px !important");
elems[i].style.left = "50%";
}
}*/
}
}
//Declare some variables needed
wideBundle.declareVariables = function(){
wideBundle.locationWebsite = encodeURI(decodeURI(window.location.href));
wideBundle.settings.currency = wideBundle.settings.currency.replace(/<\/?span.*?>/gm, '');
wideBundle.widgetContainers = [];
wideBundle.currencyCodes = {
USD: 'US$',
EUR: '€',
GBP: '£',
AUD: 'AU$',
NZD: 'NZ$',
CAD: 'CA$',
JPY: '¥',
DKK: 'DKK',
NOK: 'NOK',
SEK: 'SEK',
BAM: 'KM',
BGN: 'лв.',
CHF: 'CHF',
DKK: 'kr.',
ILS: '₪',
ISK: 'ISK',
LBP: 'ل.ل',
LRD: 'LRD $',
PLN: 'zł',
RON: 'Lei',
TRY: '₺',
MXN: '$',
HKD: '$',
KRW: '₩',
MYR: 'RM',
SGD: '$',
TWD: '$',
TND: 'د.ت',
EGP: 'ج.م',
DZD: 'دج',
MAD: 'dh',
BRL: 'R$',
CLP: 'CLP',
INR: '₹',
UAE: 'د.إ',
AED: 'د.إ',
ARS: 'ARS',
PEN: 'S/',
SAR: 'SAR',
CNY: '¥',
RUB: '₽',
ZAR: 'R',
IDR: 'Rp',
PHP: '₱',
THB: '฿',
VND: '₫',
KES: 'KSh',
PKR: 'Rs',
EGP: 'EGP',
IQD: 'IQD',
KWD: 'KWD',
OMR: 'OMR',
QAR: 'QAR',
JOD: 'JOD',
LYD: 'LYD',
SYP: 'SYP',
BHD: 'BHD',
JMD: 'JMD',
BDT: 'BDT',
NPR: 'NPR',
LKR: 'LKR',
KHR: 'KHR',
MMK: 'MMK',
LAK: 'LAK',
VEF: 'VEF',
COP: 'COP',
UYU: 'UYU',
PYG: 'PYG',
BOB: 'BOB',
TZS: 'TZS',
GTQ: 'GTQ',
NGN: 'NGN',
MUR: 'MUR',
MGA: 'MGA',
XOF: 'XOF',
RWF: 'RWF',
HUF: 'HUF',
UGX: 'UGX',
TND: 'TND',
SDG: 'SDG',
SLL: 'SLL',
SCR: 'SCR',
PGK: "PGK",
CZK: 'CZK',
UAH: 'UAH'
};
wideBundle.currencySymbols = {
USD: '$',
EUR: '€',
GBP: '£',
AUD: '$',
NZD: '$',
CAD: '$',
JPY: '¥',
DKK: 'kr.',
NOK: 'kr.',
SEK: 'kr.',
BAM: 'KM',
BGN: 'лв.',
CHF: '₣',
ILS: '₪',
ISK: 'kr',
LBP: 'ل.ل',
LRD: '$',
PLN: 'zł',
RON: 'lei',
TRY: '₺',
MXN: '$',
HKD: '$',
KRW: '₩',
MYR: 'RM',
SGD: '$',
TWD: '$',
TND: 'د.ت',
EGP: '£',
DZD: 'د.ج',
MAD: 'د.م.',
BRL: '$',
CLP: '$',
INR: '₹',
UAE: 'د.إ',
AED: 'د.إ',
ARS: '$',
PEN: 'S/.',
SAR: 'ر.س',
CNY: '¥',
RUB: '₽',
ZAR: 'R',
IDR: 'Rp',
PHP: '₱',
THB: '฿',
VND: '₫',
KES: 'KSh',
PKR: '₨',
IQD: 'ع.د',
KWD: 'د.ك',
OMR: 'ر.ع.',
QAR: 'ر.ق',
JOD: 'د.ا',
LYD: 'ل.د',
SYP: 'ل.س',
BHD: 'د.ب',
JMD: '$',
BDT: '৳',
NPR: '₨',
LKR: '₨',
KHR: '៛',
MMK: 'K',
LAK: '₭',
VEF: 'Bs',
COP: '$',
UYU: '$',
PYG: '₲',
BOB: 'Bs',
TZS: 'TSh',
GTQ: 'Q',
NGN: '₦',
MUR: '₨',
MGA: 'Ar',
XOF: 'CFA',
RWF: 'RF',
HUF: 'Ft',
UGX: 'USh',
SDG: '£',
SLL: 'Le',
SCR: '₨',
PGK: 'K',
CZK: 'Kč',
UAH: '₴',
AFN : "؋",
ALL : "Lek",
XCD : "$",
AMD : "AMD",
AWG : "Afl",
SHP : "£",
AZN : "m.",
BSD : "BS$",
BBD : "$",
BZD : "BZ$",
BWP : "P",
BND : "$",
BIF : "FBu.",
XAF : "FCFA",
CVE : "$",
KYD : "$",
KMF : "CF",
CDF : "FC",
CRC : "₡",
ANG : "ƒ;",
DJF : "Fdj",
DOP : "RD$",
ETB : "Br",
FKP : "£",
FJD : "$",
XPF : "XPF",
GMD : "D",
GNF : "FG",
GYD : "G$",
HNL : "L",
KZT : "₸",
KGS : "лв",
MOP : "MOP$",
MWK : "Mk",
MVR : "Rf",
MDL : "MDL",
MNT : "₮",
NIO : "C$",
MKD : "ден",
WST : "WS$",
STD : "Db",
RSD : "RSD",
SBD : "$",
TJS : "TJS",
TOP : "$",
TTD : "$",
UZS : "som",
VUV : "$",
YER : "YER"
};
}
//Function to detect and get the product form node in the page
wideBundle.getFormNode = function(){
//Don't select the form if the element is the same as one element below
formsSameElementException = [
'.checkout-x-buy-now-btn', '.price-descriptors .shopify-product-form'
];
//Unwanted forms as child/parent/form
wideBundle.formsException = [
".sticky-cart-form", "#form-sticky", ".container-sticky_addtocart", ".sticky-barre-content", "#shopify-section-header",
".product-recommendations-placeholder", ".sticky-atc-title:not(.wb-false-positive-exception)", ".search-form", ".sticky-dropdownvar", "header.site-header", "#popUps .cart_upsell_popup",
"#popUps .cart_downsell_popup", '.product-upsell-holder', '#product-form-installment', '.sticky_addcart', '.product-upsell__holder', '#ShippingModal',
".collection .card-wrapper .card__content", '#featured-product-scroll .product--variant', 'product-sticky-form', '#rio-upsell', '.t4s-product-tabs-wrapper',
'div[data-extraclass="sticky-atc"]', '#shopify-section-pr_description', '.cu-upsell', '#CartDrawer', 'cart-drawer.cart-drawer','#product-form-main-sticky-atc',
'gp-sticky','.pupsdreams_popup_sticky-product-details-container','.product-item--has-quick-add','.related_products', 'mini-cart .minicart-content',
'.dbtfy-sticky-addtocart__bar .dbtfy-sticky-addtocart__container', '.card .dbtfy-collection-addtocart', '.tabs__recommendation quick-add-product .quick-add__holder',
"main .shopify-section > #sticky-add-to-cart", "product-recommendations motion-list .quick-add", ".swiper-wrapper div[class*='ss_shoppable_video']",
".product-recommendations .product-loop .js-product-listing", ".cart-upsell-wrapper #cart-upsell", "section#sticky-atc.fixed-bottom .container",
".product--addtocart--sticky .right-side", "div[id$='__cart-upsell'] .dbtfy-cart-upsell .dbtfy-cart-upsell-item", ".cart-flyout .cart-drawer-products", "#cart-drawer .cart-upselling",
"div[hidden] .dbtfy-upsell-bundles__form-wrapper", ".product-grid-item.carousel__item .product__media__container .product-grid-item__quick-buy",
".product-section + .product-sticky-add-cart-new.custom-sticky-form", "#shopify-section-minicart .cart .minicart-footer", "cart-recommendation recommendation-carousel",
".product__block .carousel.swiper .carousel__slide.swiper-slide", ".container .splide .splide__track .splide__list .splide__slide", "tabs-component .tabs__panel .tabs__content grid-list .product-card__image-wrapper",
"#cart-drawer-upsell-wrapper #cart-drawer-upsell .cart-drawer-upsell-list", "dbtfy-addtocart-sticky.dbtfy-addtocart-sticky", "deployer-cart-drawer#DeployerCartDrawer",
".header__navigation nav.header__menu .mega-menu__container", ".sticky-btn__container.sticky-atc-btn__active .sticky-atc__inner-wrapper", ".sticky-btn__container .sticky-atc__inner-wrapper",
"product-info-upsell.upsell .upsell__container", "body[id*=skincare-for-breakouts-expert-] .smi-buy-btn.cursor-none-buy-gr", 'product-grid-item-variant.product-grid-item__content .product-grid-item__container',
'product-recommendations product-complementary', "slider-element motion-list.card-grid", "recently-viewed quick-add-product", "external-searchcontent", ".gbgbgb", ".resource-list .resource-list__item product-card quick-add-component", "results-list product-card quick-add-component"
];
//Elements we want to hide
hidingElements = [
".shg-product-selector-wrapper", ".tt-swatches-container", ".tt-option-block", ".dbtfy-color_swatches", ".pt-swatches-container",
".product-form__item--submit", ".pg__option--single", ".gt_product-swatches.gt_flex.gt_variant_product", ".button_add_to_cart.gt_product-addtocart",
".gt_flex.gt_variant_product"
];
//Forms we want to check
forms = [
".w-commerce-commerceaddtocartform.default-state-2", ".product-form", ".productForm", 'product-form form[data-type="add-to-cart-form"]', ".product-form__buy-buttons .shopify-product-form", ".shopify-product-form:not(.wb--not-psuedo)", "#addToCartFormId1",
".t4s-product__info-wrapper form.t4s-form__product", "#AddToCartForm--product-template", ".product-form-product-template", ".product-form.hidedropdown", ".addToCartForm", ".product-single__meta .product-single__meta-info .product-single__form", ".ProductForm",
".product-single__form", ".prod_form", "#addToCartForm-product-template-optimised", ".shg-product-atc-btn-wrapper", 'form[data-type="add-to-cart-form"].form', "form[action=\'/cart/add\']",
"#addToCartForm", ".form-vertical", "#prodForm", "form[data-product-form]", "#add-to-cart-form", "form[action$='/cart/add']", ".product-single__form:nth-child(2)", "form[action^='/cart/add']"
];
allForms = 0
forms.forEach(form => {
allForms += document.querySelectorAll(form).length;
})
//To detect and get the product form node in the page
form:
for(var i=0; i < forms.length; i++){
formLength = document.querySelectorAll(forms[i]).length;
// console.log("form length: " + formLength + " for: " + forms[i]);
//For all the forms found in the page
formNumber:
for(let j=0; j= 2 || childElementsWB.length == 0 || form.tagName == "BUTTON") ){
console.log('form is another exception');
continue formNumber;
}
//If form exists and has passed the exceptions then we can choose it to display the Widget
if(form !== 'undefined' && form != null){
console.log("chosen form:" + formID);
return {
element: form,
id: formID
}
}
}
}
};
console.log('form not found');
return {
element: null,
id: null
};
}
//Function to detect and get the price node below the title in the page
wideBundle.getPriceNode = function(){
updatePrice = wideBundle.settings.update_price;
//Don't do anything if the user doesn't want to update price design
if(updatePrice == 0){
var priceID = 'not checked';
var http = new XMLHttpRequest();
var url = wideBundle.domain+'AJAX/GetPrice.php';
var params = 'price='+priceID+'&shop='+wideBundle.shop;
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(params);
return {
element: [],
id: null
};
}
//Selectors for price nodes
pricesWB = [
".product-item-caption-price", ".ProductMeta__PriceList", "#price_ppr", ".product-single__prices", ".product-featured__price-text", ".product__price",
".gf_product-prices", "#productPrice-product-template", ".productTemplatePrice", ".product-price", "div[data-product-type=price]", ".modal_price",
".featured-product-section .product-single .box .product-wrapper .product-details .product-single__meta .price-wrapper", ":not(.wb_hidden_prices_element) .price", ".product-meta h1",
".price-wrapper", ".product-single__meta .product-single__meta-list", ".product-single__price", ".tt-price", ".gt_flex.price_product", ".pt-price", ".gt-product-price", 'span[data-zp-product-discount-price]',
'.t4s-product-price', '.z-main-product__price', '.product-single__price--on-sale', '.product-info .product-info__price', ".main-product__block-price .product-block-group--price .m-price",
".product-cont-header2 [id*='productPrice-template--'].h1", "[id*='ProductInfo-template--'] .product__price .price .price__container", "product-form gp-product-price", ".product-info__block-list price-list.price-list"
];
//We don't want the price to be updated in these selectors
pricesExceptionWB = [
".upsells .upsell-info", "#new-form", ".new-wb-form", "#mini-cart", '[id^="cross-sell-"]', "#CollectionSection", "#CartDrawer-CartItems",
".section--products-recommendations", '.featured-collections', ".header-drawer .menu-drawer"
];
//Specific blocs to get prices
blocsToGetPricesWB = [
".featured_product_se"
];
//Get the price node from selectors list
priceWB:
for(var i=0; i < pricesWB.length; i++){
//Find the price node in specific blocs
for(var x=0; x !isDescendant(allExcepClassPrices[z], element));
}
}
if(!price.length){
continue priceWB;
}
console.log("price " + pricesWB[i] + " found:");
console.log(price);
return {
element: price,
id: pricesWB[i]
}
}
}
console.log("No price found");
return {
element: [],
id: null
};
}
//Function to hide prices that are duplicated or unwanted when we update the price design under the title
wideBundle.hideUnwantedPrices = function(){
var productSinglePriceWrapper = document.querySelector('.product-single__price--wrapper');
if (productSinglePriceWrapper) {
productSinglePriceWrapper.style.display = 'none';
}
var productPrice = document.getElementById('ProductPrice');
var comparePrice = document.getElementById('ComparePrice');
var priceNode = document.querySelector('.price');
if (productPrice && comparePrice && !priceNode) {
//wideBundle.priceInfo.element[0].style.display = "none";
var salePrice = document.querySelector('.sale_price');
var price = document.querySelector('.price');
if (price && price.innerHTML.trim() == '' && salePrice) {
productPrice.style.display = 'none';
comparePrice.style.display = 'none';
comparePrice.style.fontSize = '0px';
productPrice.style.Size = '0px';
salePrice.style.display = 'none';
}
}
if(wideBundle.priceInfo.element.length > 0){
if(wideBundle.priceInfo.id == ".product-single__price--on-sale"){
let compareAtPriceToHide = document.querySelector('.product-single__price--compare-at');
if(compareAtPriceToHide){
compareAtPriceToHide.style.display = "none";
}
}
}
var productPriceCompare = document.querySelectorAll('.product__price--compare');
for (var i = 0; i < productPriceCompare.length; i++) {
productPriceCompare[i].style.display = 'none';
}
if(wideBundle.priceInfo.id == ".gt-product-price"){
var gtProductComparePrice = document.querySelectorAll(".gt-product-compare-price");
if (gtProductComparePrice[0]) {
gtProductComparePrice[0].style.display = "none";
}
}
var productAction = document.querySelector('.product-action');
if (productAction) {
productAction.style.display = 'none';
}
var compareAtPrice = document.querySelector('div[data-product-type="compare_at_price"][data-pf-type="ProductPrice"]');
if (compareAtPrice) {
compareAtPrice.style.display = "none";
}
if(wideBundle.priceInfo.id == ".product-single__price"){
priceContainer = wideBundle.priceInfo.element[0].closest('.price-container');
if(priceContainer){
comparePrice = priceContainer.querySelector('#ComparePrice.product-single__price--compare-at');
if(comparePrice !== null && comparePrice != wideBundle.priceInfo.element[0]){
comparePrice.style.display = "none";
}
}
}
}
//For some exceptions we replace the price detected by WideBundle
wideBundle.replaceSelectedPrice = function(){
if(wideBundle.priceInfo.element[0]){
comparePrice = document.querySelector('#ComparePrice-product-template');
if(comparePrice){
priceSinglePrice = document.querySelector('.product-single__price product-single__price-product-template');
if(priceSinglePrice){
wideBundle.priceInfo = {
element: document.querySelectorAll('.product-single__price'),
id: '.product-single__price'
};
}
}
if(wideBundle.priceInfo.element[0].offsetParent === null && wideBundle.priceInfo.id == ".product__price"){
productPriceCompare = document.querySelector('.product__price--compare');
if(productPriceCompare && productPriceCompare.offsetParent === null){
productPriceSale = document.querySelector('.product__price.on-sale');
if(productPriceSale){
wideBundle.priceInfo = {
element: document.querySelectorAll('.product__price.on-sale'),
id: '.product__price on-sale'
};
}
}
}
if(wideBundle.priceInfo.id == ".product__price"){
productPriceSalePrice = document.querySelector('.product__price.sale-price');
if(wideBundle.priceInfo.element[0].classList.contains("product__price--compare") && productPriceSale){
wideBundle.priceInfo = {
element: document.querySelectorAll('.product__price.sale-price'),
id: '.product__price sale-price'
};
}
}
if(wideBundle.priceInfo.id == ".product-single__price"){
productSinglePrice = document.querySelector('.product-single__price.product-single__price--compare');
if(productSinglePrice && wideBundle.priceInfo.element[0].classList.contains('product__price--compare') == false){
productSingleMeta = document.querySelector('.product-single__meta-list');
if(productSingleMeta){
wideBundle.priceInfo.element[0].style.fontSize = '1.2em';
wideBundle.priceInfo = {
element: document.querySelectorAll('.product-single__meta-list'),
id: '.product-single__meta-list'
};
}
}
}
}
}
//Replace the price id value in the Database
wideBundle.replacePriceIdInDB = function(){
if(wideBundle.settings.price_id != wideBundle.priceInfo.id){
var http = new XMLHttpRequest();
var url = wideBundle.domain+'AJAX/GetPrice.php';
var params = 'price='+wideBundle.priceInfo.id+'&shop='+wideBundle.shop;
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(params);
wideBundle.settings.price_id = wideBundle.priceInfo.id;
}
}
//Replace the form id value in the Database
wideBundle.replaceFormIdInDB = function(){
if(wideBundle.settings.form_id != wideBundle.formInfo.id){
var http = new XMLHttpRequest();
var url = wideBundle.domain+'AJAX/GetForm.php';
var params = 'form='+wideBundle.formInfo.id+'&shop='+wideBundle.shop;
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.send(params);
wideBundle.settings.form_id = wideBundle.formInfo.id;
}
}
//Find WideBundle widget added manually (usually for page builders)
wideBundle.getManualWidget = function(){
var formWidebundle = document.querySelector("#new-form");
if(formWidebundle){
wideBundle.formInfo.id = 'page builder';
console.log("we found form for page builder");
//Hide variants from Gempages
if(formWidebundle.closest(".AddToCartForm")){
gfVariantsWrapper = formWidebundle.closest(".AddToCartForm").querySelector('gf_variants-wrapper');
if(gfVariantsWrapper){
gfVariantsWrapper.style.display = "none";
}
}
return formWidebundle;
}
else{
return null;
}
}
//Get the secondary widgets that were placed manually using .new-wb-form
wideBundle.getSecondaryWidgets = function(){
var multipleFormsWB = document.querySelectorAll('.new-wb-form');
if(multipleFormsWB.length){
console.log("using form class");
return multipleFormsWB;
}
else{
return null;
}
}
//For some exceptions we replace the form detected by WideBundle
wideBundle.replaceSelectedForm = function(){
var formWB = wideBundle.formInfo;
if(formWB.id == "form[action='/cart/add']"){
if(formWB.element.querySelector('h2[itemprop="name"]') != null &&
formWB.element.querySelector('.product__price-container') != null){
if(formWB.element.querySelector('.product-details .add-to-cart-btn') != null){
wideBundle.formInfo.element = formWB.element.querySelector('.product-details');
}
}
}
}
//Replo Page builder need special treatment
wideBundle.hideReplo = function(){
if(wideBundle.manualWidget){
if(document.querySelector('div[data-replo-variant-select]')){
document.querySelector('div[data-replo-variant-select]').style.display = "none";
document.querySelector('div[data-replo-variant-select]').classList.add('hide-unwanted-widebundle');
}
if(document.querySelector("select[data-replo-variant-select-dropdown]")){
if(wideBundle.manualWidget){
if(document.querySelector("select[data-replo-variant-select-dropdown]").parentElement.tagName == "DIV"){
document.querySelector("select[data-replo-variant-select-dropdown]").parentElement.style.display = "none";
document.querySelector("select[data-replo-variant-select-dropdown]").parentElement.classList.add('hide-unwanted-widebundle');
}
}
}
var increaseButton = document.querySelector('div[data-replo-increase-product-quantity]');
var decreaseButton = document.querySelector('div[data-replo-decrease-product-quantity]');
if(increaseButton && decreaseButton){
if(increaseButton.parentNode){
increaseButton.parentNode.style.display = "none";
increaseButton.parentNode.classList.add('hide-unwanted-widebundle');
}
}
var atcReplo = document.querySelector('button[data-replo-add-product-variant-to-cart]');
if(atcReplo){
atcReplo.style.display = "none";
atcReplo.classList.add('hide-unwanted-widebundle');
}
}
}
//Hide elements we don't want from the product form found by WideBundle
wideBundle.hideElementsOutsideProductForm = function(){
if(wideBundle.manualWidget){
getProductSwatches = document.querySelector('.gt_product-swatches.gt_flex.gt_variant_product');
if(getProductSwatches){
getProductSwatches.style.display = 'none';
getProductSwatches.classList.add('hide-unwanted-widebundle');
buttonGtProduct = document.querySelector('.button_add_to_cart.gt_product-addtocart');
if(buttonGtProduct){
buttonGtProduct.style.display = 'none';
buttonGtProduct.classList.add('hide-unwanted-widebundle');
}
gtFlexVariant = document.querySelector('.gt_flex.gt_variant_product');
if(gtFlexVariant){
gtFlexVariant.style.display = 'none';
gtFlexVariant.classList.add('hide-unwanted-widebundle');
}
}
gtProductContent = document.querySelector('.gt_product-content button[data-name="Product Button"]');
if(gtProductContent){
gtProductContent.style.display = "none";
gtProductContent.classList.add('hide-unwanted-widebundle');
style = '.gt_product-content button[data-name="Product Button"]{display:none !important;}';
addStyleToPage(style, 'hide-elements-1');
}
}
const firstArrayOfSelectors = [
'div[data-pf-type="ProductVariant"]',
'div[data-pf-type="ProductVariantSwatches"]',
'div[data-label="(P) Quantity"]',
'button.gt_button--product',
'.gt_product-variant.gt_product-swatches',
'div[data-pf-type="ProductQuantity"]',
'.qty_near_atc_wrapper',
'button[data-pf-type="ProductATC"]',
'button[data-pf-type="ProductATC2"]',
'div[data-label="(P) Variants"]',
'div[data-label="(P) Cart Button"]',
'div[data-label="(P) Swatches"]',
"gp-product-button button",
'gp-product-quantity',
"gp-product-variants",
"x-buy-button.x-product-buy-button[type='submit']",
"x-variant-picker.x-variant-picker .x-variant-picker__field-wrapper",
"x-variant-picker.x-variant-picker",
".x-quantity-input",
".f\\:product-single__block-quantity-selector",
".f\\:product-single__block-buy-buttons"
];
const hideElementWithSelectorFromFirstArray = function(array) {
array.forEach(el => {
if(wideBundle.manualWidget){
if(document.querySelector(el) != null){
forms = document.querySelectorAll('form');
for(i = 0; i < forms.length; i++){
if(isDescendant(forms[i], wideBundle.manualWidget)){
variants = forms[i].querySelector(el);
if(variants != null){
variants.style.display = "none";
variants.classList.add('hide-unwanted-widebundle');
}
}
if(wideBundle.secondaryWidgets){
for(var y = 0; y {
if(wideBundle.manualWidget){
if(document.querySelector(el) != null){
if(document.querySelector(el).parentNode != null){
if(isDescendant(document.querySelector(el).parentNode, wideBundle.manualWidget)){
document.querySelector(el).style.display = "none";
document.querySelector(el).classList.add('hide-unwanted-widebundle');
}
if(wideBundle.secondaryWidgets){
for(var y = 0; y {
if(wideBundle.manualWidget){
if(document.querySelector(el) != null){
if(document.querySelector(el).parentNode != null){
if(isDescendant(document.querySelector(el).parentNode.parentNode, wideBundle.manualWidget)){
document.querySelector(el).style.display = "none";
document.querySelector(el).classList.add('hide-unwanted-widebundle');
}
}
}
}
})
};
hideElementWithParentNodeTwoLevel(arrayForHideElementWithParentNodeTwoLevel);
const thirdArrayOfSelectors = [
'.gt_product-swatches',
'.gt_product-variant',
'.gt_product-quantity',
'.gt_product-addtocart',
'.gt_button-atc',
".shg-product-selector-wrapper", //shogun variant selector to hide
".shg-product-atc-btn-wrapper", //shogun add to cart button to hide
];
const hideElementWithSelectorFromThirdArray = function (array) {
array.forEach(el => {
if(wideBundle.manualWidget){
if(document.querySelector(el) != null){
document.querySelector(el).style.display = "none";
document.querySelector(el).classList.add('hide-unwanted-widebundle');
}
}
})
};
hideElementWithSelectorFromThirdArray(thirdArrayOfSelectors);
const fourthArrayOfSelectors = [
'.dbtfy-color_swatches',
'.product-layout-grid__detail .product-detail__options',
'.product__info-wrapper variant-radios',
'div[data-variant-picker]',
'.product-detail__form__options.product-detail__gap-lg.product-detail__form__options--underlined',
'.product-block-container .product-block.product-block-variant-picker:not(.pb-card-shadow)',
'.product-block-container .product-block.product-block-quantity-selector:not(.pb-card-shadow)',
'.product-form__quantity',
'.product-block-item.atc-wrapper',
'.product__quantity',
'.product-form product-variants',
'.tt-swatches-container',
'.product__quantity',
'.product-info__quantity-selector',
'variant-picker',
'product-page product-variants',
'.product__variants-wrapper.product__block',
'.product__controls-group-quantity.product__block',
'.product-options--root',
'variant-radios',
'.quantity_selector',
'.productView-subtotal',
'.productView-options',
'f-variant-picker',
'[data-product-variants]',
'.product__controls-group-quanity',
'.yv-product-quantity',
'.product-block--buy-button .button--sold-out',
'.container .product__meta[itemscope] div div.row.gy-3',
".product__grid__item .product__content .product__selector[id^='ProductSelector-template--']",
"variant-dropdown .product-variant__option__item",
".shopify-section.featured-product .container-fluid .product__meta[itemscope].sticky div div.row.gy-3",
'.pagepilot-wrapper [id*="pp-quantity-form-template--"]',
'.pagepilot-wrapper [id*="variant-selects-template--"]',
'hybrid-variant-picker[id*="variant-picker-template--"]',
'loess-variant-picker loess-variant-selects.input-group',
'.wt-product__options variant-options .wt-product__option',
'variant-selects .product-form-input',
".shopify-product-form .product-variants.product-variants--only",
".simple-variant-picker .simple-variant-picker__container",
"variant-selects[id*='variant-selects-template-']",
"dm-variant-selects fieldset",
"[data-product-options] product-swatch"
];
const addCssInHeaderToHideElements = (array) => {
let style = document.createElement('style');
style.type = 'text/css';
let css = ':root { --widebundle-element-visibility: none; }';
array.forEach((el, index) => {
css += `${el} { display: var(--widebundle-element-visibility) !important; } `;
});
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
document.documentElement.style.setProperty('--widebundle-element-visibility', 'none');
}
const hideElementWithSelectorFromFourthArray = function (array) {
let elementsToHideWithCssInHead = []
array.forEach(el => {
let element = document.querySelector(el);
if(element != null && !element.classList.contains("do-not-hide-wb")){
elementsToHideWithCssInHead.push(el);
element.style.display = "none";
element.classList.add('hide-unwanted-widebundle');
}
});
addCssInHeaderToHideElements(elementsToHideWithCssInHead)
};
hideElementWithSelectorFromFourthArray(fourthArrayOfSelectors);
const fifthArrayOfSelectors = [
'.product-block .variant-wrapper',
'.product__info-container variant-radios',
'.pt-swatches-container.pt-swatches-container-js',
'.product__info-container variant-selects',
'.product__info-wrapper variant-selects',
'.product-page-section variant-selects',
'.pg__option--single',
'.product-option-selector'
];
const hideElementWithSelectorFromFifthArray = function (array) {
let style = document.createElement('style');
style.type = 'text/css';
let css = ':root { --widebundle-element-visibility: none; }';
array.forEach((el, index) => {
if (index >= 3 && index <= 5) {
// Use CSS custom property for 4th, 5th, and 6th elements
css += `${el} { display: var(--widebundle-element-visibility) !important; } `;
}
});
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
document.documentElement.style.setProperty('--widebundle-element-visibility', 'none');
array.forEach(el => {
if(document.querySelector(el) != null){
for(var i = 0; i {
if(document.querySelector(el) != null){
if(!isDescendant(wideBundle.formInfo.element, document.querySelector(el))){
document.querySelector(el).style.display = "none";
document.querySelector(el).classList.add('hide-unwanted-widebundle');
}
}
})
}
hideElementWithSelectorFromSixthArray(sixthArrayOfSelectors);
const seventhArrayOfSelectors = [
'button[data-replo-repeated-index][role="button"]',
'select[data-replo-repeated-index][role="listbox"]'
];
const hideElementWithSelectorFromSeventhArray = function (array) {
array.forEach(el => {
elements = document.querySelectorAll(el);
if(document.querySelector(el) != null){
if(wideBundle.manualWidget){
for(var y = 0 ; y < elements.length; y++){
elements[y].style.display = "none";
elements[y].classList.add('hide-unwanted-widebundle');
}
}
}
})
}
hideElementWithSelectorFromSeventhArray(seventhArrayOfSelectors);
if(wideBundle.manualWidget){
if(document.querySelector('div[data-pf-type="ProductQuantity"]') != null){
layouts = document.querySelectorAll('div[data-pf-type="Layout"]');
for(i=0; i .point(svg)", ".product-block-item.pbi-7(div.img-w-txt)",
".wb-custom-html-2-zameer", ".wb-custom-html-1-zameer", ".wb-product-title-zameer",
".product-actions__checkout-image picture img", ".product__main .product-info h1.product-info__title", ".product-delivery-estimate.js-product-delivery-estimate(span.product-delivery-estimate__time)",
"div.button__extra(div.button__extra--rating p.button__extra--text)", "h1.title", "#product-testimonials(.description)", '.product-details--form-wrapper .marketing-badges-container(.marketing-badge)',
".prod_delivery-times(div.content p)", ".prod_shipping-text(div.content p)", "h1.product-name", "shopify-payment-terms", ".star-rating(.shopify-product-reviews-badge)", ".compare-wishlist(a.wishlist-button)",
"div.product__badges(img.lazyload)", ".accordion.product__accordion(label.accordion__item span.accordion__item--title)",
".product-option-wrapper button.btn-primary[data-bs-target='#size-chart-modal']", ".product-block-testimonial(p.product-block-testimonial-author)",
".wb-force-show-element", "#product-estimated-delivery(#livraison-estime)", ".product-collapsible-content(.no-click-highlight)",
".ProductForm__Advantages(.ProductForm__Advantage--cell .ProductForm__Advantage)", ".ProductForm--payicons(.StorePay--payicons)",
"div.stp-star[data-rating-stp](span.spt-badge-caption)", ".product-block-liquid-code(span.stock)", ".product-block-text(.description.rte)",
"[id*='product-block-animated-stories-animated_stories'](ul.stories-list)", ".product-block-rating-natif(svg)",
".product-reviews-dummy(.product-reviews-dummy-stars)", "p(span#current-date)",
".product-block-liquid-code(.choco_produit_soustitre3 .choco_produit_soustitre)", ".product-block-text(h2.title.h5)", ".choco_container_info_livraison_paiement(.choco_paiement_secure)", ".product-block-liquid-code(.choco_infos_charlideliss h4)", ".product-block-liquid-code(.choco_bandeau_icones img)",
".votre_cure(p span.prix_votre_cure)", "h2.title(div.h2_svg span svg)",".product-meta(h1.product-meta__title.h1)", ".product-block-liquid-code(ul.checkmark-list > li.checkmark-item > meta)",
".product-block-liquid-code(.container-trustpilot > span.excellent > b)", "#product-estimated-delivery(.delivery-message)", "#breadcrumbs(nav.breadcrumb a)", ".product-block-tabs ([id*='nav-tabs-tabs_'].nav.nav-pills)",
"#bought-product-together (.product-listing.list-unstyled h3.product-item-title)", "button[data-bs-target='#size-chart-modal'](div svg)",
".product__button__meta .variant__countdown[data-remaining-wrapper](span[data-remaining-count])", ".ccpc.ccpc-display.product-information-social-proof", "[class*='__ss_trust_badges_3_'] [class*='__ss_trust_badges_3_']",
"[id*='marquee-scrolling_text_'].product-block-scrolling-text", ".product-block-liquid-code .product-benefits", ".product-block-media video[playsinline='playsinline']", "[id*='marquee-marquee_'].product-block-marquee",
"#product-limited-offer (div.block-icon svg)", ".productView-groupBottom(.productView-groupItem .productView-payment #gokwik-buy-now)", ".product-block-liquid-code .varino-story-videos(video.story-video)", ".product-block-liquid-code .nalovea-checklist-section(.nalovea-check-item)",
".widereview-mini", "[class*='_ss_product_reviews_'][id*='_ss_product_reviews_']", "ul.ss-payment-list[id*='_ss_payments_icons_']", '.product-block-text h2.title.h4', "[id*='product-block-testimonials-testimonials_'].product-block-testimonials(.carousel-indicators)", ".mm-title .mm-title",
".mm-product-form-description(p strong)", ".mm-product-form-keypoints(.mm-product-form-keypoint img)", ".mm-product-form-component.mm-pf-infos-product-container", "[class*='__ss_scrolling_annoucement_bar_']",
".product-title-wrapper h1.product-title", ".product-text-wrapper.rte p", ".product--breadcrumbs(ul.breadcrumbs--root)",
".product-block-testimonials(.carousel-inner)", "kaching-subscriptions", ".product-block-liquid-code(.made-in-france)", ".product-block-liquid-code(.kit-container)", "section.features(.feature span.pill)", "h1.product-single__title", ".product__price(.price)", ".product-block-media(img)"
];
var parentsToExcept = ['.cross-sell-block', '.accordion-item'];
//Show elements if we found add to cart of variants selector
if(variantsSelector || addToCartButton){
//Get position of at least one of the elements
if(variantsSelector?.element[0]?.getBoundingClientRect()?.top > 0){
elementPosition = variantsSelector.element[0].getBoundingClientRect().top;
}
else if(addToCartButton?.element?.getBoundingClientRect()?.top > 0){
elementPosition = addToCartButton.element.getBoundingClientRect().top;
}
//If the elements are visible and we have a position
if(typeof elementPosition != "undefined" && elementPosition != ""){
elementsAboveVariants = [];
elementsBelowVariants = [];
for(var y=0; y .elem(.child)
testHasChild = elementsToShow[y].split('(');
hasChild = "";
if(testHasChild.length > 1 && !elementsToShow[y].includes(":not")){
theElementToShow = testHasChild[0];
hasChild = testHasChild[1].split(')')[0];
}
else{
theElementToShow = elementsToShow[y];
}
//Search for the hidden element
var newNodeToShow = wideBundle.formInfo.element.querySelectorAll(theElementToShow);
newNodeToShowLength = newNodeToShow.length;
if(newNodeToShowLength){
checkAllElementsFound:
for(i=0; i index != i && isDescendant(element, arrOfAllElements[i]));
//if the current element is not child of any other element in the array, we add it to the result array
if(!isChild){
resultArray.push(arrOfAllElements[i])
} else {
console.log("Child, not adding in the result array: ", arrOfAllElements[i])
}
}
return resultArray
}
elementsAboveVariants = removeChildElements(elementsAboveVariants)
elementsBelowVariants = removeChildElements(elementsBelowVariants)
//Show hidden elements above or below the product form
if(elementsAboveVariants.length || elementsBelowVariants.length ){
elementsAboveVariants.sort(function(a, b) {
return a.getBoundingClientRect().top - b.getBoundingClientRect().top;
});
elementsBelowVariants.sort(function(a, b) {
return b.getBoundingClientRect().top - a.getBoundingClientRect().top;
});
var parentDiv = wideBundle.formInfo.element.parentNode;
for(i=0; i {
return `${str}${property}:${styles.getPropertyValue(property)};`;
}, '');
}
elementNode.style.cssText = cssText;
buttonWB = document.querySelector('.new-form-atc');
if(buttonWB.nextSibling){
buttonWB.parentNode.insertBefore(elementNode, buttonWB.nextSibling);
elementNode.style.display = "block";
}
else{
buttonWB.parentNode.appendChild(elementNode);
}
}
}
for(var i=0; i= 50){
clearInterval(intervalFunction);
}
}, 300);
//Elements to hide that load after WideBundle (addEventListener)
var elementsToHideWithEventListener = [
".product-detail .product-form.theme-init .option-selectors", 'variant-swatch-king'
];
//Hide element if it exists with setInterval iteration to catch it the moment it appears
loopCountHide = 0;
intervalFunctionHide = setInterval(function() {
elementsToHideWithEventListenerLength = elementsToHideWithEventListener.length;
for(var y=0; y= 50){
clearInterval(intervalFunctionHide);
}
}, 300);
}
//Manage the dynamic button to show
wideBundle.manageDynamicButton = function(){
if(wideBundle.formInfo.id != "page builder" && !document.querySelector('.dynamic_button_wb_form') ){
let dynamicButtonSelectors = [
'div.shopify-payment-button[data-shopify="payment-button"] div',
'div.shopify-payment-button[data-shopify="payment-button"] shopify-buy-it-now-button',
'div.shopify-payment-button[data-shopify="payment-button"] shopify-accelerated-checkout',
]
for(i=0; i option.value === offerValues.option1[i]);
if (optionExists) {
element.value = offerValues.option1[i];
}
});
// Preselect swatches if any
let escapedValue = wbEscapeSwatchValue(offerValues.option1[i]);
let radios = document.querySelectorAll(`.selectedWB .swatch-2-radio-${j}[value="${escapedValue}"]`);
radios.forEach(function(element) {
element.checked = true;
});
}
for(var i = 0; i option.value === offerValues.option2[i]);
if (optionExists) {
element.value = offerValues.option2[i];
}
});
// Preselect swatches if any
let escapedValue = wbEscapeSwatchValue(offerValues.option2[i]);
let radios = document.querySelectorAll(`.selectedWB .swatch-3-radio-${j}[value="${escapedValue}"]`);
radios.forEach(function(element) {
element.checked = true;
});
}
for(var i = 0; i option.value === offerValues.option3[i]);
if (optionExists) {
element.value = offerValues.option3[i];
}
});
// Preselect swatches if any
let escapedValue = wbEscapeSwatchValue(offerValues.option3[i]);
let radios = document.querySelectorAll(`.selectedWB .swatch-1-radio-${j}[value="${escapedValue}"]`);
radios.forEach(function(element) {
element.checked = true;
});
}
}
}
//Create the blinking effect for the custom sentences
wideBundle.addBlinkingEffect = function(){
if(document.querySelector('.best-title-blink')){
setInterval(function(){
for(var wb=0; wb {
var newNode = elementToDuplicate.cloneNode();
newNode.style.display = "none";
newNode.classList.add('wb-duplicated');
form.appendChild(newNode);
});
}
//Remove all duplicated elements
function removeDuplicatedElementsFromForm() {
const duplicatedElementsInForm = form.querySelectorAll('.wb-duplicated');
duplicatedElementsInForm.forEach((duplicatedElementInForm) => duplicatedElementInForm.remove());
}
if(!wideBundle.manualWidget){
//For Some Apps
var elementsToDuplicate = [".uploadkit-injected", ".upload-container", ".gpo-container", ".upload-container", "#textfieldapp"]; //Apps for custom elements
var elementsToDuplicateSellingPlan = [".appstle_sub_widget"];
let counterDuplicationWB = 0;
let functionToUpdateInputs = {};
let functionToUpdateInputsSellingPlan = {};
var functionToCheckHiddenComplexElement = setInterval(() => {
if (typeof form !== 'undefined' && form !== null) {
var widebundle = document.querySelector('#new-form-atc');
for(var i=0; i { //Duplicate elements we want to put them in the product form
elementClass = elementsToDuplicate[i];
removeDuplicatedElementsFromForm();
cloneAndHidePropertiesElements(elementClass);
}, 200);
})(i);
}
}
}
counterDuplicationWB++;
if (counterDuplicationWB >= 50) {
clearInterval(functionToCheckHiddenComplexElement);
}
}, 300);
}
//For Subscription App Recurpay - The goal is to show the widget without removing it from the form by using CSS and place it
//before the add to cart button of WB
function getAbsolutePosition(element) {
var rect = element.getBoundingClientRect();
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
return { top: rect.top + scrollTop, left: rect.left + scrollLeft };
}
function setButtonMargin(margin) {
// Remove previous rule if it exists
if(sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}
// Add new rule
sheet.insertRule(`#new-form-atc { margin-top: ${margin}px !important; }`, 0);
}
// Create a style sheet
var sheet = (function() {
var style = document.createElement("style");
style.appendChild(document.createTextNode("")); // WebKit hack
document.head.appendChild(style);
return style.sheet;
})();
// Position function for Recurpay
function positionRecurpayWidget(widget) {
if (widget) {
var button = document.querySelector('#new-form-atc');
// Set initial styles
widget.style.display = 'block';
widget.style.position = 'absolute';
widget.style.top = '0';
widget.style.zIndex = '1000';
var buttonPos = getAbsolutePosition(button);
var widgetPos = getAbsolutePosition(widget);
widget.style.top = buttonPos.top - widgetPos.top + 'px';
setButtonMargin(widget.offsetHeight + 10);
// Update position and margin periodically (original behavior)
const checkSubifyWidgetInterval = setInterval(function() {
var subifySubs = wideBundle.formInfo.element.querySelector('.subify-widget-container');
if(!subifySubs){
setButtonMargin(0);
widget.style.top = '0';
var buttonPos = getAbsolutePosition(button);
var widgetPos = getAbsolutePosition(widget);
widget.style.top = buttonPos.top - widgetPos.top + 'px';
setButtonMargin(widget.offsetHeight + 10);
} else {
clearInterval(checkSubifyWidgetInterval);
}
}, 100);
}
}
// Position function for Subify
function positionSubifyWidget(widget) {
if (widget) {
var button = document.querySelector('#new-form-atc');
// Set initial styles
widget.style.display = 'block';
widget.style.position = 'absolute';
widget.style.top = '0';
widget.style.zIndex = '1000';
var titleElement = widget.querySelector('#subify-widget-title');
if(titleElement) {
titleElement.style.marginTop = '0px';
}
var buttonPos = getAbsolutePosition(button);
var widgetPos = getAbsolutePosition(widget);
widget.style.top = buttonPos.top - widgetPos.top + 'px';
setButtonMargin(widget.offsetHeight + 20);
// Update position and margin periodically
setInterval(function() {
if(widget.offsetHeight != 0){
setButtonMargin(0);
widget.style.top = '0';
var buttonPos = getAbsolutePosition(button);
var widgetPos = getAbsolutePosition(widget);
widget.style.top = buttonPos.top - widgetPos.top + 'px';
setButtonMargin(widget.offsetHeight + 20);
}
}, 50);
}
}
// Handle Recurpay Widget
function handleRecurpayWidget() {
var retryCount = 0;
var maxRetries = 20;
var formCheckIntervalRecurpay = setInterval(function() {
retryCount++;
if (typeof form != "undefined" && form) {
var recurpaySubs = wideBundle.formInfo.element.querySelector('.recurpay-pdp-widget');
var subifySubs = wideBundle.formInfo.element.querySelector('.subify-widget-container');
if(subifySubs){
clearInterval(formCheckIntervalRecurpay);
}
else if(recurpaySubs){
clearInterval(formCheckIntervalRecurpay);
positionRecurpayWidget(recurpaySubs);
}
}
if(retryCount >= maxRetries){
clearInterval(formCheckIntervalRecurpay);
}
}, 300);
}
// Handle Subify Widget
function handleSubifyWidget() {
var retryCount = 0;
var maxRetries = 20;
var formCheckIntervalSubify = setInterval(function() {
retryCount++;
if (typeof form != "undefined" && form) {
var subifySubs = wideBundle.formInfo.element.querySelector('.subify-widget-container');
if(subifySubs){
clearInterval(formCheckIntervalSubify);
positionSubifyWidget(subifySubs);
}
}
if(retryCount >= maxRetries){
clearInterval(formCheckIntervalSubify);
}
}, 300);
}
// Initialize both widgets
handleRecurpayWidget();
handleSubifyWidget();
}
//Show an error if the user is using a page builder but not using manual widget placement
wideBundle.handleErrorsPageBuilders = function(){
//For GemPages
if(!wideBundle.manualWidget &&
((document.querySelector(".gf_row") && document.querySelector('body.gempage') && document.querySelector("div[data-label='Product']")) ||
(document.querySelector('div[label="Block"]') && document.querySelector('gp-product')))
){
wideBundle.createError("You have to use WideBundle's module from GemPages.", "https://help.widebundle.com/en/article/how-to-use-widebundle-with-gempages-qywl1/#2-3-add-the-widebundle-module")
}
//For PageFly
if(!wideBundle.manualWidget && document.querySelector("div[data-pf-type='Body']") && document.querySelector('[data-pf-type="ProductBox"]') && isDescendant(document.querySelector('[data-pf-type="ProductBox"]'), document.querySelector('#new-form'))){
wideBundle.createError("You have to use WideBundle's module from PageFly.", "https://help.widebundle.com/en/article/how-to-use-widebundle-with-pagefly-suqsj9/#2-add-the-widebundle-module")
}
}
//Create a main widget if we only have secondary widgets
wideBundle.transformMainElement = function(){
// Check if there's no element with the ID 'new-form'
if (!document.getElementById('new-form')) {
// Get the first '' element
let widget = document.querySelector('widebundle-module');
if (widget) {
// Set the ID to 'new-form'
widget.id = 'new-form';
}
}
// Add .new-wb-form class to all elements except the one with #new-form
let widgets = document.querySelectorAll('widebundle-module:not(#new-form)');
widgets.forEach(widget => {
widget.classList.add('new-wb-form');
});
}
//Retrieve random variant for A/B tests from localstorage (or generate using customer id/ip address)
wideBundle.retrieveAbTestVariant = function() {
const localStorageKey = "widebundle-ab-test-variant";
const availableChoices = ["A", "B"];
const fallbackChoice = availableChoices[Math.ceil(Math.random() * 1023) % availableChoices.length];
try {
const storedChoice = window.localStorage.getItem(localStorageKey);
if (storedChoice === "A" || storedChoice === "B") {
console.log("Widebundle: a/b test variant from localStorage:", storedChoice);
return storedChoice;
} else {
let generatedChoice;
if (window.hasOwnProperty("wideBundle_shopifyCustomerId") && window?.wideBundle_shopifyCustomerId > 0) {
generatedChoice = availableChoices[window.wideBundle_shopifyCustomerId % availableChoices.length];
console.log("Widebundle: generate a/b test variant from customer id:", window.wideBundle_shopifyCustomerId, generatedChoice);
} else if (window.wideBundle.hasOwnProperty("ipHash") && window?.wideBundle?.ipHash > 0) {
generatedChoice = availableChoices[parseInt(window.wideBundle.ipHash) % availableChoices.length];
console.log("Widebundle: generate a/b test variant from ip hash:", window.wideBundle.ipHash, generatedChoice);
} else {
generatedChoice = fallbackChoice;
console.log("Widebundle: failed to generate a/b test variant: no cid/ip available");
console.log("Widebundle: taking random variant:", generatedChoice);
}
window.localStorage.setItem(localStorageKey, generatedChoice);
return generatedChoice;
}
} catch (error) {
console.log("Widebundle: failed to generate a/b test variant:", error);
console.log("Widebundle: taking random variant:", fallbackChoice);
window.localStorage.setItem(localStorageKey, fallbackChoice);
return fallbackChoice;
}
}
//Get Variants of the product from Shopify
wideBundle.getVariantsOnShopify = function(){
//We can then check if ideBundle?.variantsOnShopify exists
var variantsFromJson = wideBundle.getVariantsFromJson(wideBundle.getSelectedVariantId()[0]);
if(variantsFromJson){
wideBundle.variantsOnShopify = variantsFromJson;
if (wideBundle.getSelectedOffer().automatic_discount) {
const selectedVariants = wideBundle.getSelectedVariantId();
selectedVariants.forEach((selectedVariant, _idx) => {
if (_idx == 0) return;
wideBundle.variantsOnShopify = [...wideBundle.variantsOnShopify, ...wideBundle.getVariantsFromJson(selectedVariant)];
});
}
}
else{
if (window.hasOwnProperty("wideBundlePreviewMode") && window?.wideBundlePreviewMode === true) {
return;
}
var urlProductAPI = `${window.Shopify.routes.root}products/${wideBundle.currentHandle}.js`;
fetch(urlProductAPI)
.then(response => response.json())
.then(product => {
wideBundle.variantsOnShopify = product.variants;
if (wideBundle.getSelectedOffer().automatic_discount) {
const selectedOfferProducts = wideBundle.offers[wideBundle.getSelectedOffer().offersPointer];
for (const product of selectedOfferProducts) {
if (product.product_handle == wideBundle.currentHandle || encodeURI(product.product_handle) == wideBundle.currentHandle) continue;
if (product.dynamicGroupUuid !== null && product.dynamicGroupSelected === null) {
continue;
}
const urlProductAPI = `${window.Shopify.routes.root}products/${product.product_handle}.js`;
fetch(urlProductAPI)
.then(response => response.json())
.then(product => {
wideBundle.variantsOnShopify = [...wideBundle.variantsOnShopify, ...product.variants];
})
.catch(error => console.error(error));
}
}
})
.catch(error => console.error(error));
}
}
//Get Variants of the offer from DB
wideBundle.getVariantsInventory = async function(){
wideBundle.variantsInventory = {};
if (!wideBundle.isAutomaticDiscount) return;
const allProductIds = [];
wideBundle.offers.forEach((offerGroup) => {
offerGroup.forEach((offer) => {
const productId = parseInt(offer.product_id);
if (!allProductIds.includes(productId) && !offer.all_products) {
allProductIds.push(productId);
}
});
});
if (window.hasOwnProperty("wideBundlePreviewMode") && window?.wideBundlePreviewMode === true) {
allProductIds.forEach(variant_id => {
wideBundle.variantsInventory[variant_id] = {
inventory_quantity: 999999,
add_to_cart_btn_enable: '1'
};
});
return;
}
const fetchUrl = new URL(wideBundle.domain + 'storefront/getvariantinventory');
fetchUrl.searchParams.set('shop', wideBundle.shop);
fetchUrl.searchParams.set('product_ids', allProductIds.join(','));
const response = await window.originalFetch(fetchUrl.toString(), { mode: 'cors' });
const fetchData = await response.json();
wideBundle.variantsInventory = Array.isArray(fetchData) ? {} : fetchData;
if (window.hasOwnProperty("wideBundle_targetProduct")) {
window.wideBundle_targetProduct.variants.forEach((variant) => {
const inventoryManagement = variant.inventory_management ?? '';
const inventoryPolicy = (variant.inventory_policy ?? '').toLowerCase();
// Set inventory quantity to 999999 if inventory policy is 'continue' or inventory management is empty
let inventoryQuantity;
if (inventoryPolicy === 'continue' || !inventoryManagement) {
inventoryQuantity = 999999;
} else {
inventoryQuantity = variant.inventory_quantity ?? 0;
}
let addToCartBtnEnable = '1'; // Default to enabled
if (inventoryManagement && inventoryPolicy !== 'continue' && inventoryQuantity <= 0) {
addToCartBtnEnable = '0';
}
wideBundle.variantsInventory[variant.id] = {
inventory_quantity: inventoryQuantity,
add_to_cart_btn_enable: addToCartBtnEnable
};
});
}
}
//Create the widget container
wideBundle.createWidgetContainer = function(){
var container = document.createElement('div');
container.id = 'new-form';
var formWB = wideBundle.formInfo.element;
formWB.parentNode.insertBefore(container, formWB.nextSibling); //We place the container after product form found
wideBundle.hideOrShowProductForm("hide"); //We hide the product form so it's not duplicated with WideBundle
setInterval(() => { //We hide the product form with delay for some themes
if (wideBundle.formVisible === 0) {
wideBundle.hideOrShowProductForm("hide");
}
}, 1000);
return container; //We return the container we created
}
//Create the offers variable to get the information we have to display
wideBundle.getOffersData = function(data) {
const offerMap = new Map();
let dataLength = data.length;
// Precompute function references
const formatPrice = wideBundle.formatPrice;
const getPricesFromJson = wideBundle.getPricesFromJson;
const getAmountFromPrice = wideBundle.getAmountFromPrice;
let offersPointer = 0;
for (let i = 0; i < dataLength; i++) {
const variant = data[i];
const offerTitle = variant.variant_option1;
let offer = offerMap.get(offerTitle);
if (!offer) {
offer = [wideBundle_prepareOfferVariantData(variant, offersPointer)];
if (variant.products_amount > 1) {
data.forEach((additionalVariant) => {
if (additionalVariant.product_id == variant.product_id && additionalVariant?.product_is_gift == variant?.product_is_gift) return;
if (additionalVariant.variant_option1 !== variant.variant_option1) return;
if (offer.findIndex(newOfferItem => newOfferItem.product_id == additionalVariant.product_id && newOfferItem?.product_is_gift == additionalVariant?.product_is_gift) > -1) return;
offer.push(wideBundle_prepareOfferVariantData(additionalVariant, offersPointer));
});
}
offerMap.set(offerTitle, offer);
offersPointer += 1;
// Update option values and variants for each product in the offer
offer.forEach(product => {
data.forEach(variantData => {
if (variantData.product_id === product.product_id && variantData.variant_option1 === offerTitle) {
if (variantData.variant_option2) {
(variantData.automatic_discount ? variantData.variant_option2.split('|') : variantData.variant_option2.split(','))
.forEach(v => product.option2_values.add(v.trim()));
}
if (variantData.variant_option3) {
(variantData.automatic_discount ? variantData.variant_option3.split('|') : variantData.variant_option3.split(','))
.forEach(v => product.option3_values.add(v.trim()));
}
if (variantData.variant_option4 && variantData.automatic_discount) {
variantData.variant_option4.split('|').forEach(v => product.option4_values.add(v.trim()));
}
// Add variant
const pricesFound = getPricesFromJson(variantData.variant_id);
const convertedPrice = (Math.round(variantData.variant_price * parseFloat(Shopify.currency.rate) * 100) / 100).toFixed(2);
const convertedComparedPrice = (Math.round(variantData.variant_compared * parseFloat(Shopify.currency.rate) * 100) / 100).toFixed(2);
const price = pricesFound ? pricesFound.price : formatPrice(convertedPrice);
product.variants.push({
id: parseInt(variantData.variant_id),
price: price,
compare_at_price: pricesFound ? pricesFound.compare_at_price : formatPrice(convertedComparedPrice),
option1: variantData.variant_option1,
option2: variantData.variant_option2 == "" ? null : variantData.variant_option2,
option3: variantData.variant_option3 == "" ? null : variantData.variant_option3,
option4: variantData.variant_option4,
conversion_rate: variantData.variant_price / getAmountFromPrice(price)
});
}
});
});
}
}
wideBundle.offers = Array.from(offerMap.values());
// Convert Sets to Arrays
wideBundle.offers = wideBundle.offers.map(offer => {
return offer.map(product => {
product.product_id = product.product_id?.toString()?.split(":::")?.[0] ?? product.product_id;
product.option2_values = Array.from(product.option2_values || []);
product.option3_values = Array.from(product.option3_values || []);
product.option4_values = Array.from(product.option4_values || []);
return product;
});
});
wideBundle.heading = wideBundle.offers[0]?.[0]?.heading || '';
};
function wideBundle_prepareOfferVariantData(variant, offersPointer) {
const automatic_discount = Boolean(variant?.automatic_discount);
const all_products = Boolean(variant?.all_products);
return {
automatic_discount,
all_products,
offersPointer,
offer_title: variant.variant_option1,
variants: [],
message: variant.blinking_text,
message_effect: variant.blinking_effect,
message_position: variant.blinking_position,
unit: variant.unit,
unit_price: variant.unit_price,
unit_text: variant.unit_text,
product_id: variant.product_id,
product_handle: variant.handle,
product_qty: variant.product_qty ? variant.product_qty : 1,
options_number: variant.variant_option3 ? 3 : variant.variant_option2 ? 2 : 1,
offer_position: variant.position_offer,
enabled: variant.enabled,
image: variant.image,
product_title: variant.title,
preselected: variant.selected_offer,
heading: variant.title_option1,
options_labels: variant.title_option2,
option1_title: variant.variant_option1_title,
option2_title: variant.variant_option2_title,
option3_title: variant.variant_option3_title,
option4_title: variant.variant_option4_title,
option2_is_color: variant.variant_option2_is_color,
option3_is_color: variant.variant_option3_is_color,
option4_is_color: variant?.variant_option4_is_color ?? false,
price_in_offer: variant.variant_price,
dropdowns_amount: automatic_discount ? variant.product_qty : (variant.variant_option2 ? variant.variant_option2.split(",").length : 0),
option2_values: new Set(),
option3_values: new Set(),
option4_values: new Set(),
swatch_options: variant.swatch_options ? variant.swatch_options : [],
timer_type: variant?.timer_type ?? null,
timer_duration: variant?.timer_duration ?? null,
timer_end_date: variant?.timer_end_date ?? null,
timer_text: variant?.timer_text ?? '',
timer_text_color: variant?.timer_text_color ?? '',
timer_text_style: variant?.timer_text_style ?? '',
timer_text_size: variant?.timer_text_size ?? '',
timer_background_color: variant?.timer_background_color ?? '',
options_color_values: variant.options_color_values ? variant.options_color_values : [],
discount_type: variant.discount_type ? variant.discount_type : null,
discount_value: variant.discount_value ? variant.discount_value : null,
gift_product: variant.gift_product ? variant.gift_product : null,
gift_image: variant.gift_image ? variant.gift_image : "",
gift_text: variant.gift_text ? variant.gift_text : "null",
product_is_gift: variant?.product_is_gift === "1" ? true : false,
product_is_upsell: variant?.product_is_upsell === "1" ? true : false,
has_gift_products: variant?.has_gift_products ? true : false,
has_upsell_products: variant?.has_upsell_products ? true : false,
upsell_image: variant.upsell_image ? variant.upsell_image : "",
upsell_text: variant.upsell_text ? variant.upsell_text : "",
upsell_discount: variant.upsell_discount ? variant.upsell_discount : 0,
offer_db_id: variant?.id ?? "",
index: variant?.index ?? "",
offer_uuid: variant?.offer_uuid ?? "",
ab_test_variant: variant?.ab_test_variant ?? "",
gift_placement: variant?.gift_placement || "bundle", // Add gift placement field
text_above_gifts: variant?.text_above_gifts || "", // Add text above gifts field
template_id: variant?.template_id ?? "default",
dynamicGroups: variant?.dynamicGroups ?? [],
dynamicGroupUuid: variant?.dynamicGroupUuid ?? null,
dynamicGroupSelected: null,
dynamicGroupSelectedImage: null,
user_text_enabled: variant?.user_text_enabled ?? false,
user_text_required: variant?.user_text_required ?? false,
user_text_label: variant?.user_text_label || "",
user_text_property: variant?.user_text_property || "",
user_text_size: variant?.user_text_size || "1em",
user_text_style: variant?.user_text_style || "none",
user_text_color: variant?.user_text_color || "#000000",
};
}
//Hide the product form or show it (action = "hide" or action = "show")
wideBundle.hideOrShowProductForm = function(action = "hide"){
var cssProperties = {
"width": action === "hide" ? "1px" : "auto",
"height": action === "hide" ? "0px" : "auto",
"overflow": action === "hide" ? "hidden" : "visible",
"margin": action === "hide" ? "0px" : "auto",
"marginTop": action === "hide" ? "0px" : "auto",
"marginBottom": action === "hide" ? "0px" : "auto",
"paddingTop": action === "hide" ? "0px" : "auto",
"paddingBottom": action === "hide" ? "0px" : "auto"
};
//"display": action === "show" ? "block" : "none"
var formWB = wideBundle.formInfo.element;
for (var property in cssProperties) {
formWB.style[property] = cssProperties[property];
}
wideBundle.formVisible = action === "show" ? 1 : 0;
var displayValue = action === "show" ? "block" : "none";
document.querySelectorAll('.hide-unwanted-widebundle').forEach(element => element.style.display = displayValue);
document.documentElement.style.setProperty('--widebundle-element-visibility', displayValue); //For some elements using CSS where we applied a variable
}
showFormWB = function(){
wideBundle.hideOrShowProductForm("show");
}
// Function to collect all free gifts from all offers
// Function to collect all free gifts from all offers
wideBundle.collectFreeGifts = function() {
var allGifts = [];
var productIdToOffers = {}; // Map product ID to an array of offers it appears in
var hasUnderPlacement = false; // Flag to track if any gift has "under" placement
// Loop through all offers to collect gift products
for (var i = 0; i < wideBundle.offers.length; i++) {
var offerGroup = wideBundle.offers[i];
for (var j = 0; j < offerGroup.length; j++) {
var offer = offerGroup[j];
// Check if this offer has gift_placement set to "under"
if (offer.gift_placement === "under") {
hasUnderPlacement = true;
}
if (offer.product_is_gift) {
// Skip gifts that should be displayed in the bundle
if (offer.gift_placement !== "under") {
continue;
}
// If we haven't seen this product yet, create a new entry
if (!productIdToOffers[offer.product_id]) {
productIdToOffers[offer.product_id] = [];
// Add the gift to our collection
allGifts.push({
productId: offer.product_id,
productTitle: offer.product_title,
image: offer.gift_image || offer.image,
giftText: offer.gift_text || "Free Gift",
offerPointers: [offer.offersPointer], // Store array of offer pointers
productPointer: j,
option2Values: offer.option2_values,
option3Values: offer.option3_values,
option4Values: offer.option4_values, // Make sure we collect option4Values
option2Title: offer.option2_title,
option3Title: offer.option3_title,
option4Title: offer.option4_title, // Make sure we collect option4Title
option2IsColor: offer.option2_is_color,
option3IsColor: offer.option3_is_color,
option4IsColor: offer.option4_is_color, // Make sure we collect option4IsColor
optionsColorValues: offer.options_color_values,
variants: offer.variants,
giftPlacement: offer.gift_placement || "bundle" // Default to "bundle" if not specified
});
} else {
// If we've seen this product before, just add the offer pointer
var existingGift = allGifts.find(g => g.productId === offer.product_id);
if (existingGift && !existingGift.offerPointers.includes(offer.offersPointer)) {
existingGift.offerPointers.push(offer.offersPointer);
}
}
// Add this offer to the product's list of offers
if (!productIdToOffers[offer.product_id].includes(offer.offersPointer)) {
productIdToOffers[offer.product_id].push(offer.offersPointer);
}
}
}
}
// Only return gifts if at least one has "under" placement
return hasUnderPlacement ? allGifts : [];
};
// Function to create variant selectors for a gift
// Function to create variant selectors for a gift
wideBundle.createGiftVariantSelectors = function(gift, giftContent, offersPointer, productPointer) {
// Create a unique ID for the swatches
var swatchId = Math.floor(Math.random() * 898) + 101;
// Create a container for the variant selectors
var variantSelectorsContainer = document.createElement('div');
variantSelectorsContainer.classList.add('wb-gift-variant-selectors');
// Add label for the variant selectors if needed
var optionsName = '';
if (gift.option2Values && gift.option2Values.length > 1) {
optionsName += gift.option2Title || 'Option';
}
if (gift.option3Values && gift.option3Values.length > 1) {
if (optionsName) optionsName += ', ';
optionsName += gift.option3Title || 'Option';
}
if (gift.option4Values && gift.option4Values.length > 1) {
if (optionsName) optionsName += ', ';
optionsName += gift.option4Title || 'Option';
}
if (optionsName) {
var optionsLabel = document.createElement('p');
optionsLabel.classList.add('wb-gift-options-label');
optionsLabel.textContent = wideBundle.getTranslatedText(optionsName);
variantSelectorsContainer.appendChild(optionsLabel);
}
// Create selectors/swatches for option2 if it has multiple values
if (gift.option2Values && gift.option2Values.length > 1) {
var option2Container = document.createElement('div');
option2Container.classList.add('wb-gift-option-container');
// Create the dropdown or swatch container
if (gift.option2IsColor === "1" && wideBundle.settings.plan !== "monthly") {
// Create swatches for color option
var swatchBox = document.createElement('div');
swatchBox.classList.add('wb-color-swatch-box', 'wb-gift-swatch-box');
gift.option2Values.forEach(function(value, index) {
var color_hex = gift.optionsColorValues[value];
var style = /^#(?:[0-9a-f]{3}){1,2}$/i.test(color_hex)
? `background-color: ${color_hex}`
: `background-image: url(${color_hex})`;
var swatchLabel = document.createElement('label');
swatchLabel.classList.add('wb-color-swatch');
var radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = `GiftVariants2Swatch-${swatchId}-${offersPointer}-${productPointer}`;
radioInput.classList.add('swatch-2-radio');
radioInput.dataset.productId = gift.productId;
radioInput.dataset.variantId = "2";
radioInput.dataset.offersPointer = offersPointer;
radioInput.dataset.productPointer = productPointer;
radioInput.value = value;
if (index === 0) radioInput.checked = "checked";
radioInput.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
var swatchDisplay = document.createElement('div');
swatchDisplay.classList.add('wb-color-swatch-radio');
swatchDisplay.title = wideBundle.getTranslatedText(value);
swatchDisplay.style = style;
swatchLabel.appendChild(radioInput);
swatchLabel.appendChild(swatchDisplay);
swatchBox.appendChild(swatchLabel);
});
option2Container.appendChild(swatchBox);
} else {
// Create dropdown for non-color option
var select = document.createElement('select');
select.classList.add('wb-gift-select');
select.dataset.productId = gift.productId;
select.dataset.optionNumber = "2";
select.dataset.offersPointer = offersPointer;
select.dataset.productPointer = productPointer;
gift.option2Values.forEach(function(value, index) {
var option = document.createElement('option');
option.value = value;
option.textContent = wideBundle.getTranslatedText(value);
select.appendChild(option);
});
select.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
option2Container.appendChild(select);
}
variantSelectorsContainer.appendChild(option2Container);
}
// Create selectors/swatches for option3 if it has multiple values
if (gift.option3Values && gift.option3Values.length > 1) {
var option3Container = document.createElement('div');
option3Container.classList.add('wb-gift-option-container');
// Create the dropdown or swatch container
if (gift.option3IsColor === "1" && wideBundle.settings.plan !== "monthly") {
// Create swatches for color option
var swatchBox = document.createElement('div');
swatchBox.classList.add('wb-color-swatch-box', 'wb-gift-swatch-box');
gift.option3Values.forEach(function(value, index) {
var color_hex = gift.optionsColorValues[value];
var style = /^#(?:[0-9a-f]{3}){1,2}$/i.test(color_hex)
? `background-color: ${color_hex}`
: `background-image: url(${color_hex})`;
var swatchLabel = document.createElement('label');
swatchLabel.classList.add('wb-color-swatch');
var radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = `GiftVariants3Swatch-${swatchId}-${offersPointer}-${productPointer}`;
radioInput.classList.add('swatch-3-radio');
radioInput.dataset.productId = gift.productId;
radioInput.dataset.variantId = "3";
radioInput.dataset.offersPointer = offersPointer;
radioInput.dataset.productPointer = productPointer;
radioInput.value = value;
if (index === 0) radioInput.checked = "checked";
radioInput.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
var swatchDisplay = document.createElement('div');
swatchDisplay.classList.add('wb-color-swatch-radio');
swatchDisplay.title = wideBundle.getTranslatedText(value);
swatchDisplay.style = style;
swatchLabel.appendChild(radioInput);
swatchLabel.appendChild(swatchDisplay);
swatchBox.appendChild(swatchLabel);
});
option3Container.appendChild(swatchBox);
} else {
// Create dropdown for non-color option
var select = document.createElement('select');
select.classList.add('wb-gift-select');
select.dataset.productId = gift.productId;
select.dataset.optionNumber = "3";
select.dataset.offersPointer = offersPointer;
select.dataset.productPointer = productPointer;
gift.option3Values.forEach(function(value, index) {
var option = document.createElement('option');
option.value = value;
option.textContent = wideBundle.getTranslatedText(value);
select.appendChild(option);
});
select.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
option3Container.appendChild(select);
}
variantSelectorsContainer.appendChild(option3Container);
}
// ADD SUPPORT FOR OPTION4 (the 3rd option)
if (gift.option4Values && gift.option4Values.length > 1) {
var option4Container = document.createElement('div');
option4Container.classList.add('wb-gift-option-container');
// Create the dropdown or swatch container
if (gift.option4IsColor === "1" && wideBundle.settings.plan !== "monthly") {
// Create swatches for color option
var swatchBox = document.createElement('div');
swatchBox.classList.add('wb-color-swatch-box', 'wb-gift-swatch-box');
gift.option4Values.forEach(function(value, index) {
var color_hex = gift.optionsColorValues[value];
var style = /^#(?:[0-9a-f]{3}){1,2}$/i.test(color_hex)
? `background-color: ${color_hex}`
: `background-image: url(${color_hex})`;
var swatchLabel = document.createElement('label');
swatchLabel.classList.add('wb-color-swatch');
var radioInput = document.createElement('input');
radioInput.type = 'radio';
radioInput.name = `GiftVariants4Swatch-${swatchId}-${offersPointer}-${productPointer}`;
radioInput.classList.add('swatch-4-radio');
radioInput.dataset.productId = gift.productId;
radioInput.dataset.variantId = "4";
radioInput.dataset.offersPointer = offersPointer;
radioInput.dataset.productPointer = productPointer;
radioInput.value = value;
if (index === 0) radioInput.checked = "checked";
radioInput.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
var swatchDisplay = document.createElement('div');
swatchDisplay.classList.add('wb-color-swatch-radio');
swatchDisplay.title = wideBundle.getTranslatedText(value);
swatchDisplay.style = style;
swatchLabel.appendChild(radioInput);
swatchLabel.appendChild(swatchDisplay);
swatchBox.appendChild(swatchLabel);
});
option4Container.appendChild(swatchBox);
} else {
// Create dropdown for non-color option
var select = document.createElement('select');
select.classList.add('wb-gift-select');
select.dataset.productId = gift.productId;
select.dataset.optionNumber = "4";
select.dataset.offersPointer = offersPointer;
select.dataset.productPointer = productPointer;
gift.option4Values.forEach(function(value, index) {
var option = document.createElement('option');
option.value = value;
option.textContent = wideBundle.getTranslatedText(value);
select.appendChild(option);
});
select.addEventListener('change', function() {
wideBundle.updateGiftVariantSelection(this);
});
option4Container.appendChild(select);
}
variantSelectorsContainer.appendChild(option4Container);
}
giftContent.appendChild(variantSelectorsContainer);
};
// Function to handle variant selection changes correctly for all dropdowns
wideBundle.updateGiftVariantSelection = function(element) {
// Get the identifying information
var offersPointer = element.dataset.offersPointer;
var productPointer = element.dataset.productPointer;
var productId = element.dataset.productId;
// Find the proper gift wrapper
var giftWrapper = document.querySelector(`.selectedWB .wb-gift-product-wrapper[data-g-product-id="${productId}"]`);
if (!giftWrapper) {
// If not found directly, try finding by product ID
var allWrappers = document.querySelectorAll(`.wb-gift-product-wrapper[data-g-offers-pointer="${offersPointer}"]`);
for (var i = 0; i < allWrappers.length; i++) {
if (allWrappers[i].getAttribute('data-g-product-id') == productId) {
giftWrapper = allWrappers[i];
break;
}
}
}
if (giftWrapper) {
// Handle radio buttons (swatches)
if (element.type === 'radio') {
var optionNumber = element.dataset.variantId;
// For option2
if (optionNumber === "2") {
// Try different selectors to find the right dropdown
var selectorsToTry = [
'select.select-option-second',
'select.select-class-second',
'select.select-bundle:not(.select-option-third):not(.select-option-first)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
// For option3
else if (optionNumber === "3") {
// Try different selectors to find the right dropdown
var selectorsToTry = [
'select.select-option-third',
'select.select-class-third',
'select.select-bundle:not(.select-option-second):not(.select-option-first)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
// For option4 (added support for the third option)
else if (optionNumber === "4") {
// Try different selectors to find the right dropdown
var selectorsToTry = [
'select.select-option-first',
'select.select-class-first',
'select.select-bundle:not(.select-option-second):not(.select-option-third)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
}
// Handle select dropdowns
else if (element.tagName === 'SELECT') {
var optionNumber = element.dataset.optionNumber;
// For option2
if (optionNumber === "2") {
var selectorsToTry = [
'select.select-option-second',
'select.select-class-second',
'select.select-bundle:not(.select-option-third):not(.select-option-first)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
// For option3
else if (optionNumber === "3") {
var selectorsToTry = [
'select.select-option-third',
'select.select-class-third',
'select.select-bundle:not(.select-option-second):not(.select-option-first)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
// For option4 (added support for the third option)
else if (optionNumber === "4") {
var selectorsToTry = [
'select.select-option-first',
'select.select-class-first',
'select.select-bundle:not(.select-option-second):not(.select-option-third)'
];
for (var i = 0; i < selectorsToTry.length; i++) {
var select = giftWrapper.querySelector(selectorsToTry[i]);
if (select && select.querySelector(`option[value="${element.value}"]`)) {
select.value = element.value;
select.dispatchEvent(new Event('change', { bubbles: true }));
break;
}
}
}
}
}
};
// We should also modify the createFreeGiftsDisplay function to make it easier to update the unlock message text
wideBundle.createFreeGiftsDisplay = function(widgetContainer) {
var gifts = wideBundle.collectFreeGifts();
// If no gifts with "under" placement, return early
if (gifts.length === 0) {
return null;
}
// Create the free gifts container
var giftsContainer = document.createElement('div');
giftsContainer.id = 'wb-all-free-gifts-container';
giftsContainer.classList.add('wb-all-free-gifts-container');
// Add "Unlock free gifts" message
var unlockMessage = document.createElement('p');
unlockMessage.classList.add('wb-gifts-unlock-message');
// Get text from the first offer that has gifts with "under" placement
var textAboveGifts = "";
// Check if there's a preselected offer first
var preselectedOffer = null;
for (var i = 0; i < wideBundle.offers.length; i++) {
if (wideBundle.offers[i][0].preselected == 1) {
preselectedOffer = wideBundle.offers[i][0];
// If the preselected offer has under free gifts with text, use it
if (preselectedOffer.gift_placement === "under" && preselectedOffer.text_above_gifts) {
textAboveGifts = preselectedOffer.text_above_gifts;
break;
}
}
}
// If no preselected offer with under free gifts was found,
// find the first offer that has gifts with "under" placement and text
if (!textAboveGifts) {
for (var i = 0; i < wideBundle.offers.length; i++) {
var offerGroup = wideBundle.offers[i];
for (var j = 0; j < offerGroup.length; j++) {
var offer = offerGroup[j];
if (offer.gift_placement === "under" && offer.text_above_gifts) {
textAboveGifts = offer.text_above_gifts;
break;
}
}
if (textAboveGifts) break;
}
}
// Use custom text if available, otherwise default message
unlockMessage.innerHTML = wideBundle.getTranslatedText(textAboveGifts || '');
giftsContainer.appendChild(unlockMessage);
// Create a container for the gift cards
var giftsCardsContainer = document.createElement('div');
giftsCardsContainer.classList.add('wb-gifts-cards-container');
// Create cards for each gift
gifts.forEach(function(gift) {
var giftCard = document.createElement('div');
giftCard.classList.add('wb-gift-card');
giftCard.setAttribute('data-product-id', gift.productId);
giftCard.setAttribute('data-offer-pointers', gift.offerPointers.join(',')); // Store all offer pointers
giftCard.setAttribute('data-product-pointer', gift.productPointer);
// Add plus icon at the top (starts as X for locked)
var plusIcon = document.createElement('div');
plusIcon.classList.add('wb-gift-plus-icon');
plusIcon.innerHTML = '';
giftCard.appendChild(plusIcon);
// Create gift content container
var giftContent = document.createElement('div');
giftContent.classList.add('wb-gift-card-content');
// Create gift image wrapper to allow full-width images
var imageWrapper = document.createElement('div');
imageWrapper.classList.add('wb-gift-image-wrapper');
// Get the appropriate image - first check preselected offer
var imageSource = gift.image;
var giftText = gift.giftText;
// If we have a preselected offer that contains this gift, use its image and text
var preselectedOffer = null;
for (var i = 0; i < wideBundle.offers.length; i++) {
if (wideBundle.offers[i][0].preselected == 1 && gift.offerPointers.includes(i.toString())) {
preselectedOffer = i;
break;
}
}
if (preselectedOffer !== null) {
// Find this gift in the preselected offer
var offerGroup = wideBundle.offers[preselectedOffer];
for (var j = 0; j < offerGroup.length; j++) {
var offer = offerGroup[j];
if (offer.product_id === gift.productId && offer.product_is_gift) {
imageSource = offer.gift_image || offer.image || imageSource;
giftText = offer.gift_text || giftText;
break;
}
}
}
// Create gift image if available
if (imageSource && imageSource !== "") {
var giftImage = document.createElement('img');
giftImage.classList.add('wb-gift-card-image');
giftImage.src = imageSource;
giftImage.alt = wideBundle.getTranslatedText(giftText);
imageWrapper.appendChild(giftImage);
}
// Add image wrapper to content
giftContent.appendChild(imageWrapper);
// Add content to card
giftCard.appendChild(giftContent);
// Create container for text that will be placed OUTSIDE the card
var giftTextContainer = document.createElement('div');
giftTextContainer.classList.add('wb-gift-text-container');
// Add price display for gift product
var priceElement = document.createElement('p');
priceElement.classList.add('wb-gift-price-display');
var variantId = gift.variants[0]?.id;
if (variantId) {
var price = document.querySelector(`.wb_hidden_prices .wb_hidden_price[variant-id="${variantId}"]`)?.innerHTML || "";
var compareAtPrice = document.querySelector(`.wb_hidden_prices .wb_hidden_compared_price[variant-id="${variantId}"]`)?.innerHTML || "";
var priceToShow = compareAtPrice && compareAtPrice !== "" ? compareAtPrice : price;
var priceHtml = `
${wideBundle.replaceCurrencyForMarket ? wideBundle.replaceCurrencyForMarket(wideBundle.formatPrice(wideBundle.removeDecimal(wideBundle.updatePriceSeparator("0.00")))) : "FREE"}
${wideBundle.replaceCurrencyForMarket ? wideBundle.replaceCurrencyForMarket(priceToShow) : priceToShow}
`;
priceElement.innerHTML = priceHtml;
giftTextContainer.appendChild(priceElement);
}
// Add gift text to the outside container
var giftTextElement = document.createElement('p');
giftTextElement.classList.add('wb-gift-card-text');
giftTextElement.textContent = wideBundle.getTranslatedText(giftText);
giftTextContainer.appendChild(giftTextElement);
// Move variant selectors here, before the text
if ((gift.option2Values && gift.option2Values.length > 1) ||
(gift.option3Values && gift.option3Values.length > 1)) {
// Create a container for variant selectors outside the card
var variantSelectorsOutside = document.createElement('div');
variantSelectorsOutside.classList.add('wb-gift-variant-selectors-outside');
wideBundle.createGiftVariantSelectors(gift, variantSelectorsOutside, gift.offerPointers[0], gift.productPointer);
giftTextContainer.appendChild(variantSelectorsOutside);
}
// Create a wrapper for both the card and its text
var giftCardWrapper = document.createElement('div');
giftCardWrapper.classList.add('wb-gift-card-wrapper');
giftCardWrapper.appendChild(giftCard);
giftCardWrapper.appendChild(giftTextContainer);
// Add wrapper to container
giftsCardsContainer.appendChild(giftCardWrapper);
});
// Add cards container to main container
giftsContainer.appendChild(giftsCardsContainer);
// Hide the corresponding gift wrappers in their parent offers based on placement
document.querySelectorAll('.wb-gift-product-wrapper').forEach(function(wrapper) {
// Get the offer pointer from the wrapper
const offersPointer = wrapper.getAttribute('data-g-offers-pointer');
if (offersPointer) {
// Find the corresponding offer to check its gift_placement value
const offer = wideBundle.offers[parseInt(offersPointer)][0];
// Only hide the wrapper if the gift_placement is explicitly set to "under"
if (offer && offer.gift_placement === "under") {
wrapper.style.display = 'none';
}
}
});
// Return the container to be added to the widget
return giftsContainer;
};
// First, let's modify the updateGiftsDisplay function to also update the unlock message text
wideBundle.updateGiftsDisplay = function(selectedOfferPointer) {
var giftCards = document.querySelectorAll('.wb-gift-card');
// Get the selected offer to retrieve its custom text
var selectedOffer = wideBundle.offers[selectedOfferPointer][0];
var textAboveGifts = "";
// Check if the selected offer has custom text for gifts
if (selectedOffer.gift_placement === "under" && selectedOffer.text_above_gifts) {
textAboveGifts = selectedOffer.text_above_gifts;
} else {
// If the selected offer doesn't have "under" gifts or custom text,
// find the first offer with "under" placement and text_above_gifts
for (var i = 0; i < wideBundle.offers.length; i++) {
var offerGroup = wideBundle.offers[i];
for (var j = 0; j < offerGroup.length; j++) {
var offer = offerGroup[j];
if (offer.gift_placement === "under" && offer.text_above_gifts) {
textAboveGifts = offer.text_above_gifts;
break;
}
}
if (textAboveGifts) break;
}
}
// Update the unlock message text with the text from the first offer with "under" gifts
// or the default message if no custom text is found
var unlockMessage = document.querySelector('.wb-gifts-unlock-message');
if (unlockMessage) {
unlockMessage.innerHTML = wideBundle.getTranslatedText(textAboveGifts || '');
}
var selectedOfferGroup = wideBundle.offers[selectedOfferPointer];
giftCards.forEach(function(card) {
var cardOfferPointers = card.getAttribute('data-offer-pointers');
if (cardOfferPointers) {
// Convert the string to an array
var offerPointers = cardOfferPointers.split(',');
var productId = card.getAttribute('data-product-id');
var cardWrapper = card.closest('.wb-gift-card-wrapper');
// Check if the selected offer is in this gift's offers
if (offerPointers.includes(selectedOfferPointer)) {
// Check if this gift was previously locked
var wasLocked = card.classList.contains('wb-gift-locked');
// This gift is available in the selected offer
card.classList.remove('wb-gift-locked');
card.classList.add('wb-gift-available');
if (cardWrapper) {
cardWrapper.classList.remove('wb-gift-card-wrapper-locked');
}
// Update the gift image, text and other attributes from the selected offer
var giftInSelectedOffer = null;
for (var j = 0; j < selectedOfferGroup.length; j++) {
if (selectedOfferGroup[j].product_id == productId && selectedOfferGroup[j].product_is_gift) {
giftInSelectedOffer = selectedOfferGroup[j];
break;
}
}
if (giftInSelectedOffer) {
// Update the image
var giftImage = card.querySelector('.wb-gift-card-image');
if (giftImage) {
giftImage.src = giftInSelectedOffer.gift_image || giftInSelectedOffer.image || "";
giftImage.alt = wideBundle.getTranslatedText(giftInSelectedOffer.gift_text || "Free Gift");
}
// Update the text
var textContainer = card.nextElementSibling;
if (textContainer && textContainer.classList.contains('wb-gift-text-container')) {
var giftTextElement = textContainer.querySelector('.wb-gift-card-text');
if (giftTextElement) {
giftTextElement.textContent = wideBundle.getTranslatedText(giftInSelectedOffer.gift_text || "Free Gift");
}
}
}
// Show the content when unlocked
var content = card.querySelector('.wb-gift-card-content');
if (content) {
content.style.display = 'flex';
}
// Show the variant selectors for this gift
var textContainer = card.nextElementSibling;
if (textContainer && textContainer.classList.contains('wb-gift-text-container')) {
var variantSelectors = textContainer.querySelector('.wb-gift-variant-selectors-outside');
if (variantSelectors) {
variantSelectors.style.display = 'flex';
}
// Show price for available gifts
var priceDisplay = textContainer.querySelector('.wb-gift-price-display');
if (priceDisplay) {
priceDisplay.style.opacity = '1';
}
}
// Remove lock icon if it exists
var lockIcon = card.querySelector('.wb-gift-lock-container');
if (lockIcon) {
lockIcon.remove();
}
// Update the background color according to selected offer's style
var selectedOffer = document.querySelector('.selectedWB');
if (selectedOffer) {
// Use the same background color as the selected offer
card.style.backgroundColor = wideBundle.settings.selected_free_gift_background_color || wideBundle.settings.background_color;
// Update the plus icon to checkmark for available gifts
var plusIcon = card.querySelector('.wb-gift-plus-icon');
if (plusIcon) {
plusIcon.innerHTML = '';
}
}
// If the gift was previously locked, just add a simple bounce animation
if (wasLocked) {
// Add a simple bounce effect
card.classList.add('wb-gift-bounce');
setTimeout(function() {
card.classList.remove('wb-gift-bounce');
}, 500);
}
// Enable variant selectors for ALL options (including option4)
var selectors = textContainer.querySelectorAll('select, input[type="radio"]');
selectors.forEach(function(selector) {
selector.disabled = false;
});
} else {
// This gift is not available in the selected offer
card.classList.add('wb-gift-locked');
card.classList.remove('wb-gift-available');
// Also update the wrapper class
if (cardWrapper) {
cardWrapper.classList.add('wb-gift-card-wrapper-locked');
}
// Hide the content when locked
var content = card.querySelector('.wb-gift-card-content');
if (content) {
content.style.display = 'none';
}
// Hide the variant selectors for this gift
var textContainer = card.nextElementSibling;
if (textContainer && textContainer.classList.contains('wb-gift-text-container')) {
var variantSelectors = textContainer.querySelector('.wb-gift-variant-selectors-outside');
if (variantSelectors) {
variantSelectors.style.display = 'none';
}
// Fade out price for locked gifts
var priceDisplay = textContainer.querySelector('.wb-gift-price-display');
if (priceDisplay) {
priceDisplay.style.opacity = '1';
}
}
// Reset background color
card.style.backgroundColor = wideBundle.settings.unselected_free_gift_background_color || "#d5d5d5";
// Reset plus icon to X symbol for locked gifts
var plusIcon = card.querySelector('.wb-gift-plus-icon');
if (plusIcon) {
plusIcon.innerHTML = '';
}
// Disable ALL variant selectors (including option4)
var selectors = textContainer.querySelectorAll('select, input[type="radio"]');
selectors.forEach(function(selector) {
selector.disabled = true;
});
// Add gift icon if it doesn't exist
if (!card.querySelector('.wb-gift-lock-container')) {
var lockContainer = document.createElement('div');
lockContainer.classList.add('wb-gift-lock-container');
var giftIcon = document.createElement('div');
giftIcon.classList.add('wb-gift-lock-icon');
giftIcon.innerHTML = '';
lockContainer.appendChild(giftIcon);
card.appendChild(lockContainer);
}
}
}
});
};
// Update the createWidgetContent function to use our new free gifts display
wideBundle.createWidgetContent = function (widgetContainer) {
wideBundle.createHeading(widgetContainer); //Create the heading above the widget
for(var i = 0; i !child.classList.contains('wb-gift-product-wrapper') && !child.classList.contains('wb-upsell-product-wrapper') && !child.classList.contains('wb-user-text-wrapper') && !child.classList.contains('wb-offer-timer'))
.forEach(child => flexContainer.appendChild(child));
offerContainer.prepend(flexContainer);
}
widgetContainer.appendChild(offerContainer);
}
// Add our free gifts display before the Add to Cart button only if we have gifts with "under" placement
var giftsContainer = wideBundle.createFreeGiftsDisplay(widgetContainer);
if (giftsContainer) {
widgetContainer.appendChild(giftsContainer);
// Find initially selected offer for gifts display initialization
// Add a small delay to ensure offers are rendered and selected
setTimeout(function() {
var selectedElement = document.querySelector('.selectedWB');
if (selectedElement) {
var selectedOfferPointer = selectedElement.getAttribute('data-offers-pointer');
wideBundle.updateGiftsDisplay(selectedOfferPointer);
}
}, 10);
}
wideBundle.addCodeBeforeOrAfterButton(widgetContainer, "before"); //Add html code before the button if the user added some
wideBundle.createAddToCartButton(widgetContainer); //Create the add to cart button
wideBundle.createTrustBadges(widgetContainer); //Create the add to cart button
wideBundle.addCodeBeforeOrAfterButton(widgetContainer, "after"); //Add html code after the button if the user added some
document.body.click();
// Only create the dynamic group popup if there are offers with dynamic groups
const hasDynamicGroups = wideBundle.offers.some(offerGroup =>
offerGroup.some(offer => offer.dynamicGroupUuid !== null)
);
if (hasDynamicGroups) {
ensureDynamicGroupPopup();
}
}
//Add Trust badges image if the user added one
wideBundle.createTrustBadges = function(widgetContainer){
if(wideBundle.settings.trustbadge != '' && wideBundle.settings.trustbadge != null){ //If they added an image url in the settings to show it below widebundle
trustBadgeContainer = document.createElement('div');
if(widgetContainer.hasAttribute('id')) {
trustBadgeContainer.id = 'cont-trustbadge-wb';
}
trustBadgeContainer.classList.add('cont-trustbadge-wb');
trustBadgeImg = document.createElement('img');
trustBadgeImg.setAttribute('src', wideBundle.settings.trustbadge);
trustBadgeContainer.appendChild(trustBadgeImg);
widgetContainer.appendChild(trustBadgeContainer);
}
}
//Create the add to cart button for WideBundle
wideBundle.createAddToCartButton = function(widgetContainer){
var buttonAtc = document.createElement('div'); //Create the element
var atcText = wideBundle.getTranslatedText(wideBundle.settings.atc_text);
if(atcText && (atcText.includes('{{price}}') || atcText.includes('{{compare-price}}'))){
var priceEl = wideBundle.activeWidget ? wideBundle.activeWidget.querySelector('.selectedWB .price-new-form span.first-price-WB') : null;
var comparePriceEl = wideBundle.activeWidget ? wideBundle.activeWidget.querySelector('.selectedWB .price-new-form span.second-price-WB') : null;
var price = priceEl ? priceEl.outerHTML : '';
var comparePrice = comparePriceEl ? comparePriceEl.outerHTML : '';
atcText = atcText.replace(/{{price}}/g, price);
atcText = atcText.replace(/{{compare-price}}/g, comparePrice);
}
buttonAtc.innerHTML = AddSVG()+atcText;
buttonAtc.setAttribute('data-add-to-cart', '');
if(widgetContainer.hasAttribute('id')){ //Add an id if we're on the main widget
buttonAtc.id = "new-form-atc";
}
buttonAtc.classList.add('new-form-atc', 'addCart');
buttonAtc.addEventListener("click", wideBundle.addToCart); //Add the event listener to add the offer to the cart
widgetContainer.appendChild(buttonAtc); //Add the button to the container
wideBundle.copyAddToCartDesign(buttonAtc); //If the user enabled the feature to automatically copy the design of the add-to-cart button of the theme
if(wideBundle.settings.atc_animation == 'shaking'){ //If they added the settings to make the add to cart button shake
var headWB = document.getElementsByTagName('head')[0],
styleWB = document.createElement('style'),
animName = 'shakeWB',
rulesWB = document.createTextNode('@-webkit-keyframes ' + animName + '{ 0% { transform:translate(0,0);-webkit-transform:translate(0,0) } 2% { transform:translate(5px,0) scale(1.05);-webkit-transform:translate(5px,0) scale(1.05)} 4% { transform:translate(0,0) scale(1.1);-webkit-transform:translate(0,0) scale(1.1) } 6% { transform:translate(5px,0) scale(1.05);-webkit-transform:translate(5px,0) scale(1.05) } 8% { transform:translate(0,0) scale(1);-webkit-transform:translate(0,0) scale(1)} 10% { transform:translate(5px,0);-webkit-transform:translate(5px,0) } 12% { transform:translate(0,0);-webkit-transform:translate(0,0) } 100% { transform:translate(0,0);-webkit-transform:translate(0,0) } } #new-form-atc{ -webkit-animation: '+animName+' 4s ease infinite; }');
styleWB.type = 'text/css';
if(styleWB.styleSheet)
styleWB.styleSheet.cssText = rulesWB.nodeValue;
else styleWB.appendChild(rulesWB);
headWB.appendChild(styleWB);
window.addEventListener('load', animateButton, false);
function animateButton(){
if(document.querySelector('#new-form-atc') != null){
document.querySelector('#new-form-atc').style.webkitAnimationName = animName;
}
for(var i=0; i
${wideBundle.removeDecimal(wideBundle.updatePriceSeparator(discountValueConverted.toString()))}
`;
const variantIdsSelected = offerGroup.filter((offer) => !offer.product_is_upsell).reduce((ids, offer) => {
const variantId = offer.variants[0].id;
return [...ids, ...(new Array(offer.product_qty).fill(variantId))];
}, []);
const variantPrices = offerGroup.filter((offer) => !offer.product_is_upsell).reduce((prices, offer) => {
let variantPrice = 0;
variantPrice = Number(wideBundle.getAmountFromPrice(offer.variants[0].price));
if (offer.product_is_gift) variantPrice = 0;
if (offer.product_is_upsell) variantPrice = 0;
if (offer.dynamicGroupUuid !== null && offer.dynamicGroupSelected === null) variantPrice = 0;
return [...prices, ...(new Array(offer.product_qty).fill(variantPrice))];
}, []);
const variantCompareAtPrices = offerGroup.filter((offer) => !offer.product_is_upsell).reduce((prices, offer) => {
let variantCompareAtPrice = 0;
if (offer.variants[0].compare_at_price && offer.variants[0].compare_at_price !== "") {
variantCompareAtPrice = Number(wideBundle.getAmountFromPrice(offer.variants[0].compare_at_price));
if (variantCompareAtPrice === 0) {
variantCompareAtPrice = Number(wideBundle.getAmountFromPrice(offer.variants[0].price));
}
} else {
variantCompareAtPrice = Number(wideBundle.getAmountFromPrice(offer.variants[0].price));
}
return [...prices, ...(new Array(offer.product_qty).fill(variantCompareAtPrice))];
}, []);
htmlContent += wideBundle.addOfferCalculatedPrices(offerGroup[0], variantIdsSelected, variantPrices, variantCompareAtPrices);
}
if (offerGroup[1] && offerGroup[1].automatic_discount) {
for (var o = 1; o < offerGroup.length; o++) {
htmlContent += wideBundle.addOfferHiddenPrices(offerGroup[o], processedVariants);
}
}
}
divHiddenPrices.innerHTML = htmlContent;
wideBundle.widgetContainers[0].appendChild(divHiddenPrices); //Add hidden prices to first container
// Store the divHiddenPrices element for later use
wideBundle.hiddenPricesDiv = divHiddenPrices;
}
wideBundle.addOfferHiddenPrices = function(offer, processedVariants){
var htmlContent = "";
var variants = offer.variants;
for (var j = 0; j < variants.length; j++) {
var variant = variants[j];
if (!processedVariants.has(variant.id)) {
variant.compare_at_price = parseFloat(wideBundle.getAmountFromPrice(variant.price)) >= parseFloat(wideBundle.getAmountFromPrice(variant.compare_at_price)) ? "" : variant.compare_at_price;
htmlContent += `
${wideBundle.removeDecimal(wideBundle.updatePriceSeparator(variant.price))}
${wideBundle.removeDecimal(wideBundle.updatePriceSeparator(variant.compare_at_price))}
`;
processedVariants.add(variant.id);
}
}
return htmlContent;
}
wideBundle.addOfferCalculatedPrices = function(offerSelected, variantIdsSelected, variantPrices, variantCompareAtPrices){
const offerValuePrice = Number(offerSelected.discount_value);
const variantsString = offerSelected.offersPointer + "@" + variantIdsSelected.join("+");
let totalPrice = variantPrices.reduce((sum, price) => sum + price, 0);
let totalCompareAtPrice = variantCompareAtPrices.reduce((sum, comparePrice, index) => {
// Use compare price only if it exists AND is higher than regular price
if (comparePrice && comparePrice > variantPrices[index]) {
return sum + comparePrice;
}
// Otherwise use regular price
return sum + variantPrices[index];
}, 0);
let discountedPrice = 0;
switch (offerSelected.discount_type) {
case "amount":
case "value":
discountedPrice = Math.max(0, totalPrice - offerValuePrice * parseFloat(Shopify.currency.rate));
break;
case "percent":
discountedPrice = Math.max(0, totalPrice - ((totalPrice / 100) * offerValuePrice));
break;
case "fixed":
if (offerValuePrice === 0) {
discountedPrice = totalPrice;
} else {
discountedPrice = offerValuePrice * parseFloat(Shopify.currency.rate);
}
break;
case "gift":
discountedPrice = totalPrice - variantPrices[variantPrices.length - 1];
break;
}
discountedPrice = discountedPrice.toFixed(2);
totalCompareAtPrice = totalCompareAtPrice.toFixed(2);
totalPrice = totalPrice.toFixed(2);
const roundPrices = wideBundle.settings.round_prices_automatic == 1 && parseFloat(window?.Shopify?.currency?.rate) !== 1.0 && offerSelected.discount_type !== "gift";
if (roundPrices && !Number.isInteger(parseFloat(discountedPrice))) {
if (Math.ceil(discountedPrice) <= parseFloat(totalPrice)) {
discountedPrice = Math.ceil(discountedPrice).toFixed(2);
}
}
let compareAtPriceToShow = "";
if (totalCompareAtPrice > 0 && parseFloat(wideBundle.getAmountFromPrice(totalCompareAtPrice)) > parseFloat(wideBundle.getAmountFromPrice(totalPrice))) {
if (parseFloat(wideBundle.getAmountFromPrice(discountedPrice)) >= parseFloat(wideBundle.getAmountFromPrice(totalCompareAtPrice))) {
compareAtPriceToShow = "";
}
else{
compareAtPriceToShow = totalCompareAtPrice;
}
} else {
compareAtPriceToShow = parseFloat(wideBundle.getAmountFromPrice(discountedPrice)) >= parseFloat(wideBundle.getAmountFromPrice(totalPrice)) ? "" : totalPrice;
}
return `
${wideBundle.replaceCurrencyForMarket(wideBundle.formatPrice(wideBundle.removeDecimal(wideBundle.updatePriceSeparator(discountedPrice))))}
${wideBundle.replaceCurrencyForMarket(wideBundle.formatPrice(wideBundle.removeDecimal(wideBundle.updatePriceSeparator(compareAtPriceToShow))))}
`;
}
//Create the heading above the widget
wideBundle.createHeading = function(widgetContainer){
var heading = document.createElement('p');
heading.classList.add('p-title-WB');
//find the translated text and use it in the HTML
let translatedHeading = wideBundle.getTranslatedText(wideBundle.heading);
if(widgetContainer.hasAttribute('id')) {
heading.innerHTML = ""+translatedHeading+"";
} else {
heading.innerHTML = ""+translatedHeading+"";
}
if(wideBundle.settings.design_code == 4){
heading.innerHTML += "";
}
widgetContainer.appendChild(heading);
}
//Create the offer container
wideBundle.createOfferContainer = function (widgetContainer, offer, offersPointer) {
var offerContainer = document.createElement('div');
if(widgetContainer.hasAttribute('id')){
offerContainer.id = "id" + offer.variants[0].id + '-' + offersPointer
}
offerContainer.classList.add('selectable'); //Add the class for unselected offers
offerContainer.classList.add('new-form-option');
if(offer.automatic_discount){
offerContainer.classList.add(`offer-discount-system`);
}
offerContainer.setAttribute('data-id', offer.variants[0].id + '-' + offersPointer);
offerContainer.setAttribute('data-variant-id', offer.variants[0].id);
offerContainer.setAttribute('data-offers-pointer', offersPointer);
offerContainer.setAttribute('data-offer-auto', offer.automatic_discount);
offerContainer.addEventListener("click", wideBundle.changeSelectedOffer); //Add the click event to detect when we select the offer
wideBundle.createOfferTimer(offerContainer, offer);
return offerContainer;
}
// Create countdown timer on offer (top area)
wideBundle.createOfferTimer = function (offerContainer, offer) {
if(
!offer ||
!offer.timer_type ||
!offer.timer_text_color ||
!offer.timer_text_size ||
!offer.timer_text_style ||
!offer.timer_background_color
){
console.log('[US-TIMER] createOfferTimer: missing required style fields, skipping');
return;
}
const isMidnight = offer.timer_type === "daily_midnight";
const isRecurring = offer.timer_type === "recurring";
// For midnight mode, we don't need timer_end_date
if (!isMidnight && !offer.timer_end_date) {
console.log('[US-TIMER] createOfferTimer: no timer_end_date for non-midnight mode, skipping');
return;
}
let endMs;
if (isMidnight) {
// Calculate milliseconds until next midnight in visitor's local timezone
endMs = new Date().setHours(24, 0, 0, 0);
//console.log('[US-TIMER] midnight mode: end set to next midnight', new Date(endMs).toString());
} else {
endMs = Number(offer.timer_end_date);
if (!endMs || !Number.isFinite(endMs)) return;
}
const stepMs = isRecurring && Number(offer.timer_duration) > 0
? Number(offer.timer_duration) * 60 * 1000
: 0;
// Avoid duplicate intervals if regenerated
if(offerContainer._wbTimerInterval){
clearInterval(offerContainer._wbTimerInterval);
offerContainer._wbTimerInterval = null;
}
offerContainer.style.position = "relative";
// offerContainer.style.overflow = "hidden"
const timerWrap = document.createElement("div");
timerWrap.classList.add("wb-offer-timer");
// Styles from offer fields
timerWrap.style.backgroundColor = offer.timer_background_color;
timerWrap.style.position = 'absolute';
timerWrap.style.padding = '4px';
timerWrap.style.display = 'flex';
timerWrap.style.justifyContent = 'center';
timerWrap.style.top = 0;
timerWrap.style.left = 0;
timerWrap.style.width = '100%';
const timerText = document.createElement("div");
timerText.classList.add("wb-offer-timer__text");
// text styles
timerText.style.color = offer.timer_text_color;
timerText.style.fontSize = String(offer.timer_text_size);
if (offer.timer_text_style === 'bold') {
timerText.style.fontWeight = "600";
} else if (offer.timer_text_style === 'italic') {
timerText.style.fontStyle = "italic";
timerText.style.fontWeight = "400";
} else if (offer.timer_text_style === 'bold-italic') {
timerText.style.fontStyle = "italic";
timerText.style.fontWeight = "600";
} else {
timerText.style.fontWeight = "400";
}
timerWrap.appendChild(timerText);
// Put timer at the very top of offer container
offerContainer.insertBefore(timerWrap, offerContainer.firstChild);
function pad2(n){
return String(n).padStart(2, "0");
}
function formatLeft(msLeft){
if(msLeft < 0) msLeft = 0;
const totalSec = Math.floor(msLeft / 1000);
const days = Math.floor(totalSec / 86400);
const hours = Math.floor((totalSec % 86400) / 3600);
const mins = Math.floor((totalSec % 3600) / 60);
const secs = totalSec % 60;
// < 1 hour => MM:SS (minutes can be > 59? no, because < 1h)
if(totalSec < 3600){
return pad2(mins) + ":" + pad2(secs);
}
// < 24 hours => HH:MM:SS
if(totalSec < 86400){
return pad2(hours) + ":" + pad2(mins) + ":" + pad2(secs);
}
// >= 24 hours => DD:HH:MM:SS (days can be 3, 12, 120...)
return String(days) + ":" + pad2(hours) + ":" + pad2(mins) + ":" + pad2(secs);
}
function buildTimerText(template, timeStr){
const t = (template == null ? "" : String(template)).trim();
if(!t) return timeStr;
// replace {{time}} with optional spaces: {{ time }}
if(/{{\s*time\s*}}/i.test(t)){
return t.replace(/{{\s*time\s*}}/gi, timeStr);
}
// if no placeholder, append time
return t + " " + timeStr;
}
function tick(){
const now = Date.now();
if (isMidnight && now >= endMs) {
// Recalculate next midnight
endMs = new Date().setHours(24, 0, 0, 0);
console.log('[US-TIMER] midnight reset: new end', new Date(endMs).toString());
}
if (isRecurring && stepMs > 0) {
if (now >= endMs) {
const diff = now - endMs;
const steps = Math.floor(diff / stepMs) + 1;
endMs = endMs + steps * stepMs;
}
}
const left = endMs - now;
const timeStr = formatLeft(left);
const text = buildTimerText(offer.timer_text, timeStr);
const offerCornerSentence = offerContainer.querySelector(".corner-offer");
timerText.innerHTML = wideBundle.getTranslatedText ? wideBundle.getTranslatedText(text) : text;
// --- fixed date type (not recurring, not midnight)
if (!isRecurring && !isMidnight && left <= 0) {
if (offerContainer._wbTimerInterval) {
clearInterval(offerContainer._wbTimerInterval);
offerContainer._wbTimerInterval = null;
}
timerWrap.style.display = "none";
offerContainer.style.setProperty("padding-top", "10px", "important")
return;
}
requestAnimationFrame(function(){
const h = timerWrap.offsetHeight;
offerContainer.style.setProperty("padding-top", (h + 10) + "px", "important");
if (wideBundle.settings.design_code != 1 && wideBundle.settings.design_code != 5) {
offerCornerSentence && offerCornerSentence.style.setProperty("top", (-17 - h - 10) + "px", "important");
}
});
}
setTimeout(() => {
tick();
}, 1);
offerContainer._wbTimerInterval = setInterval(tick, 1000);
};
//Create the content on the left of the offer
wideBundle.createOfferContentLeft = function(offerContainer, offer){
var contentLeft = document.createElement('div');
contentLeft.classList.add('value-left');
var roundCheckbox = document.createElement('span'); //Create the circle checkbox
roundCheckbox.classList.add('checkedWB');
contentLeft.append(roundCheckbox);
if(offer.image != '' && offer.image != null){ //Add thumbnail if it exists
var thumbnail = document.createElement('img');
thumbnail.classList.add('thumbnailWB');
contentLeft.classList.add('offer-image');
thumbnail.setAttribute('src', offer.image);
thumbnail.setAttribute('alt', "");
contentLeft.append(thumbnail);
}
offerContainer.appendChild(contentLeft);
}
//Create the contnet on the right of the offer
wideBundle.createOfferContentRight = function(offerContainer, offer, offersPointer){
var contentRight = document.createElement('div');
contentRight.classList.add('value-right');
offerContainer.appendChild(contentRight);
titleOffer = document.createElement('p'); //Create the title of the offer
titleOffer.classList.add('title-variant');
titleOffer.innerHTML = wideBundle.getTranslatedText(offer.offer_title);
var priceElement = document.createElement('p'); //Create the price of the offer;
priceElement.classList.add('price-new-form');
let variantId;
if (offer.automatic_discount) {
const offerDb = wideBundle.offers[offersPointer];
variantId = offersPointer + "@" + (offerDb.filter((offer) => !offer.product_is_upsell).reduce((ids, offer) => {
const variantId = offer.variants[0].id;
return [...ids, ...(new Array(offer.product_qty).fill(variantId))];
}, []).join("+"));
} else {
variantId = offer.variants[0].id; //We create the prices of the offer
}
var price = document.querySelector(`.wb_hidden_prices ${offer.automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_price[variant-id="${variantId}"]`)?.innerHTML ?? "";
var compareAtPrice = document.querySelector(`.wb_hidden_prices ${offer.automatic_discount ? '.wb_hidden_prices_element[data-calculated] ' : ' '}.wb_hidden_compared_price[variant-id="${variantId}"]`)?.innerHTML ?? "";
var priceHtml = `
${price}
${compareAtPrice}
`;
priceElement.innerHTML = priceHtml;
if(offer.unit == 1 && wideBundle.settings.plan !== "monthly") {
var crMarkets = offer.variants[0].conversion_rate
var crOffer = offer.unit_price / offer.price_in_offer ;
var unit_price_markets = offer.unit_price / crMarkets;
var unitElement = document.createElement('p'); //Create the price of the offer;
unitElement.classList.add('first-unit-WB');
var unitHtml = `
${ wideBundle.removeDecimal(wideBundle.updatePriceSeparator(wideBundle.formatPriceForUnit(unit_price_markets)))}
${offer.unit_text}
`;
priceElement.setAttribute("data_offer_cr", crOffer);
unitElement.innerHTML = wideBundle.getTranslatedText(unitHtml);
priceElement.classList.add('hidden-unit');
}
wideBundle.createQuantityWidget(offerContainer); //We create the quantity widget if they enabled it in the settings
if(isJsonString(offer.message) && offer.message !== null){
messageText = JSON.parse(offer.message);
}
else{
messageText = offer.message ? [offer.message] : [""];
}
messageEffect = offer.message_effect ? offer.message_effect.split(",") : [""]; //Get message effect
messagePosition = offer.message_position ? offer.message_position.split(",") : [""]; //Get message position
messagesToDisplay = wideBundle.settings.plan == 'monthly' ? 1 : messageText.length;
for(var i = 0; i 1 && messagePosition[i] < 4 && wideBundle.settings.plan == 'monthly')){ //Add the message before title if it exists
wideBundle.createCustomSentence(messageText[i], messageEffect[i], contentRight);
}
}
contentRight.appendChild(titleOffer); //Add the title of the offer
contentRight.appendChild(priceElement); //Add the price of the offer
if(offer.unit == 1 && wideBundle.settings.plan !== "monthly") {
contentRight.appendChild(unitElement); //Add the price of the offer
}
for(var i = 0; i 0) {
inputUserText.value = wideBundle.userTexts[inputUserTextName];
}
inputUserText.addEventListener("input", (event) => {
wideBundle.userTexts[event.target.name] = event.target.value;
wideBundle.updateFormHiddenIds();
});
contentUserText.appendChild(inputUserText);
const errorUserText = document.createElement('span');
errorUserText.classList.add('error-user-text');
errorUserText.textContent = wideBundle.getTranslatedText('This field is required');
contentUserText.appendChild(errorUserText);
offerContainer.classList.add(`offer-free-gift`);
const valueRight = offerContainer.querySelector('.value-right');
if (valueRight) {
valueRight.appendChild(contentUserText);
} else {
offerContainer.appendChild(contentUserText);
}
}
wideBundle.fromGraphqlId = function (gid) {
const shopifyGidRegexp = new RegExp(/gid:\/\/shopify\/\w+\/(\d+)/);
return Number(shopifyGidRegexp.exec(gid)?.[1] ?? "0");
}
wideBundle.toGraphqlId = function (resource = "Product", id) {
return `gid://shopify/${resource}/${id}`;
}
wideBundle.makeStorefrontApiRequest = async function (query, queryVariables = {}) {
try {
const countryCode = window?.Shopify?.country ?? null;
const variables = { country: countryCode, ...queryVariables };
const response = await fetch((window?.Shopify?.routes?.root ?? "/") + "api/2026-01/graphql.json", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Shopify-Storefront-Access-Token": wideBundle?.settings?.storefront_token ?? "",
},
body: JSON.stringify({ query, variables }),
});
const data = await response.json();
if (data?.errors?.length > 0) {
console.error("[Widebundle] Failed storefront api request", { errors: data.errors, query, variables });
return null;
}
return data.data;
} catch (error) {
console.error("[Widebundle] Failed storefront api request", { errors: [error], query, variables });
return null;
}
}
function formatQuotes(text) {
return text.split('"').join('"').split("'").join(''');
}
//Create options selectors if the product has 1 or 2 options (color and size for example)
wideBundle.createOptionSelectors = function(offer, contentRight, offersPointer, offerContainer){
optionsLabels = offer.options_labels ? offer.options_labels.split(",") : [""]; //Get option labels
swatchId = Math.floor(Math.random()*898)+101;
if (offer.automatic_discount && wideBundle.offers[offersPointer].length > 1){ //Add the title of the product and the options name for automatic discount only
productTitle = offer.product_title;
optionsName = [2, 3, 4].map(i => offer[`option${i}_values`]?.length > 1 ? offer[`option${i}_title`] : null).filter(title => title && title.trim()).join(', '); //For 3 options, if there is only 1 value in the array, we don't show option title
optionsName = optionsName ? `(${wideBundle.getTranslatedText(optionsName)})` : '';
if(optionsName && !offer.product_is_gift){
let labelDropdowns = document.createElement('p');
labelDropdowns.classList.add("general_option_label_wb");
if (offer.dynamicGroupSelected !== null) {
labelDropdowns.innerHTML = /* html */ `
${wbHtmlentities(wideBundle.getTranslatedText(productTitle))} ${wbHtmlentities(optionsName)}
`;
} else {
labelDropdowns.textContent = `${wideBundle.getTranslatedText(productTitle)} ${optionsName}`;
}
contentRight.appendChild(labelDropdowns);
}
}
else if(offer.automatic_discount){
optionsName = [2, 3, 4].map(i => offer[`option${i}_values`]?.length > 1 ? offer[`option${i}_title`] : null).filter(title => title && title.trim()).join(', '); //For 3 options, if there is only 1 value in the array, we don't show option title
if(optionsName && !offer.product_is_gift){
let labelDropdowns = document.createElement('p');
labelDropdowns.classList.add("general_option_label_wb");
if (offer.dynamicGroupSelected !== null) {
labelDropdowns.innerHTML = /* html */ `
${wbHtmlentities(wideBundle.getTranslatedText(optionsName))}
`;
} else {
labelDropdowns.textContent = `${wideBundle.getTranslatedText(optionsName)}`;
}
labelDropdowns.textContent = `${wideBundle.getTranslatedText(optionsName)}`;
contentRight.appendChild(labelDropdowns);
}
}
for(var i = 0; i 1) {
let j = 2;
wideBundle.offers[offersPointer].slice(1).forEach((additionalOffer, productPointer) => {
const dynamicGroupButton = document.createElement("button");
if (additionalOffer.dynamicGroupUuid !== null) {
const dynamicGroup = additionalOffer.dynamicGroups.find(dg => dg.uuid === additionalOffer.dynamicGroupUuid);
dynamicGroupButton.type = "button";
dynamicGroupButton.style.cursor = "pointer";
dynamicGroupButton.classList.add("js-wb-dynamic-group");
dynamicGroupButton.dataset.uuid = dynamicGroup.uuid;
dynamicGroupButton.innerHTML = /* html */ `
${additionalOffer.dynamicGroupSelected === null
? `?
${wbHtmlentities(wideBundle.settings.dg_choose_btn_text)}
`
: ``}
`;
if (!window?.Shopify?.previewMock) {
const selected = additionalOffer.dynamicGroupSelected !== null;
dynamicGroupButton.addEventListener("click", (event) => {
if (event.target.closest(".js-wb-dynamic-group__close") !== null) {
closeDynamicGroupPopup(dynamicGroup.uuid, null);
} else {
openDynamicGroupPopup(dynamicGroup, selected);
}
});
} else {
dynamicGroupButton.disabled = true;
}
if (additionalOffer.dynamicGroupSelected === null) {
contentRight.appendChild(dynamicGroupButton);
}
}
productTitle = additionalOffer.product_title;
if (additionalOffer.dynamicGroupSelected !== null) {
optionsName = [2, 3, 4].map(i => additionalOffer[`option${i}_values`]?.length > 1 ? additionalOffer[`option${i}_title`] : null).filter(title => title && title.trim()).join(', ');
} else {
optionsName = [2, 3, 4].map(i => additionalOffer[`option${i}_values`]?.length > 1 ? additionalOffer[`option${i}_title`] : null).filter(title => title && title.trim()).join(', '); //For 3 options, if there is only 1 value in the array, we don't show option title
}
optionsName = optionsName ? `(${wideBundle.getTranslatedText(optionsName)})` : '';
if((optionsName || additionalOffer.dynamicGroupSelected !== null) && !additionalOffer.product_is_gift && !additionalOffer.product_is_upsell){
let labelDropdowns = document.createElement('p');
labelDropdowns.classList.add("general_option_label_wb");
if (additionalOffer.dynamicGroupSelected !== null) {
labelDropdowns.innerHTML = /* html */ `
${wbHtmlentities(wideBundle.getTranslatedText(productTitle))} ${wbHtmlentities(optionsName)}
`;
} else {
labelDropdowns.textContent = `${wbHtmlentities(wideBundle.getTranslatedText(productTitle))} ${wbHtmlentities(optionsName)}`;
}
if (additionalOffer.dynamicGroupSelected === null) {
contentRight.appendChild(labelDropdowns);
} else if (additionalOffer.dynamicGroupUuid !== null) {
const labelsWrapper = document.createElement("div");
labelsWrapper.classList.add("general_option_label_wb_wrapper");
dynamicGroupButton.classList.add("js-wb-dynamic-group--slim");
labelsWrapper.appendChild(dynamicGroupButton);
labelsWrapper.appendChild(labelDropdowns);
contentRight.appendChild(labelsWrapper);
}
}
optionsLabels = additionalOffer.options_labels ? additionalOffer.options_labels.split(",") : [""]; //Get option labels
for(var i = 0; i offer.dynamicGroupUuid === uuid);
const dynamicProductOffer = wideBundle.offers[offersPointer][dynamicProductIndex];
let newOffer;
if (productData !== null) {
newOffer = {
...dynamicProductOffer,
all_products: false,
dynamicGroupSelected: productData.id,
dynamicGroupSelectedImage: productData.featuredImage?.url ?? "",
product_id: productData.id.toString(),
product_handle: productData.handle,
product_title: productData.title,
product_qty: 1,
dropdowns_amount: 1,
gift_product: null,
gift_image: "",
gift_text: "null",
upsell_image: "",
upsell_text: "",
product_is_gift: false,
product_is_upsell: false,
has_gift_products: false,
has_upsell_products: false,
price_in_offer: Number(productData.variants[0].price.amount).toFixed(2),
options_number: productData.options?.[1] ? 3 : 2,
option2_is_color: "0",
option2_title: "",
option2_values: (productData.options?.[0]?.optionValues ?? []).map(val => val.name).toSorted(),
option3_is_color: "0",
option3_title: "",
option3_values: (productData.options?.[1]?.optionValues ?? []).map(val => val.name).toSorted(),
option4_is_color: "0",
option4_title: "",
option4_values: (productData.options?.[2]?.optionValues ?? []).map(val => val.name).toSorted(),
options_color_values: dynamicProductOffer.options_color_values ? dynamicProductOffer.options_color_values : {},
options_labels: "",
variants: productData.variants.map((variant) => {
return {
id: variant.id,
price: variant.price?.amount ? wideBundle.formatPrice(Number(variant.price.amount).toFixed(2)) : "",
compare_at_price: variant.compareAtPrice?.amount ? wideBundle.formatPrice(Number(variant.compareAtPrice.amount).toFixed(2)) : "",
option1: dynamicProductOffer.variants[0].option1,
option2: variant.selectedOptions?.[0]?.value ?? null,
option3: variant.selectedOptions?.[1]?.value ?? null,
option4: variant.selectedOptions?.[2]?.value ?? null,
conversion_rate: 1,
};
}),
};
if (productData.options?.[0]) {
newOffer.option2_title = productData.options[0].name;
newOffer.option2_is_color = (newOffer?.swatch_options ?? []).includes(productData.options[0].name) ? "1" : "0";
const option2Count = wideBundle.offers[offersPointer]
.slice(0, dynamicProductIndex)
.filter(offer =>
offer.option2_title === newOffer.option2_title ||
offer.option3_title === newOffer.option2_title ||
offer.option4_title === newOffer.option2_title
)
.length + 1;
newOffer.options_labels = newOffer.option2_title + " " + option2Count;
newOffer.option2_values.forEach((val) => {
const simplified = "_" + wideBundle.simplifyColor(val);
newOffer.options_color_values[val] = wideBundle.listColors[simplified] ?? "#ffffff";
});
}
if (productData.options?.[1]) {
newOffer.option3_title = productData.options[1].name;
newOffer.option3_is_color = (newOffer?.swatch_options ?? []).includes(productData.options[1].name) ? "1" : "0";
const option3Count = wideBundle.offers[offersPointer]
.slice(0, dynamicProductIndex)
.filter(offer =>
offer.option2_title === newOffer.option3_title ||
offer.option3_title === newOffer.option3_title ||
offer.option4_title === newOffer.option3_title
)
.length + 1;
newOffer.options_labels += " & " + newOffer.option3_title + " " + option3Count;
newOffer.option3_values.forEach((val) => {
const simplified = "_" + wideBundle.simplifyColor(val);
newOffer.options_color_values[val] = wideBundle.listColors[simplified] ?? "#ffffff";
});
}
if (productData.options?.[2]) {
newOffer.option4_title = productData.options[2].name;
newOffer.option4_is_color = (newOffer?.swatch_options ?? []).includes(productData.options[2].name) ? "1" : "0";
const option4Count = wideBundle.offers[offersPointer]
.slice(0, dynamicProductIndex)
.filter(offer =>
offer.option2_title === newOffer.option4_title ||
offer.option3_title === newOffer.option4_title ||
offer.option4_title === newOffer.option4_title
)
.length + 1;
newOffer.options_labels += " & " + newOffer.option4_title + " " + option4Count;
newOffer.option4_values.forEach((val) => {
const simplified = "_" + wideBundle.simplifyColor(val);
newOffer.options_color_values[val] = wideBundle.listColors[simplified] ?? "#ffffff";
});
}
} else {
newOffer = {
...dynamicProductOffer,
all_products: false,
dynamicGroupSelected: null,
dynamicGroupSelectedImage: "",
product_id: wb_php_crc32(uuid),
product_handle: uuid,
product_title: "",
product_qty: 1,
dropdowns_amount: 1,
gift_product: null,
gift_image: "",
gift_text: "null",
product_is_gift: false,
product_is_upsell: false,
has_gift_products: false,
has_upsell_products: false,
price_in_offer: "0.0",
options_number: 1,
option2_is_color: "0",
option2_title: "",
option2_values: [],
option3_is_color: "0",
option3_title: "",
option3_values: [],
option4_is_color: "0",
option4_title: "",
option4_values: [],
options_color_values: {},
options_labels: "",
variants: [
{
id: Number(wb_php_crc32(uuid).toString() + "0"),
price: "0.0",
compare_at_price: "",
option1: dynamicProductOffer?.variants?.[0]?.option1 ?? "",
option2: null,
option3: null,
option4: null,
conversion_rate: 1,
},
],
};
}
wideBundle.offers[offersPointer][dynamicProductIndex] = newOffer;
wideBundle.addHiddenPrices();
for(var i = 0; i < wideBundle.widgetContainers.length; i++){ //For each widget container
const widgetContainer = wideBundle.widgetContainers[i];
let prevOfferContainer = widgetContainer.querySelector(".selectedWB");
var offer = wideBundle.offers[offersPointer][0];
let offerContainer = wideBundle.createOfferContainer(widgetContainer, offer, offersPointer); //Create the container
wideBundle.createOfferContentLeft(offerContainer, offer); //Create the content left
wideBundle.createOfferContentRight(offerContainer, offer, offersPointer); //Create the content right
if (offer.user_text_enabled) {
wideBundle.createOfferContentUserText(offerContainer, offer); //Create the content user text
}
//We need an additional div for all the elements if we have a gift offer for the flex wrap
if (offerContainer.classList.contains('offer-free-gift') || offerContainer.classList.contains('offer-upsell-product')) {
const flexContainer = document.createElement('div');
flexContainer.classList.add('offer-with-gift-flex-wrapper');
Array.from(offerContainer.children)
.filter(child => !child.classList.contains('wb-gift-product-wrapper') && !child.classList.contains('wb-upsell-product-wrapper') && !child.classList.contains('wb-user-text-wrapper') && !child.classList.contains('wb-offer-timer'))
.forEach(child => flexContainer.appendChild(child));
offerContainer.prepend(flexContainer);
}
widgetContainer.insertBefore(offerContainer, prevOfferContainer);
prevOfferContainer.remove();
wideBundle.addStructureStyle();
// wideBundle.updatePriceOnAllOffers();
offerContainer.click();
}
}
async function fetchDynamicGroupData(dynamicGroup) {
if (!dynamicGroup.isCollection) {
return dynamicGroup;
}
if (wideBundle?.dynamicGroupsCache?.collections?.[dynamicGroup?.collection?.id]) {
return {
...dynamicGroup,
options: wideBundle?.dynamicGroupsCache?.collections[dynamicGroup?.collection?.id] ?? [],
};
}
let cursor = null;
let hasNextPage = true;
let products = [];
while (hasNextPage) {
const apiData = await wideBundle.makeStorefrontApiRequest(`#graphql
query collectionProducts($id: ID!, $cursor: String, $country: CountryCode) @inContext(country: $country) {
collection(id: $id) {
products(first: 250, after: $cursor) {
nodes {
id
title
featuredImage {
url(transform: { maxHeight: 80 })
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
}
`, {
id: wideBundle.toGraphqlId("Collection", dynamicGroup.collection.id),
cursor: cursor,
});
apiData.collection.products.nodes.forEach((product) => {
products.push({
id: wideBundle.fromGraphqlId(product.id),
title: product.title,
thumbnail: product.featuredImage !== null ? { alt: "Product", url: product.featuredImage.url } : null,
});
});
hasNextPage = apiData.collection.products.pageInfo.hasNextPage;
cursor = apiData.collection.products.pageInfo.endCursor;
}
wideBundle.dynamicGroupsCache.collections[dynamicGroup.collection.id] = products;
wideBundle.offers.forEach((offerGroup, groupIndex) => {
offerGroup.forEach((offer, offerIndex) => {
offer.dynamicGroups.forEach((dg, dynamicGroupIndex) => {
if (dg.options[0].id === dynamicGroup.collection.id) {
wideBundle.offers[groupIndex][offerIndex].dynamicGroups[dynamicGroupIndex] = {
...dg,
options: products,
};
}
});
});
});
return { ...dynamicGroup, options: products };
}
async function fetchDynamicProductData(data) {
if (wideBundle?.dynamicGroupsCache?.products?.[data.id]) {
return wideBundle.dynamicGroupsCache.products[data.id];
}
const productData = await wideBundle.makeStorefrontApiRequest(`#graphql
query productDetails($id: ID!, $country: CountryCode) @inContext(country: $country) {
product(id: $id) {
id
title
handle
featuredImage {
url(transform: { maxHeight: 80 })
}
options {
name
optionValues {
name
}
}
}
}
`, {
id: wideBundle.toGraphqlId("Product", data.id),
});
let cursor = null;
let hasNextPage = true;
let variants = [];
while (hasNextPage) {
const variantsData = await wideBundle.makeStorefrontApiRequest(`#graphql
query productVariants($id: ID!, $cursor: String, $country: CountryCode) @inContext(country: $country) {
product(id: $id) {
variants(first: 250, after: $cursor) {
nodes {
id
availableForSale
currentlyNotInStock
quantityAvailable
compareAtPrice {
amount
}
price {
amount
}
selectedOptions {
name
value
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
}
`, {
id: wideBundle.toGraphqlId("Product", data.id),
cursor: cursor,
});
variantsData.product.variants.nodes.forEach((variant) => {
variants.push({
...variant,
id: wideBundle.fromGraphqlId(variant.id),
});
});
hasNextPage = variantsData.product.variants.pageInfo.hasNextPage;
cursor = variantsData.product.variants.pageInfo.endCursor;
}
let featuredImageUrl = null;
if (productData.product?.featuredImage !== null) {
const url = new URL(productData.product.featuredImage.url);
// 1. Link has _123x suffix, which we need to remove
// 2. Link has _x123 suffix, which we need to remove
// 3. Find file extension at the end of url and append _200x200 to get resized image from CDN
url.pathname = url.pathname.replace(/_(\d+)x(\d+)(\.\w+)$/, "$3");
url.pathname = url.pathname.replace(/_x(\d+)(\.\w+)$/, "$2");
url.pathname = url.pathname.replace(/\.(jpg|jpeg|png|webp|avif|gif|heic)$/, "_200x200.$1");
featuredImageUrl = url.toString();
}
wideBundle.dynamicGroupsCache.products[data.id] = {
...productData.product,
featuredImage: productData.product?.featuredImage !== null
? { alt: "Product", url: featuredImageUrl }
: null,
id: wideBundle.fromGraphqlId(productData.product.id),
variants: variants,
};
variants.forEach((variant) => {
const addToCartBtnEnable = variant.availableForSale ? "1" : "0";
let inventoryQuantity = variant.quantityAvailable;
if (variant.availableForSale && variant.currentlyNotInStock) {
inventoryQuantity = 999999;
} else if (variant.availableForSale && !variant.currentlyNotInStock && variant.quantityAvailable <= 0) {
inventoryQuantity = 999999;
}
wideBundle.variantsInventory[variant.id] = {
inventory_quantity: inventoryQuantity,
add_to_cart_btn_enable: addToCartBtnEnable
};
});
return wideBundle.dynamicGroupsCache.products[data.id];
}
function ensureDynamicGroupPopup() {
if (document.querySelector("#wb-dynamic-group-popup")) return;
const s = wideBundle.settings;
const msgBgColor = s.unselected_background_color || "#ffffff";
const msgBgColorTransparency = s.unselected_background_transparency || "";
const msgBorderColor = s.unselected_border_color || "#000000";
const msgBorderRadius = s.unselected_message_border_radius || "0px";
const msgBorderSize = s.unselected_message_border_size || "0px";
const titleColor = s.preview_heading_color || "#000000";
const titleFont = s.unselected_title_text_font || "auto";
const titleFontSize = s.unselected_title_fontsize || "1em";
const optionFontSize = s.option_fontsize || "0.9em";
const optionColor = s.option_select_color || s.option_color || "#000000";
const optionBg = s.option_select_background || "#ffffff";
const optionBorderColor = s.unselected_border_color || "#c6c6c6";
const optionBorderRadius = s.unselected_border_radius || "5px";
const optionBorderSize = s.unselected_border_size || "2px";
const atcBg = s.atc_background || "#000000";
const atcColor = s.atc_color || "#ffffff";
const atcRadius = s.atc_radius || "0px";
const atcFontSize = s.atc_font_size || "1em";
const atcFont = s.atc_font || "auto";
const popup = document.createElement("div");
popup.innerHTML = /* html */ `
`;
const overlay = popup.querySelector(".js-dg-overlay");
const submit = popup.querySelector(".js-dg-submit-btn");
const close = popup.querySelector(".js-dg-close-btn");
document.body.appendChild(popup);
popup.addEventListener("change", () => submit.disabled = false);
overlay.addEventListener("click", () => closeDynamicGroupPopup(submit.dataset.uuid, null));
close.addEventListener("click", () => closeDynamicGroupPopup(submit.dataset.uuid, null));
submit.addEventListener("click", (event) => {
const parent = event.target.closest("#wb-dynamic-group-popup");
const parentRadio = parent.querySelector(".js-dg-products .wb-dg-popup-product__input:checked");
const uuid = submit.dataset.uuid;
const choice = parentRadio.value;
submit.disabled = true;
submit.textContent = "Loading...";
closeDynamicGroupPopup(uuid, choice);
});
}
async function openDynamicGroupPopup(inputDynamicGroup, selected = false) {
const dynamicGroupButton = wideBundle.activeWidget.querySelector(`.js-wb-dynamic-group[data-uuid="${inputDynamicGroup.uuid}"]`);
if (dynamicGroupButton) {
dynamicGroupButton.disabled = false;
dynamicGroupButton.innerHTML = /* html */ `
${!selected ? `
` :
``}
${wbHtmlentities(wideBundle.settings.dg_choose_btn_text)}
`;
}
const dynamicGroup = await fetchDynamicGroupData(inputDynamicGroup);
ensureDynamicGroupPopup();
if (dynamicGroupButton) {
dynamicGroupButton.disabled = false;
dynamicGroupButton.innerHTML = /* html */ `
${!selected ? '?
' :
``}
${wbHtmlentities(wideBundle.settings.dg_choose_btn_text)}
`;
}
const popup = document.querySelector("#wb-dynamic-group-popup");
const popupProducts = popup.querySelector(".js-dg-products");
const submitBtn = popup.querySelector(".js-dg-submit-btn");
popupProducts.innerHTML = "";
dynamicGroup.options.forEach((option) => {
let thumbnailUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
if (option.thumbnail?.url?.length > 0) {
thumbnailUrl = new URL(option.thumbnail?.url ?? "");
// 1. Link has _123x suffix, which we need to remove
// 2. Link has _x123 suffix, which we need to remove
// 3. Find file extension at the end of url and append _200x200 to get resized image from CDN
thumbnailUrl.pathname = thumbnailUrl.pathname.replace(/_(\d+)x(\d+)(\.\w+)$/, "$3");
thumbnailUrl.pathname = thumbnailUrl.pathname.replace(/_x(\d+)(\.\w+)$/, "$2");
thumbnailUrl.pathname = thumbnailUrl.pathname.replace(/\.(jpg|jpeg|png|webp|avif|gif|heic)$/, "_200x200.$1");
thumbnailUrl = thumbnailUrl.toString();
}
popupProducts.insertAdjacentHTML("beforeend", /* html */ `
`);
});
submitBtn.dataset.uuid = dynamicGroup.uuid;
popup.style.display = "flex";
document.body.style.overflow = "hidden";
document.body.style.overscrollBehavior = "none";
}
async function closeDynamicGroupPopup(uuid, choice = null) {
const popup = document.querySelector("#wb-dynamic-group-popup");
if (choice === null) {
wideBundle.updateDynamicGroupProduct(uuid, null);
const submit = popup.querySelector(".js-dg-submit-btn");
submit.disabled = true;
popup.style.display = "none";
document.body.style.overflow = null;
document.body.style.overscrollBehavior = null;
return;
}
const selectedOffer = wideBundle.getSelectedOffer();
const dynamicGroup = selectedOffer.dynamicGroups.find((group) => group.uuid === uuid);
const selectedOption = dynamicGroup.options.find((option) => option.id === Number(choice));
const productData = await fetchDynamicProductData(selectedOption);
wideBundle.updateDynamicGroupProduct(uuid, productData);
setTimeout(() => {
const submit = popup.querySelector(".js-dg-submit-btn");
submit.disabled = true;
submit.textContent = wideBundle.settings.dg_choose_btn_text;
popup.style.display = "none";
document.body.style.overflow = null;
document.body.style.overscrollBehavior = null;
}, 0);
}
function defaultSelect(offer, contentRight, i, j, optionsLabels, offersPointer, productPointer, swatchId, offerContainer) {
let giftWrapper = document.createElement('div');
giftWrapper.classList.add('wb-gift-product-wrapper');
var selectContainer = document.createElement('div');
selectContainer.id = `div-second-select-${offer.variants[0].id}-${i}__${offersPointer}_${productPointer}`;
selectContainer.classList.add(`div-second-select-${offer.variants[0].id}-${i}__${offersPointer}_${productPointer}`, `div-select2`);
if(wideBundle.settings.plan !== "monthly" && (offer.option4_is_color === "1" || offer.option3_is_color === "1" || offer.option2_is_color === "1")) {
selectContainer.classList.add('wb-swatch-container');
}
if(offer.automatic_discount){
selectContainer.classList.add(`div-discount-system`);
}
selectContainer.setAttribute('data-id', offer.variants[0].id);
selectContainer.setAttribute('data-product-id', offer.product_id);
selectContainer.setAttribute('data-offers-pointer', offersPointer);
selectContainer.setAttribute('data-product-pointer', productPointer);
if (offer.dynamicGroupUuid !== null && offer.dynamicGroupSelected !== null && wideBundle.settings.design_code != 1) {
selectContainer.style.marginLeft = "92px";
}
const maxDepth = offer.options_number - 1;
let initialOptions = [offer.option2_values[0]];
if (maxDepth > 0 && offer.option3_values?.[0]) initialOptions.push(offer.option3_values[0]);
if (maxDepth > 1 && offer.option4_values?.[0]) initialOptions.push(offer.option4_values[0]);
const optionAvailability = wideBundle.calcOptionsAvailability(
initialOptions,
[
offer.option2_values,
offer.option3_values,
offer.option4_values,
],
offer.variants,
);
if(offer.options_number == 3){ //If we have a 3rd option we add the