在 shopify 主題的產品頁面上上傳圖片字段

Question

我想為我的客戶添加一個字段，以便他們在購買產品或將產品添加到購物車時上傳圖片。 當輸入文件類型時，它允許上傳照片，但它不起作用。 誰能給我那個解決方案？

<div class="product-form__item product-form__item-uplpic">
    <label for="photo">Upload Photo</label>
    <input required class="product-form__input required" id="photo" type="file" name="properties[Uploaded Image]">
</div>

Answer 1

您絕對可以為您的客戶提供上傳圖片的機會，這本身相當簡單，但通常會因 Shopify 主題而變得復雜。

如果您使用帶有type="input"的字段和帶有name="properties[some custom property name]"的名稱，您可以上傳帶有正確表單提交的圖像。 如果您已經熟悉如何添加自定義訂單項屬性，那么此結構應該看起來相當熟悉。 如果您的表單正常提交但您仍然看不到您的上傳，請確保form標簽已設置enctype="multipart/form-data" 。

然而，當主題跳進來做各種花哨的事情時，事情就變得棘手了。 如果您的主題在您點擊“添加到購物車”按鈕時將您留在產品頁面上，則您的主題使用 Shopify 的 API 端點使用 Javascript 而不是普通的 Z4C4AD5FCA2E7A3F74DBB1CED0038 POST形式添加產品。 我見過的每個實現此類功能的主題都是以不完整的方式實現的，即使用類似於data = jQuery(form).serialize()的東西來獲取代表表單中所有用戶選擇的文本字符串- 但是文件上傳字段不能以這種方式serialize ，因此將被忽略。

有兩種方法可以繞過這個常見的主題限制：

1) 關閉或以其他方式禁用商店中基於 javascript 的添加到購物車功能。 在某些主題中，這可以通過在管理員中轉到主題的自定義頁面來完成 - 通常可以在“購物車”或“產品”下的設置中關閉該功能添加產品后的頁面。 （確切的排序方式或措辭完全在主題設計師的控制之下 - 如果您找不到它，您應該能夠聯系主題提供者尋求幫助）

2）如果您對一些編碼感到滿意，您可以通過對代碼進行一些更改來自定義您的主題以仍然執行花哨的停留在頁面上的產品添加。 不要使用.serialize() function（或類似的）來獲取數據，而是使用FormData object。 如果使用 jQuery 發布數據，您需要指定一些額外的選項來阻止 jQuery 做太多事情。 具體來說，您需要在 AJAX 設置 object 中設置processData: false, contentType: false 。 如果使用 Fetch 或普通的 XHR 請求，請記住您的Content-type是multipart/form-data 。

注意：如果使用方法 #2 升級您的主題的添加到購物車 function，目前這將導致 Shopify 的內置跟蹤代碼（“Trekkie”）在添加購物車時失敗。 Trekkie 劫持了瀏覽器的原生XMLHttpRequest.prototype.send function 以用一些跟蹤代碼包裝它，並且該跟蹤代碼假定post的任何內容都是 Z0ECD11C1D2A287401FZ148 形式的對象。

參考：表單編碼類型： 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”部分

Product customizations: https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products#allow-file-uploads (Note: The Shopify article claims that popup/drawer carts與文件上傳不兼容 - 這只是部分正確，因為主題開發人員可以設計他們的主題以具有這種兼容性 - 他們只是選擇不這樣做）

Answer 2

 var file = new File([blob], "businesscard_"+new Date().getTime()+".png",{type:"image/png", lastModified:new Date().getTime()}); const addtocartform = document.querySelector('.addtocartform'); const formdataobj = new FormData(addtocartform); let dt = new DataTransfer(); dt.items.add(file); let file_list = dt.files; document.getElementById("proimagebc").files = file_list;