<form action="/cart" class="cart_form layer-add-cart-success" method="post" novalidate=""> <div class="cart-header"> <svg class="icon" height="24" p-id="2883" t="1634190661535" version="1.1" viewbox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M512 512H0A512 512 0 1 0 512 0 512 512 0 0 0 0 512z" fill="#29BB9D" p-id="2884"></path> <path d="M779.221333 341.333333l31.445334 31.274667-377.258667 375.466667L213.333333 529.024l55.04-54.741333 180.736 117.290666z" fill="#FFFFFF" p-id="2885"></path> </svg> <span>{{lang.product.add_cart_succeed}}</span> <svg class="cart-header-claer popup-claer" class="icon" height="24" p-id="3072" t="1634191042040" version="1.1" viewbox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M571.008 511.936l313.088-311.04a42.688 42.688 0 0 0 0-58.816l-2.496-2.496a40.384 40.384 0 0 0-56.704 0l-313.088 313.6-313.088-311.04a40.384 40.384 0 0 0-56.704 0l-2.496 2.496a42.688 42.688 0 0 0 0 58.816l313.088 308.608-313.088 311.04a42.688 42.688 0 0 0 0 58.816l2.496 2.496a40.384 40.384 0 0 0 56.704 0l313.088-313.6 313.088 311.04a40.384 40.384 0 0 0 56.704 0l2.496-2.496a42.688 42.688 0 0 0 0-58.816z" fill="#1D1F21" p-id="3073"></path> </svg> </div> <div class="cart-product-warp"> <div class="cart-product"> <a href="javascript:;" style="position: relative;align-self: flex-start;"> <img data-src="{{option.src|public_front_asset_url}}" src="{{empty_loading.png|public_asset_abs_dir_url}}" class="cart-product-img"> {% if isProperty %} <svg class="icon" height="16" p-id="4311" style="position: absolute;bottom: 0;right: 0;background-color: #e8e8e8;padding: 3px;border-radius: 50%;" version="1.1" viewbox="0 0 1024 1024" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M789.49999971 512l138.75000029-138.75000029c37.50000029-37.50000029 37.50000029-97.49999971 0-131.24999971L782 95.75c-33.75-33.75-97.49999971-33.75-131.24999971 0L512 234.50000029 373.24999971 95.75C339.49999971 62 275.75 62 242 95.75L95.75 242c-37.50000029 37.50000029-37.50000029 97.49999971 0 131.24999971L234.50000029 512 174.5 568.25c-11.25 11.25-18.74999971 22.5-22.5 37.50000029L69.49999971 834.49999971c-11.25 29.99999971-3.75000029 60.00000029 11.25 82.50000029 18.74999971 22.5 45 37.50000029 75.00000058 37.50000029 11.25 0 18.74999971 0 29.99999971-3.75000029l228.75000029-82.50000029c15.00000029-3.75000029 26.25000029-11.25 37.49999942-22.5l56.25-56.25 138.75000029 138.75000029c18.74999971 18.74999971 41.24999971 26.25000029 67.5 26.25000029s48.75000029-11.25 67.5-26.25000029l146.25-146.25c37.50000029-37.50000029 37.50000029-97.49999971 0-131.24999971L789.49999971 512z m-71.24999942-371.25c3.75000029 0 11.25 3.75000029 14.99999942 3.75000029l146.25 146.25c7.49999971 7.49999971 7.49999971 18.74999971 0 26.24999942l-52.49999971 52.50000058-172.50000029-172.50000029 52.50000058-52.49999971s3.75000029-3.75000029 11.25-3.75000029zM238.24999971 410.75l67.5-67.5c11.25-11.25 11.25-29.99999971 0-41.24999971s-29.99999971-11.25-41.24999971 0L197 369.50000029 148.24999971 320.75c-7.49999971-7.49999971-7.49999971-18.74999971 0-26.25000029l146.25-146.25c3.75000029-3.75000029 7.49999971-3.75000029 15.00000029-3.74999942s11.25 3.75000029 15.00000029 3.74999942L459.50000029 287 287 459.50000029 238.24999971 410.75z m165.00000058 386.25000029s-3.75000029 3.75000029-7.50000058 3.74999942l-228.74999942 82.50000029c-7.49999971 3.75000029-15.00000029 0-18.75000058-7.49999971-3.75000029-3.75000029-3.75000029-7.49999971-3.74999942-15.00000029l82.49999942-228.75000029c0-3.75000029 3.75000029-3.75000029 3.75000029-7.49999971l82.50000029-82.50000029 225-225 74.99999971-74.99999971 172.50000029 172.50000029-75.00000058 74.99999971-225 225-82.49999942 82.50000029z m472.5-67.5l-146.25 146.25c-7.49999971 7.49999971-18.74999971 7.49999971-26.25000029 0l-48.75000029-48.75000029 67.5-67.5c11.25-11.25 11.25-29.99999971 0-41.24999971s-29.99999971-11.25-41.24999971 0l-67.5 67.5-48.75000029-48.75000029 172.50000029-172.50000029 138.75000029 138.75000029c7.49999971 7.49999971 7.49999971 18.74999971 0 26.25000029z" p-id="4312"></path> </svg> {% endif %} </a> <div class="cart-product-info"> <div class="cart-product-name"> <span class="line-clamp2" style="text-align: left;">{{option.productTitle}}</span> </div> {% if storeConfig.sku_spu_set == "4" %} {% elsif storeConfig.sku_spu_set == "2" %} <div class="cart-product-skuName" >{{lang.account.orders_detail.spu}}: {{option.spu | default:"-" }}</div> {% elsif storeConfig.sku_spu_set == "3" %} <div class="cart-product-skuName" >{{lang.account.orders_detail.sku}}: {{option.sku | default:"-" }}</div> {% elsif storeConfig.sku_spu_set == "1" %} <div class="cart-product-skuName" >{{lang.account.orders_detail.spu}}: {{option.spu | default:"-" }}, {{lang.account.orders_detail.sku}}: {{option.sku | default:"-" }}</div> {% else %} {% endif %} {% if option.sku_value %} <div class="cart-product-skuName">{{option.sku_value | replace : "<br/>", ";" }}</div> {% endif %} {% for item in option.custom_attr %} <div class="cart-product-skuName"> <span> {{ item.name }} : </span> {% if item.type == "file" %} <a href="{{ item.urls }}" target="_blank" download class="custom-option-download"> {{ lang.account.orders.property_detail }} </a> {%- unless item.price == '0' -%} <span> ( {%- if item.price > 0 -%} + {%- else -%} - {%- endif -%} {{ item.price | money }} ) </span> {%- endunless -%} {%- elsif item.type == "image_group" -%} {%- for el in item.value -%} <a href="{{ el.urls }}" target="_blank" download class="custom-option-download"> {{ el.value }} </a> {%- unless el.price == '0' -%} <span> ( {%- if el.price > 0 -%} + {%- else -%} - {%- endif -%} {{ el.price | money }} ) </span> {%- endunless -%} {%- unless forloop.last -%} , {%- endunless -%} {%- endfor -%} {% elsif item.type == "public_image" %} {%- if item.price_type == '1' -%} {%- for el in item.value -%} <span>{{el.value}} {%- if el.price != 0 -%}( {%- if el.price > 0 -%}+{%- else -%}- {%- endif -%} {{el.price | money }} ) {%- endif -%} </span> {%- unless forloop.last -%}, {%- endunless -%} {%- endfor -%} {%- else -%} {%- for el in item.value -%} <span>{{el.value}} {%- if forloop.last -%} {%- if item.price != 0 -%}( {%- if item.price > 0 -%}+{%- else -%}- {%- endif -%} {{ item.price | money }} ) {%- endif -%} {%- endif -%} </span> {%- unless forloop.last -%}, {%- endunless -%} {%- endfor -%} {%- endif -%} {% elsif item.type == "image_gallery" %} <a href="{{ item.urls }}" target="_blank" download class="custom-option-download"> {{ item.value }} </a> {%- unless item.price == '0' -%} <span> ( {%- if item.price > 0 -%} + {%- else -%} - {%- endif -%} {{ item.price | money }} ) </span> {%- endunless -%} {%- elsif item.type == "checkbox" or item.type == "block_text" or item.type == "image" -%} {%- for el in item.value -%} <span> {{ el.value }} {%- unless el.price == '0' -%} ( {%- if item.price > 0 -%} + {%- else -%} - {%- endif -%} {{ el.price | money }} ) {%- endunless -%} </span> {%- unless forloop.last -%} , {%- endunless -%} {%- endfor -%} {% else %} <span> {{ item.value }} {%- unless item.price == '0' -%} ( {%- if item.price > 0 -%} + {%- else -%} - {%- endif -%} {{ item.price | money }} ) {%- endunless -%} </span> {% endif %} </div> {% endfor %} </div> </div> </div> <div class="cart-price"> <span class="cart-content-label">{{lang.product.subtotal}}:</span> <span class="cart-content-value">{{subtotalPrice}}</span> </div> <div class="cart-operate"> <a class="cart-button main_btn cart-buyNow" href="javascript:;" id="submit"> <span>{{ lang.cart.list.checkout }}</span> <svg class="icon" fill="#fff" height="24" p-id="2600" style="margin-left:6px" t="1642570805735" version="1.1" viewbox="0 0 1024 1024" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M938.666667 511.957333l-320 256 0-213.333333L0 554.624l0-85.333333L618.666667 469.290667l0-213.333334z" p-id="2601"></path> </svg> </a> <a class="cart-button cart-button-plan" href="/cart">{{lang.product.view_cart}}</a> </div> </form>
{% for sku in skus %} {% assign keyIndex = forloop.index %} <div class="moi-product-option" data-sku-name="{{ sku.name }}"> <div class="cell-item moi-product-sku-label" data-type="key"> <span class="product-sku-name">{{ sku.name }} {%- if sku.isImg -%} {%- if productSkuStyle == "image" or productSkuStyle == "color" -%} :<span style="font-weight: bold;color:#333;">{{sku.selected_value_label}}</span> {%- endif -%} {%- endif -%} </span> </div> <div class="cell-item moi-product-sku-value" data-type="values"> <div class="product-sku-values"> {% for val in sku.value %} {%- capture className -%} {% if val.available == 0 %}product-sku-values-item-disable{% endif %} {% if sku.selected_value == val.value %}product-sku-values-item-active{% endif %} {%- endcapture -%} {%- capture imageClassName -%} {%- if val.image != "" and sku.isImg -%} product-sku-values-item-image {%- endif -%} {%- endcapture -%} {%- capture imageSizeClassName -%} {%- if val.image != "" and sku.isImg -%} {%- if productSkuStyle == "image" or productSkuStyle == "image_text" -%} {{productSkuSize}} {%- endif -%} {%- endif -%} {%- endcapture -%} {%- capture colorClassName -%} {%- if productSkuStyle == "color" and sku.isImg -%}product-sku-value-color{%- endif -%} {%- endcapture -%} <div class="product-sku-values-item {{imageSizeClassName}} {{imageClassName}} {{className}} {{colorClassName}} {{ 'skyStyle-' | append: theme_config.global.product_sku_style }} {% if productSkuStyle == "color" and sku.isImg %}colorRender{% endif %}" data-index="{{ keyIndex }}" data-idx="{{ forloop.index }}" data-value='{{ val | json | escape }}' is_deleteProduct="{{ val.deleteItem }}"> {%- if val.available == 0 -%} <div class="product-sku-values-item-disable-mask"></div> {%- endif -%} {%- if productSkuStyle == "color" and sku.isImg -%} <div class="product-sku-value-color-item" style='background-color:{{val.colorValue}}'></div> {%- elsif val.image != "" and sku.isImg -%} <img data-src="{{val.image.src|public_front_asset_url}}" src="{{empty_loading.png|public_asset_abs_dir_url}}" /> {%- if productSkuStyle == "image_text" -%} <span>{{ val.name }}</span> {%- endif -%} {%- else -%} {{ val.name }} {%- endif -%} </div> {% endfor %} </div> </div> </div> {% endfor %}
{% for sku in skus %} {% assign keyIndex = forloop.index %} <div class="moi-product-option" data-sku-name="{{ sku.name }}"> <div class="sku-item-col"> <div class="cell-item moi-product-sku-label" data-type="key"> <span class="product-sku-name">{{ sku.name }}</span> </div> <div class="cell-item moi-product-sku-value" data-type="values"> <div class="product-sku-values"> <label class="product-sku-select" > <select class="product-sku-unselect"> {% if checkedFirstSku == '2' %} <option value="0" {% if sku.selected_value == "" %}selected="selected"{% endif %} disabled >{{lang.product.please_select}}</option> {% endif %} {% for val in sku.value %} {%- capture disabled -%} {% if val.available == 0 %}disabled{% endif %} {% if sku.selected_value == val.value %} selected{% endif %} {%- endcapture -%} <option value='{{val.value}}' {{disabled}} data-index="{{ keyIndex }}" data-value='{{ val | json | escape }}'>{{ val.name }}</option> {% endfor %} </select> <svg class="product-sku-select-delete" data-index="{{ keyIndex }}" viewBox="0 0 1024 1024" {% if sku.selected_value == "" or checkedFirstSku != '2' %}style="display: none;"{% endif %} version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4673" width="20" height="20"><path d="M804.992 838.229333L240.896 274.133333l33.237333-33.237333 564.096 564.096z" fill="#1D1F21" p-id="4674"></path><path d="M274.133333 838.229333l-33.237333-33.237333L804.992 240.896l33.237333 33.237333z" fill="#1D1F21" p-id="4675"></path></svg> <div class="mo-edge" {% if checkedFirstSku == '2' and sku.selected_value != "" %}style="display: none;"{% endif %}></div> </label> </div> </div> </div> </div> {% endfor %}
<div class="sku_option-template_all"> {% for item in variant %} <div class="sku_option-template_all-cell {% if item.available ==0 %} --template-all-disable {% endif %}"> <input type="radio" {% if item.checked %} checked {% endif %} {% if item.available ==0 %} disabled {% endif %} name="sku_option-template_all_{{templateId}}" value="{{item.sku_code}}" id="template-{{item.id}}" hidden> <label for="template-{{item.id}}" class="sku_option-template_all-item"> <div class="--template-all-left"> <span class="sku_option-template_all-item-icon"></span> {%- if productSkuStyle == "color" and item.colorCard -%} <div class="--template-all-color" style='background-color:{{item.colorValue}}'></div> {%- elsif item.image and item.colorCard -%} <img class="--template-all-img" data-src="{{item.image.src|public_front_asset_url}}" src="{{empty_loading.png|public_asset_abs_dir_url}}" /> {% endif %} <span class="--template-all-left_text">{{item.name}}</span> {% comment %} <span class="--template-all-left_tag">Free Shipping</span> {% endcomment %} </div> <div class="--template_all-right"> <span class="--template_all-price">{{item.price | money}}</span> {% if item.price < item.compare_at_price %} <span class="--template_all-compare_at_price">{{item.compare_at_price | money}}</span> {% endif %} </div> {% if item.ext1 and item.ext1 != '' %} <div class="--template_all-tag">{{item.ext1}}</div> {% endif %} </label> </div> {% endfor %} </div> </div>
{% for sku in skus %} {% assign keyIndex = forloop.index %} {% assign index = forloop.index0 %} {% if sku.type == "multiple" %} <div class="moi-product-option" data-sku-name="{{ sku.name }}"> <div class="cell-item moi-product-sku-value" style="margin-top:16px"> <div class="moi-product-sku-multiple"> <table class="moi-product-sku-multiple-table"> <thead> <tr> <td class="multiple-md-width40 "><span>{{sku.name}}</span></td> <td class="multiple-md-hidden">{{lang.account.orders_detail.price | default:"Price"}}</td> {% if theme_config.global.product_inventory_status and inventory_tracking != 0 %} <td class="multiple-md-hidden">{{lang.general.stock | default:"Stock"}}</td> {% endif %} <td style=' text-align: right;' class="step-items-end"> <div class="step-items-center"> <span {% if unlimited %}class="stock-sotes"{% endif %}>{{lang.general.qty | default:"QTY"}}</span> <span class="multiple-reset"> <svg t="1725352112242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4300" width="16" height="16"><path d="M896 192v110.72A448 448 0 0 0 544 128 455.04 455.04 0 0 0 128 403.2l64 25.6A391.04 391.04 0 0 1 544 192a388.48 388.48 0 0 1 330.88 192H704v64h256V192zM544 832a388.48 388.48 0 0 1-330.88-192H384V576H128v256h64v-110.72A448 448 0 0 0 544 896 455.04 455.04 0 0 0 960 620.8l-64-25.6A391.04 391.04 0 0 1 544 832z" fill="currentColor" p-id="4301"></path></svg> <span class="multiple-reset-text">{{lang.general.reset | default:"Reset"}}</span> </span> </div> </td> </tr> </thead> <tbody> {% for val in sku.value %} {% assign idx = forloop.index0 %} <tr> <td> <div style="display: flex;align-items: center;gap: 10px;"> {% if sku.isImg %} {% if productSkuStyle == "color" %} {% if val.colorValue != "" %} <div style="width: 24px;height: 24px;border-radius: 50%;border:1px solid #e2e2e2;background-color: {{val.colorValue | remove: ' ' | remove: "'"}};"></div> {% endif %} {% else %} {% if val.image != "" %} <img data-src="{{val.image.src|public_front_asset_url}}" src="{{empty_loading.png|public_asset_abs_dir_url}}" style="width: 40px;height: 40px;object-fit: contain;"/> {% endif %} {% endif %} {% endif %} <div style="display: flex;flex-direction: column;"> <span class="{% if val.available != 0 %}font-bold{% endif %} df-flex-text-wrap" {% if val.available == 0 %}style="text-decoration: line-through;color: #999 !important;"{% endif %}>{{val.name}}</span> <span class="multiple-md-block df-flex-text-wrap">{{val.formatPrice}}{% if theme_config.global.product_inventory_status and inventory_tracking != 0 %} | {{lang.general.stock | default:"Stock"}} {{val.quantity}}{% endif %}</span> </div> </div> </td> <td class="multiple-md-hidden">{{val.formatPrice}}</td> {% if theme_config.global.product_inventory_status and inventory_tracking != 0 %} <td class="multiple-md-hidden">{{val.quantity}}</td> {% endif %} <td style='text-align: right;' class="step-items-end sp_table_content"> <div class="step-items-center"> {% if val.available == 0 %} <span>{{lang.account.wishlist.product_offline}}</span> {% else %} <div class="step-warp" data-keys="{{index}},{{idx}}"> <div class="step-warp-handle" data-type='minus' {% if val.add_quantity == 0 %}disabled{% endif %} ></div> <input class="step-warp-value notranslate" min="1" type="number" value="{{val.add_quantity}}"/> <div class="step-warp-handle" {% if val.available == 0 %}disabled{% endif %} data-type='plus'></div> </div> {% endif %} </div> </td> </tr> {% endfor %} </tbody> </table> <div class="multiple-total"> <div class="multiple-total-lable" style="color: #999999;"> <span class="font-bold" >{{lang.cart.list.total | default:"Total"}}</span> (<span class="font-bold variant">0</span> {{lang.general.variations | default:"variations"}} <span class="font-bold item">0</span> {{lang.promotions.piece | default:"items"}}) </div> <div class="multiple-total-value">{{0|money}}</div> </div> </div> </div> </div> {% else %} <div class="moi-product-option" data-sku-name="{{ sku.name }}"> <div class="cell-item moi-product-sku-label" data-type="key"> <span class="product-sku-name">{{ sku.name }} {%- if sku.isImg -%} {%- if productSkuStyle == "image" or productSkuStyle == "color" -%} :<span style="font-weight: bold;color:#333;">{{sku.selected_value_label}}</span> {%- endif -%} {%- endif -%} </span> </div> <div class="cell-item moi-product-sku-value" style="margin-top:8px" data-type="values"> <div class="product-sku-values"> {% for val in sku.value %} {%- capture className -%} {% if val.available == 0 %}product-sku-values-item-disable{% endif %} {% if sku.selected_value == val.value %}product-sku-values-item-active{% endif %} {%- endcapture -%} {%- capture imageClassName -%} {%- if val.image != "" and sku.isImg -%} product-sku-values-item-image {%- endif -%} {%- endcapture -%} {%- capture imageSizeClassName -%} {%- if val.image != "" and sku.isImg -%} {%- if productSkuStyle == "image" or productSkuStyle == "image_text" -%} {{productSkuSize}} {%- endif -%} {%- endif -%} {%- endcapture -%} {%- capture colorClassName -%} {%- if productSkuStyle == "color" and sku.isImg -%}product-sku-value-color{%- endif -%} {%- endcapture -%} <div style="position: relative;" class="product-sku-values-item {{imageSizeClassName}} {{imageClassName}} {{className}} {{colorClassName}} {{ 'skyStyle-' | append: theme_config.global.product_sku_style }} {% if productSkuStyle == "color" and sku.isImg %}colorRender{% endif %}" data-index="{{ keyIndex }}" data-idx="{{ forloop.index }}" is_deleteProduct="{{ val.deleteItem }}"> <div class="multiple-angle" data-id="{{val.value}}"></div> {%- if val.available == 0 -%} <div class="product-sku-values-item-disable-mask"></div> {%- endif -%} {%- if productSkuStyle == "color" and sku.isImg -%} <div class="product-sku-value-color-item" style='background-color:{{val.colorValue}}'></div> {%- elsif val.image != "" and sku.isImg -%} <img data-src="{{val.image.src|public_front_asset_url}}" src="{{empty_loading.png|public_asset_abs_dir_url}}" /> {%- if productSkuStyle == "image_text" -%} <span>{{ val.name }}</span> {%- endif -%} {%- else -%} {{ val.name }} {%- endif -%} </div> {% endfor %} </div> </div> </div> {% endif %} {% endfor %}
<div class="coupons-record-box" style="--coupons-color:{{storeConfig.pay_color}};{% if coupons.size > 6 %}height:220px;{% endif %}"> <div class="coupons-record-title">{{lang.coupons.available_num | replace: '{number}',coupons.size}}</div> <div class="coupons-record-wrap"> {% for coupon in coupons %} <div class="coupons-record-item {% if showCouponCode == coupon.coupon_code %}coupons-record-item-active{% endif %}" data-code="{{coupon.coupon_code}}"> <div class="coupons-record-item-body"> <div class="coupons-record-item-header"> <div class="coupons-record-item-riado"></div> <div class="coupons-record-item-code"> {{coupon.coupon_code}} {%- if coupon.customer_range != 0 -%} <div class="coupons-exclusive-label"> 🎁 {{ lang.coupon.exclusive }} </div> {%- endif -%} </div> </div> <div class="coupons-record-item-label"> {%- if coupon.rule.discount.type == 1 -%} <span>{{ coupon.rule.discount.value }}%</span> OFF {%- else -%} <span>-{{ coupon.rule.discount.value | money }}</span> {%- endif -%} {% if coupon.rule.condition.type == 0 %} , {{lang.coupons.discount_rule_extra}} {% elsif coupon.rule.condition.type == 1 %} {% assign coupon_value = coupon.rule.condition.value %} , {{lang.coupons.discount_rule_count | replace: '{condition}',coupon_value }} {% else %} {%- capture coupon_value -%} {%- if coupon.rule.condition.max_value and coupon.rule.condition.value != 0 -%} {{ coupon.rule.condition.value | money }} - {{ coupon.rule.condition.max_value | money }} {%- endif -%} {%- if coupon.rule.condition.max_value and coupon.rule.condition.value == 0 -%} ≤ {{ coupon.rule.condition.max_value | money }} {%- endif -%} {%- unless coupon.rule.condition.max_value -%} {{ coupon.rule.condition.value | money }} + {%- endunless -%} {%- endcapture -%} , {{lang.coupons.discount_rule_amount | replace: '{condition}',coupon_value }} {% endif %} </div> </div> </div> {% endfor %} </div> {% if coupons.size > 6 %} <div class="coupons-record-more"> <div class="coupons-record-more-btn">{{lang.base.show_more}}</div> </div> {% endif %} </div>
We Free Shipping Worldwide.
JOANN
JOANN
Home
USD
USD
$
SEARCH
Home
Log in
Create Account
USD
USD
:
$
Log In
Email
Password
CONFIRM
Reset Password
Create Account
Shopping Cart