`); }) } // Product options $.get(`${window.theme.api_url}/productoptions/${productId}`, (data) => { if (!data) return; productOptionContainer.empty(); let productLabelID=0; Object.values(data).forEach(optionItem => { productOptionContainer.append(`
`); productLabelID++; }) }); // Item Fee let productFees=[]; if(isOnItemFee){ $.ajax({ url: `${product_data_endpoint}/productfees/${product_shopify_id}`, method: "GET", async: false, headers: { "Authorization": "Bearer " + token }, success: function(data) { productFees=data; calculateItemFee(); } }); } // Shipping Fee/* let shippingFees=[]; if(isOnShippingItemFee){ $.ajax({ url: `${product_data_endpoint}/productshippingfee/${product_shopify_id}`, method: "GET", async: false, headers: { "Authorization": "Bearer " + token }, success: function(data) { shippingFees=data; calculateShippingItemFee(); //buildShippingItemFeeHtml(); } }); } */ document.getElementById('add-to-cart-button').disabled = false;/* ----------------------------- Click Handlers ----------------------------- */ /** Add to cart button functionality when loaded as a static form */ $("#add-to-cart-button").click(async () => { // Google Tag Manager dataLayer.push({ 'ecommerce': null }); dataLayer.push({ 'event': 'add_to_cart', 'ecommerce': { 'items': [{ 'item_id': '6100898545826', 'item_name': '50 Shades of Early Grey Rose', 'item_brand': 'FiftyFlowers', 'item_category': 'All Flowers', 'item_variant': '', 'currency': 'USD', 'price': '154.99' }] } }); dataLayer=null; setTimeout(() => { window.dataLayer=tempArray; }, 1000); // Google Tag Manager if(productId===0){ $.ajax({ url: `${product_data_endpoint}/productid/${product_shopify_id}`, method: "GET", async: false, headers: { "Authorization": "Bearer " + token }, success: function(data) { productId= data.product_id; AddtoCart();} }); } else{ AddtoCart(); } }); async function AddtoCart(){ let deliveryDate = ""; calculateShippingItemFee(); // Validate delivery date if ("Gift Card" !== "Roses Standard") { deliveryDate = getDeliveryDate(); } // Gather custom product 'item' options if exists let productOptions = {}; let textOption=[]; let itemOptions =[]; const productOptionElems = $(".product-form__option__field:not('.hidden') .product-item-options"); let productOptionSurcharge = 0; productOptionElems.each((_, elem) => { let key = `_${$(elem).prop('name')}`; let newKey=key.split('_')[1]; let [val, price] = $(elem).val().split("|"); let label=$(`#itemLabel${key}`).text(); let value=$(`#itemOption_${val}`).text(); textOption.push(label+' : '+value); if(value.includes('Add')){ let separeteValues=value.split('('); value=separeteValues[0]; price=parseInt(price); } itemOptions.push({'id':val,'label':label,'selected':value,'price':price,'idItem':newKey}); productOptions[key] = val; productOptionSurcharge += parseInt(price); }) // Gather custom product options if exists let productOptions2 = []; const productOptionElems2 = $(".product-options"); let getLabelID=0; let productsOptions=[]; productOptionElems2.each((_, elem) => { const key = `_${$(elem).prop('name')}`; let [val, price] = $(elem).val().split("|"); let label=$(`#productLabel_${getLabelID}`).text(); let value=$(`#productOptions_${val}`).text(); textOption.push(label+' : '+value); if(value.includes('Add')){ let separeteValues=value.split('('); value=separeteValues[0]; price=parseInt(price); } productsOptions.push({'id':val,'label':label,'selected':value,'price':price}); productOptions2.push(val); productOptionSurcharge += parseInt(price); getLabelID++; }) // Add items to cart startAddCartBtnLoading(); let quantity = getQuantity(); let associativeID=Math.random().toString(36).substr(2, 9); let newQtyProOptions=((productOptionSurcharge/parseInt("1"))); //product await cartService.addItemToCart( getVariantId(), quantity, deliveryDate, productId, { _productOptions: productOptions, _productOptions2: productOptions2, _productOptionsSurcharge: productOptionSurcharge*quantity, 'associativeID':associativeID, 'associativeName':product_title_summary, _itemOptions:itemOptions, _productsOptions:productsOptions, _newQtyProOptions:newQtyProOptions, "ProductOptionsText":textOption, } ); //add product options if(productOptionSurcharge>0){ await cartService.addItemToCart( "41593332072610", newQtyProOptions*quantity, '', "product-options", { 'Product Options':textOption, 'Delivery Date':deliveryDate, 'associativeID':associativeID, 'associativeName':product_title_summary, 'Amount':productOptionSurcharge } ); } //add item product fee if(selectedFee && isOnItemFee){ await cartService.addItemToCart( "40676810096846", 1, '', "product-item-fee", { 'Fee Name': selectedFee.fee_name, 'Fee Value': selectedFee.fee_amount, 'Delivery Date':deliveryDate, 'associativeID':associativeID, 'associativeName':product_title_summary, } ); } // Add additional item to cart let variantId = ""; let handle = ""; if (variantId && handle) { await cartService.addItemToCart(variantId, quantity, deliveryDate, handle); quantity += quantity; } // Add surcharge items to cart const { items: initialCartItems, item_count: initialCartItemCount, items_subtotal_price: initialSubtotal, } = await cartService.getCartInfo(); var hasSaturdayDelivery = false; var hasSaturdayDeliveryProduct = false; var saturdayDeliveryDate; var expectedDeliveryDate = deliveryDate; var itemDelivery = new Date(expectedDeliveryDate); var deliveryDay = itemDelivery.getDay(); if (deliveryDay === 6) { hasSaturdayDelivery = true; saturdayDeliveryDate = expectedDeliveryDate; }/* if (hasSaturdayDelivery) { await cartService.addItemToCart( "39557608407202", quantity, saturdayDeliveryDate, "saturday-delivery", { 'associativeID':associativeID, 'associativeName':product_title_summary } ); } */ // Update cart const { items: cartItems, item_count: cartItemCount, items_subtotal_price: subtotal, } = await cartService.getCartInfo(); quickCart.updateCart({ subtotal: subtotal, itemCount: cartItemCount, items: cartItems, openCart: true, }); stopAddCartBtnLoading(); } /* On date picker input change */ function loadLabels(){ const evento=(`
event`); const labelReturn=`Best delivery date: 3 days before your event `; const labelInput=$("#label_picker").css('color','var(--color-text-date)'); const dateInput=$("#datepicker--static").css('color','var(--color-text-date)'); $("#available_span").hide(); $("#datepicker-msg--error").hide(); return labelReturn; } $("#datepicker--static").change(function () { const dateVal = $(this).val(); const messageElem = $(".product__panel .pf-label--static span"); const messageElemlabel = $(".product__panel .pf-label-background"); let label=loadLabels(); if (dateVal) { messageElem.html(`${label}`); messageElemlabel.html(`Delivery Date`); calculateItemFee(); calculateShippingItemFee(); } else { messageElem.text(theme.strings.products.product.choose_delivery_date); } });/* ---------------------------- Helper Functions ---------------------------- */ const getVariantId = () => { const searchParams = new URLSearchParams(window.location.search); let selectedVariant = $(".product__variant-radio__input:checked"); let variantIDN = selectedVariant.data("variant-id"); const variantIdFromParam = searchParams.get("variant"); const variantId = variantIDN || 37679818178722; return variantId; }; const getDeliveryDate = () => $("#datepicker--static").val(); const startAddCartBtnLoading = () => $("#add-to-cart-button").addClass("loading"); const stopAddCartBtnLoading = () => $("#add-to-cart-button").removeClass("loading"); const handleOpenCalendar = () => { $(".event-date") .addClass("active") .delay(100) .queue(() => $(".event-date").addClass("visible").dequeue()); }; window.handleOpenCalendar = handleOpenCalendar; const renderItemFieldOptions = (itemOptions) => { let optionsHtml = ""; itemOptions.forEach(itemOption => { const additionalPrice = itemOption.price_change > 0 ? ` (Add $${itemOption.price_change}.00)` : ""; optionsHtml += `
` }) return optionsHtml; } const renderProductOptions = (productOptions) => { let optionsHtml = ""; productOptions.forEach(option => { const additionalPrice = option.price_change > 0 ? ` (Add $${option.price_change}.00)` : ""; optionsHtml += `
` }) return optionsHtml; } /* -------------------------- Handle Variant Change ------------------------- */ function usePushState(handler){ //modern themes use pushstate to track variant changes without reload function track (fn, handler, before) { return function interceptor () { if (before) { handler.apply(this, arguments); return fn.apply(this, arguments); } else { var result = fn.apply(this, arguments); handler.apply(this, arguments); return result; } }; } var currentVariantId = null; function variantHandler () { var selectedVariantId = window.location.search.replace(/.*variant=(\d+).*/, '$1'); if(!selectedVariantId) return; if(selectedVariantId != currentVariantId){ currentVariantId = selectedVariantId; handler(selectedVariantId); } } // Assign listeners window.history.pushState = track(history.pushState, variantHandler); window.history.replaceState = track(history.replaceState, variantHandler); window.addEventListener('popstate', variantHandler); } usePushState(function(variantId) { const variantInput = $(`[data-variant-id="${variantId}"]`); const variantSku = $(variantInput).data("item-id"); if (window.itemOptions) renderOptions(window.itemOptions, variantSku); });/* -------------------------- Handle Item Click ------------------------- */ $('input[data-name="item-bullet-radio"]').click(()=>{ calculateItemFee(); calculateShippingItemFee(); } );/* -------------------------- Calculations for Item fee ------------------------- */ function parserTemplate(template, placeHolders){ for(let key in placeHolders){ template = template.replace("###"+key+"###",placeHolders[key]) } return template; } function calculateItemFee(){ if(isOnItemFee){ let selectedDeliveryDate = $("#datepicker--static").val(); let result = null; $("#product-item-fee-msg").html(""); let item_id_selected = parseInt($('input[data-name="item-bullet-radio"]:checked', '.product__variant-radio ').attr("data-item-id")); let feeItem = _.find(productFees, { 'item_id': item_id_selected }); // items has valentine fee if(feeItem){ let delivery_date = moment(selectedDeliveryDate).format("YYYY-MM-DD"); //"YYYY-MM-DD HH:mm:ss" let date_start= moment(feeItem.date_start).format("YYYY-MM-DD"); let date_end= moment(feeItem.date_end).format("YYYY-MM-DD"); let isOnRangeFee= moment(delivery_date).isBetween(date_start, date_end); console.log( "selected",delivery_date ,"fee_start",date_start,"fee end",date_end,"isOnRangeFee", isOnRangeFee); if(isOnRangeFee){ $("#product-item-fee-msg").html(parserTemplate("*The selected item has a surcharge of $###fee_value###*",{'fee_value':feeItem.fee_amount})); result=feeItem; } } selectedFee=result; if(selectedFee){ productFeeTotal = selectedFee.fee_amount * getQuantity(); } } } function calculateShippingItemFee(){ if(isOnShippingItemFee){ //let item_id_selected = parseInt($('input[data-name="item-bullet-radio"]:checked', '.product__variant-radio ').attr("data-item-id")); //selectedShippingFee= _.find(shippingFees, { 'item_id': item_id_selected }); //productShippingFeeTotal = selectedShippingFee.shipping_charge * getQuantity(); productShippingFeeTotal = parseInt('15') * getQuantity(); } }/* function buildShippingItemFeeHtml(){ if(isOnShippingItemFee){ let bullets= $('input[data-name="item-bullet-radio"]').get(); bullets.forEach( function (bullet){ let bullet_el = $(bullet); let bulletId = parseInt(bullet_el.attr("data-item-id")); let shippingFeeItem = _.find(shippingFees, { 'item_id': bulletId }); let item_shipping_ctn_el = bullet_el.next(); if(shippingFeeItem && item_shipping_ctn_el){ item_shipping_ctn_el.find(".item_shipping_fee").html("Shipping Fee: $"+shippingFeeItem.shipping_charge); } }); } } */});
