Hi all,
I am working with a client and we are trying to figure out how to display the selected product variant to the end-user in both the cart modal and checkout page, similar to this Figma mockup:
(I apologize for needing to use imgur links; for some reason it wouldn’t let me upload images directly to this form)
https://imgur.com/a/NCdJ9Db
This is the custom code we currently have that was set up by his previous developer, which iterates through every item in the cart and populates a list, and then should remove the “hide” class from the ul that holds the variant data:
$(".w-commerce-commercecheckoutorderitem").each((index, element) => {
let productdiv = $(element);
let sku = productdiv.find(".product_sku").text();
let price = getNumber(productdiv.find(".checkout-order-price").text());
let heading = productdiv.find(".w-commerce-commerceboldtextblock").text();
let product_brand = productdiv.find(".product_brand").text();
let product_type = productdiv.find(".product_type").text();
totalOrder.push({
item_name: heading,
item_id: sku,
price: price,
item_category: product_type,
item_brand: "Zeitlin’s Delicatessen",
index:index+1,
item_variant: "",
});
productdiv.find(".w-commerce-commercecheckoutorderitemoptionlist").removeClass("hide");
});
This specific snippet of code is only on the checkout page and should run upon page load; The initial array population seems to work, however it is the last line that seems to have no effect. I have also tried iterating through all the items a second time, specifically to find this ul but that also did not work.
Lastly, whenever I tried to print out the ul from every item in the cart, it would only ever return what I assume is the first item, without the others. I used this code after the above code block to do this:
let allItemVariantLists = $(".w-commerce-commercecheckoutorderitemoptionlist");
console.log(allItemVariantLists);
With this being the output:
https://imgur.com/a/vIA7piF
The expected output should have been 4 instances of the ul, and to top it off, whenever I clicked the node in the circled area (>0: ul.w-commerce…), the messages indicated by the red arrows popped up, which I assume means the node no longer exists.
Does anyone have any idea what could be causing this and how we can solve it?
Thanks!!