ECサイト運営で使える便利なjQuery

はじめに

こんにちは、サポート部の井上です。今回はASPを使用したECサイト制作で使える、便利なjQueryをいくつか紹介します。

ASPでのECサイトは便利な反面、よく「ASP側で生成されている要素があるから細かい調整がしにくい」といった声をいただきますが、jQueryを使用することで比較的ソースコードの調整もユーザー側で可能になります。

目次

１．文面を変更する
２．URLを取得して表示を切り替える
３．要素の数に応じてHTMLを書き換える
４．クラスが付いていない箇所にクラスを付与する
５．クラスが付いている箇所にテキストを割りこませる

１．文面を変更する

ASPでECサイトを制作していると、しばしば文字がデフォルトで入力されており、管理画面から変更できない事があります。そういった文章を取得して、指定の変更する事ができる設定です。

$(function() {
 //"「sysMypage」というクラスの中にある文章を対象とします
    $(".sysMypage").each(function(){
        var replcaceTxt = "変更後文章をここに";
        var txt = $(this).html();
        $(this).html(txt.replace(/変更前文章/g,replcaceTxt));
    });
});

上のケースでは、「変更前文章」と書かれている部分が全て「変更後文章をここに」という文章に変更されます。

２．URLを取得してCSSを切り替える

URLの文字列を取得して、該当箇所にクラスを付与する事ができます。
たとえば、「該当のURLが入っている商品のみカートボタンを表示させない」等の設定が可能になります。今回はカートボタンに”.sysCartButton”というクラスが付いている場合で説明させていただきます。

$(window).bind("load", function(){
 //"URLに「aaaaa」という文字列があれば
    if(document.URL.match('aaaaa')) {
 //".sysCartButtonにnewClassというクラスを付与する
      $(".sysCartButton").addClass("newClass");
    }
});

このnewClassに対して、以下の様なCSSを入力する事で「URLに”aaaaa”という文字列がある時のみ”カートボタン(.sysCartButton)”を表示させない」という設定が可能です。

CSSはこちら。

.newClass{
display:none;
}

３．要素の数に応じてHTMLを書き換える

ページ内にある要素の数に合わせてHTMLを書き換える事ができる設定です。

例えばこれを応用する事で「カート内の商品が4件以上もしくは2件以下だったら文章を表示させる」等の設定が可能です。

$(function(){
 //"#sysBasket .sysItemListAreaの要素毎に処理する
 $("#sysBasket .sysItemListArea").each(function () {
 //".sysItemListAreaの要素内のliの数をカウント
 var num = $(this).find('ul.nav li').length;
 //"もしも#sysBasket .sysItemListArea内のul.nav liが4件以上もしくは2件以下だったら
 if(num >=4 || num <=2){
 //"HTMLを書き換えます
 $(this).find('ul.nav li').html('<b>HTMLの書き換え</b>');
 }
 });
});

４．クラスが付いていない箇所にクラスを付与する

ASPでECサイトを制作していると、しばしばHTMLがデフォルトで入力されており、管理画面からクラスが付与できない事があります。そのような際に、任意の箇所にクラスを付与する事ができる設定です。

$(function(){
//"セレクタで指定したdivタグにクラスが付いていない場合、「newClass」というクラスを付与します。
      $(".sysFormField div").addClass("newClass");
});

５．クラスが付いている箇所にテキストを割りこませる

4との合わせ技で、クラスが元々無かった部分に文言を付与する事ができます。

$(function(){
//"付与したtextareaタグにテキストを割り込ませます。
   $(".textinput").text("このテキストが備考欄に入力されます")
});

おわりに

jqueryやJavaScriptはHTML初心者には少しとっつきにくい印象がありますが、非常に便利です。フロント側で出来ることの幅も大きく広がりますので、ぜひチャレンジしてみてください。

井上