Get all product variant with the same Product Title on Shopify

Anaiah
January 15, 2020
152 views
0 votes
2 Answers

So, it’s like this. Even I am confused about how to explain this.

Situation:

All the products in our store regardless if it is the same styled product has only one Color Variant each. So meaning, all colors of the same product are separated (example: Mulan has 9 different colors, so we have listed each color as one product). If you get what I mean. Like this: http://prntscr.com/qnwygd

What I need:

We wanted to show all available variants/colors to all products with the same name/style. Like this: http://prntscr.com/qnwzf2

Question:
How do we get to do this? Please give me some ideas. If you have any questions/confusion, please don’t hesitate to ask.

Here’s the code I currently have.

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

Tags: shopify shopify-template

Answers

You can use a Storefront GraphQL request for this.

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

The response will be something like this:

{
  "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"
                      }
                    ]
                  }
                }
              ]
            }
          }
        }
      ]
    }
  }
}

I will provide a description step by step if you are not aware how to use it.

Create a Private App

You need to create a Private App located in your store: https://YOUR_STORE.myshopify.com/admin/apps/private

And enter the Private app name:

After that you need to check the box Allow this app to access your storefront data using the Storefront API located to the bottom of the app screen and check the Read products, variants, and collections checkbox.

After you save the app you will see the following:

Where the important part is the Storefront access token. You will need this token in order to make GraphQL requests.

Create a basic GraphQL request

Make a basic GraphQL request in order to test if this works, for example:

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

It should return something like so:

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

Create your GraphQL request

Lets create a function in which you can pass the product title and the token we generated:

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())
}

Then we call the function like so:

getProducts('Mulan', 'Your Access Token').then(res => console.log(res))

And you will get a JS object with array of items with their handle and the first variant option name and value.

That’s all.

- RyanPatrickMurphy
- January 22, 2020 at 5:51 am
- 0 votes
0
If each different color of the same style was created in the Shopify admin as an individual product, rather than as variants of one product, then it seems like you’d be able to achieve what you’re seeking by constructing a simple loop:
```

{% assign collection = collections.all %}

{% assign productName = product.title %}

{% for product in collection.products %}
  {% if product.title == productName %}
    
  {% endif %}
{% endfor %} 
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.