How to fetch specific products with a selected style on Impulse theme?

[haseebdev]

 Hello, 
I hope you are doing great. I'm working on the Impulse theme and I want to fetch all the products that have the selected style on the Collection page. 
For Example: When the user clicks on the Style "Chic" all products with a Chic variant will come after sorting. 
I'm trying but I'm getting the all products of this specific collection products.

I will be very appreciative if anyone can help me quickly. I really appreciate any help you can provide.

[TimBlackDesign]

Hi @haseebdev. If you send me the url I will try to get this figured out for you.

[haseebdev]

Thanks for your reply TimBlackDesign.
Here is the Url
https://bokitta.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=137433809108

[haseebdev]

Right now I'm using this API but not getting the output.

jQuery(document).ready(function ($) {
$(".filter-images img").click(function () {
var selectedStyle = $(this)
.attr("title")
.toLowerCase()
.replace(/\s+/g, "-");
var collectionHandle = $("#collectionHandle").val();
var apiKey = "21b9fb011ba509aaa75c61cejhsd8709";
var shopName = $("#shopName").val();

var query = `
query VariantOptions {
collection(handle: "${collectionHandle}") {
handle
products(
first: 10
filters: { variantOption: { name: "Choose Style:", value: "${selectedStyle}" } }
) {
edges {
node {
handle
variants(first: 10) {
edges {
node {
selectedOptions {
name
value
}
}
}
}
}
}
}
}
}
`;

$.ajax({
url: `https://${shopName}.myshopify.com/api/2022-10/graphql.json`,
type: "POST",
headers: {
"Content-Type": "application/json",
"X-Shopify-Storefront-Access-Token": apiKey,
},
data: JSON.stringify({ query: query }),
success: function (data) {
console.log("Fetched Data", data);
},
error: function () {
console.error("Error fetching products.");
},
});
});
});
By this API just getting this error
Access to XMLHttpRequest at 'https://bokitta-eu.myshopify.com/api/2022-10/graphql.json' from origin 'https://bokitta.eu' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

[TimBlackDesign]

@haseebdev I think for what you are trying to accomplish you will need to create a custom app. I did find this search example which you might be able to tweak for your purposes.

https://gist.github.com/atikju/0c0f3c52174f6e75809d6a86490a7da1

Another thought, if you are wanting to only work with the products contained in the collection page you are currently on, you could use liquid to loop through the collection's products and build the products json object

[haseebdev]

Hello @TimBlackDesign,

Your reply is precious to me but I want to fetch all product's variants which has same style which the user will select. 
For Example, At start all products are there but when user will click on the style same product's variants will retrieve in console. I'm using the API but nothing is working. I'm providing you my Ajax Call, Loom Video and Website preview link for better understading. I hope these are enough for better solution. Thanks

var query = `
query VariantOptions {
collection(handle: "${collectionHandle}") {
handle
products(
first: 10
filters: { variantOption: { name: "Choose Style:", value: "${selectedStyle}" } }
) {
edges {
node {
handle
variants(first: 10) {
edges {
node {
selectedOptions {
name
value
}
}
}
}
}
}
}
}
}
`;

$.ajax({
url: `https://${shopName}.myshopify.com/api/2022-10/graphql.json`,
type: "POST",
headers: {
"Content-Type": "application/json",
"X-Shopify-Storefront-Access-Token": apiKey,
},
data: JSON.stringify({ query: query }),
success: function (data) {
console.log("Fetched Data", data);
},
error: function () {
console.error("Error fetching products.");
},
});
In the loom video You can check that what I want.
Loom Video
Website Link:
https://bokitta.eu/?_ab=0&_fd=0&_sc=1&preview_theme_id=154557022540

[TimBlackDesign]

I think the issue is that you are trying to use the graphQL api in the browser (in the theme) and it needed to be used server-side (in a custom app). They do not allow this for security reasons, you could expose the api key.

I've provided an alternative route to try below. It is not as robust using graphQL in a server-side custom app but it may work for what you need to accomplish.

You will need to update the <li> that wraps each product card. This is on line 430 of main-collection-product-grid.liquid but it may different in your theme.

<li class="grid__item" data-styles="{{ product.options_by_name['Title'].values | join: "," }}">

Next add this to the same file, below the last closing div tag.

<script>
  var items = document.querySelectorAll('.grid__item');
  var testStyle = 'Vogue' // This is for testing and would be provided by whatever style was clicked on.
  // console.log(items);

  clickFunction(testStyle); // Use this when a style is clicked.

  function filterProducts(item) {
    console.log(item.dataset.styles);
    if(item.dataset.styles.includes(testStyle)){
      item.classList.remove('hidden');
    }else{
      item.classList.add('hidden');
    }
  }

  function clickFunction(style){
    items.forEach(filterProducts);
  }
</script>

 
And be sure to try this on a copy of the live theme first! Hope this helps.