如何在javascript中包含液体？

Question

我一直在努力将这个液体代码包含在javascript中，但到目前为止还没有运气。

我只是想用购物车数据来更新div以显示图像和名称，这就是我所拥有的。

$('.openCart').click(function(e)
{          
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: data,
        dataType: 'json',
        success: function()
        {
          {% capture content %}{% include 'addItemToCartDetails' %}{% endcapture %}
          var content = {{ content | json }};
          $("._second").html(content);
        }
    });
 });

总的来说下面的代码不起作用（仅仅因为for循环，我不知道如何绕过这个...）：如果我删除for循环然后代码检索div和所有内容，除了项目数据以后循环不起作用。

这是addItemToCartDetails.liquid ，

{% for item in cart.items %}

    <div class="_second_1">
      <a href="{{ item.url | widivin: collections.all }}" class="cart-image">
        <img width="320" src="{{ item | img_url: '700x700' }}" alt="{{ item.title | escape }}">
      </a>
    </div>

    <div class="_second_2"><h3>Product Name</h3>{{ item.product.title }}</div>

    <div class="_second_3"><h3>Remove Product</h3><span class="clearCart">Remove</span></div>

    <div class="_second_4"><h3>Quantity</h3><input class="quantity" type="input" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}" title="If you'd like another subscription please checkout separately" alt="If you'd like another subscription please checkout separately" disabled></div>

    <div class="_second_5">
      <h3>Total Price</h3>

      <div class="totalDetails">Total: {{ item.line_price | plus: 0 | money }} / month</div>

    </div>

    <div class="_third">
      <input type="submit" name="checkout" value="PROCEED TO CHECKOUT">
    </div>

{% endfor %}

Answer 1

当你应该使用Javascript时，你正试图使用​​Liquid

所有Liquid处理都在后端进行，以构造一个传递给浏览器的HTML文件。 将HTML页面传递到用户的浏览器后，可以使用Javascript来操作文档并使其显示/消失/更改。

实际上，这意味着addItemToCartDetails.liquid中的{% for item in cart.items %}将在页面加载之前呈现一次，之后再也不会呈现。 无论向购物车添加了多少商品，该代码段的结果在页面加载时都只会是最新的。

您应该使用Javascript变量

Shopify将表示最近添加的产品的订单项对象传递给您的成功回调函数。 您的代码应如下所示：

$('.openCart').click(function(e)
{          
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: data,
        dataType: 'json',
        success: function(line_item)
        {
          var content = '<h3>You added a ' + line_item.title + '!</h3>' +
                        '<p> We appreciate that you want to give us ' + Shopify.formatMoney(line_item.line_price, {{ shop.money_format }}) + '!</p>' + 
                        '<p>That is very nice of you!  Cheers!</p>';
          // Note: Not every theme has a Shopify.formatMoney function.  If you are inside an asset file, you won't have access to {{ shop.money_format }} - you'll have to save that to a global javascript variable in your theme.liquid and then reference that javascript variable in its place instead.
          $("._second").html(content);
        }
    });
 });

如果您对响应对象中可以访问的内容感到好奇，请将console.log(line_item)添加到成功函数的开头，以将对象打印到浏览器的控制台。 （在大多数浏览器中，您可以右键单击页面上的任何元素，然后选择“检查元素”以显示开发人员工具。应该有一个名为“控制台”的选项卡，其中会打印日志，一旦您的信息在那里，应该能够点击对象来扩展其内容。）

Answer 2

在第一个代码段中，将cart.items作为变量items传递给模板：

{% include 'addItemToCartDetails', items: cart.items %}

在addItemToCartDetails.liquid文件模板中，相应地修改for循环语句：

{% for item in items %}