Making text disappear when product meta contains certain text

[PetervdHoeven]

Im trying to add the css style "display:none" to the red text under the product image when the class "ajaxcart__product-meta" contains the text "1 POT".

So im trying to do this with the following liquid code:

 <div><p class="{% if product_variant contains '1 POT' %} TEST-CLASS{% endif %}"> Test </p></div>

and in the css stylesheet: ".test-class: {display:none;}" 

But its not working.

I think product_variant is not good, but I dont know what the correct name is to target ajaxcart__product-meta.

 

[LitExtension]

Hi @PetervdHoeven,

Please send me the full code of the file, I will help you check it.

[PaulNewton]

Logic is flawed and info is missing.

Why would one CSS class contain that text when it seem like your trying to insert a completely different second class to go with it.

Are you trying to check if a variant TITLE contains that text?

What is being assigned to product_variant. is it a handle .. a variant object... etc etc

If that is a variant object reference the title to check for an option value.

{% if product_variant.title  contains '1 POT' %} test-class {% endif %}

https://shopify.dev/api/liquid/objects#variant-title 

This of course also varies on what strings values are actually in the variants options and what operations the theme does to output a title for variant verse it's api generated title.

[PetervdHoeven]

Hello, Im trying to check if the product variant contains "1 pot", when this is true, i want to test text to be visible. Where should I paste the line of code? 

[Cedcommerce]

Hey @PetervdHoeven, 

Hope you are doing well!

We truly appreciate your positive effort toward fixing such a complicated issue. You have almost resolved this issue but there’s a small error in your code that is the reason for the obstruction here.

Here, you are using the title of the variant, whereas, instead of using product_variant you need to use product_variant.title as provided below:

For checking variant title:-

<div><p class="{% if product_variant.title contains '1 POT' %}test-class {% endif %}">Test </p></div>

For checking specific tags:-

<div><p class="{% if product_variant.product.tags contains '1 POT' %}test-class {% endif %}">Test </p></div>

Make the changes to your code and this will work for sure. Let us know if you need any further help. 

Regards, 

CedCommerce

[PetervdHoeven]

Hello, thank you for your answer. I changed it but its not working yet.  The idea is that the test text becomes visible when the product variant contains "1 POT". Where should I put the line of code? 

[PaulNewton]

---

@PetervdHoeven wrote:

Hello, thank you for your answer. I changed it but its not working yet.  The idea is that the test text becomes visible when the product variant contains "1 POT". Where should I put the line of code? 

---

If you don't know where the code goes why are you referencing product_variant.

If this is in the context of a carts item you need to reference line_items in the cart.item forloop not an individual productVariant object.

https://shopify.dev/api/liquid/objects/cart#cart-items 

We have no idea where to put code you haven't told us the theme name.

There are thousands of themes with different architectures.

Not everyone has access to the same themes.

For cart related things this should be in cart.liquid, or cart-drawer.liquid.

If the screenshot is an indication of a cart-drawer then maybe ajax-cart.liquid ajax-cart.js, etc.

Be aware if you need this to be dynamic,   ajax carts can behave drastically different than a pure liquid rendered html. So if a "POTS" variant is not already in the cart then the class may not exist when the page first loads and will not update when such a variant is added to the carte because the ajax-template html structure is already loaded; this behavior varies by themes.