javascript - 如何在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) 添加到成功函数的开头，以将对象打印到浏览器的控制台。 (在大多数浏览器中，您可以右键单击页面上的任何元素并选择“Inspect Element”以调出您的开发人员工具。应该有一个名为“Console”的选项卡用于打印日志，一旦您的信息在那里，您应该能够单击该对象以展开其内容。)