Hide Prices Based On Product Vendor And Customer Tag - Shopify Dawn Theme

Question

We have a 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;

If the Product Vendor is “dahua” AND 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

Answer 1

The check on product vendor is not working because you're trying to access the product object outside the Product page, so you're not referring to any specific product. In order to make that work you need to cycle on some products and make that check on every product of the list. For example, in the Collection page you should have:

{%- for product in collection.products -%}
  // YOUR CODE HERE
{%- endfor -%}

The check must be done inside that loop.

Unfortunately without more details from you about the code used in every page is not possible to suggest an exact solution. Moreover it would be a long custom solution to present here, so I think is not the right place to do that.

With that said I'd suggest to try making the check that you mentioned inside the loop based on the specific page implementation in order to make it work.

Let me know if that helped!