如何在javascript中嵌入Liquid？

Question

如何在javascript中嵌入Liquid？

4

我一整天都在尝试将这段Liquid代码嵌入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循环，那么代码可以获取

和其他所有内容，但是由于循环未能正常工作，所以无法获取物品数据。

这是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 %}

- iBrazilian2

在 JavaScript 代码中，删除末尾的 }。 - jrbedard

@jrbedard 抱歉，我忘记修复了，现场已经修复了，但那不是问题的原因，问题仍然存在。 :/ - iBrazilian2

你尝试过将变量 {% include 'addItemToCartDetails', items: cart.items %} 传递到另一个文件中的循环 {% for item in items %} 吗？ - jrbedard

回答你的问题，你的openCart点击功能是在片段还是资产文件中？然而，我有一种感觉，你试图做的可能是错误的方法 - 你能澄清一下你到底想做什么吗？如果你想在添加产品后更新DOM以显示最近添加的产品，那么有更好的方法来解决这个问题。 - Dave B

3个回答

0

在您的第一段代码片段中，将cart.items作为变量items传递到模板中：

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

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

{% for item in items %}

- jrbedard

0

在您的情况下，您可以将此{% capture content %}{% include 'addItemToCartDetails' %}{% endcapture %}放置在您的Liquid代码中的某个位置，可能是隐藏的HTML，并将其附加到您希望它出现的元素上，如下所示。

success: function()
    {          
      var content = $("#addItemToCartDetails-wrapper").html();
      $("._second").html(content);
    }

大概就是这样。希望能有所帮助！

- Ulysses Lanugon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave B · Accepted Answer

您正在尝试使用Liquid，但应该使用Javascript

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)将对象打印到浏览器控制台。(在大多数浏览器中，您可以右键单击页面上的任何元素并选择“检查元素”以打开开发人员工具。应该有一个名为“Console”的选项卡，日志会被打印到那里。一旦您的信息在那里，您就可以单击对象以展开其内容。)