minicart | great way to improve your PayPal shopping cart integration | Ecommerce library

I am try to get my onClick to work however my when I click nothing happens and no error to give insight as to what the problem might be

I have been going in circles with this I have added an apply coupon field to mini-cart.php and am trying to get it to run without refreshing the whole page. Any suggestions would be amazing help.

functions:

I'm building ajax cart for my client's Shopify store with liquid-ajax-cart. Now I'm trying to add a progress bar that shows how far a user from the free shipping option. The bar is the .free-shipping-bar element within the .minicart__header.

The free shipping starts from $100 (free_shipping_threshold_price liquid variable) so I want the bar to be filled completely if the cart total is $100 or more.

If the cart total is less than $100 then I want to fill the bar accordingly (40% for $40, 50% for $50 etc.).

The HTML of the section updates as it should when a user clicks "add to cart" but the css ({% style %}) doesn't. Is possible to fix it somehow so that css code updates by ajax also?

What I'm trying to do is to is to open the minicart url in an iframe on a page so i can get the basket total from the cart. i've been able to do this, but when i try to target what's on the iframe i'm unable to do so. On the site when i console.log "pre" i do see that in the html collection the innerHTML does display what is outputted. Any idea how or if i would be able to target this?

I was trying out different options for devtool in webpack and irrespective of the options set, it always wraps my components inside eval function.

package.json (I can provide full JSON on request)

I'm trying to add functionality to my addToCart button located in ProductCard. I need it to be disabled once the cupcake has been added to my cart array. When removed via the removeItem/ clearCart in MiniCart I need the button to be enabled again. I've tried if else statements and tried adding all kinds of functionality that I've Google's but have yet to succeed. I'd really appreciate some help ^^

store.js

Below header slot configuration does not have any impact in the site. added below config in app.module.ts file, but footer config with slots:[] removes the footer section.

I am attempting to post 2 items to a shopping cart, in one click. I've built a form with hidden checkboxes that carry the relevant product attributes I need to do that. I have a loop going over the form's child checkboxes to pull that info and invoke the function for the post request.

The problem is that sometimes it does add both items (yay!) but sometimes it'll load only the first item and sometimes only the second item. There's no error code in the console for me to go off of so I'm wondering what I'm missing.

EDIT: 19 hours in. I'm thinking the issue is coming from the function that opens the cart that is firing when the first item is returned. Both of the calls are being return successfully but that code is interrupting it being added to the cart.

EDIT 2: This post describes the issue I'm having. I need to make one request and then move on to the next one. I think I'm going to have to build an array with the items from the form.

My JS

I've been trying to click a button using selenium but it keeps saying that the element isn't interactable even though it is visible on screen and I can manually click it. I've tried webdriverwait, implicitly wait and many other solutions but none seem to work. Please can anyone offer a solution. I've attached the buttons code and my own code.