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初心者には少しとっつきにくい印象がありますが、非常に便利です。フロント側で出来ることの幅も大きく広がりますので、ぜひチャレンジしてみてください。
井上
