Price Ranges & 'From' Min. Price to Max. Price - Debut Theme

Tourist
7 0 0

Hello, this worked perfectly for my debut theme page, i just removed the  {{ 'products.product.sold_out' | t }}

because it was showing all of my products as sold out..

Hope this helps 

0 Likes
Tourist
7 0 0

Nevermind, it didn't work because in the collection page it works fine,, but in the product page it doesn't show the individual variant price

0 Likes
New Member
6 0 0

I found a solution to this, sorry I didn't get around to posting it.  I'll pull my notes together and provide the details.  it required some scripting and minor code changes to the product_details template. 

 

It works really well for my store, which has services, not inventory of product. 

0 Likes
Shopify Expert
59 0 9

Hi Jay --

 

We are looking forward to your solution -- please post it.


Thanks!

Rowby

www.Rowby.com
Specializing in Shopify Solutions including CBD
0 Likes
New Member
6 0 0

Thank you Rowby for calling this back to me!  

 

I did find a fix that works for my store front. 

www.beachdayhawaii.com

 

I hired a Storetasker to completed the development as 'Out of the Sandbox' suggested I do because they didn't not have a easy recommendation on how to address what I wanted to do with displaying a price range for product variants. I worked with Joey Olaopa  to complete the coding change and he provided the  changes below.

 

If you have questions about the implementation into your theme I would recommend hiring him for a few hours to implement the change.  It works well, the code is in use today.  

 

This code worked after changing: 

$(".single-option-selector").on("click", function(){

 

to:

$(".single-option-selector").on("focus", function(){

 

The issue was with Desktop Safari vers 12 a few months ago.  It didn't like "click" so changing it to "focus" addressed it. 

 

---

Project######- Joey Olaopa via Storetasker

//css styles.scss.liquid LAST LINE

.hide_price{display: none;}

//APP.JS LINE 1874
$(document).ready(function(){
$(".single-option-selector").on("click", function(){
//console.log("hello");
$("#currentPrice").removeClass('hide_price').addClass('current_price');
$("#range").addClass('hide_price');
});
});

//LINE 55 product-details-template.liquid

<span id="range">
{{ product.price_min | money }} - {{ product.price_max | money }}
</span>
<span id="currentPrice" class="hide_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>

0 Likes
New Member
4 0 0

I just tried niconico's solution and had some trouble getting the min and max variant variables to work. 

 

After some experimentation, I found out the variant.price_min and variant.price_max values weren't being assigned to the variables correctly.  I'm a novice coder, so I'm hoping someone can spot what the issue might be.  The updated code is copied below.

 

Thanks all!

 

1.png2.png

0 Likes