1

我正在寻找产品的两个自定义属性，其中第二个自定义属性具有唯一选项，具体取决于所选的第一个属性。

我的特殊情况是销售具有许多不同格式和尺寸的艺术品，其中尺寸的价格将根据选择的格式而有所不同（即：印刷、裱框、帆布等）。

显而易见的替代方法是为每种格式设置不同的产品列表，而不是双下拉菜单。但是，这不是我想要做的理想情况。

这是文档中为单个选择框和自定义属性提供的代码：

<label>Frame color</label>
<select id="frame_color">
  <option value="Black">Black</option>
  <option value="Brown">Brown</option>
  <option value="Gold">Gold</option>
</select>
<button
  id="starry-night"
  class="snipcart-add-item"
  data-item-id="starry-night"
  data-item-price="79.99"
  data-item-url="/paintings/starry-night"
  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."
  data-item-image="/assets/images/starry-night.jpg"
  data-item-name="The Starry Night"
  data-item-custom1-name="Frame color"
  data-item-custom1-options="Black|Brown|Gold"
  data-item-custom2-name="Gift note">
  Add to cart
</button>
<script>
const button = document.querySelector('#starry-night')
const select = document.querySelector('#frame_color')
select.addEventListener('change', () => {
  // Sets the default frame color when adding the item
  button.setAttribute("data-item-custom1-value", select.value)
})
</script>
4

4 回答 4

0

我相信你可以这样做data-item-custom1-value：

data-item-custom1-name="Color"
data-item-custom1-options="Blue|Dark Gray|Light Gray"
data-item-custom1-value="Dark Gray"

然后使用Javascript将data-item-custom1-value选择更改为选择的值。

完整示例

<div>
    <label for="color">Color</label>
    <select name="color" id="color">
        <option value="Blue">Blue</option>
        <option value="Dark Gray">Dark Gray</option>
        <option value="Light Gray">Light Gray</option>
    </select>
</div>

<button id="poster-cart-btn" class="snipcart-add-item btn btn-dark"
data-item-id="1"
data-item-price="9.95"
data-item-url="/"
data-item-name="Poster"
data-item-image="img/poster.png"
data-item-description="A pretty poster"
data-item-custom1-name="Color"
data-item-custom1-options="Blue|Dark Gray|Light Gray"
data-item-custom1-value="Blue">
    Add to cart
</button>
    
<script type="text/javascript">
    window.addEventListener('load', function() {
        document.getElementById('color').onchange = function() {
            const val = document.getElementById('color').value;
            document.getElementById('poster-cart-btn').setAttribute('data-item-custom1-value', val);
        }
    });
</script>
于 2021-02-15T06:47:28.687 回答
0

我在 js 中不是很好，无论如何要给 .setAttribute 超过 1 个值来改变价格？非常感谢 

 <select id="size-2-2">
    <option value="8x8 ($90)">8x8 ($90)</option>
    <option value="12x12 ($170)">12x12 ($170)</option>
    <option value="20x20 ($300)">20x20 ($300)</option>
</select>
<select id="color-2-3">
    <option value="color_1 ($90)">8x8 ($90)</option>
    <option value="color_2 ($170)">12x12 ($170)</option>
    <option value="color_3 ($300)">20x20 ($300)</option>
</select>

<button id="add-to-cart-2-2" class="snipcart-add-item"
    data-item-id="product-2-2"
    data-item-price="0.00"
    data-item-url="https://example.com"
    data-item-description="Product 2 type 2 description"
    data-item-image="/img.jpg"
    data-item-name="Product 2 type 2"
    data-item-custom1-name="Size"
    data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
    data-item-custom1-value="8x8 ($90)"
    data-item-custom1-required="true" 
    data-item-custom2-name="Color"
    data-item-custom2-options="color_1 ($90)[+90.00]|color_2 ($170)[+170.00]|color_3($300)[+300.00]"
    data-item-custom2-value="color_1 ($90)"
    data-item-custom2-required="true">Add To Cart
</button>

...
addToCart.setAttribute("data-item-custom1-value", size.value);
addToCart.setAttribute("data-item-custom2-value", size.value);
...

于 2021-12-09T18:11:00.157 回答
0

这可以通过在幕后拥有多个产品来完成，但让用户觉得只有一个产品（每个项目）。然后，根据第一个选择框更改哪些产品（和自定义属性选择框）可见。

我是新手，所以可能有一种更简单的方法来完成此操作，但这是我想出的并且效果很好。另外，我在这段代码中使用了一个小 jQuery，所以它需要修改才能在没有它的情况下工作。

<style>
.hidden{
  display:none;
}
</style>

<select id="item-1">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
</select>

<div id="type-1-1" class="item-content-1">
    <select id="size-1-1">
        <option value="8x8 ($50)">8x8 ($50)</option>
        <option value="12x12 ($100)">12x12 ($100)</option>
        <option value="20x20 ($200)">20x20 ($200)</option>
    </select>
    <button id="add-to-cart-1-1" class="snipcart-add-item"
        data-item-id="product-1-1"
        data-item-price="0.00"
        data-item-url="https://example.com"
        data-item-description="Product 1 type 1 description"
        data-item-image="/img.jpg"
        data-item-name="Product 1 type 1"
        data-item-custom1-name="Size"
        data-item-custom1-options="8x8 ($50)[+50.00]|12x12 ($100)[+100.00]|20x20 ($200)[+200.00]"
        data-item-custom1-value="8x8 ($50)"
        data-item-custom1-required="true">Add To Cart
    </button>
</div>

<div id="type-1-2" class="item-content-1 hidden">
    <select id="size-1-2">
        <option value="8x8 ($90)">8x8 ($90)</option>
        <option value="12x12 ($170)">12x12 ($170)</option>
        <option value="20x20 ($300)">20x20 ($300)</option>
    </select>
    <button id="add-to-cart-1-2" class="snipcart-add-item"
        data-item-id="product-1-2"
        data-item-price="0.00"
        data-item-url="https://example.com"
        data-item-description="Product 1 type 2 description"
        data-item-image="/img.jpg"
        data-item-name="Product 1 type 2"
        data-item-custom1-name="Size"
        data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
        data-item-custom1-value="8x8 ($90)"
        data-item-custom1-required="true">Add To Cart
    </button>
</div>

<select id="item-2">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
</select>

<div id="type-2-1" class="item-content-2">
    <select id="size-2-1">
        <option value="8x8 ($50)">8x8 ($50)</option>
        <option value="12x12 ($100)">12x12 ($100)</option>
        <option value="20x20 ($200)">20x20 ($200)</option>
    </select>
    <button id="add-to-cart-2-1" class="snipcart-add-item"
        data-item-id="product-2-1"
        data-item-price="0.00"
        data-item-url="https://example.com"
        data-item-description="Product 2 type 1 description"
        data-item-image="/img.jpg"
        data-item-name="Product 2 type 1"
        data-item-custom1-name="Size"
        data-item-custom1-options="8x8 ($50)[+50.00]|12x12 ($100)[+100.00]|20x20 ($200)[+200.00]"
        data-item-custom1-value="8x8 ($50)"
        data-item-custom1-required="true">Add To Cart
    </button>
</div>

<div id="type-2-2" class="item-content-2 hidden">
    <select id="size-2-2">
        <option value="8x8 ($90)">8x8 ($90)</option>
        <option value="12x12 ($170)">12x12 ($170)</option>
        <option value="20x20 ($300)">20x20 ($300)</option>
    </select>
    <button id="add-to-cart-2-2" class="snipcart-add-item"
        data-item-id="product-2-2"
        data-item-price="0.00"
        data-item-url="https://example.com"
        data-item-description="Product 2 type 2 description"
        data-item-image="/img.jpg"
        data-item-name="Product 2 type 2"
        data-item-custom1-name="Size"
        data-item-custom1-options="8x8 ($90)[+90.00]|12x12 ($170)[+170.00]|20x20 ($300)[+300.00]"
        data-item-custom1-value="8x8 ($90)"
        data-item-custom1-required="true">Add To Cart
    </button>
</div>

<script>
    var item_count = 2; //number of items in shop
    var type_count = 2; //number of type subdivisions
    var i = 1;
    for (i = 1; i <= item_count; i++) {
        const type_select = document.querySelector('#item-' + i);
        const count = i
        type_select.addEventListener('change', () => {
            $('.item-content-' + count).addClass("hidden");
            $('#type-' + count + "-" + type_select.value).removeClass("hidden");
        });
        var ii = 1;
        for (ii = 1; ii <= type_count; ii++) {
            const addToCart = document.querySelector('#add-to-cart-' + i + "-" + ii);
            const size = document.querySelector('#size-' + i + "-" + ii);
            size.addEventListener('change', () => {
                addToCart.setAttribute("data-item-custom1-value", size.value);
            });
        };
    };
</script>
于 2020-08-30T15:25:17.547 回答
0

非常感谢@justin，我修改了你的肮脏方式，它对我来说很好用！现在，snipcart 通过一个按钮从选择字段中获取所有值。我知道有更好的方法来加载“window.addEventListener”x 次。随意发布更好，更简单的解决方案。

<div>
    <label for="color-1">Color 1</label>
    <select name="Color select 1" id="color_1">
        <option value="color_1_1">0</option>
        <option value="color_1_2">+11</option>
        <option value="color_1_3">+111</option>
    </select>
    
    <label for="color-2">Color 2</label>
    <select name="Color select 2" id="color_2">
        <option value="color_2_1">0</option>
        <option value="color_2_2">+12</option>
        <option value="color_2_3">+112</option>
    </select>
    
    <label for="color-3">Color 3</label>
    <select name="Color select 3" id="color_3">
        <option value="color_3_1">0</option>
        <option value="color_3_2">+13</option>
        <option value="color_3_3">-113</option>
    </select>
    
</div>

<button id="poster-cart-btn" class="snipcart-add-item"
      data-item-id="1"
      data-item-price="0.00"
      data-item-url="/"
      data-item-name="Poster"
      data-item-image="img/poster.png"
      data-item-description="A pretty poster"
      data-item-custom1-name="Color 1"
      data-item-custom1-options="color_1_1|color_1_2[+11.00]|color_1_3[+111.00]"
      data-item-custom1-value="color_1_1"
      data-item-custom2-name="Color 2"
      data-item-custom2-options="color_2_1|color_2_2[+12.00]|color_2_3[+112.00]"
      data-item-custom2-value="color_2_1"
      data-item-custom3-name="Color 3"
      data-item-custom3-options="color_3_1|color_3_2[+13.00]|color_3_3[+113.00]"
      data-item-custom3-value="color_3_1">
      Add to cart
</button>
    
<script type="text/javascript">
    window.addEventListener('load', function() {
    
        document.getElementById('color_1').onchange = function() {
            const val = document.getElementById('color_1').value;
            document.getElementById('poster-cart-btn').setAttribute('data-item-custom1-value', val);
        }
         document.getElementById('color_2').onchange = function() {
            const val = document.getElementById('color_2').value;
            document.getElementById('poster-cart-btn').setAttribute('data-item-custom2-value', val);
        }
        
         document.getElementById('color_3').onchange = function() {
            const val = document.getElementById('color_3').value;
            document.getElementById('poster-cart-btn').setAttribute('data-item-custom3-value', val);
        }
    });
</script>

于 2021-12-09T19:48:37.270 回答