將Dropzone.js與Shopify集成

我正在嘗試將dropzone.js集成到我的Shopify主題中。 Shopify允許將文件上傳附加到訂單項使用form action="cart/add"將Dropzone.js與Shopify集成

Shopify在輸入字段中查找name="properties[SOMETHING]" id="SOMETHING"並將其作爲購物車中的屬性附加。

工作示例在我的主題，這個簡單的代碼

一個沒有廉價這裏發現：當我開始實現Dropzone.js http://squishpress.com/products/10-stickers

問題開始//我已經按照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如何處理表單中丟棄的文件，它如何處理它構建的陣列以及如何在按下提交後發送這些文件。

任何人都可以幫忙嗎？

另外，我可以看一個不同的庫來使用，但這似乎非常接近我所需要的。

謝謝！

來源

2014-02-25 samg

檢查dropzone.js的權限，看它們是否與其他.js文件相同。

來源

2014-02-25 20:57:47

檢查，他們都設置爲755。 – samg

將Dropzone.js與Shopify集成

回答

相關問題