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

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

2 个答案:

创建私人应用

创建基本的GraphQL请求

创建您的GraphQL请求