Add A Dropdown Menu to the Cart Page

[liambeauchamp]

Hello, 

As part of a new service I want to offer my customers, I want to add a drop down menu to my cart page so people can select a greetings card with their order. The dropdown menu will need to include a list of all the cards available and the price of each card. This price should then be added to the order total. 

I am using the Taste Theme and this is the website address: www.batchedcookies.co.uk. 

Can this be done? Any advice would be greatly appreciated.

Many thanks,

Liam

[comercioservice]

@liambeauchamp  hope you are well

Please go to

1) Online store

2) Themes -> Edit theme

3) Layout

4) Modify cart.liquid or cart-template.liquid and paste this code on the end

Modify cart.liquid or cart-template.liquid

<div class="cart-greeting-card">
  <label for="greeting-card">Add a Greeting Card:</label>
  <select id="greeting-card" name="greeting_card">
    <option value="">Select a card</option>
    {% for product in all_products %}
      {% if product.tags contains 'greeting-card' %}
        <option value="{{ product.id }}" data-price="{{ product.price }}">{{ product.title }} - {{ product.price | money }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <button id="add-greeting-card" type="button">Add to Cart</button>
</div>

<script>
  document.getElementById('add-greeting-card').addEventListener('click', function() {
    var select = document.getElementById('greeting-card');
    var productId = select.value;

    if (productId) {
      fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify({
          items: [{
            id: productId,
            quantity: 1
          }]
        })
      }).then(response => {
        return response.json();
      }).then(data => {
        location.reload(); // Refresh the cart page to show the updated cart
      }).catch((error) => {
        console.error('Error:', error);
      });
    } else {
      alert('Please select a greeting card.');
    }
  });
</script>
​

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[liambeauchamp]

Thank you so much for your detailed response, but unfortunately it didn't work. I added the code in the cart-drawer.liquid file as that was the closest to the two that you mentioned above, but I had no luck. If this is the wrong section to be adding it to, please do let me know.

Many thanks,

Liam