Hide Prices based on Product Vendor and Customer Tag - If logic fails on Homepage & Collection Pages

Solved

Hide Prices based on Product Vendor and Customer Tag - If logic fails on Homepage & Collection Pages

Nomy_Syed
Shopify Partner
3 1 1

Hi,

 

We have a trade b2b & b2c store using Dawn Theme where we hide prices of products from a brand ‘Dahua’ until an approved customer is logged in.

 

For this Customers have to register an account and when we’ve done our checks, we approve the account by adding a tag to the customer “trade5” and then they can see prices of Dahua products and place orders for them.

 

So here is the conditional logic I’m trying to apply;

 

  1. If the Product Vendor is “dahua” AND
  2. If the customer tag is “trade5”

 

Do nothing 

 

Else

 

Apply CSS style “display: none“ to necessary classes.

 

For every other brands and products customer must be able to see prices and buy products as normal.

 

I’ve come up with the following code and it works on product pages but the dual condition doesn’t work on home page and collection pages. If I remove the 2nd condition (Vendor if statement), it works everywhere but then it’s applying the style to all brands and products.

===========

{% assign customersTagsDowncased = customer.tags | downcase %}

{% assign ProductsVendorDowncased = product.vendor | downcase %}

 

 {%- if customersTagsDowncased contains 'trade5' -%}

 {%- else -%}

    {%- if ProductsVendorDowncased contains 'dahua' -%}

      <style>

        .product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {

         display: none !important;

       </style>

    {%- endif -%}

 {%- endif -%}

==================

It fails on homepage and collection pages every time I have more than 1 conditional logics.

 

I’ve tried using product tags instead of vendor and other approaches like using 'unless' and 'for' tags too - like the one below but they also fail.

=================

{% unless customer.tags contains "trade5" %}

  {% if product.vendor contains "dahua" %}

    <style>

      .product-form__buttons, .price__container, .product__tax, .product-form__input, .card-information, .quick-add {

       display: none !important;

    </style>

  {% endif %}

{% endunless %}

=======================

Someone please tell me where I’m going wrong and how to fix it? or if there is a better approach to achieve this without apps.

 

Preview Store link: https://crwisj4ojn26fg0n-66693726439.shopifypreview.com

 

Thanks,

NS

Accepted Solutions (2)
gr_trading
Shopify Partner
1943 145 203

This is an accepted solution.

If you want to code at one place only then make a new file with the code above.

 

Now render the file via passing variable as object.

 

{% render 'filename' product: card_product %}

 

 

You have to write above line of code separately on main-product and card-product with appropriate variable.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee

View solution in original post

Nomy_Syed
Shopify Partner
3 1 1

This is an accepted solution.

For those looking to do the same and want full solution, here it is.

 

  • Firstly, Credit to @gr_trading for giving crucial advice and help that actually made it happen
  • As always, Duplicate the theme and work on that to avoid messing up the live store

 

Solution

This solution allows you to hide prices for products of any brand (vendor) unless an approved customer is logged in - It's for Dawn Theme but should work on all themes as long as you match the CSS classes.

 

Pre-Requisits: You must approve the customers by adding a tag, in this example the tag is "approved".

 

Part 1 (One time - should work with theme updates unless the css classes change)

 

Goto Themes > Customize >

On Top centre > Click Home Page > Choose Product > Default Product

On left pane in Template section, add a "Custom Liquid Block"

Paste the following code > Change the tag / vendor values and the button styling in "<a>" tag to suit your needs and hit save.

 

 

 

{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}  
{%- if customersTagsDowncased contains "approved" -%}
  {% else %}
  {%- if ProductsVendorDowncased contains "any-brand" %} 
    <style>
     .product-form__buttons, .price__container, .product__tax, .product-form__input {
      display: none !important;
      }
    </style>
    <strong><a style ="color: #008CBA;" href="/account/login"  class="product-form__submit button button--full-width button--secondary">Login to See Prices</a></strong>
  {%- endif -%}
{%- endif -%}

 

 

 

Next > Drag the custom liquid block and drop it above the price block > Save and close.

 

Part 2 (To be repeated every time the theme updates)

 

Goto Theme > Edit Code > Find and Edit card-product.liquid file.

Find the code that renders the price. In Dawn 12 theme, its the following;

 

 

 

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

 

 

 

Paste the following code above that line. Change the tag and vendor  from "aproved" and "any-brand" to suit your needs.

 

 

 

{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign CardProductsVendorDowncased = card_product.vendor | downcase %}  
{%- if customersTagsDowncased contains 'approved' -%}
  {% else %}
  {%- if CardProductsVendorDowncased contains "any-brand" %} 
    <br>
    <div style="padding-top: 2%;">
      <style>
       .price__container, .quick-add {
        display: none !important;
        }
      </style>
      <a href="/account/login" style="position: absolute; bottom: 1%;" class="quick-add__submit button button--full-width button--secondary">Login to See Prices</a>
    </div> 
    {% else %}
      <style>
       .price__container, .quick-add {
        display: block !important;
        }
      </style>
  {%- endif -%}
{%- endif -%}

 

 

 

Hit save and exit the edit code section > You're done.

 

All prodcuts from that brand will;

  • Have their prices hidden
  • Show a message Login / Register to view prices
  • Show it all when a customer with approved tag logs in

Enjoy as you just saved $20+ in monthly APP expenses thanks to @gr_trading. Feel free to buy them a coffee.

-------------------

P.S.

If you want to hide random prodcuts' prices or multiple brands, change the word "vendor" to "tags" in both of the codes above and tag each product you want to hide with the chosen tag.

 

Hope it helps!

View solution in original post

Replies 9 (9)

gr_trading
Shopify Partner
1943 145 203

Hi @Nomy_Syed 

 

Seems issue is not with your code but the variable name product as in card-product.liquid product refer as card_product.

 

Let me know if it's not the case.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
Nomy_Syed
Shopify Partner
3 1 1

Hi Gr_trading,

 

Thanks for looking at it.

 

Just checked and you're right. The 'card-product.liquid' does refer to 'product' as 'card_product' but I'm lost on how to incorporate it in my if statement so the logic works on that too and the style gets applies.

 

I'm trying to achieve this by adding one piece of code (as above) to theme.liquid file.

 

Please gudie me how I can go about it if possible. 

 

Thanks,

NS

gr_trading
Shopify Partner
1943 145 203

This is an accepted solution.

If you want to code at one place only then make a new file with the code above.

 

Now render the file via passing variable as object.

 

{% render 'filename' product: card_product %}

 

 

You have to write above line of code separately on main-product and card-product with appropriate variable.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
C_Express
Visitor
1 0 0

Hi @gr_trading 

 

Smashing - Massive Thanks! It worked.

 

Realised, I'll have to edit the card-product.liquid file anyway to add the ""Login / Register to view prices"" button so added the css there with that variable and it worked like a charm.

-------------

For main product, instead of editing the product.liquid / theme.liquid files, I added a "custom Liquid section" on the theme (Customise Theme) and added the code there and it works perfectly fine (Should carry forward with theme updates).

 

Quick question:

For card-product, I was wondering if there is a way to apply the code that will carry forward with theme updates?

 

Again, thousand thanks for the help.

 

NS

Nomy_Syed
Shopify Partner
3 1 1

This is an accepted solution.

For those looking to do the same and want full solution, here it is.

 

  • Firstly, Credit to @gr_trading for giving crucial advice and help that actually made it happen
  • As always, Duplicate the theme and work on that to avoid messing up the live store

 

Solution

This solution allows you to hide prices for products of any brand (vendor) unless an approved customer is logged in - It's for Dawn Theme but should work on all themes as long as you match the CSS classes.

 

Pre-Requisits: You must approve the customers by adding a tag, in this example the tag is "approved".

 

Part 1 (One time - should work with theme updates unless the css classes change)

 

Goto Themes > Customize >

On Top centre > Click Home Page > Choose Product > Default Product

On left pane in Template section, add a "Custom Liquid Block"

Paste the following code > Change the tag / vendor values and the button styling in "<a>" tag to suit your needs and hit save.

 

 

 

{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign ProductsVendorDowncased = product.vendor | downcase %}  
{%- if customersTagsDowncased contains "approved" -%}
  {% else %}
  {%- if ProductsVendorDowncased contains "any-brand" %} 
    <style>
     .product-form__buttons, .price__container, .product__tax, .product-form__input {
      display: none !important;
      }
    </style>
    <strong><a style ="color: #008CBA;" href="/account/login"  class="product-form__submit button button--full-width button--secondary">Login to See Prices</a></strong>
  {%- endif -%}
{%- endif -%}

 

 

 

Next > Drag the custom liquid block and drop it above the price block > Save and close.

 

Part 2 (To be repeated every time the theme updates)

 

Goto Theme > Edit Code > Find and Edit card-product.liquid file.

Find the code that renders the price. In Dawn 12 theme, its the following;

 

 

 

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

 

 

 

Paste the following code above that line. Change the tag and vendor  from "aproved" and "any-brand" to suit your needs.

 

 

 

{% assign customersTagsDowncased = customer.tags | downcase %}
{% assign CardProductsVendorDowncased = card_product.vendor | downcase %}  
{%- if customersTagsDowncased contains 'approved' -%}
  {% else %}
  {%- if CardProductsVendorDowncased contains "any-brand" %} 
    <br>
    <div style="padding-top: 2%;">
      <style>
       .price__container, .quick-add {
        display: none !important;
        }
      </style>
      <a href="/account/login" style="position: absolute; bottom: 1%;" class="quick-add__submit button button--full-width button--secondary">Login to See Prices</a>
    </div> 
    {% else %}
      <style>
       .price__container, .quick-add {
        display: block !important;
        }
      </style>
  {%- endif -%}
{%- endif -%}

 

 

 

Hit save and exit the edit code section > You're done.

 

All prodcuts from that brand will;

  • Have their prices hidden
  • Show a message Login / Register to view prices
  • Show it all when a customer with approved tag logs in

Enjoy as you just saved $20+ in monthly APP expenses thanks to @gr_trading. Feel free to buy them a coffee.

-------------------

P.S.

If you want to hide random prodcuts' prices or multiple brands, change the word "vendor" to "tags" in both of the codes above and tag each product you want to hide with the chosen tag.

 

Hope it helps!

gr_trading
Shopify Partner
1943 145 203

Hi @Nomy_Syed 

 

I guess my answer should be marked as a solution as my answer suggest the actual implementation flow.

 

😊

 

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee
BD-E
New Member
8 0 0

i applied this to specific product tag, however the price still appears on the product page for the specific tag under the 'login for price' box. how can i get it that the price doesnt show up there unless customer is logged in.

 

thanks,

nmkc808
Visitor
1 0 0

Hi @Nomy_Syed ,

I applied this code and it worked however, when I log in, I end up in my profile page and then have to choose to "go to store." When I "go to store," the prices aren't visible and still required to "login for pricing."  How do I get out of this loop?  Thanks in advance! 

DevriesEelco
Visitor
1 0 0

if i use the suggested CSS Code we get the following warning : Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.

we are struggling to get the prices of one vendor to be displayed without a login and other vendors need a login. so any other suggestion would

be highly appreciated.

 

thanks