如何修改 shopify 重新订购到购物车以添加自定义行项目属性

Question

我正在尝试向客户的订单历史记录页面添加一个重新订购按钮，以自动重新订购他们已经购买的商品。这会将他们送回购物车，其中包含已预装并准备结帐的物品。每个产品项目都附加了自定义属性。一切似乎都正常，除了当我将商品重新添加到购物车时，我无法显示自定义订单项属性。

我正在使用order-to-cart.liquid sn-p。

在第 18 行，似乎正在调用自定义属性：

properties: {{ line_item.properties | json }}

我已尝试修改代码以添加它们：

request.send(JSON.stringify({
  'quantity':order.items[0].quantity,
  'id':order.items[0].variant_id,
  'properties':order.items[0].properties
}));

但这不起作用。

根据下面的评论，我尝试遍历项目属性：

request.send(JSON.stringify({
  'quantity':order.items[0].quantity,
  'id':order.items[0].variant_id,
  'properties': {
    {% for line_item in order.line_items %}
      {% for property in line_item.properties %}
        '{{ property.first }}': '{{ property.last }}'{% unless forloop.last %},{% endunless %}
      {% endfor %}
    {% endfor %}
  }
}));

但我得到语法错误：

SyntaxError: missing } after property list
note: { opened at line 403, column 26

好像引用了request.send的属性列表

输出的示例json是：

        /* Setup the order object. Extend this as needed. */
        var order = {
          items:[

              {
                variant_id: 16320547225634,
                product_id: 1782978904098,
                properties: [["Arrangement Type",""],["Enclosed Card",""],["Occasion \u0026amp; Comments","Condolescens"],["Delivery Date","Mar 29, 2019"]],
                available: true
              },

              {
                variant_id: null,
                product_id: 1776316743714,
                properties: [["Arrangement Type",""],["Enclosed Card",""],["Occasion \u0026amp; Comments",""],["Delivery Date","Mar 24, 2019"]],
                available: null
              },

              {
                variant_id: 16319970017314,
                product_id: 1782916808738,
                properties: [["Arrangement Type","Seasonal"],["Enclosed Card","Love and best wishes"],["Occasion \u0026amp; Comments","Just Because"],["Delivery Date","Mar 25, 2019"]],
                available: true
              },

              {
                variant_id: 16311468687394,
                product_id: 1780877819938,
                properties: [["Arrangement Type","Large vase with orchids"],["Enclosed Card","Steal the warm chair right after you get up when owners are asleep, cry for no apparent reason sleeps on my head."],["Occasion \u0026amp; Comments","Birthday so make extra special!"],["Delivery Date","Apr 10, 2019"]],
                available: true
              }

          ]
        };



request.send(JSON.stringify({
            'quantity':order.items[0].quantity,
            'id':order.items[0].variant_id,
            'properties': {


                    'Arrangement Type': '',

                    'Enclosed Card': '',

                    'Occasion & Comments': 'Condolescens',

                    'Delivery Date': 'Mar 29, 2019'



                    'Arrangement Type': '',

                    'Enclosed Card': '',

                    'Occasion & Comments': '',

                    'Delivery Date': 'Mar 24, 2019'



                    'Arrangement Type': 'Seasonal',

                    'Enclosed Card': 'Love and best wishes',

                    'Occasion & Comments': 'Just Because',

                    'Delivery Date': 'Mar 25, 2019'



                    'Arrangement Type': 'Large vase with orchids',

                    'Enclosed Card': 'Steal the warm chair right after you get up when owners are asleep, cry for no apparent reason sleeps on my head.',

                    'Occasion & Comments': 'Birthday so make extra special!',

                    'Delivery Date': 'Apr 10, 2019'


              }
          }));

我的cart.liquid 文件像这样调用自定义属性：

            {% if property_size > 0 %}

                  {% for p in item.properties %}
                    {% assign first_character_in_key = p.first | truncate: 1, '' %}
                    {% unless p.last == blank or first_character_in_key == '_' %}
                      <div class="label-info">{{ p.first }}:
                        <strong class="input-info">{{ p.last }}</strong>
                      </div>
                    {% endunless %}
                  {% endfor %}

            {% endif %}

但我不确定是否需要修改它以适应任何已创建的属性。

添加回购物车时需要显示自定义订单项属性，否则重新订购功能不会真正节省时间，因为它会迫使客户返回每个产品页面以将信息重新添加到自定义字段。

我对液体不太熟悉，所以不太确定需要做什么来修改 sn-p 或购物车模板。您能提供的任何帮助将不胜感激！

非常感谢， 标记

Answer 1

'properties':order.items[0].properties 不起作用的原因是它包含一个数组，其中包含订单项属性的名称和值。

要设置它，我们需要将数组转换为对象，然后将其传递给request.send 函数。

在this post 中可以看到我发现的实现此功能的功能。您可以将此函数复制并粘贴到orderItems 函数中。

添加后，我们创建 properties 变量，传入 order.items[0].properties 作为参数，将其转换为对象。

此变量与request.send 中的“数量”和“id”一起添加。

添加所有内容后，orderItems 函数的外观如下：

/* Simple function add to cart */
var orderItems = function(){
  if(!order.items.length){ return }
  if(!order.items[0].available){ 
    checkQueue();
  }

  function objectify(array) {
    return array.reduce(function(p, c) {
      p[c[0]] = c[1];
      return p;
    }, {});
  }

  var properties = objectify(order.items[0].properties);

  var request = new XMLHttpRequest();
  request.open('post', '/cart/add.js', true);
  request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  request.onload = function() {
    var resp = request.responseText;
    if (request.status >= 200 && request.status < 400) {
      checkQueue();
    } else { /* add your error handling in here */ }
  };
  request.onerror = function() {
    /* add your error handling in here */
  };
  request.send(JSON.stringify({
    'quantity':order.items[0].quantity,
    'id':order.items[0].variant_id,
    properties 
  }));

};

希望有帮助！