javascript - 在shopify主题的产品页面上上传图像字段

Question

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

<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 添加产品，而不是使用表单的普通 HTML POST 。我见过的每个实现此类功能的主题都以不完整的方式实现，即使用类似于 data = jQuery(form).serialize() 的内容来获取表示所有内容的文本字符串表单中的用户选择 - 但文件上传字段无法以这种方式序列化，因此它将被忽略。

有两种方法可以解决这个常见的主题限制:

1) 关闭或以其他方式禁用商店中基于 javascript 的“添加到购物车”功能。在某些主题中，可以通过在管理中转到主题的自定义页面来完成此操作 - 通常可以通过指定您希望客户转到购物车来在“购物车”或“产品”标题下的设置中关闭该功能添加产品后的页面。 (确切的排序方式或措辞完全由主题设计者控制 - 如果您找不到它，您应该能够联系主题提供商寻求帮助)

2) 如果您对一些编码感到满意，您可以自定义您的主题，以便通过对代码进行一些更改来仍然添加精美的停留在页面上的产品。您可以使用 FormData 对象，而不是使用 .serialize() 函数(或类似函数)来获取数据。如果使用 jQuery 发布数据，您将需要指定一些附加选项以阻止 jQuery 执行过多操作。具体来说，您需要在 AJAX 设置对象中设置 processData: false, contentType: false。如果使用 Fetch 或普通的 XHR 请求，只需记住您的 Content-type 是 multipart/form-data。

注意:如果使用方法 #2 升级主题的添加到购物车功能，目前这将导致 Shopify 的内置跟踪代码(“Trekkie”)无法添加购物车。 Trekkie 劫持浏览器的 native 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 (注意:您有一个现有表单，请参阅“从现有表单创建 FormData”部分

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