Question

我创建了一个简单的AJAX请求，该请求将反馈到标题模板。但是，我似乎无法执行以下任何assign，capture，render，include中的任何操作。

<script id="CartPopover" type="text/x-handlebars-template">
      {% raw %}
       {{#items}}
        {% render "cart-item", item: item %}
       {{/items}}
      {% endraw %}
    </div>

更新

将产品添加到购物车时，我正在尝试更新网站上的滑动式购物车。请查看ajax，/ cart/add.js成功

function below.
var showCartNotificationPopup = function (product) {

        var addedQuantity = parseInt($('.quantity__input', this.$container).val());

        $.get("/cart.json", function (data) {
         var cart_items = data.items

          $.each(cart_items, function (index, item) {
            item.minus_quatinty = item.quantity - 1;
            item.formatPrice = Shopify.formatMoney(item.final_price)
          })

          cart = {
            items: data.items
          }

          $("#side-cart-container").find(".item").detach();
          $("#CartOuter table tbody").prepend(template(cart));
          console.log(cart);
          $("#side-cart-container").addClass("visible");
        });

        clearTimeout(popoverTimer);
      }

Answer 1

您误解了Shopify的工作方式。加载页面时，Shopify会解析一次液态代码。 Shopify创建了巨大的HTML，CSS和JS字符串，并将其转储到浏览器中。

一旦您使用Javascript，便不再需要使用Liquid。相反，您需要处理数据。因此，如果要更新购物车，请使用Javascript。如果您想知道购物车中有什么，请使用Javascript。如果要重新呈现购物车中的内容，请使用新的DOM替换不再喜欢的DOM。为此使用Javascript模板。

除了渲染期间，JS中没有任何Liquid可以帮助您。在渲染时，您当然可以用Liquid的数据构建并填充Javascript数据结构。

将{{raw}}变量传递给代码段-Shopify

1 个答案: