Shopify Setup

   <script>
 
 
      class YappybuyBuddy{
 
 
        constructor() {
 
          this.options={
            scriptUrl:"PUT-URL-FROM-SRC_ATTRIBUTE-HERE",
            token:"PUT-TOKEN_HERE ",
            sections:['cart-icon-bubble'']
          };
 
          var jsLink = document.createElement( "script" );
          jsLink.src = this.options.scriptUrl;
          jsLink.type = "text/javascript";
          jsLink.setAttribute('id', 'buddy');
          jsLink.setAttribute('type', 'module');
          jsLink.setAttribute('data-token', this.options.token);
          {% if customer %}
              jsLink.setAttribute('data-firstName', "{{customer.first_name}}");
              jsLink.setAttribute('data-lastName', "{{customer.last_name}}");
              jsLink.setAttribute('data-email', "{{customer.email}}");
          {% endif %}
          document.getElementsByTagName( "head" )[0].appendChild( jsLink );
 
          document.addEventListener("BuddyInitialized",this._connect.bind(this));
        }
 
        _connect(){
 
          Buddy.on("add_to_cart",this._cartAction.bind(this,'add_to_cart'));
          Buddy.on("add_coupon",this._cartAction.bind(this,'add_coupon'));
          Buddy.on("get_cart",this._cartAction.bind(this,'get_cart'));
          Buddy.on("delete_cart_item_full",this._cartAction.bind(this,'remove_cart_item'));
          Buddy.on("delete_cart_item",this._cartAction.bind(this,'decrement_cart_item'));
          Buddy.on("add_cart_item",this._cartAction.bind(this,'increment_cart_item'));
 
        }
 
        async _cartAction(action, e=null){
          console.log(action);
          console.log(e);
          console.log(arguments);
 
          let cart = await this.getCart();
 
 
          switch (action) {
            case 'add_to_cart':
              cart = await this.addToCart({id: e,quantity: 1});
              break;
            case 'add_coupon':
              cart = await this.updateCart({discount: e,sections:this.options.sections});
              break;
            case 'remove_cart_item':
            case 'decrement_cart_item':
            case 'increment_cart_item':
              if(e in cart){
                cart = await this.updateCart({updates:{[e]:(action == 'remove_cart_item' ? 0 : cart[e]['qty'] + (action == 'decrement_cart_item' ? -1 : 1))},sections:this.options.sections});
              }
              break;
            default:
 
          }
          var event = new CustomEvent("cart_loaded", {detail:{items:Object.values(cart)}});
          Buddy.emit(event);
        }
 
        async addToCart(addon){
          const result = await fetch(window.Shopify.routes.root + 'cart/add.js', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    items: [addon],
                    sections:this.options.sections
                })
            })
            .then(response => {
                return response.json();
            })
            .then(data => {
               if (data.status>=300) {
                  throw new Error(data.message);
               }
               return data;
            })
            .then(data => {
               if (data.errors) {
                  throw new Error(data.errors);
               }
               return data;
            })
            .then((data) => {
              this.updateSections(data);
              return data;
            })
             .then(
              data =>{
                  return this.prepareCartData(data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
 
        async updateCart(updates){
          const result = await fetch(window.Shopify.routes.root + 'cart/update.js',
            {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(updates)
            })
            .then(response => {
              return response.json();
            })
            .then(data => {
               if (data.errors) {
                  throw new Error(data.errors);
               }
               return data;
            })
            .then((data) => {
              this.updateSections(data);
              return data;
            })
            .then(
              data =>{
                return this.prepareCartData(data);
            }
          )
          .catch((error) => {
            console.error('Error:', error);
          });
 
          return result;
        }
 
        async getCart(){
 
          const result = await fetch(window.Shopify.routes.root + 'cart.js')
          .then(response => {
            return response.json();
          })
          .then(
            data =>{
              return this.prepareCartData(data);
            }
          )
          .catch((error) => {
            console.error('Error:', error);
          });
 
          return result;
 
        }
 
        prepareCartData(data){
          let cartItems={};
          data.items.forEach(item => {
            console.log(item);
            cartItems[item.id]={
              name:item.product_title,
              sku:item.product_id,
              qty:item.quantity,
              itemId:item.id,
              priceInclTax:item.final_price / 100,
              discountedPrice:item.discounted_price / 100,
              thumbnail: item.image,
              url:item.url,
              attributes: item.product_has_only_default_variant?null:item.options_with_values
            };
          });
 
          console.log(cartItems);
 
          return cartItems;
        }
 
        updateSections(data){
            const sectionIds = ['cart-icon-bubble'];
            Object.entries(data.sections).forEach(([sectionId,content])=>{
                const html = new DOMParser().parseFromString(content, 'text/html');
                const targetElement = document.querySelector(`#${sectionId}`);
                if (targetElement && html) {
                    targetElement.innerHTML=html.body.innerHTML;
                }
            });
        }
 
      }
 
      new YappybuyBuddy();
 
 
    </script>