1

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>
Charles Ouellet
  • 6,338
  • 3
  • 41
  • 57
fred
  • 485
  • 2
  • 7
  • 23

1 Answers1

1

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

lea
  • 56
  • 3
  • @lea thanks for the reply, I'm using the statamic cms and looping through options which will be determined by user input. So it wouldn't actually be a fixed red blue green or whatever it would be any options the user chooses in the CMS. The select menu version I posted worked well in that it didn't reference the specific options, can that be done with the buttons? I guess using 'this' – fred Jan 27 '21 at 02:04
  • Hi fred, I just updated the code snippet. This should fit your needs. – lea Jan 27 '21 at 22:02