Вы определенно можете дать своим клиентам возможность загружать изображения, что само по себе довольно просто, но часто усложняется темами Shopify.
Если вы используете поле с type="input" и именем с name="properties[some custom property name]" Вы можете загружать изображения с правильной формой отправки. Если вы уже знакомы с тем, как добавить пользовательские свойства позиции, эта структура должна выглядеть довольно знакомой. Если ваша форма отправляется нормально, но вы все еще не видите свою загрузку, убедитесь, что для тега form установлено enctype="multipart/form-data".
Однако, когда все становится сложнее, когда темыпрыгать, чтобы делать все виды модных вещей. Если ваша тема удерживает вас на странице товара, когда вы нажимаете кнопку «добавить в корзину», ваша тема использует конечные точки API Shopify для добавления товаров с использованием Javascript, а не обычного HTML POST формы. Каждая тема, в которой реализована функция этого типа, выполняется не полностью, то есть с использованием чего-то похожего на data = jQuery(form).serialize(), чтобы получить текстовую строку, представляющую все выбранные пользователем формы, но поле загрузки файла не можетбыть serialize 'd таким образом, поэтому он будет игнорироваться.
Есть два способа обойти это ограничение общей темы:
1) Отключить или отключить javascript- иным способомна основе функции добавления в корзину в вашем магазине. В некоторых темах это можно сделать, перейдя на страницу настройки вашей темы в админке - обычно эту функцию можно отключить в настройках под заголовком «Корзина» или «Продукт», указав, что вы хотите, чтобы клиенты переходили в корзину. страница после добавления продукта. (Точно то, как оно отсортировано или какова будет формулировка, полностью находится под контролем дизайнера тем - если у вас возникнут проблемы с его поиском, вы сможете обратиться к поставщику темы за помощью)
2) Если вам удобно немного программировать, вы можете настроить свою тему, чтобы по-прежнему вносить модные дополнения к продукту, оставаясь на странице, внеся всего лишь несколько изменений в код. Вместо использования функции .serialize() (или аналогичной) для получения данных вы должны использовать объект FormData. Если вы используете jQuery для публикации данных, вам нужно будет указать несколько дополнительных опций, чтобы jQuery не делал слишком много. В частности, вам нужно будет установить processData: false, contentType: false в вашем объекте настроек AJAX. Если вы используете запрос Fetch или обычный XHR, просто помните, что ваш Content-type равен multipart/form-data.
Примечание. Если вы используете метод # 2 для обновления функции добавления в корзину вашей темы, в настоящее время этоприведет к сбою встроенного кода отслеживания Shopify ("Trekkie") при добавлении в корзину. Trekkie захватывает встроенную в браузер функцию XMLHttpRequest.prototype.send, чтобы обернуть ее некоторым кодом отслеживания, и этот код отслеживания предполагает, что все, что является post ed, представляет собой объект JSON / сериализованную форму.
Ссылки: Энктипы формы: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype
Использование объектов FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData
Использование FormData с jQuery: https://stackoverflow.com/a/5976031/2592369(Примечание. У вас есть существующая форма, см. Раздел «Создание FormData из существующей формы»
Настройки продукта: https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products#allow-file-uploads (Примечание. В статье Shopify утверждается, что корзины для всплывающих окон и ящиков не являютсясовместим с загрузкой файлов - это только частично верно, так как разработчики тем могут спроектировать свои темы, чтобы иметь такую совместимость - они просто не хотят)