I am facing problem in Add to cart button in my Website. (I am using Shopify).
Before this problem I had an add to cart button in my product page. When I click add to Cart button, my product is added into the cart. But you won't notice unless you look to the Cart icon in the top of the page which was impossible on mobile to see it while you're clicking it.
So my thoughts to improve it was to redirect to Cart page right after the click but I'm facing a problem. Some people when click on the Add to Cart button they're redirected to an Empty cart page.
First I tried to insert a code that I saw (and possibly is not the best one) on the bottom of my html file. And when I faced that problem I don't know why but I thought to insert the code on Google Tag Manager to load on all pages thinking that will resolve my problem. Wrong! All the same.
I'm not very good in javascript. I'm a designer but I've changed everything on this theme always trying to improve it.
I would love to have some Help please.
The Code that I was using at first was:
<script type="text/javascript">
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
</script>Then I thought I should insert a delay to the script and I changed the code to:
<script type="text/javascript">
setTimeout(function() {
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
}, 750);
</script>Everything was the same. Some people would have products on cart and other people won't.
Please keep in mind that I don't know javascript. Maybe this script that I'm adding is not the best one and some type of cookie is lost in the process or something like that and maybe some devices/browsers lose the product information when they're redirected.
My product_1column.liquid code is:
<div class="product-single">
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="product-media thumbnai-{{ thumbnai_position }}">
<div class="product-single-photos pull-{{ thumbnai_position }}">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
<!-- ZOOM NO TOUCH -->
<a href="{{ featured_image | img_url: 'master' }}" class="cloud-zoom" data-rel="position: 'inside', useWrapper: false, showTitle: false, zoomWidth:'auto', zoomHeight:'auto', adjustY:0, adjustX:10">
<img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" title="Optional title display">
</a>
</div>
<!--<p class="visible-sm visible-xs a-center">Click on the image to zoom</p>-->
<div class="more-views">
<div class="swiper-container" data-margin="10" data-items="5" data-xs-items="5" data-direction="{% if thumbnai_position == "none" %}horizontal{% else %}vertical{% endif %}" >
<div class="swiper-wrapper">
{% for image in product.images %}
<div class="swiper-slide">
<a href="{{ image.src | img_url: 'master' }}" class="thumb-link" title="" data-rel="{{ image.src | img_url: '1024x1024' }}">
<img src="{{ image.src | img_url: 'medium' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7">
<div class="product-info">
<h1 itemprop="name">{{ product.title }}</h1>
{% if product_review %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% if product.available %}
{% comment %} <span class="available instock"><i class="fa fa-check-square-o"></i>{{ 'products.product.inStock' | t }}</span>{% endcomment %}
{% else %}
<span class="available outofstock"><i class="fa fa-check-square-o"></i>{{ 'products.product.outOfStock' | t }}</span>
{% endif %}
{% if product_vendor %}
<span class="product-vendor">{{ 'products.product.vendor' | t }}{{ product.vendor }}</span>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single-prices">
<span id="ProductPrice" class="price" itemprop="price">
{{ product.price | money }}
</span>
{% if product.compare_at_price > product.price %}
<s id="ComparePrice" class="product-single-sale">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="product-options {% unless settings.color_swatch %} linked-options{% endunless %}">
<select name="id" id="productSelect" class="product-single-variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if settings.color_swatch %}
{% if product.available and product.variants.size > 1 %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
{% endif %}
</div>
<div class="product-actions">
<div class="product-single-quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
<label class="label" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<div class="quantity">
<span class='qtyminus' data-field='quantity'><i class="fa fa-angle-down"></i></span>
<input type='text' id="Quantity" data-field='quantity' name='quantity' value='1' class='quantity-selector' />
<span class='qtyplus' data-field='quantity'><i class="fa fa-angle-up"></i></span>
</div>
</div>
{% if product.available %}
<button type="submit" name="add" id="btnAddtocart" class="btn btn-primary btn-addToCart">
{{ 'products.product.add_to_cart' | t }}
</button>
{% else %}
<input type="submit" name="add" class="btn btn-primary btn-addToCart" id="product-addTocart" disabled value="{{ 'products.product.unavailable' | t }}">
{% endif %}
<div class="product-wishlist">
{% include 'add-to-wishlist' %}
</div>
</div>
</form>
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% if settings.social_sharing_products %}
<div class="product-sharing">
{% include 'social-sharing' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% include 'product-info' %}
{% if settings.related_product %}
{% include 'related-products' %}
{% endif %}Plus, this theme have a .js file that I think is super relevant to this problem: https://privatebin.net/?28b4693d0a1e0a73#/JycpCfEEeAqmn2Fr/5+99VgOMilFkS3jMZz/3EQm5g=
And the original theme is http://gred-themes.com/landingpage/simolux/ so you can see how it was in the beginning.
Thank you in advance for your help.
答案 0 :(得分：0)
When you do location.href='/cart' you are instructing the browser to jump to the cart. An empty cart is an empty cart if you go there.
Instead you want to submit the form with the added product(s) to the cart, in which case Shopify will add the products in the form to the cart, and in some cases may transfer the browser to the cart.
Sorry if that is confusing, but from your code, it seems you are indeed just sending yourself to the cart, without taking the time to add the products to the cart that you want to buy.
So to sum up.. you have a submit button that is supposed to submit the cart. Just let it do it's thing. Take out your event listener for onclick. You do nothing with that anyway, so get rid of it. Or in your click listener, do whatever you want, but also submit the form!! So you have to get a reference to the form, and use the submit() on it...