在Shopify上获取具有相同产品名称的所有产品变体

就是这样。就连我都不知道该如何解释这一点

情况：

我们店里的所有产品，无论是同一款式的产品，每个都只有一种颜色。因此，同一产品的所有颜色都是分开的。例如：木兰有9种不同的颜色，所以我们将每种颜色列为一种产品。如果你明白我的意思。像这样：

我需要的是：

我们希望向所有具有相同名称/样式的产品显示所有可用的变体/颜色。像这样：

问题: 我们怎样才能做到这一点？请给我一些想法。如果您有任何问题/困惑，请随时提问

这是我目前拥有的代码

 {% capture form_id %}AddToCartForm-{{ section_id }}{% endcapture %}
{% form 'product', product, id: form_id, class: 'product-single__form' %}

   {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
    {% for option in product.options_with_values %}
      {% assign hide = false %}
      {% if option.name == 'color' and product.metafields.color.value %}
        {% assign hide = true %}
      {% endif %}
      {% if settings.variant_type == 'button' %}
        {% include 'variant-button', section_id: section_id, option_drop: option, hide: hide %}
      {% else %}
        {% include 'variant-dropdown', section_id: section_id, hide: hide %}
      {% endif %}
    {% endfor %}
  {% endunless %}

 <!--  {% comment %}
    [Custom Feature] Color swatches
  {% endcomment %}
  {% if product.metafields.color.value %}
    {% assign product_types = product.type | split: ',' %}
    {% assign product_type = product_types[3] | handle %}
    {% comment %} The most specific hierarchy = fourth field in product type {% endcomment %}
    {% if collections[product_type] %}
      <div class="color-swatches">
        <label class="variant__label">Colors</label>
        {% include 'swatch' with product_type %}
      </div>
    {% endif %}
  {% endif %}-->

  <select name="id" id="ProductSelect-{{ section_id }}" class="product-single__variants no-js">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %}
          selected="selected" {% endif %}
          value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}
  </select>

  {% if settings.quantity_enable %}
    <div class="product__quantity product__quantity--{{ settings.variant_type }} js-qty">
      <label for="Quantity-{{ section_id }}">{{ 'products.product.quantity' | t }}</label>
      <input type="number" hidden="hidden" id="Quantity-{{ section_id }}" name="quantity" value="1" min="1" class="js-qty__fallback">
    </div>
  {% endif %}

<!--   <div class="rte">
    <div class="product-outofstock-message">
      {{ 'products.product.outofstock_email_notify_html' | t }}
    </div>
  </div> -->

  {% if settings.enable_payment_button %}
    <div class="payment-buttons">
  {% endif %}

    <button
      {% if product.empty? %}type="button"{% else %}type="submit"{% endif %}
      name="add"
      id="AddToCart-{{ section_id }}"
      class="{% if settings.enable_payment_button %}btn--tertiary{% else %}btn{% endif %} btn--full add-to-cart"
      {% unless current_variant.available %} disabled="disabled"{% endunless %}>
      <span id="AddToCartText-{{ section_id }}">
        {% if current_variant.available %}
          {{ 'products.product.add_to_cart' | t }}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </button>
<!--     ADDITIONAL ADD TO WISHLIST    -->

      <div style="display: flex; flex-wrap: wrap">
        <div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}" style="outline:none;margin-top:15px; border:1px solid black;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%"></div>
        <a onclick="justClick()" class="btn--secondary update-cart share-this-item" style="margin-top:15px; border:none;font-weight:100;flex-basis:0;flex-grow:1;max-width:50%">
          <span>
            Or, share this item
          </span>
        </a>
      </div>
      <script type="text/javascript">
        function justClick(){
          document.getElementById("ztb-sb-9abf1166-widget").style.display="block !important"
        }
      </script>
<!--  END -->


    {% if settings.enable_payment_button %}
      {{ form | payment_button }}
    {% endif %}

  {% if settings.enable_payment_button %}
    </div>
  {% endif %}
{% endform %}

---

您可以使用店面GraphQL请求进行此操作

{
    products(first: 40, query: "title:Mulan"){
    edges {
      node {
        handle
        variants(first: 1) {
          edges {
            node {
              selectedOptions{
                name
                value
              }
            }
          }
        }
      }
    }
  }
}

回答如下：

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "handle": "mulan",
            "variants": {
              "edges": [
                {
                  "node": {
                    "selectedOptions": [
                      {
                        "name": "Color",
                        "value": "White"
                      }
                    ]
                  }
                }
              ]
            }
          }
        },
        {
          "node": {
            "handle": "mulan-1",
            "variants": {
              "edges": [
                {
                  "node": {
                    "selectedOptions": [
                      {
                        "name": "Color",
                        "value": "Black"
                      }
                    ]
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

如果您不知道如何使用它，我将一步一步地提供说明

创建私人应用程序 您需要在商店中创建一个私人应用程序：

然后输入私人应用程序名称：

之后，您需要选中“允许此应用使用应用屏幕底部的店面API访问店面数据”框，并选中“读取产品、变体和集合”复选框

保存应用程序后，您将看到以下内容：

其中重要的部分是店面访问令牌。您将需要此令牌来进行GraphQL请求

创建基本GraphQL请求 发出一个基本GraphQL请求，以测试这是否有效，例如：

fetch('/api/graphql',{
  method: 'POST',
  headers: {
      'X-Shopify-Storefront-Access-Token': 'ENTER YOUR STOREFRONT ACCESS TOKEN HEER',
      'Content-Type': 'application/graphql',
  },
  body: `query {
    shop {name}
  }`
}).then(res => res.json()).then(data => {
  console.log(data)
})

它应该返回如下内容：

{
  "data": {
    "shop": {
      "name": "YOUR STORE NAME"
    }
  }
}

创建GraphQL请求 让我们创建一个函数，您可以在其中传递产品标题和我们生成的令牌：

function getProducts(title, token) {
  return fetch('/api/graphql',{
    method: 'POST',
    headers: {
        'X-Shopify-Storefront-Access-Token': `${token}`,
        'Content-Type': 'application/graphql',
    },
    body: `query {
      products(first: 40, query: "title:${title}"){
      edges {
        node {
          handle
          variants(first: 1) {
            edges {
              node {
                selectedOptions{
                  name
                  value
                }
              }
            }
          }
        }
      }
    }
  }`
  }).then(res => res.json())
}

然后我们这样调用函数：

getProducts'Mulan'，'Your Access Token'.thenres=>console.logres

您将获得一个JS对象，其中包含一组项目及其句柄以及第一个变量选项名称和值

---

仅此而已。

如果同一样式的不同颜色在Shopify admin中创建为一个单独的产品，而不是一个产品的变体，那么您似乎可以通过构建一个简单的循环来实现您的目标：

<!-- Replace ".all" below with the name of the associated collection -->
{% assign collection = collections.all %}
<!-- This creates a variable to restrict the loop to return products with the same name as the product on the page visited -->
{% assign productName = product.title %}

{% for product in collection.products %}
  {% if product.title == productName %}
    <!-- Your HTML elements go here, for example the featured image of each product -->
  {% endif %}
{% endfor %} 

---

嗨，滴滴。非常感谢你。我想试试这个解决方案。但是，在哪里可以添加这些函数？我在哪里创建GraphQL请求？@Anaiah这是Javascript代码，所以在你的js文件中。这应该可以工作，但情况是，一旦我单击颜色样本变量，它也应该加载产品。