FIltering By Product Tags

[claireelisey]

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

[claireelisey]

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

[SBD_]

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!