在Shopify主题的产品页面上上传图像字段

2022-03-02 00:00:00 shopify javascript shopify-template

我想为我的客户添加一个字段，以便他们在购买产品或添加到购物车时上载图像。当输入IF文件时，它允许上传照片，但它不起作用。有人能给我那个解决方案吗？

<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>

解决方案

您绝对可以为客户提供上传图片的机会，图片本身相当简单，但通常会因购物主题而变得复杂。

如果您使用type="input"字段和name="properties[some custom property name]"名称，则可以使用正确的表单提交上载图像。如果您已经熟悉如何添加自定义行项目属性，则此结构看起来应该相当熟悉。如果您的表单正在正常提交，但您仍然看不到上载，请确保form标记已设置enctype="multipart/form-data"。

然而，当主题跳进来做各种花哨的事情时，事情就变得棘手了。如果您的主题使您在点击"添加到购物车"按钮时停留在产品页面上，那么您的主题就是使用Shopify的API端点使用Javascript而不是表单的普通HTMLPOST添加产品。我所见过的实现这类功能的每个主题都是以一种不完整的方式来实现的，即使用类似于data = jQuery(form).serialize()的内容来获取表示表单中所有用户选择的文本字符串-但是文件上传域不能以这种方式serialized，因此它将被忽略。

有两种方法可以绕过此常见主题限制：

1)关闭或禁用商店中基于javascript的Add-to-Cart功能。在一些主题中，这可以通过在管理中转到主题的自定义页面来完成-通常可以在"购物车"或"产品"标题下的设置中关闭该功能，方法是指定您希望客户在添加产品后转到购物车页面。(它的具体排序方式或措辞完全由主题设计者控制-如果您在找到它时遇到困难，您应该能够联系主题提供商寻求帮助)

2)如果您对一些编码感到满意，您可以定制您的主题，只需对代码进行几处更改，就可以继续添加那些漂亮的停留在页面上的产品。您可以使用FormData对象，而不是使用.serialize()函数(或类似函数)来获取数据。如果使用jQuery发布数据，则需要指定一些附加选项来阻止jQuery执行过多操作。具体地说，您需要在Ajax设置对象中设置processData: false, contentType: false。如果使用FETCH或纯OL‘XHR请求，请记住您的Content-type是multipart/form-data。

注意：如果使用方法#2升级主题的添加到购物车功能，目前这将导致Shopify的内置跟踪代码("Trekkie")在添加购物车时失败。Trekkie劫持浏览器的原生XMLHttpRequest.prototype.send函数，用一些跟踪代码对其进行包装，跟踪代码假定post编辑的任何内容都是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(注意：您有一个现有表单，请参阅"从现有表单创建表单数据"部分

产品定制：https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products#allow-file-uploads(注意：Shopify文章声称弹出式/抽屉购物车与文件上传不兼容-这只是部分正确的，因为主题开发者可以设计他们的主题以具有这种兼容性-他们只是选择不兼容)

相关文章