Question

我正在shopify网站上构建自定义的ajax抽屉推车。添加产品后，我使用附加功能来显示更新的购物车，而无需重新加载页面。这是我用来构建购物车的js：

 $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
    $('.ajax-cart-form .cart-item').remove();
    $('.ajax-subtotal .drawer-subtotal').remove();
    $.each(cart.items, function(index, cartItem) {
      var line= index +1;
var cents = "";

if (cartItem.price % 100 < 10) {
cents = "0";
}
var price = parseInt(cartItem.price/100) + "." + cents + cartItem.price % 100;
        $('.ajax-cart-form').append("<div class='cart-item desktop-full mobile-full'><div class='cart-image desktop-5'><a href='"+ cartItem.url +"'title='"+cartItem.title+"'><img src='"+ cartItem.image +"'></a></div><div class='cart-title desktop-7'><p>"+ cartItem.title +"</p><div class='cart-item-actions'><span class='drawer-price'><strong>£ "+ price +" GBP</strong></span></div><div class='cart-quantity'><input type='button' value='-' class='qtyminus qtyminus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"'/><input name='updates[]' id='updates_"+ cartItem.id +"' class='quantity CartCount' value='"+ cartItem.quantity +"' /><input type='button' value='+' class='qtyplus qtyplus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"' /></div></div>");

  });
  $(function(index, cartItem) {
        var line2= index +1;
        var cents2 = "";

if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
  $('.ajax-subtotal').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
  });
});

现在，我已经为产品分配了一个具有建议产品手柄的元字段，该产品手柄需要显示在购物车中。仅显示最后添加的产品的推荐产品。在我的普通购物车中，我这样做是这样的：

{% for item in cart.items limit:1 %}
{% assign upsellID = all_products[item.product.metafields.cart_upsell.upsell_product] %}
    <div class="desktop-8 mobile-full cPhoneUpper" id="qmf-cart">
        <div class="cart-item desktop-full mobile-full">
          <div class="cart-image desktop-5">
<a href="{{ upsellID.url }}" title="{{ upsellID.title }}"><img src="{{ upsellID.featured_image | product_img_url: '120x120' }}"></a>
          </div>
              <div class="cart-title desktop-7">
                <p>{{ upsellID.title }}</p>
              </div>
            </div>
    </div>
{% endfor %}

所以在我的ajax购物车中，我正在做类似的事情

  $.each(cart.items.slice(0, 1), function(index, cartItem) {
    var line3= index +1;
      $('.drawer-recommend').append("");
});

现在我遇到的问题是，该元字段不在ajax购物车中，因为它不是cart.js的一部分。我读过某个地方创建了一个替代模板来执行此操作，因此我创建了一个名为“ cart.test.json.liquid”的模板，并向其中添加了我的元字段：

{%- layout none -%}
{
    "items":[
    {%- for item in cart.items -%}
        {
            "metafield1": {{ item.product.metafields.cart_upsell.upsell_product | json }}
        }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
    ]
}

当我转到https://my-store-url.myshopify.com/cart?view=test.json时，我得到正确的元字段输出。所以当我运行

$.ajax({
    type: 'GET',
    url: '/cart?view=test.json',
    success: function(response) {
        json_response = JSON.parse(response);
        console.log( 'response', json_response );
    },
    error: function(status) {
        console.warn( 'ERROR', status );
    }
})

我也在控制台中获得了正确的输出。我现在正在苦苦挣扎的是如何在我的append函数中将此数据分配为推荐产品的产品句柄？因此，就像我将其分配到普通购物车中一样：

{% assign upsellID = all_products[item.product.metafields.cart_upsell.upsell_product] %}

有什么建议吗？

在Ajax购物车中获取产品元字段

0 个答案: