LiquidJSにて自作フィルターを使う方法
LiquidJSを使うとShopifyのLiquidテンプレートエンジンをクライアントサイドで使うことができますが、内部で使えるフィルターは必ずしもShopifyのLiquidテンプレートエンジンと同じではありません。
例えば数字をカンマ区切りで表示したい場合、ShopifyのLiquidテンプレートエンジンでは{{ 123456789 | money_without_currency }}
とすると123,456,789
と表示されますが、LiquidJSではこれに該当するフィルターが存在しません。
ですがLiquidJSでは割りと簡単に自作フィルターを追加することができます。
以下は{{money_without_currency}}
と同様にカンマ区切りで数字を表示出来る{{number_with_delimiter}}
というフィルターを追加する例です。
import { Liquid } from 'liquidjs';
const engine = new Liquid();
const appDiv: HTMLElement = document.getElementById('app');
/**
* 数字をカンマ区切りに変換する
* @param number
*/
const exchangeNumberWithDelimiter = (number: number) => number.toLocaleString();
// フィルターを追加登録
engine.registerFilter('number_with_delimiter', exchangeNumberWithDelimiter);
// パースとレンダリング
engine
.parseAndRender('{{123456789 | number_with_delimiter}}')
.then((render) => {
console.log(render); // 123,456,789
appDiv.innerHTML = render;
});
フィルターで実行したい関数と、それを登録するregisterFilter
メソッドを用意すれば簡単に自作フィルターを追加することができます。