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

时间:2019-03-29 17:57:46

标签: javascript shopify liquid

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

我正在使用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 & 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 %}

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

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

我不是很精通液体,所以不太确定需要做什么来修改代码片段或购物车模板。您能提供的任何帮助将不胜感激!

非常感谢, 标记

1 个答案:

答案 0 :(得分:0)

'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 
  }));

};

希望有帮助!