リアルコマース スタッフブログ

Real Commerce株式会社スタッフブログ

CLOSE

makeshopでjQueryを使う場合の注意点

スライダーやカルーセルなどの見栄えによく利用されるjQueryですが、jQueryを利用するにあたっての基本的な注意点をまとめました。

jQueryの取扱には注意が必要

ネットでいくつも紹介されている魅力的なスライドショーやカルーセルなどのjQueryプラグインですが、取り扱いには注意が必要です。
多くのお客様から取り扱いについて、正しく動作しないと問い合わせを受ける原因の幾つかをご紹介します。

jQueryの読み込みは上段メニューで1度だけ行う

複数のバージョンのjQueryの読み込みを防止するため、jQueryの読み込みは上段メニュー1行目に1回だけ行います。
例えばcdnを利用する場合は、以下のように指定します。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

これ以降、スライドショーなどを追加する場合、jQueryの読み込みは必要ありません。
たとえ参考として紹介されているソースコードにjQueryの読み込み箇所があったとしても、その部分は必要ありませんのでご注意ください。

スライドショーを適用した場合の注意点

makeshopのトップページイメージ管理でスライドショーを利用した場合、自動的にjQueryが読み込まれてしまいます。
自動的に読み込まれるスライドショー(bxslider)の実行部分では、noConfrict()を利用して、該当バージョンしか読み込まないようにしています。

幾つものバージョンの読み込みを避けるために、本来ならばmakeshopが読み込んだバージョンを是非ご利用しましょう。

動作させる場所が違う、指定が違う

例えば、classにaaaが付いたpタグを表示させない場合の処理は以下のようになります。

<script type="text/javascript">
$(function(){
$('p.aaa').hide();
});
</script>

このとき、p.aaaの箇所がclassにaaaを持ったpタグの指定になります。classやidの指定はcssでの指定方法と同じで、「.」や「#」を利用しますので難しくはありませんが、どの部分にどういった動作をさせるのかを正しく指定しないと、もちろん正しく動作しませんのでご注意ください。

jsに間違いがある

そもそも動作させたいjavascriptに間違いがあると狙った動作をしません。当たり前ですよね。

まとめ

jQueryの読み込み回数やスクリプトの記述など幾つか注意点がありますが、javascriptやjQueryの基本がわかっていれば防げるミスが殆どです。
よくわからない場合は是非お問い合わせください。

この記事をシェアする