How to display prices with two numbers after the decimal (USD) using template?

Open Q&A
, ,
#1

My prices are displayed sometimes with no decimal (60), sometimes with one decimal (60.1) and sometimes correctly (60.99). It appears they’re being truncated when they’re indexed as I’m definitely passing float values with two decimals to the index.

How can I modify my template so that prices always show as proper prices?

My template for “item” set using PHP

$item_template = '
            <button id="coupon-placement-{{ objectID }}" class="is-hidden is-pulled-left button yellow listicon sale-tag gift-deal" data-toggle="modal" data-target="#{{ title_for_modal }}"></button>
            <picture style="overflow:hidden;max-height:300px;" id="picture-{{ objectID }}"></picture>
            <p class="gift-title tight first"><strong>{{ title }}</strong></p>
            <p class="why">{{#helpers.snippet}}{ "attribute": "desc", "highlightedTagName": "mark" }{{/helpers.snippet}}</p>
            <p class="price tight second">\${{ price.final }}</p>
            <button type="button" class="button listicon details magenta" data-toggle="modal" data-target="#{{ title_for_modal }}" id="{{ title_for_modal }}-button">Details</button>
            <a href="https://wineclubreviews.net/clicks/outbound/gi/{{ objectID }}" target="_blank" rel="nofollow noopener" id="BuyGift:{{ objectID }}" class="button listicon cart green"> Buy</a>
            <ul class="three-col keywords" id="keywords-{{ objectID }}"></ul>
        ';

My code which sets the price value at indexing time

'price' => [
    'final' => (float) number_format($final_price,2),
    'regular' => (float) number_format($record['price'],2),
    'sale' => (float) number_format($record['price_sale'],2)
],
#2

Hello!

Algolia will not include any trailing zeros when indexing a float - so if you send it 60.100, it’ll index 60.1 for example.

You’ll want to instead add your formatting code to your template where you display the price. This should fix the issue you are seeing and give you a consistent format when displaying the results.

#3

Thank you for the feedback, I had kind of gathered that. I’m using the template as shown, do you know how I can manipulate the price display? I can’t find any documentation related to this.

#4

Apologies - I meant to include this snippet:

instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: `
        <div>
          <strong>Price</strong>: {{ price }}
        </div>
      `,
    },
    transformItems (items) {
      return items.map(entry => {
        entry.price = '$' + entry.price.toFixed(2)
        return entry
      })
    }
  })

Add this to the widget displaying the price, if the price is used in multiple widgets it may be best to transform it before indexing and include the string value such as:

'price' => [
    'final' => (float) number_format($final_price, 2),
    'regular' => (float) number_format($record['price'], 2),
    'sale' => (float) number_format($record['price_sale'], 2),
    'display' => '$' . strval(number_format($final_price, 2))
]

Let me know how this works, thanks!

1 Like
#5

This is perfect! Thank you so much! I only use the prices on hits, so I’ll start there.