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

有两种方法可以解决此常见主题限制：

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

2）如果您对一些编码感到满意，则可以通过仅对代码进行一些更改来自定义主题，以继续进行精美的页面停留产品添加。与其使用.serialize()函数（或类似函数）来获取数据，不如使用FormData对象。如果使用jQuery发布数据，则需要指定一些其他选项来阻止jQuery做太多事情。具体来说，您需要在AJAX设置对象中设置processData: false, contentType: false。如果使用提取或普通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

在jQuery中使用FormData：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文章声称弹出式/抽屉式购物车与文件上传不兼容-这只是部分正确，因为主题开发人员可以可以设计主题具有这种兼容性-他们只是选择不这样做

在shopify主题的产品页面上上传图片字段

1 个答案: