显示弹出窗口，而不是重定向到购物车(Shopify)

Question

我的网站：https://www.fermento24.com

我想这样做，当客户点击添加到购物车按钮时，我不想被重定向到购物车，而是想弹出一个弹出窗口，显示当前购物车中的内容。

当前代码：

<form action="/cart/add" method="post" class="variants clearfix" id="cart-form-4955949236295">                                    
<input type="hidden" name="id" value="32764390834247">  
<a class="add-cart-btn">
<i class="icon-basket"></i>
</a>
</form>

我想添加一个弹出窗口，显示类似于右上角微型车弹出窗口的数据，但我无法做到。有人对如何改进这一功能有建议吗？

Minicart代码：

<div class="has-items">
<ul class="mini-products-list">  
{% for item in cart.items %}
<li class="item" id="cart-item-{{item.id}}">
<a href="{{item.url}}" title="{{item.title}}" class="product-image">
<img src="{{ item.image | product_img_url: 'small' }}" alt="{{item.title}}"></a>
<div class="product-details">
<p class="product-name"><a href="{{item.url}}">{{ item.product.title }}
{% if item.product.variants.size != 0 %}
{% unless item.variant.title contains 'Default' %}
{{ item.variant.title }}
{% endunless %}
{% endif %}</a></p>
<div class="cart-collateral"><span class="price">{{item.price | money}}</span> x {{item.quantity}}</div>
</div>
<a href="javascript&colon;void(0)" title="Remove This Item" class="btn-remove"><span class="zmdi zmdi-close"></span></a>
</li>
{% endfor %}
</ul>
<div class="summary">   
<div>
<hr style="visibility: visible;">
<p class="stilefont"style="font-size:13px; text-align:center; padding-left: 10px; padding-right: 10px;line-height: 1.3;"><b>Consegna gratuita</b> in 24/48h in <b>Italia</b> per ordini superiori ai 120€ altimetri il costo è di 10€.</p>
<hr style="visibility: visible;">
<p class="stilefont"style="font-size:13px; text-align:center; padding-left: 10px; padding-right: 10px;line-height: 1.3;"> <b>Consegna gratuita in giornata </b> in provincia di <a href="https://www.fermento24.com/pages/spedizione" id="category-link" style="color: #000000; font-weight:bold; text-decoration: underline;"><b>Napoli*</b></a> e<a href="https://www.fermento24.com/pages/spedizione" id="category-link" style="color: #000000; font-weight:bold; text-decoration: underline;"><b> Caserta*</b></a> per ordini superiori ai 25€ altrimenti il costo è di 3.50€</p>
<hr style="visibility: visible;">
</div>
<p class="total">
<span class="label">{{ 'cart.general.cart_total' | t }}</span>
<span class="price">{{cart.total_price | money}}</span> 
</p>
</div>
<div class="actions">
<button class="btn" onclick="window.location='/checkout'"><i class="icon-check"></i>{{ 'cart.general.checkout' | t }}</button>
<button class="btn text-cart" onclick="window.location='/cart'"><i class="icon-basket"></i>{{ 'cart.general.view_cart' | t }}</button>
</div>
</div>

Answer 1

如果我没有错，那么你在网站上使用Winee Shopify高级主题模板？

你可以查看演示商店，也可以查看主页，有一个AJAX购物车内置在这个主题模板中。

您只需要检查文档并为前端启用它。