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

NO IMAGE

定率値引き(「○%引き」)クーポンの対象商品に、「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円って感じで表記するってことですね。

 

appendで価格を挿入

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

 

まとめる

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

表示結果はこちら

まとめ

今回は価格の自動化について語りましたがいかがだったでしょうか。

簡単に今回の流れを述べると…

  1. 値引き額を算出する
  2. 割引価格を算出する
  3. 桁区切りをつける
  4. appendで価格を挿入

定率値引き(「○%引き」)クーポンを発行したら商品価格を自動化してラクしましょう!

それではこのへんで。

以上!

EC関連カテゴリの最新記事