Warehouse theme - How to hide price in search bar preview

[EmpireDrone]

Hi Phillip, the system marked my response as spam for some reason. So far so good! Everything has worked but now the product grid has an error. As seen in the image below, the product that doesn't have the "hide-price" tag is sandwiched beneath the other product. I feel like its one piece of code that is off.

 <div class="product-item__info">
    <div class="product-item__info-inner">
      {%- capture price_list -%}
        <div class="product-item__price-list price-list">
          {% assign hide_price = false %}          
{% for tag in product.tags %}{% if tag contains 'hide-price' %}{% assign hide_price = true %}{% break %}{% endif %}{% endfor %}          
         {%- if hide_price -%}
		  <strong>Contact us for price</strong>
      	 {%- else -%}
          {%- if product.price < product.compare_at_price -%}
            {%- if product.compare_at_price_varies -%}
              {%- capture price_min -%}<span>{{ product.price_min | money_without_trailing_zeros }}</span>{%- endcapture -%}
              {%- capture price_max -%}<span>{{ product.price_max | money_without_trailing_zeros }}</span>{%- endcapture -%}
              <span class="price price--highlight">{{ 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max }}</span>
              <span class="price price--compare">{{ product.compare_at_price_min | money_without_trailing_zeros }}</span>
            {%- else -%}
              <span class="price price--highlight">{{ product.price | money_without_trailing_zeros }}</span>
              <span class="price price--compare">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
            {%- endif -%}
          {%- elsif product.price_varies -%}
            {%- capture price_min -%}<span>{{ product.price_min | money_without_trailing_zeros }}</span>{%- endcapture -%}
            {%- capture price_max -%}<span>{{ product.price_max | money_without_trailing_zeros }}</span>{%- endcapture -%}
            <span class="price">{{ 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max }}</span>
          {%- else -%}
            <span class="price">{{ product.price | money_without_trailing_zeros }}</span>
          {%- endif -%}
        </div>
{%- endif -%}
        {%- if product.selected_or_first_available_variant.unit_price_measurement -%}
          <div class="product-item__price-info">
            <div class="unit-price-measurement">
              <span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
              <span class="unit-price-measurement__separator">/ </span>

              {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
                <span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
              {%- endif -%}

              <span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
            </div>
          </div>
        {%- endif -%}
      {%- endcapture -%}

Thank you again for the help! If you ever need a drone I will offer you a massive discount for all this help.

-Sean

[thinkbot]

Hi Sean,

Glad that I can help!

The only thing that stood out was this section:

            <span class="price">{{ product.price | money_without_trailing_zeros }}</span>
          {%- endif -%}
        </div>
{%- endif -%}
        {%- if product.selected_or_first_available_variant.unit_price_measurement -%}

Change it to

            <span class="price" data-money-convertible>{{ product.price | money_without_trailing_zeros }}</span>
          {%- endif -%}
         {%- endif -%}
        </div>

        {%- if product.selected_or_first_available_variant.unit_price_measurement -%}

so basically just move up the endif line so it is inside the div section.

Let me know how it works!

Nice drones! I think I'm more of a Mavic Mini type of person though... ;-)

Cheers,

- Philip

[EmpireDrone]

Hi Philip,

That worked! Last piece of the puzzle is hiding the prices in the search.

I inserted the following into search.ajax.liquid per the thread above but the price is still visible;

<span class="search-bar__item-price {% for tag in item.tags %}{% if tag contains 'hide-price' %}hide-me{% break %}{% endif %}{% endfor %}" data-money-convertible>{{ item.price | money_without_trailing_zeros }}</span>

Full Code from search.ajax.liquid;

{% layout none %}

{%- if search.results_count > 0 -%}
  {%- if search.types contains 'product' -%}
    <p class="search-bar__result-category">{{ 'header.search.products' | t }}</p>

    <div class="search-bar__result-products">
      {%- assign clean_terms = search.terms | split: ' AND ' | last | remove_first: '*' -%}

      {%- for item in search.results limit: 3 -%}
        <a href="{{ item.url }}" class="search-bar__result-item">
          <div class="search-bar__image-container">
            <div class="aspect-ratio aspect-ratio--square">
              <img src="{{ item.featured_image | img_url: '120x120' }}" alt="{{ item.featured_image.alt | escape }}">
            </div>
          </div>

          <div class="search-bar__item-info">
            <p class="search-bar__item-title">{{ item.title | highlight: clean_terms }}</p>
<span class="search-bar__item-price {% for tag in item.tags %}{% if tag contains 'hide-price' %}hide-me{% break %}{% endif %}{% endfor %}" data-money-convertible>{{ item.price | money_without_trailing_zeros }}</span>
          </div>
        </a>
      {%- endfor -%}
    </div>

    {%- if search.results_count > 3 -%}
      <a class="search-bar__view-all" href="{{ routes.search_url }}?q={{ search.terms }}&type={{ search.types | join: ',' }}">
        {%- if settings.search_mode == 'product' -%}
          {{- 'header.search.view_products' | t -}}
        {%- else -%}
          {{- 'header.search.view_results' | t -}}
        {%- endif -%}

        {%- render 'icon', icon: 'arrow-right' -%}
      </a>
    {%- endif -%}
  {%- else -%}
    {%- if search.types contains 'article' and search.types contains 'page' -%}
      <p class="search-bar__result-category">{{ 'header.search.blog_posts_and_pages' | t }}</p>
    {%- elsif search.types contains 'article' -%}
      <p class="search-bar__result-category">{{ 'header.search.blog_posts' | t }}</p>
    {%- else -%}
      <p class="search-bar__result-category">{{ 'header.search.pages' | t }}</p>
    {%- endif -%}

    <ul class="search-bar__result-linklist list--unstyled">
      {%- for item in search.results | limit: 3 -%}
        <li>
          <a href="{{ item.url }}" class="search-bar__result-link">{{ item.title }}</a>
        </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}
{%- else -%}
  {%- assign show_empty_state = false -%}

  {%- if settings.search_mode == 'product' -%}
    {%- assign show_empty_state = true -%}
  {%- elsif search.types contains 'article' or search.types contains 'page' -%}
    {%- assign show_empty_state = true -%}
  {%- endif -%}

  {%- if show_empty_state -%}
    <div class="search-bar__empty-state">
      <p class="heading h4">{{ 'header.search.no_results' | t }}</p>
    </div>
  {%- endif -%}
{%- endif -%}

Thanks again! We also have Mavic Minis if you ever need one!

Best,

Sean

[thinkbot]

Hi Sean,

Ah, you're very close - you just need to add this small section to you theme.liquid file right after the <!doctype HTML> line:

<style> .hide-me
  { display: none; }
</style>

You need this to interpret the "hide-me" property that you applied to the specific items in search.ajax.liquid.

I think that should do it - let me know if it works!

Cheers,

- Philip

[EmpireDrone]

Brilliant! It worked! Thanks so much for the help. Now I can focus on launch!

Best,

Sean

[thinkbot]

Yay, that's exciting! I'm glad that I could help. Good luck with the shop!

Cheers,

- Philip

[JimmyTwotime]

So I got everything working with these detailed instructions with exception to the product page still showing the price and form not being populated.  I feel like I am missing something on the product-info-requires-contact lines on 378-396

[ShamlaFazal]

I am using warehouse theme and even i am trying to hide price where ever tag "not-for-sale", but its not working. Also tried to remove price from  product.contact template.Pls help me to solve the issue.

Thanks,

SF

[OWSC]

Hello,

I'm using warehouse theme and currently trying to hide the price for certain products. I have created a separate template for the products already. Can you share how you replaced price with "contact us for price"? 

Thank you!