Solved: Add to Cart Not Working

Vijay054 · ‎08-08-2020

Hey Guys,

I am using Booster Theme and suddenly my add to cart button has stopped working on mobile devices . It works fine on desktop.I am unable to figure out what went wrong .Can someone please help me .

My store- spicystore.in

Thanks in advance

Vijay054 · ‎08-08-2020

Please helpme

diego_ezfy · ‎08-08-2020

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<script> 
document.addEventListener("DOMContentLoaded", function() {
          var a = document.querySelector(`.grid__item > #AddToCart.dynamic_paybtn`);
var fakeATC = document.querySelector(`#mst-stiky-box button`);

if (!fakeATC || !a)return;
fakeATC.addEventListener('click', function(){
a.click();
});
            });
</script>

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.

Vijay054 · ‎08-08-2020

Thank you for the response and your code. I tried editing the code as you instructed me to but I am still not able to ADD To Cart. I am attaching screenshot of the code so you can verify if I did it right.

I am also attaching the error it shows when I try to add something to my cart.

diego_ezfy · ‎08-08-2020

Remove <script> from the line 252 and it should work

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.

Vijay054 · ‎08-09-2020

Hello,

Thanks a lot for your valuable suggestion and help.You are a real gem my friend. The add to cart button is working fine now however the dynamic "Buy Now" button still shows the same error but I think I can manage without it unless I find a solution.

Thanks a lot.

imjeng · ‎10-05-2020

i tried your solution, but its not working in my store. please help me

site:

b4bicycles.com

KaanG · ‎11-02-2020

Hi Diego:

"Add to Cart" button does not add to the cart when you click on it. But if you refresh the page after clicking the

button the item appears in the Cart. Can you help me?

URL: deuxbeautesparis.com

KaanG · ‎11-02-2020

Futher to my mail, please find my Product-Template-Liquid

<div class="row product-detail">
<div class="col-xs-12 col-sm-5 product-img-box {% if section.settings.style_moreview == 'horizontal' %} horizontal{% else %} vertical{% endif %}">
<div class="product-photo-container slider-for{% if section.settings.style_moreview == 'horizontal' %} horizontal{% else %} vertical{% endif %}">
{% for image in product.images %}
<div class="thumb">
<a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x1024' }}" >
<img id="product-featured-image-{{image.id}}" src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | img_url: 'original' }}"/>
</a>
{% assign on_sale = false %}
{% if product.compare_at_price_min > product.price_min %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{% assign new = false %}
{% for tag in product.tags %}
{% assign tag_handle = tag | handle %}
{% if tag_handle contains 'new' %}
{% assign new = true %}
{% endif %}
{% endfor %}
{% if on_sale or sold_out or new %}
<div class="product-label">
{% if new %}
{% for tag in product.tags %}
{% assign tag = t | strip %}
{% if tag contains 'new' %}
<strong class="label new">{% include 'multilang' with tag %}</strong>
{% endif %}
{% endfor %}
{% endif %}
{% if on_sale %}
<strong class="label" {% if settings.enable_multilang %}data-translate="products.product.sale"{% endif %}>{{ 'products.product.sale' | t }}</strong>
{% endif %}
{% if sold_out %}
<strong class="sold-out-label" {% if settings.enable_multilang %}data-translate="products.product.sold_out"{% endif %}>{{ 'products.product.sold_out' | t }}</strong>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
<div class="slider-nav{% if section.settings.style_moreview == 'horizontal' %} horizontal{% else %} vertical{% endif %}" id="gallery_01">
{% for image in product.images %}
<div class="item">
<a href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'original' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
<img src="{{ image.src | product_img_url: '85x85' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>

<div class="col-xs-12 col-sm-7 product-shop {% if section.settings.style_moreview == 'horizontal' %} horizontal{% else %} vertical{% endif %}">
{% if section.settings.display_vendor %}
<p class="sample-vendor"><span>{{ product.vendor | link_to_vendor }}</span></p>
{% endif %}
<header class="product-title {% if collection.previous_product or collection.next_product and section.settings.display_prev_next_product and collection %}has-btn{% endif %}">
<h2 itemprop="name">
{% if settings.enable_multilang %}
<span class="lang1">{{ product.title | split: '|' | first }}</span>
<span class="lang2">{{ product.title | split: '|' | last }}</span>
{% else %}
<span>{{ product.title | split: '|' | first }}</span>
{% endif %}
</h2>
{% if section.settings.display_prev_next_product and collection %}
{% if collection.previous_product %}
<a class="prev btn" href="{{ collection.previous_product }}" {% if settings.enable_multilang %}data-translate="collections.toolbar.previous"{%endif%}>{{ 'collections.toolbar.previous' | t }}</a>
{% endif %}
{% if collection.next_product %}
<a class="next btn" href="{{ collection.next_product }}" {% if settings.enable_multilang %}data-translate="collections.toolbar.next"{%endif%}>{{ 'collections.toolbar.next' | t }}</a>
{% endif %}
{% endif %}
</header>

{% if section.settings.display_product_reviews %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% if product.description contains '[countdown]' %}
{% assign count_down_first = product.description | split:'[/countdown]' | first %}
{% assign count_down_final = count_down_first | split:'[countdown]' | last %}
<div class="countdown">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.text_countdown | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.text_countdown | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.text_countdown | split: '|' | first }}</span>
{% endif %}
<div id="clock"></div>
</div>
<script>
$(document ).ready(function() {
$("#clock").countdown('{{ count_down_final }}', function(event) {
$(this).html(event.strftime('%Dd %H:%M:%S'));
});
})
</script>
{% endif %}
{% if section.settings.display_availability or section.settings.display_product_type or section.settings.display_vendor %}
<div class="product-infor">
{% if section.settings.display_availability %}
<p class="product-inventory">
{% if section.settings.text_availability != blank %}
{% if settings.enable_multilang %}
<label class="lang1">{{ section.settings.text_availability | split: '|' | first }}</label>
<label class="lang2">{{ section.settings.text_availability | split: '|' | last }}</label>
{% else %}
<label>{{ section.settings.text_availability | split: '|' | first }}</label>
{% endif %}
{% endif %}
<span>
{% if product.selected_or_first_available_variant.inventory_management %}
{% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
{% if first_inventory > 0 %}
{{first_inventory}} {{ 'products.product.in_stock' | t }}
{% else %}
{{ 'products.product.out_of_stock' | t }}
{% endif %}
{% else %}
{{ 'products.product.many_in_stock' | t }}
{% endif %}
</span>
</p>
{% endif %}
{% if section.settings.display_product_type %}
<p class="product-type">
{% if section.settings.text_product_type != blank %}
{% if settings.enable_multilang %}
<label class="lang1">{{ section.settings.text_product_type | split: '|' | first }}</label>
<label class="lang2">{{ section.settings.text_product_type | split: '|' | last }}</label>
{% else %}
<label>{{ section.settings.text_product_type | split: '|' | first }}</label>
{% endif %}
{% endif %}
<span>{{ product.type }}</span>
</p>
{% endif %}
{% if section.settings.display_vendor %}
<p class="product-vendor">
{% if section.settings.text_vendor != blank %}
{% if settings.enable_multilang %}
<label class="lang1">{{ section.settings.text_vendor | split: '|' | first }}</label>
<label class="lang2">{{ section.settings.text_vendor | split: '|' | last }}</label>
{% else %}
<label>{{ section.settings.text_vendor | split: '|' | first }}</label>
{% endif %}
{% endif %}
<span>{{ product.vendor }}</span>
</p>
{% endif %}
</div>
{% endif %}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

{% if product.description contains '[countdown]' %}
{% assign des = product.description | split:'[/countdown]' | last %}

{% if section.settings.show_desc == 'short' %}

{% if product.description contains '<p>[Description]</p>' %}
{% assign des1 = product.description | split:'<p>[Description]</p>' | last | split:'<p>[/Description]</p>' | first %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ des1 | split: '[lang2]' | first }}</div>
<div class="short-description lang2">{{ des1 | split: '[lang2]' | last }}</div>
{% else %}
<div class="short-description">{{ des1 | split: '[lang2]' | first }}</div>
{% endif %}
{% else %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ des | split: '[lang2]' | first | strip_html | truncatewords: 50 }}</div>
<div class="short-description lang2">{{ des | split: '[lang2]' | last | strip_html | truncatewords: 50 }}</div>
{% else %}
<div class="short-description">{{ des | split: '[lang2]' | first | strip_html | truncatewords: 50 }}</div>
{% endif %}

{% endif %}

{% elsif section.settings.show_desc == 'full' %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ des | split: '[lang2]' | first }}</div>
<div class="short-description lang2">{{ des | split: '[lang2]' | last }}</div>
{% else %}
<div class="short-description">{{ des | split: '[lang2]' | first }}</div>
{% endif %}
{% endif %}
{% else %}
{% if section.settings.show_desc == 'short' %}
{% if product.description contains '<p>[Description]</p>' %}
{% assign des1 = product.description | split:'<p>[Description]</p>' | last | split:'<p>[/Description]</p>' | first %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ des1 | split: '[lang2]' | first }}</div>
<div class="short-description lang2">{{ des1 | split: '[lang2]' | last }}</div>
{% else %}
<div class="short-description">{{ des1 | split: '[lang2]' | first }}</div>
{% endif %}
{% else %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ des | split: '[lang2]' | first | strip_html | truncatewords: 50 }}</div>
<div class="short-description lang2">{{ des | split: '[lang2]' | last | strip_html | truncatewords: 50 }}</div>
{% else %}
<div class="short-description">{{ des | split: '[lang2]' | first | strip_html | truncatewords: 50 }}</div>
{% endif %}
{% endif %}
{% elsif section.settings.show_desc == 'full' %}
{% if settings.enable_multilang %}
<div class="short-description lang1">{{ product.description | split: '[lang2]' | first }}</div>
<div class="short-description lang2">{{ product.description | split: '[lang2]' | last }}</div>
{% else %}
<div class="short-description">{{ product.description | split: '[lang2]' | first }}</div>
{% endif %}
{% endif %}
{% endif %}
<div data-app="eastsideco_sizeGuides"
data-shop="{{ shop.permanent_domain }}"
data-tags="{{ product.tags | join:',' | escape }}"
data-metafields="{{ product.metafields.esc-size-matters.tag }}"
data-popup="link">
</div>
<style>
[data-app="eastsideco_sizeGuides"] a {
text-decoration: underline;
}
</style>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form"

<div id="product-variants">

{% comment %}


{% if section.settings.display_size_chart %}
<a data-toggle="modal" data-target="#myModal_sizechar" class="size-chart-open-popup">
{% include 'multilang' with section.settings.custom_size_chart_title %}
</a>

<div id="myModal_sizechar"class="size-chart modal fade" role="dialog">
<div class="content-size-char modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<svg viewBox="0 0 24 24" id="icon-close" width="100%" height="100%">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
</svg>
</button>
</div>
<div class="modal-body">
<p><img src="{{ section.settings.custom_size_chart | img_url: "master" }}" alt="{{ section.settings.custom_size_chart_title }}" /></p>
</div>
</div>
</div>
</div>
{% endif %}


{% endcomment %}

{% assign variantCount = product.variants | size %}
{% if product.available %}
{% if variantCount > 1 %}
{% if settings.use_color_swatch %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<select id="product-selectors" name="id" style="display:none">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>

{% else %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% endif %}
{% endif %}
</div>

<div class="prices">
{% if product.compare_at_price > product.price %}
<span class="compare-price">{{ product.compare_at_price_max | money }}</span>
<span class="price on-sale" itemprop="price">{{ product.price | money }}</span>
{% else %}
<span class="price" itemprop="price">{{ product.price | money }}</span>
{% endif %}
</div>

{% if product.available %}
<label for="quantity" {% if settings.enable_multilang %}data-translate="cart.label.quantity"{%endif%}>{{ 'cart.label.quantity' | t }}: </label>
<div class="extra">
<div class="dec button"><i class="fa fa-angle-down" aria-hidden="true"></i></div>
<input type="text" id="quantity" name="quantity" value="1">
<div class="inc button"><i class="fa fa-angle-up" aria-hidden="true"></i></div>
</div>
<script>
jQuery(".button .fa").on("click", function() {
var oldValue = jQuery("#quantity").val(),
newVal = 1;

if (jQuery(this).hasClass("fa-angle-up")) {
newVal = parseInt(oldValue) + 1;
} else if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
}

jQuery("#quantity").val(newVal);
{% if section.settings.display_subtotal and product.available %}
updatePricing();
{% endif %}
});
</script>

{% if section.settings.display_subtotal and product.available %}
<div class="total-price">
<label><b {% if settings.enable_multilang %}data-translate="cart.general.subtotal"{%endif%}>{{ 'cart.general.subtotal' | t }}</b>:</label><span>{{ product.price | money }}</span>
</div>
{% endif %}

<input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.add_to_cart"{%endif%} id="product-add-to-cart" value="{{ 'products.product.add_to_cart' | t }}">
{% else %}
<input type="submit" name="add" class="btn" {% if settings.enable_multilang %}data-translate="products.product.unavailable"{%endif%} id="product-add-to-cart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endif %}
</form>
</div>

{% include 'wishlist-product' %}

{% if section.settings.display_product_detail_tag %}
<div class="tags">
<i class="icon-tags" {% if settings.enable_multilang %}data-translate="blogs.article.tags"{%endif%}>{{ 'blogs.article.tags' | t }}</i>
{% for tag in product.tags %}
<span class="separator">/</span>
<a href="/collections/all/{{ tag | handle }}" rel="tag">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}

{% if section.settings.display_product_detail_share %}
{% comment %}
{% include 'share' with product %}
{% endcomment %}
<div class="share_toolbox">
{% if settings.enable_multilang %}
<p class="lang1">{{ section.settings.text_share | split: '|' | first }}</p>
<p class="lang2">{{ section.settings.text_share | split: '|' | last }}</p>
{% else %}
<p>{{ section.settings.text_share | split: '|' | first }}</p>
{% endif %}
<ul>
<div class="addthis_inline_share_toolbox"></div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-595b0ea2fb9c5869"></script>
</ul>
</div>
{% endif %}

{% if section.settings.show_tab == 'vertical' %}
<div class="panel-group vertical" id="accordion">
{% if section.settings.display_product_detail_description %}
<div class="panel product-description rte wow fadeInUp">
<div class="panel-heading">
<h4 class="panel-title active">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-tab1">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_description_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_description_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_description_title | split: '|' | first }}</span>
{% endif %}
</a>
</h4>
</div>
<div id="collapse-tab1" class="panel-collapse collapse in">
<div class="panel-body" itemprop="description">

{% if product.description contains '[countdown]' %}
{% assign des = product.description | split:'[/countdown]</p>' | last %}

{% if des contains '<p>[Description]</p>'%}
{% assign des = des | split:'<p>[Description]</p>' | first %}
{% endif %}
{% else %}
{% assign des = product.description %}

{% if des contains '<p>[/Description]</p>'%}
{% assign des = des | split:'<p>[Description]</p>' | first %}
{% endif %}
{% endif %}

{% if settings.enable_multilang %}
<div class="lang1">{{ des | split: '[lang2]' | first }}</div>
<div class="lang2">{{ des | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ des | split: '[lang2]' | first }}</div>
{% endif %}
{% if section.settings.download_file !=blank %}
<a href="{{section.settings.download_file}}" download>
{% if section.settings.download_icon != blank %}
<img border="0" src="{{section.settings.download_icon | img_url: 'master' }}" alt="Download User Guide" >
{% endif %}
</a>
{% endif %}

</div>
</div>
</div>
{% endif %}

{% if section.settings.display_custom_tab %}
<div class="panel wow fadeInUp" data-wow-delay="100ms">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-tab2">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.custom_tab_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.custom_tab_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.custom_tab_title | split: '|' | first }}</span>
{% endif %}
</a>
</h4>
</div>
<div id="collapse-tab2" class="panel-collapse collapse">
{% if settings.enable_multilang %}
<div class="panel-body lang1">{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
<div class="panel-body lang2">{{ section.settings.custom_tab_content | split: '[lang2]' | last }}</div>
{% else %}
<div class="panel-body">{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
{% endif %}
</div>
</div>
{% endif %}

{% if section.settings.display_custom_video %}
<div class="panel wow fadeInUp" data-wow-delay="200ms">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-tab3">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.video_tab_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.video_tab_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.video_tab_title | split: '|' | first }}</span>
{% endif %}
</a>
</h4>
</div>
<div id="collapse-tab3" class="panel-collapse collapse">
<div class="panel-body">

<div class="tab_video">{{ section.settings.custom_tab_video }}</div>
</div>
</div>
</div>
{% endif %}

{% if section.settings.display_product_reviews %}
<div class="panel wow fadeInUp" data-wow-delay="300ms">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-tab4">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_review_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_review_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_review_title | split: '|' | first }}</span>
{% endif %}
</a>
</h4>
</div>
<div id="collapse-tab4" class="panel-collapse collapse">
<div class="panel-body">
{% comment %}
Add product review widget, must install Product Review App:
https://apps.shopify.com/product-reviews
{% endcomment %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}

</div>
</div>
</div>

{% if section.settings.show_tab == 'horizontal' %}
<div class="panel-group">
<ul class="nav nav-tabs" id="myTab">
{% if section.settings.display_product_detail_description %}
<li class="active">
<a data-toggle="tab" href="#collapse-tab1">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_description_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_description_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_description_title | split: '|' | first }}</span>
{% endif %}
</a>
</li>
{% endif %}

{% if section.settings.display_custom_tab %}
<li>
<a data-toggle="tab" href="#collapse-tab2">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.custom_tab_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.custom_tab_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.custom_tab_title | split: '|' | first }}</span>
{% endif %}
</a>
</li>
{% endif %}

{% if section.settings.display_custom_video %}
<li>
<a data-toggle="tab" href="#collapse-tab3">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.video_tab_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.video_tab_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.video_tab_title | split: '|' | first }}</span>
{% endif %}
</a>
</li>
{% endif %}
{% if section.settings.display_product_reviews %}
<li>
<a data-toggle="tab" href="#collapse-tab4">
{% if settings.enable_multilang %}
<span class="lang1">{{ section.settings.product_review_title | split: '|' | first }}</span>
<span class="lang2">{{ section.settings.product_review_title | split: '|' | last }}</span>
{% else %}
<span>{{ section.settings.product_review_title | split: '|' | first }}</span>
{% endif %}
</a>
</li>
{% endif %}
</ul>

<div id="myTabContent" class="tab-content">
{% if section.settings.display_product_detail_description %}

{% if product.description contains '[countdown]' %}
{% assign des = product.description | split:'[/countdown]</p>' | last %}

{% if des contains '<p>[Description]</p>'%}
{% assign des = des | split:'<p>[Description]</p>' | first %}
{% endif %}
{% else %}
{% assign des = product.description %}

{% if des contains '<p>[Description]</p>'%}
{% assign des = des | split:'<p>[Description]</p>' | first %}
{% endif %}
{% endif %}

<div id="collapse-tab1" class="tab-pane fade in active">
{% if settings.enable_multilang %}
<div class="lang1">{{ des | split: '[lang2]' | first }}</div>
<div class="lang2">{{ des | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ des | split: '[lang2]' | first }}</div>
{% endif %}

</div>
{% endif %}

{% if section.settings.display_custom_tab %}
<div id="collapse-tab2" class="tab-pane fade">
{% if settings.enable_multilang %}
<div class="lang1">{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
<div class="lang2">{{ section.settings.custom_tab_content | split: '[lang2]' | last }}</div>
{% else %}
<div>{{ section.settings.custom_tab_content | split: '[lang2]' | first }}</div>
{% endif %}
</div>
{% endif %}

{% if section.settings.display_custom_video %}
<div id="collapse-tab3" class="tab-pane fade">

<div class="tab_video">{{ section.settings.custom_tab_video }}</div>
</div>
{% endif %}
{% if section.settings.display_product_reviews %}
<div id="collapse-tab4" class="tab-pane fade">
{% comment %}
Add product review widget, must install Product Review App:
https://apps.shopify.com/product-reviews
{% endcomment %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
</div>
</div>
<script>
jQuery('#myTab a').click(function (e) {
e.preventDefault();
jQuery(this).tab('show');
})
</script>
{% endif %}

$('.slider-nav').slick({
infinite: true,
slidesToShow: 4,
{% if section.settings.style_moreview == 'vertical' %}
vertical: true,
{% endif %}
slidesToScroll: 1,
asNavFor: '.slider-for',
verticalSwiping: false,
dots: false,
focusOnSelect: true,
nextArrow: '<div class="slick-next"><i class="fa fa-angle-right"></i></div>',
prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left"></i></div>',

responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},
{% if section.settings.style_moreview == 'horizontal' %}
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 1
}
},

{
breakpoint: 768,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
dots: false
}
},
{% else %}
{
breakpoint: 1024,
settings: {
slidesToShow:5,
slidesToScroll: 1
}
},

{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
dots: false
}
},
{% endif %}
]

});
}
};

$(window).load(function() {
slider();
});
var timer;
var winW = $(window).width();

$(window).on('resize.refreshSlick', function() {
clearTimeout(timer);
timer = setTimeout(function() {
var curW = $(window).width();
if (curW >= 768 && winW < 768) {

$('.slider-for').slick('unslick');
$('.slider-nav').slick('unslick');
$('.slider-nav').find('.slick-list').removeAttr('style');
$('.slider-nav').find('.slick-track').removeAttr('style');
$('.slider-nav').find('.slick-slide').removeAttr('style');
$('.slider-nav').find('button.slick-arrow').remove();

slider();

}

winW = curW;

}, 500);

});

</script>

{% if section.settings.display_subtotal and product.available %}
//update price when changing quantity
function updatePricing() {
//try pattern one before pattern 2
var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
var unitPriceTextMatch = jQuery('.product .price').text().match(regex);

if (!unitPriceTextMatch) {
regex = /([0-9]+[.|,][0-9]+)/g;
unitPriceTextMatch = jQuery('.product .price').text().match(regex);
}

if (unitPriceTextMatch) {
var unitPriceText = unitPriceTextMatch[0];
var unitPrice = unitPriceText.replace(/[.|,]/g,'');
var quantity = parseInt(jQuery('#quantity').val());
var totalPrice = unitPrice * quantity;

var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
if (!totalPriceText.match(regex)) {
regex = /([0-9]+[.|,][0-9]+)/g;
}
totalPriceText = totalPriceText.match(regex)[0];

var regInput = new RegExp(unitPriceText, "g");
var totalPriceHtml = jQuery('.product .price').html().replace(regInput ,totalPriceText);

jQuery('.product .total-price span').html(totalPriceHtml);
}
}

jQuery('#quantity').on('change', updatePricing);
{% endif %}

var selectCallback = function(variant, selector) {

var addToCart = jQuery('#product-add-to-cart'),
productPrice = jQuery('.product .price'),
comparePrice = jQuery('.product .compare-price'),
salelabel = jQuery('.product-label');

if (variant) {
if (variant.available) {
// We have a valid product variant, so enable the submit button
addToCart.removeClass('disabled').removeAttr('disabled').val(window.inventory_text.add_to_cart);

} else {
// Variant is sold out, disable the submit button
addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
}

// Regardless of stock, update the product price
productPrice.html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));

// Also update and show the product's compare price if necessary
if ( variant.compare_at_price > variant.price ) {
productPrice.addClass("on-sale")
comparePrice
.html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"))
.show();
salelabel.css('display','block');
} else {
comparePrice.hide();
productPrice.removeClass("on-sale");
salelabel.css('display','none');

}
{% if settings.use_color_swatch %}
// BEGIN SWATCHES
var form = jQuery('#' + selector.domIdPrefix).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
// END SWATCHES
{% endif %}

{% if section.settings.display_subtotal and product.available %}
updatePricing();
{% endif %}

{% if settings.enable_multiple_currencies %}
Currency.convertAll('{{ shop.currency }}', jQuery('.currencies').val(), 'span.money', 'money_format');
{% endif %}
if(typeof ACSCurrency !== "undefined" && typeof ACSCurrency.moneyFormats !== "undefined") { mlvedaload(); }

} else {
// The variant doesn't exist. Just a safeguard for errors, but disable the submit button anyway
addToCart.val(window.inventory_text.unavailable).addClass('disabled').attr('disabled', 'disabled');
}

//update variant inventory
{% if section.settings.display_availability %}
if (variant.available) {
if (variant.inventory_management!=null) {
jQuery(".product-inventory span").text(variant.inventory_quantity + " " + window.inventory_text.in_stock);
} else {
jQuery(".product-inventory span").text(window.inventory_text.many_in_stock);
}
} else {
jQuery(".product-inventory span").text(window.inventory_text.out_of_stock);
}
{% endif %}

/*begin variant image*/
if (variant && variant.featured_image) {
var originalImage = $("img[id|='product-featured-image']");
var newImage = variant.featured_image;
var element = originalImage[0];
Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
jQuery('.slider-nav img').each(function() {
var grandSize = jQuery(this).attr('src');
grandSize = grandSize.replace('85x85','1024x1024');
if (grandSize == newImageSizedSrc) {
jQuery(this).closest('.item').trigger('click');
return false;
}
});
});
}
/*end of variant image*/
};

jQuery(function($) {
{% if product.available and product.variants.size > 1 %}
new Shopify.OptionSelectors('product-selectors', {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});

{% comment %}
Use color swatch and linked options (copyright by @CarolineSchnapp)
{% endcomment %}
{% if settings.use_color_swatch and product.available and product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}

{% if settings.use_color_swatch != true %}
jQuery('.single-option-selector').selectize();
jQuery('.selectize-input input').attr("disabled","disabled");
{% endif %}

{% endif %}

// Add label if only one product option and it isn't 'Title'. Could be 'Size'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}

// Hide selectors if we only have 1 variant and its title contains 'Default'.
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
$('.selector-wrapper').hide();
{% endif %}

// Auto-select first available variant on page load. Otherwise the product looks sold out.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}

{% if section.settings.display_product_reviews %}
var reviewsTimeout = setInterval(function() {
if (jQuery(".spr-badge-caption").length>0) {
jQuery(".spr-badge-caption").on('click', function() {
jQuery('html,body').animate({
scrollTop: jQuery(".panel:last").offset().top},
'400');
jQuery("#collapse-tab4").collapse('show');
});
clearInterval(reviewsTimeout);
}
},1000);

{% endif %}

});
</script>
{% schema %}
{
"name": "Product Detail",
"settings": [
{
"type": "radio",
"id": "style_moreview",
"label": "Horizontal Moreview or Vertical Moreview",
"options": [
{
"value": "horizontal",
"label": "Horizontal Moreview"
},
{
"value": "vertical",
"label": "Vertical Moreview"
}
],
"default": "vertical"
},
{
"type": "checkbox",
"id": "display_prev_next_product",
"label": "Display Prev\/Next Product?",
"default": true
},

{
"type": "checkbox",
"id": "display_availability",
"label": "Display Availability?",
"default": true
},
{
"type": "text",
"id": "text_availability",
"label": "Text Availability",
"default": "Availability"
},
{
"type": "checkbox",
"id": "display_product_type",
"label": "Display Product Type?",
"default": true
},
{
"type": "text",
"id": "text_product_type",
"label": "Text Product Type",
"default": "Product Type"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Display Vendor?",
"default": true
},
{
"type": "text",
"id": "text_vendor",
"label": "Text Vendor",
"default": "Vendor"
},
{
"type": "text",
"id": "text_countdown",
"label": "Text Countdown",
"default": "Limited-Time Offers, End in:"
},
{
"type": "radio",
"id": "show_desc",
"label": "Short description",
"options": [
{
"value": "no-show",
"label": "No"
},
{
"value": "short",
"label": "Yes"
},
{
"value": "full",
"label": "Show Full Description"
}
],
"default": "short"
},

{
"type": "checkbox",
"id": "display_subtotal",
"label": "Display Subtotal?",
"default": true
},
{
"type": "checkbox",
"id": "display_product_detail_tag",
"label": "Display Tags?",
"default": true
},
{
"type": "checkbox",
"id": "display_product_detail_share",
"label": "Display Product Share?",
"default": true
},
{
"type": "text",
"id": "text_share",
"label": "Text Share"
},
{
"type": "radio",
"id": "show_tab",
"label": "Horizontal Tab or Vertical Tab",
"options": [
{
"value": "horizontal",
"label": "Horizontal Tab"
},
{
"value": "vertical",
"label": "Vertical Tab"
}
],
"default": "horizontal"
},
{
"type": "checkbox",
"id": "display_product_detail_description",
"label": "Display Product Description?",
"default": true
},
{
"type": "text",
"id": "product_description_title",
"label": "Product Description Title",
"default": "Product Description"
},
{
"type": "checkbox",
"id": "display_product_reviews",
"label": "Display Product Reviews?",
"default": true
},
{
"type": "text",
"id": "product_review_title",
"label": "Product Reviews Title",
"default": "Customer Reviews"
},
{
"type": "checkbox",
"id": "display_custom_tab",
"label": "Display Custom Tab?",
"default": true
},
{
"type": "text",
"id": "custom_tab_title",
"label": "Custom Tab Title",
"default": "Shipping & Returns"
},
{
"type": "textarea",
"id": "custom_tab_content",
"label": "Custom Tab HTML Code"
},
{
"type" : "header",
"content" : "Tab Video"
},
{
"type": "checkbox",
"id": "display_custom_video",
"label": "Display Custom Video?",
"default": true
},
{
"type": "text",
"id": "video_tab_title",
"label": "Video Tab Title",
"default": "Video"
},

{
"type": "textarea",
"id": "custom_tab_video",
"label": "iframe Youtube"
},
{
"type": "checkbox",
"id": "display_size_chart",
"label": "Display Size Chart?",
"default": true
},

{
"type": "text",
"id": "custom_size_chart_title",
"label": "Custom Size Chart Title",
"default": "Size Chart"
},
{
"type": "image_picker",
"id": "custom_size_chart",
"label": "Size Chart Image"
}
]
}
{% endschema %}

KaanG · ‎11-02-2020

Furthe to my mail, please find my product-template.liquid