如何通过 /cart/add.js 发送图像

Question

我创建了一个自定义产品构建器，您可以在其中输入您的详细信息，它们会与产品订单一起发送。所有字段都有一个 name="properties[]" 属性。我有一个上传图片的字段，它会随订单一起发送。 现在的任务是在将产品添加到购物车之前验证字段，因此我将 e.preventDefault() 放在“添加到购物车”按钮上，然后通过 /cart/add.js 通过 Ajax 发送产品。但问题是图片不是这样发送的。如何通过 /cart/add.js 发送照片，以便它按顺序显示在管理面板中？ 下面是我的提交代码。据我了解，添加照片时它会转换它。并更改名称。但是当我自定义发送它时，它添加了错误的图像并且不发送它。可以修复吗？

const productFormBtn = document.querySelector(
  ".content-builder__sidebar form .product-form__submit"
);

const cardForm = document.querySelector(".content-builder__sidebar form");

productFormBtn.addEventListener("click", (e) => {
      e.preventDefault();
      const formData = new FormData(cardForm);

      const xhr = new XMLHttpRequest();
      xhr.open("POST", "/cart/add.js", true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.responseType = "json";

      xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log("Success:", xhr.response);
          else {
            console.error("Error:", xhr.status, xhr.statusText);
          }
        };

        xhr.onerror = function() {
          console.error("Network error");
        };

        xhr.send(new URLSearchParams(formData));
      });

Answer 1

您只能使用订单项属性上传自定义产品的图像。您最好在产品模板级别执行此操作。 Shopify 有一些您可以遵循的示例。客户上传图片后，该订单项属性即可在购物车中进行渲染。也是按顺序来的。

您可以通过检查任何 Shopify 主题和 cart.liquid 看到这一点，因为它们都支持渲染订单项属性图像。

如果您尝试将图像添加到购物车作为属性，但结果很混乱，这可能是由于您处理上传的方式所致。我从来没有尝试过以这种方式编辑图像，这通常是做一次就忘记的事情。