【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

ASPを使用したECサイト制作で使える!便利なjQuery5選!

ASPを使用したECサイト制作で使える!便利なjQuery5選!

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

はじめに

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

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

目次

1.文面を変更する
2.URLを取得して表示を切り替える
3.要素の数に応じてHTMLを書き換える
4.クラスが付いていない箇所にクラスを付与する
5.クラスが付いている箇所にテキストを割りこませる

1.文面を変更する

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

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

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

2.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;
}

3.要素の数に応じて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>');
 }
 });
});

4.クラスが付いていない箇所にクラスを付与する

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

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

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

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

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

おわりに

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

井上

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+