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");

不确定原因，但按下提交按钮时我的文件永远不会进入购物车。

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

希望有人可以帮助阐明dropzone如何处理表单中删除的文件，它对构建的数据做了什么，以及在我按下提交后如何发送这些文件。

有人可以帮忙吗？

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

谢谢！

Answer 1

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

将dropzone.js与Shopify集成

1 个答案: