如何在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 就可以用来操作文档并使其出现/消失/更改。

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

你应该使用 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)在 success 函数的开头添加 a 以将该对象打印到浏览器的控制台。（在大多数浏览器中，您可以右键单击页面上的任何元素，然后选择“检查元素”来调出开发人员工具。应该有一个名为“控制台”的选项卡，日志将打印到其中，一旦您的信息出现，您就可以应该能够单击该对象来展开其内容。）