ウェブノウハウ

WEB KNOWHOW

ShopifyをカスタマイズしてオリジナルのECサイトを作る

ショッピングカートページの小計表示をディスカウントされた後の小計金額にする【テーマ:Debut】

値引きキャンペーンなどで使う「ディスカウント」設定。
 
ディスカウント設定をすると、ショッピングカートページの各商品の金額欄には、ディスカウントされる前の金額が横線で消され、ディスカウント後の金額が表示されます。
しかし、なぜか小計欄にはディスカウントされる前の金額の小計が表示されてしまいます。

理由を探ってよくよく見てみると、小計表示欄にもディスカウント後の金額が一瞬表示されています。その後何者かによってすぐに書き換えられている。
Javascriptの仕業ですね。
理由は不明ですが、htmlタグに設定されたclassのValueをJavascriptでわざわざ書き換えているらしいです。
したがって、ディスカウントされた後の小計金額を表示させたければ、そのclass名を変えてあげればいいですね。

<span class="cart-subtotal__price"><span class='hulkapps-cart-original-total'>{{ cart.total_price | money }}</span></span>

を探して、

<span class="cart-subtotal__price"><span class='hulkapps-cart-final-total'>{{ cart.total_price | money }}</span></span>

という具合に、クラス名”hulkapps-cart-original-total”を別のものに変更して完了。

【100ウェブ新着情報メルマガ】

WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!