送料無料ラベルを自動で販売価格の後ろに表示させる

大手モールやカートシステムでは、商品ページに送料無料のラベルを表示させる場合、商品ごとに送料無料表示の設定を行うことが多いです。

これが地味にめんどくさかったりします。

今から紹介する方法は、商品ページに送料無料のラベルを、自動で表示させたい場合に役に立つ方法です。

「販売価格が一定金額以上で送料無料」になるルールを採用している店舗さん向けですが、工夫すれば、送料無料でなくて「今なら半額」とか「セール中」とか色々使えますので、楽しんでやってみて下さい。

HTML（商品ページ）

<p class="price">
    <span class="selling_price_str">価格：</span>
    <span class="selling_price">\12,000</span>
</p>

上記のような商品ページから価格情報を取得します。

JS（shippingterm.js）

jQuery(document).ready(function(){
  // 商品価格を取得して価格の後ろに送料無料を表記する

  // 商品ページの販売価格取得
  var c_itemprice = $('.price span.selling_price').text().trim();
  // ￥を除去
  var c_itemprice_value = c_itemprice.replace('¥','');
  // 桁区切りを除去して文字型から数値型に変換
  var c_itemprice_Num = Number(c_itemprice_value.replace(/,/, ''));

  if ( c_itemprice_Num >= 10000) {
    console.log('送料無料');
    $('.price span.selling_price').addClass('shippingfee_free');
    } else {
    console.log('送料かかるよ');
    }
});

このshippingterm.jsでは、HTMLから価格情報を取得した後、価格のセレクタ（span.span.selling_price）に、「shipppingfee_free」クラスを追加で付与します。

CSS

.shippingfee_free:after {
  content: "送料無料";
  background: red;
  color: #fff;
  display: inline-block;
  padding: 0 5px;
  width: 60px;
  margin: 0 5px;
}

追加で付与したクラス「shipppingfee_free」に対して、擬似クラスafterで「送料無料」ラベルを表示させます。

shippinguterm.jsは、外部ファイルで商品ページのheadで読み込むようにして下さい。

HTMLのセレクタを取得して、JSでゴニョゴニョする方法は、ネットショップ運営のいろいろな場面で使えるテクニックなので、覚えておいて損はないですよ！