在 Shopify 上获取具有相同产品标题的所有产品变体

Question

原来如此。即使我对如何解释这一点感到困惑。

情况：

我们店里的所有产品，无论是同款产品，都只有一个颜色变体。所以意思是，同一产品的所有颜色都是分开的（例如：木兰有9种不同的颜色，所以我们将每种颜色列为一个产品）。如果你明白我的意思。像这样：http://prntscr.com/qnwygd

我需要什么：

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

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

这是我目前拥有的代码。

 {% 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 %}

Answer 1

您可以为此使用 Storefront 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"
                      }
                    ]
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

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

---

创建私有应用

您需要在您的商店中创建一个私有应用程序：https://YOUR_STORE.myshopify.com/admin/apps/private

并输入私有应用名称：

之后，您需要选中位于应用屏幕底部的 Allow this app to access your storefront data using the Storefront API 框并选中 Read products, variants, and collections 复选框。

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

重要的部分是Storefront access token。您将需要此令牌才能发出 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').then(res => console.log(res))

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

就是这样。

Answer 2

如果在 Shopify 后台中将相同样式的每种不同颜色创建为单独的产品，而不是作为一种产品的变体，那么您似乎可以通过构建一个简单的循环：

<!-- 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 %}