如何从 select 菜单更改为按钮

Question

我使用 snipcart 集成了一个购物车按钮。我创建了一个包含产品选项的 select 菜单，并且我有一些 javascript 将 selected 选项与按钮相关联，以便在单击“添加”时将正确的选项添加到购物车到购物车。

我想使用按钮而不是下拉 select 菜单。我不确定如何更改我的代码。

<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>

Answer 1

如果您想在将商品添加到购物车之前对其进行更新（您希望在产品页面而不是购物车中使用颜色选项），您可以创建多个按钮并更新 data-item-custom1-value单击时。

<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)
  })
})

如果你想用按钮替换购物车内的按钮，很遗憾，目前这是不可能的。话虽这么说，我肯定会在我们的积压工作中添加自定义字段覆盖！

如果您还有其他问题，可以发送电子邮件至 support@snipcart.com！
干杯

Lea - Snipcart 的开发人员

如何从 select 菜单更改为按钮

how to change from a select menu to buttons

html

javascript

snipcart