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



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

我正在使用订单到购物车.液体片段。

在第 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 %}

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

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

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

非常感谢, 马克

'properties':order.items[0].properties

不起作用的原因是因为它包含一个数组,其中包含行项属性的名称和值。

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

我发现可以实现这一点的功能可以在这篇文章中看到。您可以将此函数复制并粘贴到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 
}));
};

希望对您有所帮助!

最新更新