javascript - 尝试将查询字符串中的值分配给 Shopify 行项目属性

Question

HTML

 <div>
    <input type="hidden" id="shirtImg" name="properties[ShirtImg]"/>
 </div>

 <div id="purchase" onclick="createLineItemProperties()">
            <p class="price"></p>                                 
            <input class="btn" type="submit" name="add" id="add-to-cart" value="Add to Cart" />
 </div>

此代码在 product.liquid 中。所有这些都包含在 /cart/add 表单标签中。

Javascript

 function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
    vars[key] = value;
  });
  return vars;

}

function createLineItemProperties() {
   if(getUrlVars()["side1"] != null){
      console.log("inside if statement");
      document.getElementById("shirtImg").value = getUrlVars()["side1"];
   }
console.log(document.getElementById("shirtImg").value);
}

在这里，javascript 从查询字符串中提取一个名为“side1”的值。那里的 console.log 实际上最终打印了我想要的结果，但由于某种原因，它似乎没有保存在 line item 属性中。

Answer 1

事实证明，在单击“添加到购物车”时运行该功能是一个坏主意，因为它最终会先发送表单数据，然后再重新分配 id，这给我留下了不希望的结果。我只是通过 body 标签的 onload 事件调用了该函数，现在它可以工作了。