FROM CACHE - en_header

FIltering By Product Tags

claireelisey
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

Replies 2 (2)
claireelisey
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).

SBD_
Shopify Staff
Shopify Staff
1098 146 220

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 Support @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog