1import{LitElement,html,css}from"https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";const skioCartStyles=css` 2 .skio-cart-upsell { 3 width: 100%; 4 margin-top: 10px; 5 padding: 5px; 6 color: #154331; 7 font-size: 0.75rem; 8 font-weight: 700; 9 line-height: 1.33; 10 text-align: center; 11 letter-spacing: 0; 12 background: #fff; 13 border: solid 2px #b8dac2; 14 border-radius: 4px; 15 cursor: pointer; 16 transition: all 0.2s linear; 17 } 18 19 .skio-cart-upgrade { 20 width: 100%; 21 display: inline-block; 22 margin-top: 10px; 23 padding: 5px; 24 color: #154331; 25 font-size: 0.75rem; 26 font-weight: 700; 27 line-height: 1.33; 28 text-align: center; 29 letter-spacing: 0; 30 background: #fff; 31 border: solid 2px #b8dac2; 32 border-radius: 4px; 33 cursor: pointer; 34 transition: all 0.2s linear; 35 } 36 37 .skio-cart-upgrade:hover { 38 color: white; 39 border-color: #b8dac2; 40 background: #b8dac2; 41 } 42 43 .volume-discount-display { 44 margin-top: 5px; 45 text-align: center; 46 font-size: 13px; 47 } 48`;export class SkioCartUpsell extends LitElement{static styles=skioCartStyles;static properties={item:{type:Object},line:{type:Number},product:{type:Object},selectedVariant:{type:Object},key:{type:String},skioSellingPlanGroups:{},availableSellingPlanGroups:{},selectedSellingPlanGroup:{},selectedSellingPlan:{},discount_format:{type:String},moneyFormatter:{},currency:{type:String},rules:{type:Array},rule:{type:Object},nextRule:{type:Object},quantity:{type:Number},cart:{type:Object}};constructor(){super(),this.item=null,this.line=null,this.product=null,this.selectedVariant=null,this.availableSellingPlanGroups=null,this.selectedSellingPlanGroup=null,this.selectedSellingPlan=null,this.discountFormat="percent",this.currency=window.Shopify.currency.active,this.moneyFormatter=new Intl.NumberFormat(window.Shopify.locale,{style:"currency",currency:this.currency}),this.rules=[],this.rule=null,this.nextRule=null,this.cart=null}async connectedCallback(){super.connectedCallback(),this.log("Mounted"),this.rules=await this.fetchRules(),await this.getRule(),await this.getNextRule()}upgradeButton=()=>this.availableSellingPlanGroups?.length>0?html` 49 <!-- <button class="skio-cart-upgrade" type="button" @click=${()=>this.selectSellingPlan(this.availableSellingPlanGroups[0].selected_selling_plan.id)}>Upgrade to Autoship & Save ${this.discount(this.availableSellingPlanGroups[0].selected_selling_plan).percent}</button> --> 50 <button 51 class="skio-cart-upgrade" 52 type="button" 53 @click=${()=>this.selectSellingPlan(this.availableSellingPlanGroups[0].selected_selling_plan.id)} 54 > 55 Upgrade to Autoship & Save up to 25% 56 </button> 57 `:html``;volumeDiscountDisplay=()=>html` 58 <div class="volume-discount-display"> 59 ${this.nextRule?html` 60 <small> 61 Add 62 ${(this.nextRule?.minQuantityToDiscount||this.rules[0].minQuantityToDiscount)-this.eligibleItemCount(this.nextRule||this.rules[0])} 63 more item(s) to unlock ${this.getRuleDiscount(this.nextRule)} off 64 </small> 65 `:""} 66 </div> 67 `;changeFrequency=()=>html` 68 <select class="skio-cart-upsell" skio-cart-upsell="${this.key}" @change=${e=>this.selectSellingPlan(e.target.value)}> 69 ${this.product.requires_selling_plan?"":html` 70 <optgroup label="One Time Purchase"> 71 <option value="">One-time</option> 72 </optgroup> 73 `} 74 ${this.availableSellingPlanGroups?this.availableSellingPlanGroups.map((group,index)=>html` 75 <optgroup label="${group.name} (Save ${this.discount(group.selected_selling_plan).percent})"> 76 ${group?this.getAvailableSellingPlans(group).map(selling_plan=>html` 77 <option value="${selling_plan.id}" .selected=${selling_plan.id==this.selectedSellingPlan?.id}> 78 ${selling_plan.name} 79 </option> 80 `):""} 81 </optgroup> 82 `):""} 83 </select> 84 85 ${this.volumeDiscountDisplay()} 86 `;
86render(){if(!(!this.item||!this.product||!this.selectedVariant))return this.selectedSellingPlan?this.changeFrequency():this.upgradeButton()}updated=changed=>{if(changed.has("item")&&this.item&&this.fetchProduct(this.item.handle),changed.has("product")&&this.product){const filteredSellingPlanGroups=this.product.selling_plan_groups.filter(selling_plan_group=>selling_plan_group.app_id==="SKIO"&&!selling_plan_group.name.toLowerCase().includes("hidden-")&&!selling_plan_group.name.toLowerCase().includes("dynamic box subscription"));this.selectedVariant=this.product.variants.find(variant=>variant.id==this.item.variant_id),this.item.selling_plan_allocation&&(this.selectedSellingPlanGroup=filteredSellingPlanGroups.find(group=>group.selling_plans.find(selling_plan=>selling_plan.id==this.item.selling_plan_allocation.selling_plan.id)),this.selectedSellingPlan=this.selectedSellingPlanGroup?.selling_plans.find(selling_plan=>selling_plan.id==this.item.selling_plan_allocation.selling_plan.id))}if(changed.has("selectedVariant")&&this.selectedVariant){const filteredSellingPlanGroups=this.product.selling_plan_groups.filter(selling_plan_group=>selling_plan_group.app_id==="SKIO"&&!selling_plan_group.name.toLowerCase().includes("hidden-")&&!selling_plan_group.name.toLowerCase().includes("dynamic box subscription"));this.availableSellingPlanGroups=filteredSellingPlanGroups.filter(selling_plan_group=>selling_plan_group.selling_plans.some(selling_plan=>this.selectedVariant.selling_plan_allocations.some(selling_plan_allocation=>selling_plan_allocation.selling_plan_id===selling_plan.id))),this.availableSellingPlanGroups.length&&this.availableSellingPlanGroups.forEach(group=>{group.selected_selling_plan=group.selling_plans[0]})}changed.has("selectedSellingPlan")&&this.product&&this.updateLineItem(),changed.has("cart")&&(this.getRule(),this.getNextRule())};log=(...args)=>{args.unshift("%c[skio cart upsell]","color: #8770f2;")};error=(...args)=>{args.unshift("%c [skio cart upsell]","color: #ff0000"),console.error.apply(console,args)};async fetchRules(){if(sessionStorage.getItem("skio-discount-rules"))return JSON.parse(sessionStorage.getItem("skio-discount-rules"));{const rules=await fetch(`https://api.skio.com/storefront-http/get-rules-by-domain-or-hostname?domain=${window?.Shopify?.shop}`).then(response=>response.json()).then(response=>response.rules.filter(rule=>rule.type!=="surpriseDelight").sort((a,b)=>a.minQuantityToDiscount-b.minQuantityToDiscount));return sessionStorage.setItem("skio-discount-rules",JSON.stringify(rules)),rules}}eligibleItemCount(rule){if(!this.cart?.items)return 0;let cartItems=Number(this.cart.items.filter(item=>item.vendor!=="SavedBy").reduce((aggregate,item)=>rule?.productVariantIds.some(gid=>gid.includes(item.id)&&item.selling_plan_allocation)?aggregate+item.quantity:aggregate,0));return this.log("eligibleItemCount",{cart:this.cart,rule,rules:this.rules,cartItems}),cartItems}getRule(){let largestMinQuantity={value:-1,index:-1};
86this.rules.forEach((rule,index)=>{this.log("rule loop",rule),rule.code&&largestMinQuantity.value<rule.minQuantityToDiscount&&rule.minQuantityToDiscount<=this.eligibleItemCount(rule)&&(largestMinQuantity.value=rule.minQuantityToDiscount,largestMinQuantity.index=index)}),this.rule=largestMinQuantity.index>-1?this.rules[largestMinQuantity.index]:null}getNextRule(){let largestMinQuantity={value:-1,index:-1};const filteredRules=this.rules.filter(rule=>rule.minQuantityToDiscount);for(const[index,rule]of filteredRules.entries())if(rule.code&&largestMinQuantity.value<rule.minQuantityToDiscount&&rule.minQuantityToDiscount>this.eligibleItemCount(rule)){largestMinQuantity.value=rule.minQuantityToDiscount,largestMinQuantity.index=index;break}this.nextRule=largestMinQuantity.index>-1?this.rules[largestMinQuantity.index]:null}getRuleDiscount(rule){if(!rule)return;const{discountAmount,discountType}=rule;return discountType==="PERCENTAGE"?`${discountAmount}%`:discountType==="FIXED_VALUE"?this.moneyFormatter.format(discountAmount):"0%"}getDiscountFromPriceAdjustment(selling_plan,price_adjustment){const discount={percent:0,amount:0,absolute:0};let multiplier=1;if(this.product.selling_plan_groups.find(group=>group.selling_plans.some(plan=>plan.id==selling_plan.id))?.name==="Prepaid"){const str=selling_plan.name,intervalDate=/\b\d+\s*(days|weeks|months|years)\b/gi,intervals=str.match(intervalDate)[0].match(/\d+/g);multiplier=intervals[0]/(intervals[1]||1),multiplier=multiplier>1?multiplier:1}const price=this.selectedVariant.price,compareAtPrice=this.selectedVariant.compare_at_price&&this.selectedVariant.compare_at_price>price?this.selectedVariant.compare_at_price:price;switch(this.log("test",price_adjustment),price_adjustment.value_type){case"percentage":discount.percent=price_adjustment.value,discount.absolute=Math.round(price*price_adjustment.value/100),discount.amount=Math.round(price*price_adjustment.value/100);break;case"fixed_amount":discount.percent=Math.round(price_adjustment.value*1/price*100),discount.absolute=price_adjustment.value,discount.amount=price_adjustment.value;break;case"price":discount.percent=Math.round((compareAtPrice*multiplier-price_adjustment.value)*1/(compareAtPrice*multiplier)*100),discount.absolute=compareAtPrice*multiplier-price_adjustment.value,discount.amount=price-price_adjustment.value;break}return this.log("discount tes 2t",discount),discount}discount(selling_plan){return selling_plan?this.getDiscountFromPriceAdjustment(selling_plan,selling_plan.price_adjustments[0]):{percent:0,amount:0}}getAvailableSellingPlans(group){return group.selling_plans.filter(selling_plan=>this.selectedVariant.selling_plan_allocations.some(selling_plan_allocation=>selling_plan_allocation.selling_plan_id===selling_plan.id))}getSectionsToRender(){return[{id:"cart_form",section:document.getElementById("cart_form").dataset.id,selector:".cart__item-list"}]}getSectionInnerHTML(html2,selector){return new DOMParser().parseFromString(html2,"text/html").querySelector(selector).innerHTML}updateLineItem(){if(!this.key||!this.item||this.item.selling_plan_allocation?.selling_plan?.id==this.selectedSellingPlan?.id)return;let data;this.selectedSellingPlan?data=JSON.stringify({id:this.key,quantity:this.item.quantity,selling_plan:this.selectedSellingPlan?this.selectedSellingPlan?.id:null}):data=JSON.stringify({id:this.key,quantity:this.item.quantity,selling_plan:null}),fetch("/cart/change.js",{method:"POST",headers:{"Content-Type":"application/json"},body:data}).then(response=>response.text()).then(cart=>{goCart&&goCart.fetchCart()})}selectSellingPlanGroup(group){this.selectedSellingPlanGroup=group,this.selectedSellingPlan=group?.selected_selling_plan}selectSellingPlan(id){if(!id){this.selectedSellingPlanGroup=null,this.selectedSellingPlan=null;return}let group=this.availableSellingPlanGroups.find(group2=>group2.selling_plans.find(selling_plan2=>selling_plan2.id==id)),selling_plan=group.selling_plans.find(x=>x.id==id);selling_plan?(group.selected_selling_plan=selling_plan,this.selectedSellingPlanGroup=group,this.selectedSellingPlan=selling_plan):this.log("Error: couldn't find selling plan with id "+element.value+" for variant "+this.selectedVariant.id+" from product "+this.product.id+" : "+this.product.handle)}money(price){return this.moneyFormatter.format(price/100)}fetchProduct=async handle=>{let productCache=window.sessionStorage.skioCartProductCache?JSON.parse(window.sessionStorage.skioCartProductCache):[],cachedProduct=productCache?productCache.find(product=>product.handle==handle):null;
86cachedProduct?this.product=cachedProduct:await fetch(`/products/${handle}.js`).then(response=>response.json()).then(response=>{this.product=response,productCache.push(response),window.sessionStorage.skioCartProductCache=JSON.stringify(productCache),this.requestUpdate()})}}customElements.define("skio-cart-upsell",SkioCartUpsell); 87//# sourceMappingURL=/cdn/shop/t/644/assets/skio-cart-upsell.js.map?v=53601700337255336271781106066
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.