FIltering By Product Tags

Highlighted
New Member
2 0 0

Hi! I've built a React web app using the Shopify Storefront API to pull data into my web app. I'm having difficulty working with the "tags" field. I'm trying to map through my products, and then display only products whose tags contain a specific string: 'AnnMarie' - - to reiterate, I want all products to display that are tagged with AnnMarie. My private app settings are set so that unauthenticated_read_product_tags and unauthenticated_read_product_listings are both enabled. Here is a snippet of the code I am working with:

 

<div className='shop-container'>
    {this.props.products.map((product) => {
        if (product.tags.includes('AnnMarie')) {
            return (
                <Product
                    client={this.props.client}
                    key={product.id.toString()}
                    product={product}
                />
             );
        } else {
            return null;
        }
    })}
</div>

 

This code turns up tags as undefined. Does anyone know or see what I may be missing?

 

Thank you!

 

Warmly,

Claire

0 Likes
Highlighted
New Member
2 0 0

I also want to add that the following code works to display only products with the product type of 'Mugs'...

<div className='shop-container'>
    {this.props.products.map((product) => {
            if (product.productType === 'Mugs') {
                return (
                    <Product
                         client={this.props.client}
                         key={product.id.toString()}
                          product={product}
                      />
                            );
                } else {
                    return null;
                }
    })}
</div>

...so why is it that product.productType works, but product.tags does not? Both of these are fields for Product in Storefront API (https://shopify.dev/docs/storefront-api/reference/object/product?api[version]=2020-04).

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1041 140 170

Hey @claireelisey 

 

so why is it that product.productType works, but product.tags does not? 

If you're using the JS Buy SDK to get products, tags aren't returned. You'll need to create a custom query. Here's an example.

 

Also, consider using the filter method instead:

 

const { products } = this.props
const filteredProducts = products.filter(product => product.tags.includes('AnneMarie'))

...

return (
  <div className='shop-container'>
    {filteredProducts.map((product) => (
      <Product
        client={this.props.client}
        key={product.id.toString()}
        product={product}
      />
    )}
  </div>
)

Let me know if you get stuck!

 

Notice; Out of office, replies will be delayed until my return. Thanks!
0 Likes