Shopify登录后显示产品价格或登录后显示特殊信息

Shopify在2B情况下，经常会需要隐藏价格，在用户登录后才显示价格。一般这种需求比较多的是使用插件。但是插件可能有限制或者需要付费。

其实可以通过修改liquid代码的方式实现这个功能，代码示例如下

{% if customer %}
{% comment %}下面是登录后显示的代码{% endcomment %} 
这里是登录后显示的代码...... 
{% else %} 
{% comment %}没登录提示登录{% endcomment %} 
<b>Our Price:</b> {{ 'Login' | customer_login_link }} (Dealers Only)
{% endif %}

1、下面以“Empire”主题为例，下面是修改思路

“Empire”主题的价格都是引用的“product-price.liquid”文件，所以我们只需要修改一下这个文件即可实现我们想要的效果

下面是原始“product-price.liquid”文件里面产品价格显示部分的代码

<div class="price {{ class_root }}__price {% if compare_at_price_varies %}price--varies{% endif %}">
  {% if include_compare_price %}
    <div
      class="price__compare-at {% if emphasize_price or on_sale and show_original %}visible{% endif %}"
      data-price-compare-container
    >
      {%- capture compare_at_price_html -%}
        <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
        <span class="money price__compare-at--single" data-price-compare>
          {{ compare_at_price | money }}
        </span>
      {%- endcapture -%}

      {% if compare_at_price_varies %}
        {%- capture compare_at_price_range_html -%}
          {% if price_range_format == 'range' %}
            <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
            <span class="money price__compare-at--min" data-price-compare-min>
              {{ compare_at_price_min | money }}
            </span>
            -
            <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
            <span class="money price__compare-at--max" data-price-compare-max>
              {{ compare_at_price_max | money }}
            </span>
          {% else %}
            {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
          {% endif %}
        {% endcapture %}
      {% endif %}

      {% if compare_at_price_varies and on_sale and show_original and show_range %}
        {{ compare_at_price_range_html }}
      {% elsif on_sale and show_original %}
        {{ compare_at_price_html }}
      {% elsif emphasize_price and include_spacer %}
        <span class="price__spacer"></span>
      {% elsif show_original %}
        <span class="money price__original" data-price-original></span>
      {% endif %}
    </div>


    {% if include_hidden_price %}
      {% comment %}
        Hide an element containing compare at price info to fill in the price when no variant is selected
      {% endcomment %}
      <div class="price__compare-at--hidden" data-compare-price-range-hidden>
        {% if price_range_format == 'range' %}
          <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
          <span class="money price__compare-at--min" data-price-compare-min>
            {{ compare_at_price_min | money }}
          </span>
          -
          <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
          <span class="money price__compare-at--max" data-price-compare-max>
            {{ compare_at_price_max | money }}
          </span>
        {% else %}
          {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
        {% endif %}
      </div>
      <div class="price__compare-at--hidden" data-compare-price-hidden>
        <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
        <span class="money price__compare-at--single" data-price-compare>
          {{ compare_at_price | money }}
        </span>
      </div>
    {% endif %}
  {% endif %}

  <div class="price__current {% if emphasize_price %}price__current--emphasize{% endif %} {% if on_sale %}price__current--on-sale{% endif %}" data-price-container>
    {%- capture price_html -%}
      <span class="money" data-price>
        {{ price | money }}
      </span>
    {%- endcapture -%}

    {% capture current_price_range_html %}
      {% if price_varies %}
        {% if price_range_format == 'range' %}
          <span class="money price__current--min" data-price-min>{{ price_min | money}}</span>
          -
          <span class="money price__current--max" data-price-max>{{ price_max | money }}</span>
        {% else %}
          {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
        {% endif %}
      {% endif %}
    {% endcapture %}

    {% capture current_price_html %}
      {% if on_sale and show_original %}
        <span class="visually-hidden">{{ 'product_price.price.current' | t }}</span>
      {% endif %}
      {{ price_html }}
    {% endcapture %}

    {% if show_range and price_varies %}
      {{ current_price_range_html }}
    {% else %}
      {{ current_price_html }}
    {% endif %}
  </div>

  {% if include_hidden_price %}
    {% comment %}
      Hide an element containing current price info to fill in the price when no variant is selected
    {% endcomment %}
    <div class="price__current--hidden" data-current-price-range-hidden>
      {% if price_range_format == 'range' %}
        <span class="money price__current--min" data-price-min>{{ price_min | money}}</span>
        -
        <span class="money price__current--max" data-price-max>{{ price_max | money }}</span>
      {% else %}
        {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
      {% endif %}
    </div>
    <div class="price__current--hidden" data-current-price-hidden>
      <span class="visually-hidden">{{ 'product_price.price.current' | t }}</span>
      {{ price_html }}
    </div>
  {% endif %}

  {% if include_unit_price %}
    {% assign variant = product.selected_or_first_available_variant %}
    {% capture total_quantity %}<span class="{{ class_root }}__total-quantity" data-total-quantity>{{ variant.unit_price_measurement.quantity_value }}{{ variant.unit_price_measurement.quantity_unit }}</span>{% endcapture %}
    {% capture unit_price %}<span class="{{ class_root }}__unit-price--amount money" data-unit-price-amount>{{ variant.unit_price | money }}</span>{% endcapture %}
    {% capture unit_measure %}<span class="{{ class_root }}__unit-price--measure" data-unit-price-measure>{%- if variant.unit_price_measurement.reference_value != 1 -%}{{ variant.unit_price_measurement.reference_value }}{%- endif %}{{ variant.unit_price_measurement.reference_unit }}</span>{% endcapture %}

    <div
      class="
        {{ class_root }}__unit-price
        {% unless variant.unit_price_measurement %}hidden{% endunless %}
      "
      data-unit-price
    >
      {{ 'product_price.price.price_per_unit_html' | t: total_quantity: total_quantity, unit_price: unit_price, unit_measure: unit_measure | strip_newlines }}
    </div>
  {% endif %}

  {% if include_tax_line %}
    {%- capture tax_text -%}
      {{ 'product_price.price.tax_line_html' | t }}
    {%- endcapture -%}

    {%- if tax_text != blank and class_root != 'productitem' -%}
      <div class="
          {{ class_root }}__tax
          {% unless variant.taxable %}hidden{% endunless %}
        "
        data-tax-line
      >
        {{ tax_text }}
      </div>
    {%- endif -%}
  {% endif %}
</div>

按照文章开头的思路我们做一下修改。下面是修改后的代码结构

{% if customer %}
{% comment %}下面是原来的价格显示代码{% endcomment %}
<div class="price {{ class_root }}__price {% if compare_at_price_varies %}price--varies{% endif %}">
  {% if include_compare_price %}
    <div
      class="price__compare-at {% if emphasize_price or on_sale and show_original %}visible{% endif %}"
      data-price-compare-container
    >
      {%- capture compare_at_price_html -%}
        <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
        <span class="money price__compare-at--single" data-price-compare>
          {{ compare_at_price | money }}
        </span>
      {%- endcapture -%}

      {% if compare_at_price_varies %}
        {%- capture compare_at_price_range_html -%}
          {% if price_range_format == 'range' %}
            <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
            <span class="money price__compare-at--min" data-price-compare-min>
              {{ compare_at_price_min | money }}
            </span>
            -
            <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
            <span class="money price__compare-at--max" data-price-compare-max>
              {{ compare_at_price_max | money }}
            </span>
          {% else %}
            {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
          {% endif %}
        {% endcapture %}
      {% endif %}

      {% if compare_at_price_varies and on_sale and show_original and show_range %}
        {{ compare_at_price_range_html }}
      {% elsif on_sale and show_original %}
        {{ compare_at_price_html }}
      {% elsif emphasize_price and include_spacer %}
        <span class="price__spacer"></span>
      {% elsif show_original %}
        <span class="money price__original" data-price-original></span>
      {% endif %}
    </div>


    {% if include_hidden_price %}
      {% comment %}
        Hide an element containing compare at price info to fill in the price when no variant is selected
      {% endcomment %}
      <div class="price__compare-at--hidden" data-compare-price-range-hidden>
        {% if price_range_format == 'range' %}
          <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
          <span class="money price__compare-at--min" data-price-compare-min>
            {{ compare_at_price_min | money }}
          </span>
          -
          <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
          <span class="money price__compare-at--max" data-price-compare-max>
            {{ compare_at_price_max | money }}
          </span>
        {% else %}
          {{ 'product_price.item.price.range_html' | t: price: compare_at_price_html | strip_newlines }}
        {% endif %}
      </div>
      <div class="price__compare-at--hidden" data-compare-price-hidden>
        <span class="visually-hidden">{{ 'product_price.price.original' | t }}</span>
        <span class="money price__compare-at--single" data-price-compare>
          {{ compare_at_price | money }}
        </span>
      </div>
    {% endif %}
  {% endif %}

  <div class="price__current {% if emphasize_price %}price__current--emphasize{% endif %} {% if on_sale %}price__current--on-sale{% endif %}" data-price-container>
    {%- capture price_html -%}
      <span class="money" data-price>
        {{ price | money }}
      </span>
    {%- endcapture -%}

    {% capture current_price_range_html %}
      {% if price_varies %}
        {% if price_range_format == 'range' %}
          <span class="money price__current--min" data-price-min>{{ price_min | money}}</span>
          -
          <span class="money price__current--max" data-price-max>{{ price_max | money }}</span>
        {% else %}
          {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
        {% endif %}
      {% endif %}
    {% endcapture %}

    {% capture current_price_html %}
      {% if on_sale and show_original %}
        <span class="visually-hidden">{{ 'product_price.price.current' | t }}</span>
      {% endif %}
      {{ price_html }}
    {% endcapture %}

    {% if show_range and price_varies %}
      {{ current_price_range_html }}
    {% else %}
      {{ current_price_html }}
    {% endif %}
  </div>

  {% if include_hidden_price %}
    {% comment %}
      Hide an element containing current price info to fill in the price when no variant is selected
    {% endcomment %}
    <div class="price__current--hidden" data-current-price-range-hidden>
      {% if price_range_format == 'range' %}
        <span class="money price__current--min" data-price-min>{{ price_min | money}}</span>
        -
        <span class="money price__current--max" data-price-max>{{ price_max | money }}</span>
      {% else %}
        {{ 'product_price.price.range_html' | t: price: price_html | strip_newlines }}
      {% endif %}
    </div>
    <div class="price__current--hidden" data-current-price-hidden>
      <span class="visually-hidden">{{ 'product_price.price.current' | t }}</span>
      {{ price_html }}
    </div>
  {% endif %}

  {% if include_unit_price %}
    {% assign variant = product.selected_or_first_available_variant %}
    {% capture total_quantity %}<span class="{{ class_root }}__total-quantity" data-total-quantity>{{ variant.unit_price_measurement.quantity_value }}{{ variant.unit_price_measurement.quantity_unit }}</span>{% endcapture %}
    {% capture unit_price %}<span class="{{ class_root }}__unit-price--amount money" data-unit-price-amount>{{ variant.unit_price | money }}</span>{% endcapture %}
    {% capture unit_measure %}<span class="{{ class_root }}__unit-price--measure" data-unit-price-measure>{%- if variant.unit_price_measurement.reference_value != 1 -%}{{ variant.unit_price_measurement.reference_value }}{%- endif %}{{ variant.unit_price_measurement.reference_unit }}</span>{% endcapture %}

    <div
      class="
        {{ class_root }}__unit-price
        {% unless variant.unit_price_measurement %}hidden{% endunless %}
      "
      data-unit-price
    >
      {{ 'product_price.price.price_per_unit_html' | t: total_quantity: total_quantity, unit_price: unit_price, unit_measure: unit_measure | strip_newlines }}
    </div>
  {% endif %}

  {% if include_tax_line %}
    {%- capture tax_text -%}
      {{ 'product_price.price.tax_line_html' | t }}
    {%- endcapture -%}

    {%- if tax_text != blank and class_root != 'productitem' -%}
      <div class="
          {{ class_root }}__tax
          {% unless variant.taxable %}hidden{% endunless %}
        "
        data-tax-line
      >
        {{ tax_text }}
      </div>
    {%- endif -%}
  {% endif %}
</div>
{% comment %}上面是原来的价格显示代码{% endcomment %}
{% else %}
{% comment %}没登录提示登录{% endcomment %}
<b>Our Price:</b> {{ 'ANMELDEN' | customer_login_link }} (Dealers Only)
{% endif %}

最后实现的效果如图