时间戳

首页 > 解决方案 > 如何从选择菜单更改为按钮

javascript - 如何从选择菜单更改为按钮

问题描述

我有一个使用snipcart集成的购物车按钮。我创建了一个带有产品选项的选择菜单，并且我有一些 javascript 将所选选项与按钮联系起来，以便在单击“添加到购物车”时将正确的选项添加到购物车中。

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

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

标签： javascripthtmlsnipcart

解决方案

如果您想在将商品添加到购物车之前更新商品（您希望产品页面上的颜色选项而不是购物车中的颜色选项），您可以创建多个按钮并在点击时更新 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 的开发人员

推荐阅读