Ecommerce Shopify WordPress Discussion

How can I send an image via /cart/add.js

I created a custom product builder where you can enter your details and they are sent along with the product order. All fields have a name="properties[]" attribute. I have a field to upload a picture and it sends it along with the order. Now the task is to validate the fields before adding a product to the cart, so I threw e.preventDefault() on the add to cart button and then send the product by Ajax via /cart/add.js. But the problem is that the picture is not sent this way. How can I send a photo via /cart/add.js so that it appears in the order in the admin panel? Below is my submission code. As I understand it, when adding a photo it converts it . And changes the name. But when I send it custom, it adds the wrong image and does not send it. Is it possible to fix it? const productFormBtn = document.querySelector( ".content-builder__sidebar form .product-form__submit" ); const cardForm = document.querySelector(".content-builder__sidebar form"); productFormBtn.addEventListener("click", (e) => { e.preventDefault(); const formData = new FormData(cardForm); const xhr = new XMLHttpRequest(); xhr.open("POST", "/cart/add.js", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.responseType = "json"; xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { console.log("Success:", xhr.response); else { console.error("Error:", xhr.status, xhr.statusText); } }; xhr.onerror = function() { console.error("Network error"); }; xhr.send(new URLSearchParams(formData)); }); Run code snippetExpand snippet
You can only upload images for your custom product by using Line Item Properties. You best do that at the product template level. Shopify has a few examples you can follow. Once your customer uploads an image, that line item property is available in the cart for rendering. It is also in the order. You can see that by inspecting any Shopify theme and cart.liquid, as they all come with support for rendering line item property images. If you try and add the image at the cart as a property, and it is messed up, that could be because of how you're dealing with the upload. I never deal with trying to edit images this way, it is usually a do it once and forget it kind of thing.

January 27, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.