shopify 新增页面选择多标签组对应不同的SKU单独区分

新增自定义块，然后引用即可：

<div class="product-selector" data-section-id="{{ section.id }}">
  <div class="tabs">
    {% for i in (1..5) %}
      {% assign title_setting = 'tab_' | append: i | append: '_title' %}
      {% if section.settings[title_setting] != blank %}
        <button class="tab-button {% if forloop.first %}active{% endif %}" data-tab="{{ i }}">
          {{ section.settings[title_setting] }}
        </button>
      {% endif %}
    {% endfor %}
  </div>

  {% for i in (1..5) %}
    {% assign products_setting = 'tab_' | append: i | append: '_products' %}
    {% if section.settings[products_setting] != blank %}
      <div class="tab-content {% if forloop.first %}active{% endif %}" data-tab-content="{{ i }}">
        <div class="products-grid">
          {% for product in section.settings[products_setting] %}
            {% for variant in product.variants %}
              <div class="product-card" data-product-id="{{ product.id }}" data-variant-id="{{ variant.id }}">
                <img 
                  src="{{ variant.featured_image | default: product.featured_image | img_url: '300x300' }}" 
                  alt="{{ product.title }} - {{ variant.title }}"
                  class="product-image"
                  loading="lazy"
                >
                
                <h3 class="product-title">{{ product.title }}</h3>
                <div class="product-variant-title">{{ variant.title }}</div>
                <div class="product-price">${{ variant.price | money_without_currency }} USD</div>
                
                <div class="quantity-selector">
                  <button class="quantity-button" onclick="updateQuantity(this, -1)">-</button>
                  <input type="number" class="quantity-input" value="0" min="0" data-price="{{ variant.price }}" readonly>
                  <button class="quantity-button" onclick="updateQuantity(this, 1)">+</button>
                </div>
              </div>
            {% endfor %}
          {% endfor %}
        </div>
      </div>
    {% endif %}
  {% endfor %}

  <div class="cart-container">
    <div class="cart-content">
      <div class="cart-items"></div>
      <div class="cart-summary">
        <div class="cart-total">总计: $<span class="total-amount">0.00</span></div>
        <div class="cart-buttons">
          <button class="cart-button secondary" onclick="addToCart()">加入购物车</button>
          <button class="cart-button primary" onclick="buyNow()">立即购买</button>
        </div>
      </div>
    </div>
  </div>

  <div class="discount-note">
    <h3>批发折扣</h3>
    <table class="discount-table">
      <tr>
        <th>数量</th>
        <th>折扣</th>
      </tr>
      <tr>
        <td>任意2件</td>
        <td>10% OFF</td>
      </tr>
      <tr>
        <td>3件或以上</td>
        <td>20% OFF</td>
      </tr>
    </table>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 标签切换功能
  const tabs = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');
  let cartItems = [];
  const cartContainer = document.querySelector('.cart-container');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const tabId = tab.dataset.tab;
      
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      
      tabContents.forEach(content => {
        if (content.dataset.tabContent === tabId) {
          content.classList.add('active');
        } else {
          content.classList.remove('active');
        }
      });
    });
  });

  window.updateQuantity = function(button, change) {
    const input = button.parentElement.querySelector('.quantity-input');
    const card = button.closest('.product-card');
    let value = parseInt(input.value || 0);
    
    value += change;
    if (value < 0) value = 0;
    input.value = value;

    const productData = {
      id: card.dataset.productId,
      variantId: card.dataset.variantId,
      title: card.querySelector('.product-title').textContent,
      variant: card.querySelector('.product-variant-title').textContent,
      price: parseFloat(input.dataset.price),
      image: card.querySelector('.product-image').src
    };

    updateCart(productData, value);
  };

  function updateCart(productData, quantity) {
    const existingItemIndex = cartItems.findIndex(item => item.variantId === productData.variantId);

    if (quantity === 0 && existingItemIndex !== -1) {
      cartItems.splice(existingItemIndex, 1);
    } else if (quantity > 0) {
      if (existingItemIndex !== -1) {
        cartItems[existingItemIndex].quantity = quantity;
      } else {
        cartItems.push({
          ...productData,
          quantity: quantity
        });
      }
    }

    updateCartDisplay();
  }

  function updateCartDisplay() {
    const cartItemsContainer = document.querySelector('.cart-items');
    const totalAmount = document.querySelector('.total-amount');

    // 显示/隐藏购物车
    if (cartItems.length > 0) {
      cartContainer.style.display = 'block';
    } else {
      cartContainer.style.display = 'none';
    }

    // 更新购物车内容
    cartItemsContainer.innerHTML = '';
    let total = 0;
    const itemCount = cartItems.reduce((acc, item) => acc + item.quantity, 0);
    let discount = 0;

    if (itemCount >= 3) {
      discount = 0.2;
    } else if (itemCount >= 2) {
      discount = 0.1;
    }

    cartItems.forEach(item => {
      const itemPrice = item.price * item.quantity;
      total += itemPrice;

      const itemElement = document.createElement('div');
      itemElement.classList.add('cart-item');
      itemElement.innerHTML = `
        <img src="${item.image}" alt="${item.title}" class="cart-item-image">
        <div class="cart-item-info">
          <div class="cart-item-title">${item.title}</div>
          <div class="cart-item-variant">${item.variant}</div>
          <div class="cart-item-price">$${item.price.toFixed(2)} x ${item.quantity}</div>
        </div>
      `;
      cartItemsContainer.appendChild(itemElement);
    });

    const finalTotal = total * (1 - discount);
    totalAmount.textContent = finalTotal.toFixed(2);
  }

  window.addToCart = function() {
    if (cartItems.length > 0) {
      const formData = {
        items: cartItems.map(item => ({
          id: item.variantId,
          quantity: item.quantity
        }))
      };

      fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(data => {
        // 刷新购物车小组件或显示成功消息
        window.location.href = '/cart';
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  };

  window.buyNow = function() {
    if (cartItems.length > 0) {
      const formData = {
        items: cartItems.map(item => ({
          id: item.variantId,
          quantity: item.quantity
        }))
      };

      fetch('/cart/clear.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(() => {
        return fetch('/cart/add.js', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formData)
        });
      })
      .then(response => response.json())
      .then(data => {
        window.location.href = '/checkout';
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  };

  // 初始化购物车显示
  updateCartDisplay();
});
</script>