jQueryの自動化で商品価格はラクしよう！

定率値引き（「○％引き」）クーポンの対象商品に、「20％OFF！」など割引価格を表示することがあると思います。

数品だけなら割引価格をただ記述すればいいんですけど、これが数十種類になってくると一つ一つ計算して記述するのは大変です。

それを、自動化できたらラクじゃないですか？

今回はそんなサボってラクする情報を共有します。

例として、通常価格1,000円の商品を20％OFFした割引価格を表示する時の流れを説明していきます。

この記事の目次

前準備

今回はjQueryを使うので前もってjQuery読み込みます。

まずは割引価格を表示させる要素divを用意して、「data-price」属性の値に通常価格の「1000」を記述します。

「data-price」はカスタムデータ属性なので「price」の部分はお好きなものに変更可能です。

続いて値引き額です。

今回でいうと通常価格1,000円の20％の値引き額を算出します。

小数点以下が発生した場合は切り捨てします。

※楽天とヤフーショッピングで定められたクーポン定率割引の計算方法に則ります。

JavaScriptの切り捨て、切り上げ、四捨五入についてまとめてます。

値引き額が算出できたら次は実際に表示する割引価格です。

割引価格は通常価格－値引き額で算出します。

桁区切りとは値段の3桁ごとについている「,」のことです。

1000円や1000000円を1,000円、1,000,000円って感じで表記するってことですね。

算出した価格をjQueryのappendを使って挿入します。

今までのを全部まとめるとこんな感じ。

表示結果はこちら

価格の自動化の流れをおさらい。

定率値引き（「○％引き」）クーポンを発行したら商品価格を自動化してラクしましょう！