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

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

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

スマートフォン用viewport

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

<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テンプレートをカスタマイズをする記事はこれを使っています。

<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を埋め込むこともできます。
設定で「自動改行する」にしている場合は、行末に自動的に<br />タグが埋め込まれてしまい、JavaScriptのコードがエラーになります。

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

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

執筆者

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

メーカー系情報システム部門出身で、第一種情報処理技術者
個人事業主/カラーミー歴11年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。

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