how to change from a select menu to buttons

I have a shopping cart button integrated using snipcart. I've created a select menu with product options and I have some javascript that ties the selected option to the button so that the correct option is added to the cart when clicking "add to cart".

I would like to use buttons instead of a dropdown select menu. I'm not sure how to change my code.

<select id="color">
  <option>red</option>
  <option>blue</option>
  <option>yellow</option>
</select>

<button 
  id="add-button" 
  class="snipcart-add-item 
  data-item-name="shirt"
  data-item-custom1-name="color" 
  data-item-custom1-options="red|blue|yellow">
  Add to cart
</button>

<script>
  $('#color').change(function() {
    $('#add-button').attr('data-item-custom1-value', $(this).val());
  });
</script>

Solution

If you want to update the item before adding it to the cart (you want the color option on your product page instead of in the cart), you can create multiple buttons and update the data-item-custom1-value on click.

<button class="options" data-value="red">Red</button>
<button class="options" data-value="blue">Blue</button>
<button class="options" data-value="green">Green</button>

const addButton = document.querySelector('#add-button');

document.querySelectorAll('.options').forEach(option => {
  option.addEventListener('click', () => {
    const value = option.getAttribute('data-value')
    addButton.setAttribute('data-item-custom1-value', value)
  })
})

If you want to replace the buttons inside the cart with buttons, this is not possible at the moment, unfortunately. That being said, I will definitively add custom field overrides to our backlog!

You can email us at support@snipcart.com if you have further questions!
Cheers

Lea - Developer at Snipcart