https://dukecannon.com/cdn/shop/t/327/assets/static.skio-cart-upsell.js?v=175914944628657285481769543661

1import{LitElement,html,css}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";const skioCartStyles=css`
2  .skio-cart-upsell {
3    margin-top: 8px;
4    margin-bottom: 8px;
5    width: 100%;
6    padding: 8px 10px;
7    background: transparent;
8    border: 1px solid #e8e8e1;
9    cursor: pointer;
10    max-width: 300px;
11    font-family: Gotham, sans-serif;
12  }
13
14  .skio-cart-upgrade {
15    margin-top: 8px;
16    margin-bottom: 8px;
17    background: transparent;
18    color: black;
19    border: 1px solid #e8e8e1;
20    outline: none;
21    cursor: pointer;
22    padding: 8px 10px;
23    width: 100%;
24    transition: color 0.25s ease 0s, background-color 0.25s ease 0s,
25      border-color 0.25s ease 0s;
26    font-family: Gotham, sans-serif;
27    font-size: 12px;
28  }
29
30  .skio-cart-upgrade:hover {
31    color: black;
32    border-color: transparent;
33    background: #f7f8f9;
34  }
35`;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}};constructor(){super(),this.item=null,this.line=null,this.product=null,this.selectedVariant=null,this.skioSellingPlanGroups=null,this.availableSellingPlanGroups=null,this.selectedSellingPlanGroup=null,this.selectedSellingPlan=null,this.discountFormat="percent",this.currency="USD",this.moneyFormatter=new Intl.NumberFormat("en-US",{style:"currency",currency:this.currency}),this.discountText=window.theme.settings.subscriptionUpgradeText}upgradeButton=()=>this.availableSellingPlanGroups?.length>0?html`
36          <button
37            class="skio-cart-upgrade"
38            type="button"
39            @click=${()=>this.selectSellingPlan(this.availableSellingPlanGroups[0].selected_selling_plan.id)}
40          >
41            ${this.discountText}
42            ${this.discount(this.availableSellingPlanGroups[0].selected_selling_plan).percent}
43          </button>
44        `:html``;changeFrequency=()=>html`
45    <select
46      class="skio-cart-upsell"
47      skio-cart-upsell="${this.key}"
48      @change=${e=>this.selectSellingPlan(e.target.value)}
49    >
50      ${this.product.requires_selling_plan?"":html`
51            <optgroup label="One Time Purchase">
52              <option value="">One-time</option>
53            </optgroup>
54          `}
55      ${this.availableSellingPlanGroups?this.availableSellingPlanGroups.map(((e,t)=>html`
56              <optgroup
57                label="${e.name} (Save ${this.discount(e.selected_selling_plan).percent})"
58              >
59                ${e?e.selling_plans.map((e=>html`
60                        <option
61                          value="${e.id}"
62                          .selected=${e.id==this.selectedSellingPlan?.id}
63                        >
64                          ${e.name}
65                        </option>
66                      `)):""}
67              </optgroup>
68            `)):""}
69    </select>
70  `;render(){if(this.item&&this.product&&this.selectedVariant)return this.selectedSellingPlan?this.changeFrequency():this.upgradeButton()}updated=e=>{e.has("item")&&this.item&&this.fetchProduct(this.item.handle),e.has("product")&&this.product&&(this.skioSellingPlanGroups=this.product.selling_plan_groups.filter((e=>"SKIO"===e.app_id)),this.selectedVariant=this.product.variants.find((e=>e.id==this.item.variant_id)),this.item.selling_plan_allocation&&(this.selectedSellingPlanGroup=this.skioSellingPlanGroups.find((e=>e.selling_plans.find((e=>e.id==this.item.selling_plan_allocation.selling_plan.id)))),this.selectedSellingPlan=this.selectedSellingPlanGroup.selling_plans.find((e=>e.id==this.item.selling_plan_allocation.selling_plan.id)))),e.has("selectedVariant")&&this.selectedVariant&&(this.availableSellingPlanGroups=this.skioSellingPlanGroups.filter((e=>e.selling_plans.some((e=>this.selectedVariant.selling_plan_allocations.some((t=>t.selling_plan_id===e.id)))))),this.availableSellingPlanGroups.length&&this.availableSellingPlanGroups.forEach((e=>{e.selected_selling_plan=e.selling_plans[0]}))),e.has("selectedSellingPlan")&&this.product&&this.updateLineItem()};log=(...e)=>{e.unshift("%c[skio cart upsell]","color: #8770f2;"),console.log.apply(console,e)};error=(...e)=>{e.unshift("%c [skio cart upsell]","color: #ff0000"),console.error.apply(console,e)};getSectionsToRender(){return[{id:"cart_form",section:document.getElementById("cart_form").dataset.id,selector:".cart__item-list"}]}getSectionInnerHTML(e,t){return(new DOMParser).parseFromString(e,"text/html").querySelector(t).innerHTML}updateLineItem(){if(!this.line||!this.item)return;if(this.item.selling_plan_allocation?.selling_plan?.id==this.selectedSellingPlan?.id)return;let e;e=this.selectedSellingPlan?JSON.stringify({line:this.line,quantity:this.item.quantity,selling_plan:this.selectedSellingPlan?this.selectedSellingPlan?.id:null,properties:{"Subscription Discount":this.discount(this.selectedSellingPlan).percent}}):JSON.stringify({line:this.line,quantity:this.item.quantity,selling_plan:null,properties:{"Subscription Discount":null}}),fetch("/cart/change.js",{method:"POST",headers:{"Content-Type":"application/json"},body:e}).then((async e=>{const t=await e.text(),l=JSON.parse(t);document.dispatchEvent(new CustomEvent("cart:build",{detail:{cart:l,triggerCartComplete:!0}}))}))}selectSellingPlanGroup(e){this.selectedSellingPlanGroup=e,this.selectedSellingPlan=e?.selected_selling_plan}selectSellingPlan(e){if(!e)return this.selectedSellingPlanGroup=null,void(this.selectedSellingPlan=null);let t=this.availableSellingPlanGroups.find((t=>t.selling_plans.find((t=>t.id==e)))),l=t.selling_plans.find((t=>t.id==e));l?(t.selected_selling_plan=l,this.selectedSellingPlanGroup=t,this.selectedSellingPlan=l):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(e){return this.moneyFormatter.format(e/100)}discount(e){if(!e)return{percent:"0%",amount:0};const t=e.price_adjustments[0],l={percent:"0%",amount:0},i=this.selectedVariant.price;switch(t.value_type){case"percentage":l.percent=`${t.value}%`,l.amount=Math.round(i*t.value/100);break;case"fixed_amount":l.percent=`${Math.round(1*t.value/i*100)}%`,l.amount=t.value;break;case"price":l.percent=`${Math.round(1*(i-t.value)/i*100)}%`,l.amount=i-t.value}return l}fetchProduct=async e=>{let t=window.sessionStorage.skioCartProductCache?JSON.parse(window.sessionStorage.skioCartProductCache):[],l=t?t.find((t=>t.handle==e)):null;

70l?this.product=l:await fetch(`/products/${e}.js`).then((e=>e.json())).then((e=>{this.product=e,t.push(e),window.sessionStorage.skioCartProductCache=JSON.stringify(t),this.requestUpdate()}))}}customElements.define("skio-cart-upsell",SkioCartUpsell);