Shopify 订单项属性 图片上传方式 Ajax

Shopify Line Item Properties Image upload via Ajax

是否可以使用 Shopify 通过 Ajax 上传订单项 属性 图片? Shopify 不允许通过 Ajax.

上传文件

我想出了一个使用 Cloudinary 的解决方法(不直接上传到 Shopify)。我想我会在这里分享它。

Ajax 在 Shopify 中上传图片作为订单项属性的解决方案。

最初,我尝试将图像转换为 BASE64,然后 Ajax 上传 BASE64 字符串。然而,这在它显示整个 BASE64 字符串而不是图像的顺序内有效...

所以,我求助于 Cloudinary——一种图片上传服务。 Cloudinary 自动将 BASE64 编码图像转换回 'proper' 图像。

在 Cloudinary 中,我们需要启用未签名的图片上传才能正常工作。

http://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud

启用后,我们可以AJAX将 BASE64 图像上传到 Cloudinary。

var data = {
    upload_preset: "019au6h3", // the unsigned image preset within cloudinary
    tags: "foo", // any tags you wish to apply
    context: "photo=phototitle",
    file: encodedImage // the BASE64 encoded image file 
}

// standard Jquery ajax post

jQuery.post("https://api.cloudinary.com/v1_1/dn5wucjj2/upload", data).done(function(data) {
   // do something here
}).then(function(data) {
    addToCart(data.secure_url) // addToCart is the ajax add to cart post function (whatever function your theme uses, modified to accept an the returned image)
});

data.secure_url 是 Cloudinary returns 图片上传后的 url。然后我们可以将其传递给我们的 addToCart 函数 - 它将产品添加到 Shopify 的购物车。

在结帐时,客户会看到 url 他们的图像(不理想)。但是,在后端,在订单中,Shopify 将 url 变成了 link.

对于那些关心安全的人:https://support.cloudinary.com/hc/en-us/articles/208335975-How-safe-secure-is-it-to-use-unsigned-upload-from-web-browsers-or-mobile-clients-