Where to modify variant selection stuff

Solved
New Member
5 0 0

I coded a way to show the Compare At Price in place of the normal Price for customers with a Wholesale tag. I plan on using this with a tiered pricing app so they'll get the right pricing on checkout, I'm just modifying what they see.

 

When I open the product page, it displays correctly as you can see, but when I change variants and change back, it displays the regular compare at price numbers instead of what I coded in. Something must be overwriting or going to some default when I change variants, I just don't know what. This is on Venture theme. 

 

IxMj6HvdX6.gif

 

{% if customer.tags contains 'WHOLESALE' and product.compare_at_price > product.price %}
          <ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
            <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
              <div class="product-tag">
                WHOLESALE
              </div>
            </li>
            <li>
              {% unless product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              {% endunless %}
              <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.compare_at_price | minus: 100 | divided_by: 2 | money}}
              </span>
            </li>
            {% if product.compare_at_price_max > product.price %}
              <li>
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                  {{ current_variant.price | money }}
                </s>
              </li>
            {% endif %}
          {% else %}
            <ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
              <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
                <div class="product-tag">
                  {{ 'products.product.on_sale' | t }}
                </div>
              </li>
              <li>
                {% unless product.compare_at_price_max > product.price %}
                  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                {% endunless %}
                <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                  {{ current_variant.price | money }}
                </span>
              </li>
              {% if product.compare_at_price_max > product.price %}
                <li>
                  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                  <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                    {{ current_variant.compare_at_price | money }}
                  </s>
                </li>
              {% endif %}
          {% endif %}

The code in between after the else is what's there by default. I added the if and the modified default code with things changed around to display for wholesale.

 

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.compare_at_price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>

I wonder if it has anything to do with this but nothing I change does anything. 

 

you can see in the gif that it starts out displaying just fine, but when I click out of the variant and click back, it goes back to the regular "On Sale" format.

 

This would be a good temporary wholesale setup, other ways are too expensive. I also have code working to display the right price on product cards, but this is all that's left that I can't figure out.

0 Likes

Success.

Shopify Partner
457 78 89

@Joseph_Gutierre 

 

When product page is loaded, it load the static data, when the variant is change the prices/availability/image and etc are being updated via JS code.

Usually it is in theme.js.liquid or simialar, so you should find where in JS files the variants changes are being watched and make need edits there.

For an experienced developer it is about 40mins work.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
New Member
5 0 0

I've found it in theme.js

 

IDY8oWU6ny.gif

 

     * Trigger event when variant price changes.
     *
     * @param  {object} variant - Currently selected variant
     * @return {event} variantPriceChange
     */
    _updatePrice: function(variant) {
      if (
        variant.price === this.currentVariant.price &&
        variant.compare_at_price === this.currentVariant.compare_at_price
      ) {
        return;
      } else {
        variant.compare_at_price = variant.price
		variant.price = (variant.price)/2
      }

I added the else. I see that I'm permanently updating the price of them and so it'll half every time the function gets called. I haven't thought of a workaround just yet even though it might seem simple, I may ultimately go for a subscription wholesale app which will give me more and easier options anyways. This will rely on the Volume & Tiered Discounts app's $10 subscription anyways since I need only "Wholesale" tagged customers to have discount access, so I might as well go for a full app.

 

Thanks for pointing me in the right direction though! I spent hours looking at the cryptic liquid code and I'm sure I could use my new familiarity with it in the future. Hopefully someone else will find this useful.

0 Likes