Shopify send updated image to cart
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, I have a Shopify site.

https://myimages.xyz/products/chair

I’m loading some custom JS on the product page. The code changes the product image when the user clicks the options (Legs, Seat).

My problem is that when you click “ADD TO CART” the image that is shown on the cart page is the base white chair image.

I want the updated (configured) product image to be sent to the cart.

What I would like to happen is.

I create a hidden div on the product page. I will update the text in this div to the chairs configured image. What I think should happen is when the “ADD TO CART” button is clicked the text in this div is copied and replaces the img_url variable in .liquid.

I think that two .liquid pages will need to be edited. The product page and the cart page. However, if there is a way to do this without editing the .liquid pages I would be very interested to hear. I would love to have all my code on my one custom JS page but I don’t think this would be possible.

NOTE.
Please add some code saying if no div text use the default image. Not all pages will have a configurable product.

The updated image is a data image. I will not be adding this to the div. I will be adding a “normal” link. You can see this link in the console: console.log("img_url - " + my_img_url);
If I could use this var img_url and somehow send this to shopify, great (not use div text).

I’m using the standard “Debut” theme.

While I know that what I’m asking is possible I’m sorry if the way I have described above is not possible. Please feel free to point me in a better direction!

If you are available to hire as a contractor please let me know.

Have a good working solution, I will tip.

Thanks.

awarded to kostasx

Crowdsource coding tasks.

1 Solution

Winning solution

I would go with something along these lines in your myShoping.js. Paste this at the end of the script, right before the main $(window).on('load' ... wrapper closes:

if ( document.location.pathname === "/cart" ){

    var styleBaseURL = "https://digitaldraping.com/info/lab/myProductImages/_php/merge.php?myReturnType=1&myFolder=../&myQuality=92&myResize=400&myWidth=800&myHeight=1200&myBaseImageFolder=chair&myImageArray=bg.png,";
    var products = document.querySelector('form.cart').querySelectorAll('table tbody tr');
    products = Array.from(products);
    products.map((product)=>{
        window.poop = product;
        var style = product.querySelector("td.cart__meta .cart__meta-text").textContent.trim().replace(/\s/g,"");
        style = style.split(":");
        var seat = style[2];
        var legs = style[1].replace("Seat","");
        var imgSrc = styleBaseURL + legs + ".png," + seat + ".png&myFolderArray=bg,Legs,Seat&myUniqueName=bg-" + legs + "-" + seat;
        fetch(imgSrc)
        .then((res)=> res.text())
        .then((res)=> {
            console.log(imgSrc);
            $(product).find('td.cart__image-wrapper a img').remove();
            $(product).find('td.cart__image-wrapper a').append($(res).addClass('cart__image'));
        });
    });

}
Of course, the script needs some tweaking and could be further improved, but this is the general idea. Hope it helps.
kostasx 5 months ago
That is very cool! I will award you the bounty no other work required. I do have a question. Feel free to say you are not interested. 1. How "easy" would it be or even possible to also update the images when you click on the “CHECK OUT” button. Are you available to contact directly for coding?
Jacknumpty 5 months ago
Yes, It possible to do the same thing on the Checkout page too. I've sent you an email for contacting me.
kostasx 5 months ago