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

Question

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

我正在使用 order-to-cart.liquid 片段。

在第 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 &amp; Comments': 'Condolescens',

                    'Delivery Date': 'Mar 29, 2019'



                    'Arrangement Type': '',

                    'Enclosed Card': '',

                    'Occasion &amp; Comments': '',

                    'Delivery Date': 'Mar 24, 2019'



                    'Arrangement Type': 'Seasonal',

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

                    'Occasion &amp; 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 &amp; 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 %}

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

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

我不太精通 liquid，所以不太确定需要做什么来修改代码段或购物车模板。如果您能提供任何帮助，我们将不胜感激！

非常感谢，马克

Answer 1

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

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

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

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

此变量与 request.send 中的 'quantity' 和 '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 
  }));

};

希望对您有所帮助！

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

How to modify shopify reorder to cart to add custom line item properties

javascript

liquid

shopify