Интеграция 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 // Я следовал учебник Эего для использования в существующей форме на 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-файлы.