Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Changing What Price Variant Displays in the "from" field


RachelF

Recommended Posts

Hi All,

 

I am working on building a site for my mom and have run into an issue. She runs a food business and offers dishes that either serve 4 or 2 people and then offers pricing for an additional portion. She has a set menu every week and it is misleading for the "from" price that is displayed for each item to show the additional portion pricing. She does not offer meals for one and would prefer the price for meals for 4 (which is her standard order) to display first. Is there a way to get the "from" price to display the most expensive variant first instead of the least? I searched the forum and others recommended adding this as a separate item in the shop (for instance if someone is offering fabric samples) -- however this does not work for a full week's menu and would end up making the store look very messy/not user friendly. Any help would be appreciated! Here are some visuals if it is helpful: 

Screen Shot 2020-12-16 at 6.14.45 PM.png

Screen Shot 2020-12-16 at 6.14.56 PM.png

Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection of the Store page.

 

<script>

  $( ( ) => {
  
    if ( ! $( '.ProductItem' ).length ) return;
    
    let dataVariants = $( '.product-variants' ).attr ( 'data-variants' );
    
    dataVariants = JSON.parse ( dataVariants );
    
    let prices = $.map ( dataVariants, function ( obj ) {
    
      let price = obj.onSale ? obj.salePrice : obj.price;
      
      price = price / 100;
      
      return price;
      
      } );
      
    let maxPrice = Math.max ( ...prices ).toFixed ( 2 );
    
    let $e = $( '.product-price' );
    
    $( 'span', $e ).text ( maxPrice );
    
    $( '.variant-option select' ).change ( function ( ) {
    
      if ( $e.text ( ).includes ( 'from' ) )
      
        $( 'span', $e ).text ( maxPrice );
        
      } );
      
    } );
    
  </script>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Ah thank you, I think I see where the discrepancy is? When you click through to an item it displays the more expensive item first -- however anywhere that shows the item thumbnail view (for instance on the home page or even on the order page) it still displays the lowest price first. Is there a way to make it display the highest price first across the site?

Screen Shot 2020-12-17 at 6.10.26 PM.png

Screen Shot 2020-12-17 at 6.10.39 PM.png

Link to comment
8 minutes ago, RachelF said:

Is there a way to make it display the highest price first across the site?

There is no setting for that in the SS interface. So any changes would have to be done through Javascript.

Unfortunately product items is the only place that has ready access to the variant information that I was able to use to determine max price.

If you want to do the same thing in other locations then there are some other ways it may be achieved.

One might be a piece of code that you would manually maintain a mapping between the product item and a max price. It would be a little tedious perhaps but probably not to bad if you only have to update once a week.

The other option might be to get on the Advanced Commerce plan and use the commerce api to take care of updating the max prices automatically.

These two options would take some amount of work.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Ah thank you, this is a total bummer. I am guessing there is also no way to change it so that is just shows a range of prices instead? So for instance if you can't show the highest price first, show "$20-$50" or whatever the price may be? (I'm trying to think of a work around that might be doable).

Link to comment

Wether you are showing the max price or a range the summary and product grid don't have ready access to the information needed to achieve those effects. The underlying code and procedures to keep the data up to date would be the same.

To be clear what you want to do, I think, can be done but it's not a few lines of code easily thrown together.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 4 months later...
On 12/17/2020 at 1:31 PM, creedon said:

Add the following to Settings > Advanced > Code Injection > HEADER.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection of the Store page.

 


<script>

  $( ( ) => {
  
    if ( ! $( '.ProductItem' ).length ) return;
    
    let dataVariants = $( '.product-variants' ).attr ( 'data-variants' );
    
    dataVariants = JSON.parse ( dataVariants );
    
    let prices = $.map ( dataVariants, function ( obj ) {
    
      let price = obj.onSale ? obj.salePrice : obj.price;
      
      price = price / 100;
      
      return price;
      
      } );
      
    let maxPrice = Math.max ( ...prices ).toFixed ( 2 );
    
    let $e = $( '.product-price' );
    
    $( 'span', $e ).text ( maxPrice );
    
    $( '.variant-option select' ).change ( function ( ) {
    
      if ( $e.text ( ).includes ( 'from' ) )
      
        $( 'span', $e ).text ( maxPrice );
        
      } );
      
    } );
    
  </script>

Let us know how it goes.

First, thank you for this. I'm trying to figure out something like this, too, and am having similar issues on the main product page. But at least this would clear some things up... However, in our case, we would like to instead show the second-lowest or third-lowest value, which is always the first drop-down item on each page for us if that's helpful. Would it be possible to modify this for that purpose? Site where we're trying to do this: nycfilmlab.com.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...