How to Display Decreased Product.Price on The Collection Page with Filter?

New Member
3 0 0

I want to display decreased price on the collections and every page except Product page with this filter

{{ Product.Price | minus: 12000 }}

How to write/edit it on my theme?

0 Likes
Highlighted
New Member
3 0 0

 

I just replace 

<span class="money" data-product-id="{{ product.id }}">{{ product.price | money }}</span>

with 

<span class="money" data-product-id="{{ product.id }}">{{ product.price | minus: 1250000 | money }}</span>

The problem is, when I open the collection page for the first time, the price is not decreased. But, after i refresh the page, it decrease all prices. Of course the rule also decrease prices who has undervalue. ex: price is 10,000.00 is decreased by 1250000 is equal - 2500.00.

FYI, I'am using Impulse theme from Shopify theme page.

 

This is the codes on my product-grid-item.liquid

{%- unless grid_item_width -%}
  {%- assign grid_item_width = 'medium-up--one-quarter small--one-half' -%}
{%- endunless -%}

{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
  {%- assign on_sale = true -%}
{%- endif -%}

{%- assign sold_out = true -%}
{%- if product.available -%}
  {%- assign sold_out = false -%}
{%- endif -%}

{%- assign product_tags = product.tags | join: ',' -%}
{%- assign has_custom_label = false -%}
{%- if product_tags contains '_label_' -%}
  {%- for tag in product.tags -%}
    {%- if tag contains '_label_' -%}
      {%- assign tag_starts_with = tag | slice: 0 -%}
      {%- if tag_starts_with == '_' -%}
        {%- assign has_custom_label = true -%}
        {%- assign custom_label = tag | replace: '_label_', '' -%}
      {%- endif -%}
    {%- endif -%}
  {%- endfor -%}
{%- endif -%}

<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable and sold_out == false %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}">
  <div class="grid-product__content">
    {%- if has_custom_label -%}
      <div class="grid-product__tag grid-product__tag--custom">
        {{ custom_label }}
      </div>
    {%- else -%}
      {%- if sold_out -%}
        <div class="grid-product__tag grid-product__tag--sold-out">
          {{ 'products.product.sold_out' | t }}
        </div>
      {%- endif -%}
      {%- if on_sale and sold_out == false -%}
        <div class="grid-product__tag grid-product__tag--sale">
          {{ 'products.general.sale' | t }}
        </div>
      {%- endif -%}
    {%- endif -%}

    {%- assign fixed_aspect_ratio = false -%}
    {%- unless settings.product_grid_image_size == 'natural' -%}
      {%- assign fixed_aspect_ratio = true -%}
    {%- endunless -%}

    <a href="{{ product.url | within: collection }}" class="grid-product__link {% if sold_out %} grid-product__link--disabled{% endif %}">
      <div class="grid-product__image-mask">
        {%- if settings.quick_shop_enable and sold_out == false -%}
          <div class="quick-product__btn js-modal-open-quick-modal-{{ product.id }} small--hide" data-product-id="{{ product.id }}">
            <span class="quick-product__label">{{ settings.quick_shop_text }}</span>
          </div>
        {%- endif -%}
        {%- if fixed_aspect_ratio -%}
          <div
            class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }} lazyload"
            data-bgset="{% include 'bgset', image: product.featured_image %}"
            data-sizes="auto">
          </div>
        {%- else -%}
          <div class="image-wrap"
            style="height: 0; padding-bottom: {{ 100 | divided_by: product.featured_image.aspect_ratio }}%;"
            >
            {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <img class="grid-product__image lazyload"
                data-src="{{ img_url }}"
                data-widths="[180, 360, 540, 720, 900, 1080]"
                data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                data-sizes="auto"
                alt="{{ product.featured_image.alt | escape }}">
            <noscript>
              <img class="grid-product__image lazyloaded"
                src="{{ product.featured_image | img_url: '400x' }}"
                alt="{{ product.featured_image.alt | escape }}">
            </noscript>
          </div>
        {%- endif -%}

        {%- unless sold_out -%}
          {%- if settings.product_hover_image and product.images.size > 1 -%}
            {%- for image in product.images offset: 1 limit: 1 -%}
              {%- assign second_image = image -%}
            {%- endfor -%}
            <div
              class="grid-product__secondary-image small--hide lazyload"
              data-bgset="{% include 'bgset', image: second_image %}"
              data-sizes="auto">
            </div>
          {%- endif -%}
        {%- endunless -%}

        {%- if settings.collection_color_swatches -%}
          {%- for option in product.options_with_values -%}
            {%- assign option_name = option.name | downcase -%}
            {%- if option_name contains 'color' or option_name contains 'colour' -%}
              {%- assign option_index = forloop.index0 -%}
              {%- assign values = '' -%}
              {%- for variant in product.variants -%}
                {%- assign value = variant.options[option_index] %}
                {%- unless values contains value -%}
                  {%- assign values = values | join: ',' %}
                  {%- assign values = values | append: ',' | append: value %}
                  {%- assign values = values | split: ',' %}

                  {%- if variant.image -%}
                    <div
                      class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide">
                    </div>
                  {%- endif -%}
                {%- endunless -%}
              {%- endfor -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}
      </div>

      <div class="grid-product__meta">
        <div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div>
        {%- if settings.vendor_enable -%}
          <div class="grid-product__vendor">{{ product.vendor }}</div>
        {%- endif -%}
        <div class="grid-product__price">
          {%- if on_sale -%}
            <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
            <span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
            <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          {%- endif -%}
          {%- if product.price_varies -%}
            {%- assign price = product.price_min | money -%}
            {% capture bold_hook %}<span class="money" data-product-id="{{ product.id }}">{{ price }}</span>{% endcapture %}
          {{ 'products.general.from_text_html' | t: price: bold_hook }}
          {%- else -%}
            <span class="money" data-product-id="{{ product.id }}">{{ product.price | minus: 1250000 | money }}</span>
          {%- endif -%}
          {%- if on_sale -%}
            {%- if settings.product_save_amount -%}
              {%- if settings.product_save_type == 'dollar' -%}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
              {%- else -%}
                {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{% endcapture %}
              {%- endif -%}
              <span class="grid-product__price--savings">
                {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
              </span>
            {%- endif -%}
          {%- endif -%}

          {%- assign product_variant = product.selected_or_first_available_variant -%}
          {%- if product_variant.unit_price_measurement -%}
            <div class="product__unit-price">
              {%- capture unit_price_base_unit -%}
                {%- if product_variant.unit_price_measurement -%}
                  {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
                    {{ product_variant.unit_price_measurement.reference_value }}
                  {%- endif -%}
                  {{ product_variant.unit_price_measurement.reference_unit }}
                {%- endif -%}
              {%- endcapture -%}

              {{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
            </div>
          {%- endif -%}
        </div>
        {%- if settings.enable_product_reviews -%}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
        {%- endif -%}
      </div>
    </a>
  </div>
  {%- if settings.collection_color_swatches -%}
    {%- assign swatch_file_extension = 'png' -%}
    {%- assign color_count = 0 -%}

    {%- for option in product.options_with_values -%}
      {%- assign option_name = option.name | downcase -%}
      {%- if option_name contains 'color' or option_name contains 'colour' -%}
        {%- assign option_index = forloop.index0 -%}
        {%- assign values = '' -%}
        <div class="grid-product__colors grid-product__colors--{{ product.id }}">
          {%- for variant in product.variants -%}
            {%- assign value = variant.options[option_index] %}
            {%- unless values contains value -%}
              {%- assign values = values | join: ',' %}
              {%- assign values = values | append: ',' | append: value %}
              {%- assign values = values | split: ',' %}

              {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
              {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
              {%- assign color_count = color_count | plus: 1 -%}

              <a
                href="{{ variant.url | within: collection }}"
                class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}"
                {% if variant.image %}
                  data-variant-id="{{ variant.id }}"
                  data-variant-image="{{ variant.image | img_url: '400x' }}"
                {% endif %}
                style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};">
              </a>
            {%- endunless -%}
           {%- endfor -%}
        </div>
        {%- if color_count < 2 -%}
          {% style %}
            .grid-product__colors--{{ product.id }} {
              display: none;
            }
          {% endstyle %}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
</div>

 

0 Likes