カラーミー 2022年09月09日 naeco.jp

カラーミーカスタマイズで役立つJavaScriptの豆知識

カラーミーで使うJSアイキャッチ

JavaScript・jQueryのとりとめもない豆知識をメモる備忘録です。
カラーミーショップをある程度自分でいじれる方向けの内容になっています。

スマートフォン用viewport

レスポンシブテンプレートを自分で新規制作する場合は、以下のようなviewportを指定します。
maximum-scale=1.0 を取り払うと、ピンチによる拡大・縮小が効きます。 iOSは挙動が異なります（謎）。 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">


実際には、カラーミーショップはmetaタグを直接いじれませんので、JavaScriptで埋め込むことになります。
コードは下記URLを参考にします。
参考）https://img.shop-pro.jp/tmpl_js/76/utility.index.js

注意事項としては、viewportのJavaScriptは $(function () { }); 内に書いてはいけません（bxSliderの挙動がおかしくなります）。

// viewport
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
document.getElementsByTagName('head')[0].appendChild(viewport);

JavaScriptで同名の関数名がある場合は

あとから読み込んだ方で上書きされます。下の例では「上書き！」が表示されます。
カラーミーショップで読み込んでいるJavaScriptのコードを上書きしたいときは、それよりもあとに記述します。

MODEテンプレートをカスタマイズをする記事はこれを使っています。

JavaScript

<script type="text/javascript">

  function same(){
    alert("元メッセージ");
  }

  function same(){
    alert("上書き！");
  }

  $(window).load(function(){
    same();
  });

</script>

jQueryの読み込み

テンプレートによって違いますが、<head>内で jQuery 1.7.2 や jQuery 1.11.0 などのバージョンを読み込んでいます。
昨今ではjQuery 3.xまで登場していますが、カラーミーショップでは旧ブラウザ（IE8以下）対応のために古めのバージョンを使っています（IE8対応は不要だなと今でこそ思いますが、数年前まで現役でしたので）。

導入するjQueryプラグインによっては、バージョンがたりずに動作しなかったり、挙動がおかしかったりすることがときどきあります。
そういうときは必要なバージョンがいくつか確認します。

バージョンがたりないときは別バージョンを読み込むコードを記述します。
共通HTMLの先頭に下記コードを書くと、この行以降は別バージョンで実行することができます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

bxSliderのコールバック関数

コールバック関数とは、〇〇したタイミングで実行する関数のことです。
カラーミーショップで使っているbxSliderにもいくつか用意されています（興味があれば検索してみてください）。

onSliderLoad: function(index){ }
スライドショーの画像が読み込みこまれたタイミングで実行されるコールバック関数です。
下のコードのようにパラメータのところに書きます。

画像読み込み前は非表示（opacity: 0;）にしておき、画像が読み込み完了後に表示（opacity: 1;）します。
これをやると、スライドショーの画像読み込み中のレイアウト崩れがなくなります。

<style>
  #slider{ 
    opacity: 0;
    transition: opacity .3s linear;
  }
</style>

<script type="text/javascript">
  $(function() {
    $('#slider').bxSlider({
      auto: true,
      controls: false,
      pause: 5000,
      speed: 200,
      controls: false,
      captions: true,
      pager: false,
      mode: 'fade',
      easing: 'ease',
      onSliderLoad: function(index){
        $('#slider').css('opacity','1');
      }
    });
  });
</script>

商品説明欄にJavaScript

商品登録画面の商品説明欄は、文章以外にもJavaScriptを埋め込むこともできます。HTMLタグが入れられる欄内は同様です。

設定で「自動改行する」にしている場合は、行末に自動的に<br />タグが埋め込まれてしまい、JavaScriptのコードがエラーになります。

以下のように、コメント（//~）にして回避します。 OKが表示されれば、JavaScriptが実行できています。

<script>//
  alert("OK");//
</script>

執筆者

えいじ@naeco.jp　この記事を書いた人

メーカー系情報システム部門出身の個人事業主。
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。

ご相談・お問い合わせはこちら