Displaying price divided by 4 on landing page for products that have installment payment options

Highlighted
Tourist
16 0 1

So I use a payment system that lets my customers divide their purchase price into 4 no interest monthly payments

 

I'm using GemPages for my landing page and I'm trying to add a little snippet to the product price wiget that replaces the variants price with that the price divided by 4.

 

I plan to put text before it so it will look like "Or with 4 payments of <variant price / 4>, NO INTEREST"

 

 

<div class="module gf_module-{{align_lg}} gf_module-{{align_lg}}-lg gf_module-{{align_md}}-md gf_module-{{align_sm}}-sm gf_module-{{align_xs}}-xs {{extraClass}}" data-pid="{{product.id}}" data-round-decimals="{{round-decimals}}" data-round-to="{{round-to}}">
        {% assign current_variant = product.selected_or_first_available_variant %}

        <div class="gf_product-prices" data-oldformat="{{ shop.money_format }}" data-oldcurrency="{{ shop.currency }}">
            {% assign currentPrice = current_variant.price | plus: 0 %}
            {% assign comparePrice = current_variant.compare_at_price | plus: 0 %}

            {% if '{{compare-first}}' == '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% else %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}


                {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

            <span class="gf_product-price money" itemprop="price" data-price>
                {{ current_variant.price | money }}
            </span>

            {% if '{{compare-first}}' != '1' and '{{compare-price}}' == '1' %}
                {% if current_variant.compare_at_price == null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;display:none;" itemprop="price" data-price-compare-at>
                {% endif %}
                {% if current_variant.compare_at_price != null %}
                    <span class="gf_product-compare-price money" style="margin-right: {{price-margin}}!important;" itemprop="price" data-price-compare-at>
                {% endif %}
                    {{ current_variant.compare_at_price | money }}
                </span>
            {% endif %}

            {% if '{{percent-discount}}' == '1' %}
                {% if comparePrice <= currentPrice or comparePrice <= 0 %}
                    {% assign comparePrice = 1 %}
                    <span class="gf_pq-discount-selector" style="display:none">
                {% else %}
                    <span class="gf_pq-discount-selector">
                {% endif %}
                    <span class="gf_pq-discount">
                        {% assign diff = comparePrice | minus: currentPrice %}
                        {% assign comparePriceFloat = comparePrice | times: 1.0 %}
                        {% assign diff = diff | divided_by: comparePriceFloat %}
                        {% assign diff = diff | times: 100.0 %}
                        {% assign diff = diff | round %}
                        <span>{{before-percent-discount}}</span>
                        <span class="gf_pq-percent">
                        {{ diff }}%
                        </span>
                        <span>{{after-percent-discount}}</span>
                    </span>
                </span>
            {% endif %}
        </div>
    </div>

I've tried inserting this snippet

 

<span class="payment-plan">
<strong>or</strong>
4 monthly payments of {{ current_variant.price | plus: 0 | divided_by: 4 | money }}
</span>

 

And it sort of works, however there's two problems

 

1. My product has multiple variants and it only shows the price for the default variant, and doesn't change the price when the variant changes.

 

Ive tried adding 

 

{% assign current_variant = product.selected_or_first_available_variant %}

 

but no luck.

 

2. I would like the font to be a bit bigger

 

Anyone know whats going on here?

 

Thanks.

0 Likes