使用Shopify产品：Ajax购物车

最新推荐文章于 2023-11-28 17:04:28 发布

cunjie3951

最新推荐文章于 2023-11-28 17:04:28 发布

阅读量1.8k

点赞数

文章标签： python java css html web

本文介绍了如何通过Ajax改进Shopify商店的用户体验，让用户在列表中直接添加商品到购物车，无需离开页面。通过修改主题，添加数量字段，设置显示条件等步骤，实现了无缝购物体验，有助于提高转化率。

摘要由CSDN通过智能技术生成

使您的Shopify商店更直观是一种转换更多销售额并在每次结帐时获得更多商品的好方法。结合在一个简单的列表中显示您的产品，我们只需单击即可简单地添加到购物车，而无需导航到产品列表页面。

此修改可以在网格或列表显示中使用，实际上只需进行一些更改即可使其生效，并且易于扩展。因此，让我们开始吧，最大限度地提高商店的获利能力！

成品收藏清单

这是您可以使用此修改创建的示例。我们有一家出售纪念币的商店，为了便于使用，用户可以选择每种硬币的数量并添加到购物车中，而无需离开页面。

这是通过用JavaScript编写的AJAX调用实现的，该调用将请求发送到Shopify API。本质上，浏览器能够通过后台请求提交表单并将用户保持在页面上。

修改主题

为此，我们需要修改Shopify主题，因此登录您的管理员并进入“ 在线商店” ，然后进入“ 主题”部分（或单击G W T以获得快捷方式）。

现在，单击主题上的...按钮，然后选择编辑HTML / CSS 。在此部分中，向左看，然后单击片段目录，然后添加一个新的片段。

调用您的代码段ajaxify-cart ，然后点击创建代码段 。

现在打开此文件，全选，然后将内容复制粘贴到刚刚创建的ajaxify-cart.liquid代码段中。

确保退出前保存更改。如果要更改ajaxify购物车的文本，可以查看更改此文件中的字符串，例如addToCartBtnLabel 。有关配置的更多信息，请阅读ajaxify购物车的自述文件。

现在，在您的布局文件夹中，单击theme.liquid文件。在编辑器中找到结束</body>标记，并确保在其之前的任何位置添加以下内容：

{% include 'ajaxify-cart' %}

这将包括您刚刚添加到所有页面的ajaxify-cart代码段，因此当我们在下一步中调用该代码时，该代码可用。

您还可以在<body> </body>标记内包含ajaxify-cart和其他片段，如上所示。

退出窗口之前，请确保已保存theme.liquid文件。

增加数量

现在您已经具备了安装Ajax购物车的基础，我们可以添加一些其他修改以利用Shopify API的更多功能。

让我们通过修改产品列表主题将数量字段添加到表单中。浏览您的主题代码文件，找到要添加到购物车的表格；您可以如下修改它：

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <label for="quantity">Qty: </label>
	<input min="1" type="number" id="quantity" name="quantity" value="1" />
    <input type="submit" value="Add to cart" class="btn" />
</form>

现在保存文件并在浏览器中查看，您的表单上还将有一个数量字段。

测试出来

访问您的商店并转到任何产品，如果所有产品都已按计划进行，则带有“数量”字段的“添加到购物车”按钮现在将添加到购物车而无需刷新页面。

如果这不起作用，请检查前面的步骤，并在浏览器的Web开发人员工具错误控制台中查看，以查看是否报告了任何错误。

在列表中显示您的项目

为了在列表中显示您的收藏，我们将需要一些CSS来实现。修改主题的css文件，并添加以下内容以实现此目的。

注意： 请记住，某些主题可能与我们使用的主题（太平洋主题）的显示方式有所不同，但是要使此知识适应您的主题，请知道基本原理是添加 浮点数：left; 结合宽度设置。

.product-list-item-title { 
     font-size: 16px;
     line-height: 22px;
     margin: 5px 0 0; 
     float:left; 
     width: 50%; }  
  .product-list-item-price {
      float:left; 
      width: 10%; 
      margin-top:5px}
  .product-list-item-details form { 
      float:left; 
      width: 30%; 
      }

为了使它能够在移动设备和桌面设备上正常工作，您将需要使用以下媒体查询来清除浮动内容：

@media (min-width: 1020px) {
  .product-list-item-title-list { font-size: 16px;
  line-height: 22px;
  margin: 5px 0 0; float:left; width: 50%; color: #000}  
  .product-list-item-price-list {float:left; width: 10%; margin-top:5px}
  .product-list-item-details-list form { float:left; width: 30%; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .product-list-item-title-list {  font-size: 16px;
  line-height: 22px;
  margin: 20px 0 0; float: none;}
    .product-list-item {  }
    .product-list-item-price-list  { float: none;}
    .product-list-item-details-list form { float:none; padding-left:90px; }
}

使“添加到购物车”仅在某些条件下显示

举例来说，您只想显示集合中的按钮，而不是显示在主页上。通过将条件添加到液体模板文件中，可以轻松完成此操作。

打开模板，然后在要显示“添加到购物车”按钮的位置添加以下条件，例如，在您添加了数量的产品列表布局中。有条件地添加{% if collection.title %}如以下代码所示：

{% if collection.title %}
    <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
        <label for="quantity">Qty: </label>
		<input min="1" type="number" id="quantity"name="quantity" value="1" />
    	<input type="submit" value="Add to cart" class="btn" />
    </form> 
{% endif %}

如果您要检查其他值（例如产品是否有库存，已应用的类别或标签），则可以指定任意条件代替{% if collection.title %} 。

完成显示

您可以更改主题CSS来修改ajax购物车显示并将其调整到您的内心所在。一些有用的修改类是.cart-count和#cart-count a:first 。

要指定添加到购物车的值，您还可以修改链接以使用#gocart pa ， #cart和.checkout em类查看购物车。

要更改项目总数，请查看.item-count类。

此外，在ajaxify-cart.liquid代码段的末尾，您可以编辑以下颜色。

.ajaxified-cart-feedback {
  display: block;
  line-height: 36px;
  font-size: 90%;
  vertical-align: middle;
}
.ajaxified-cart-feedback.success { 
  color: #3D9970;
}
.ajaxified-cart-feedback.error { 
  color: #FF4136; 
} 
.ajaxified-cart-feedback a {
  border-bottom: 1px solid;
}

更改对齐方式，边距和填充以匹配您的主题，并为最终用户获得最佳显示效果。

移动响应支持

记住要检查移动分辨率，以查看ajax购物车的工作方式。您可能需要添加一些媒体查询，以使其在所有显示器上都能很好地显示。

如前所述，您可以使用以下媒体条件进行检查：

@media (min-width: 1020px) {
 /* Classes go here for wide screen */
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    /* Classes go here for mobile devices */
}