【发布时间】：2018-02-01 18:33:50
【问题描述】：
我在Website 的“添加到购物车”按钮中遇到问题。 （我正在使用 Shopify）。
在此问题之前，我的产品页面中有一个添加到购物车按钮。当我点击添加到购物车按钮时，我的产品被添加到购物车中。但是，除非您查看页面顶部的购物车图标，否则您不会注意到，在您点击它时，在移动设备上是不可能看到的。
所以我改进它的想法是在点击后立即重定向到购物车页面，但我遇到了一个问题。有些人在单击“添加到购物车”按钮时会被重定向到“空购物车”页面。
首先，我尝试在我的 html 文件底部插入我看到的（可能不是最好的）代码。当我遇到这个问题时，我不知道为什么，但我想在谷歌标签管理器上插入代码以加载所有页面，认为这将解决我的问题。错误的！都一样。
我的javascript不太好。我是一名设计师，但我已经改变了这个主题的一切，总是试图改进它。
我很想得到一些帮助。
我最初使用的代码是：
<script type="text/javascript">
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
</script>然后我想我应该在脚本中插入一个延迟，我将代码更改为：
<script type="text/javascript">
setTimeout(function() {
document.getElementById("btnAddtocart").onclick = function () {
location.href = "/cart";
};
}, 750);
</script>一切都一样。有些人会在购物车上有产品，而另一些人则不会。
请记住，我不懂 javascript。也许我添加的这个脚本不是最好的，并且在此过程中丢失了某种类型的 cookie 或类似的东西，也许某些设备/浏览器在重定向时会丢失产品信息。
我的 product_1column.liquid 代码是：
<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 %}另外，这个主题有一个我认为与这个问题超级相关的 .js 文件： https://privatebin.net/?28b4693d0a1e0a73#/JycpCfEEeAqmn2Fr/5+99VgOMilFkS3jMZz/3EQm5g=
原来的主题是http://gred-themes.com/landingpage/simolux/，所以你可以看到它一开始的样子。
提前感谢您的帮助。
【问题讨论】：
标签： javascript shopify cart