如何從 select 菜單更改為按鈕

Question

我有一個使用snipcart集成的購物車按鈕。 我創建了一個帶有產品選項的 select 菜單，並且我有一些 javascript 將所選選項與按鈕聯系起來，以便在單擊“添加到購物車”時將正確的選項添加到購物車中。

我想使用按鈕而不是下拉 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 聯系我們 email！
干杯

Lea - Snipcart 的開發人員