how to add a selection menu at the cart page?

[robbie123]

I want to add a drop down selection (choose a sales representative section), at the cart page. I have already added the front-end as a custom liquid in to the theme.

the question is, where do I add the javascript code in the backend so that when a customer checkout the info in the selection is saved?(part of the order info).

I have tried to add javascript code in cart-drawer.liquid(added inside of addeventlistener). but it didnt work, that the script didnt seem to get executed(tried console log )

<script>
  document.addEventListener('DOMContentLoaded', function () {
    console.log('Custom script is running starting.');
    
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return msie > 0 || trident > 0;
    }

    if (!isIE()) return;
    const cartSubmitInput = document.createElement('input');
    cartSubmitInput.setAttribute('name', 'checkout');
    cartSubmitInput.setAttribute('type', 'hidden');
    document.querySelector('#cart').appendChild(cartSubmitInput);
    document.querySelector('#checkout').addEventListener('click', function (event) {
      document.querySelector('#cart').submit();
    });


  // add sales person
    var checkoutButton = document.getElementById('CartDrawer-Checkout');
    
    checkoutButton.addEventListener('click', function(e) {
   
        e.preventDefault(); // Prevent immediate form submission

        var selectedSalesRep = document.getElementById('sales-rep').value;
        const selectedSalesRep = salesRepSelect.value;
        console.log('Selected Sales Representative:', selectedSalesRep);

        // Update cart attributes with the selected sales rep
        fetch('/cart/update.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'  // to avoid any CORS issues
            },
            body: JSON.stringify({
                attributes: {
                    salesRep: selectedSalesRep
                }
            })
        })
        .then(response => response.json())
        .then(data => {
            // Once cart attributes are updated, proceed to checkout
            document.getElementById('CartDrawer-Form').submit();
        })
        .catch(error => {
            console.error('Error updating cart attributes:', error);
            // Handle any errors here (e.g., display an error message to the user)
        });
    });
  });



</script>

[Made4uo-Ribe]

Hi @robbie123 

Seems like you have a Shopify 2.0 FREE themes. Try adding this to the cart.js or global.js under the Asset folder. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[robbie123]

Hi:

this is  a Dawn theme(free) Version 12.0.0

  in the cart.js file, there are two class, CartItems and  CartRemoveButton. did you mean add the event listener under the class CartItems?(under its constructor() )

the CartItems class looks like:

class CartItems extends HTMLElement {
  constructor() {
    super();
    this.lineItemStatusElement =
      document.getElementById('shopping-cart-line-item-status') || document.getElementById('CartDrawer-LineItemStatus');

    const debouncedOnChange = debounce((event) => {
      this.onChange(event);
    }, ON_CHANGE_DEBOUNCE_TIMER);

    this.addEventListener('change', debouncedOnChange.bind(this));
  }

  cartUpdateUnsubscriber = undefined;

//class functions ....

[Sachademar]

Hi Robbie123, 

did you get any solution for this?

thanks! 

[robbie123]

nop, I can't find any doc related to this