将 dropzone.js 与 Shopify 集成

Question

我正在尝试将 dropzone.js 集成到我的 Shopify 主题中。 Shopify 允许使用 form action="cart/add" 将文件上传附加到订单项

Shopify 在输入字段中查找 name="properties[SOMETHING]" id="SOMETHING" 并将其作为属性附加到购物车中。

在我的主题中可以找到这个简单代码的简单工作示例：http://squishpress.com/products/10-stickers

当我开始实现 Dropzone.js 时问题就开始了 // 我已经按照 enyo 的教程使用 GitHub 上的现有表单。 （没有链接，因为我每个帖子只能发布 2 个链接）

这是我安装了 dropzone.js 的测试页面：http://squishpress.com/products/10-x-18

我的配置文件如下所示：

<script>

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: false,
addRemoveLinks: true,
parallelUploads: 1,
maxFiles: 1,

// The setting up of the dropzone
init: function() {
var myDropzone = this;

// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("input[type=submit]").addEventListener("click", function(e) {
  // Make sure that the form isn't actually being sent.
  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
  // Gets triggered when the form is actually being sent.
  // Hide the success button or the complete form.
});
this.on("success", function(files, response) {
  // Gets triggered when the files have successfully been sent.
  // Redirect user or notify of success.
  $('#my-awesome-dropzone').submit();
});
this.on("errormultiple", function(files, response) {
  // Gets triggered when there was an error sending the files.
  // Maybe show form again, and notify user of error
});
this.on("processing", function() {
this.options.autoProcessQueue = true;
});
}

}

我已经修改了我的 dropzone.js 库（我知道，这样保留它不好——现在它只是一个测试）在此处（第 791 行）将必要的属性添加到文件输入中：

      _this.hiddenFileInput.setAttribute("name", "properties[Front Image]");
      _this.hiddenFileInput.setAttribute("id", "Front Image");

不知道为什么，但是当按下提交按钮时，我的文件永远不会进入购物车。

properties 属性返回 null，我无法测试文件是否已上传到 shopify 服务器上的购物车/添加文件。

希望有人可以帮助了解 dropzone 如何处理表单中删除的文件、它如何处理它构建的数组以及在我按下提交后它如何发送这些文件。

谁能帮忙？

或者，我可以查看要使用的不同库，但这似乎非常接近我的需要。

谢谢！

Answer 1

检查 dropzone.js 的权限，看看它们是否与您的其他 .js 文件相同。