for

Hogan helpers

Front-end logic helpers


Helpers are functions to add a bit of logic to your templates.

They are defined in the assets/algolia_helpers.js.liquid file, and will be available in the Hogan templates (e.g. snippets/algolia_product_autocomplete.hogan.liquid).

These are Mustache lambdas, so you can call them like a block in your templates:

[[# lambda ]][[/ lambda]]

You can use only one parameter with your lambda: the text contained in it.

In a lambda, this is the object passed as a parameter to the Hogan template.
In snippets/algolia_product_autocomplete.hogan.liquid for example, this will be the product object returned by Algolia.

Every Hogan template will be called with access to those lambdas.

Simple example

Let's first define a lambda:

algolia.helpers = {
  printer: function (text, render) {
    return render(text);
  }
};

Rendering the template

[[# helpers.printer ]]
  2
[[/ helpers.printer ]]

Called with

{
  helpers: algolia.helpers
}

Will just output: 2.

More complex example

algolia.helpers = {
  image_tag: function (text, render) {
    return '<img ' +
        'src="' + render(text) + '" ' +
        'alt="' + this.default_alt + '" ' +
      '/>';
  }
}

Rendering the template

[[# helpers.image_tag ]]
  [[ image ]]
[[/ helpers.image_tag ]]

Called with

{
  image: 'https://www.google.com/images/srpr/logo11w.png',
  default_alt: 'Image',
  helpers: algolia.helpers
}

Outputs

<img src="https://www.google.com/images/srpr/logo11w.png" alt="Image" />

Available helpers

formatNumber

Takes a number as a parameter and returns it formatted in the locale string of the user.

[[# helpers.formatNumber ]]
  2300.43
[[/ helpers.formatNumber ]]

Outputs (depending on your Shopify's settings)

2,300.43

formattedPrice

Takes a number as a parameter and returns it formatted with currency.

[[# helpers.formattedPrice ]]
  200
[[/ helpers.formattedPrice ]]

Outputs (depending on your Shopify's settings)

$200

formattedPriceWithoutDecimals

Takes a number as a parameter, applies formattedPrice on it but removes the decimals.

[[# helpers.formattedPriceWithoutDecimals ]]
  200.34
[[/ helpers.formattedPriceWithoutDecimals ]]

Outputs (depending on your Shopify's settings)

$200

autocompletePrice

Prints the price of an Algolia product (this).
If the search uses distinct, show the price range instead.

[[# autocompletePrice ]]
[[/ autocompletePrice ]]

Example 1:
Called with

{
  price: 90,
  compare_at_price: 100
  price_ratio: 0.9,
  variants_min_price: 70,
  variants_max_price: 110,
  _distinct: false
}

Outputs

<b>$90</b>

Example 2:
Called with

{
  price: 90,
  compare_at_price: 100
  price_ratio: 0.9,
  variants_min_price: 70,
  variants_max_price: 110,
  _distinct: true
}

Outputs

<b>$70 - $110</b>

instantsearchPrice

Prints the price and its discount of an Algolia product (this).
If the search uses distinct, show the price range instead.

[[# instantsearchPrice ]]
[[/ instantsearchPrice ]]

Example 1:
Called with

{
  price: 90,
  compare_at_price: 100
  price_ratio: 0.9,
  variants_min_price: 70,
  variants_max_price: 110,
  _distinct: true
}

Outputs

<b>$90</b>
<span class="ais-hit--price-striked">$100</span>
<span class="ais-hit--price-discount" style="font-weight: 100;">-10%</span>';

Example 2:
Called with

{
  price: 90,
  compare_at_price: 100
  price_ratio: 0.9,
  variants_min_price: 70,
  variants_max_price: 110,
  _distinct: true
}

Outputs

<b>$70 - $110</b>

fullTitle

Prints the title with the variant information of an Algolia product (this).

[[# fullTitle ]]
[[/ fullTitle ]]

Called with

{
  title: 'iPhone',
  variant_title: '64GB / Gold'
}

Outputs

iPhone (64GB / Gold)
Doesn't print the variant_title if it equals "Default Title" or "Default"

fullHTMLTitle

Same than fullTitle, but with search highlighting tags included.

floor

Applies Math.floor to the number passed as parameter

[[# helpers.floor ]]
  2.43
[[/helpers.floor ]]

Outputs

2

ceil

Applies Math.ceil to the number passed as parameter

[[# helpers.ceil ]]
  2.43
[[/helpers.ceil ]]

Outputs

3

Image helpers

Images URLs helper for an Algolia product (this).

You can use the sizedImage helper to specify a size for your image.
You can use all the available size options of img_url in liquid.
It also works with named sizes.

[[# sizedImage ]]
  64x32
[[/ sizedImage ]]
[[# sizedImage ]]
  64x
[[/ sizedImage ]]
[[# sizedImage ]]
  pico
[[/ sizedImage ]]

Called with

{
  image: 'https://i.myshopify.com/abc.png'
}

Outputs

https://i.myshopify.com/abc_64x32.png
https://i.myshopify.com/abc_64x.png
https://i.myshopify.com/abc_pico.png

For backward compatibility, you can also use named sizes helpers (deprecated by Shopify):

  • picoImage
  • iconImage
  • thumbImage
  • smallImage
  • compactImage
  • mediumImage
  • largeImage
  • grandeImage
  • originalImage
[[# picoImage ]]
[[/ picoImage ]]

Called with

{
  image: 'https://i.myshopify.com/abc.png'
}

Outputs

https://i.myshopify.com/abc_pico.png