FIltering By Product Tags

claireelisey
Visitor
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

Replies 2 (2)

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

SBD_
Shopify Staff
1829 269 405

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!

 

Scott | Developer Advocate @ Shopify