カラーミーショップで、レスポンシブデザイン ECサイトを作成する その3

掲載日: / 更新日:
カラーミーショップで、レスポンシブデザイン ECサイトを作成する その3

カラーミーショップをカスタマイズするには、いろいろな無料のテンプレートの中身を見てみると参考になる部分が沢山あります。

Previewしながら、良いところを見つけたら中身を見て、参考にしちゃいましょう。

無料のテンプレートを他の無料のテンプレートの良いとこどりで、有料のテンプレート相当のものにUpgradeもできると思います。有料テンプレートにしかない画面いっぱいのスライドショーなどは、有料テンプレートのサンプルページなどのソースを見ることで、実現方法もわかると思います。

カラーミーショップは、SmartyというPHP用のテンプレートエンジンを使用しているそうで、テンプレートの中身を見るときにsmartyの公式ページのドキュメントが役に立ちます。(なかなか全部読んで理解するのは大変なので、いろいろなテンプレートや実際に表示させてみると大体は理解できるとは思いますので、わからないところや不安なところ、応用したいときなどに参考にするだけでも良いと思います。)

あと、テンプレートを理解して応用するには、カラーミーショップの独自タグを概要だけでも見ておいた方がよいでしょう。なんとなくでも意味が分かるような表記にはなっているので、すぐわかると思いますが、このカラーミーショップの独自タグの説明ページだけ見ただけでは、どうやって使うのかわからないことがあります。

例えば、「フリーページを1から100まで利用する場合」で、フリーページ98のURLはというと”<{$freepage[98].link_url}>”といった感じになります。これもテンプレートの中身を見ているとわかると思います。(昔、「プログラムを覚えるのに良いプログラムを読め」と言っていたのを思い出します。)

さて、テンプレートを見ているとよくある構文をいくつかあります。

1つは、ループ、もう1つは、分岐(if)これを知っていれば、流れの部分はカバーできると思います。あとは、ループを使う上で、ループの中の状態を知る方法でしょう。この3つを知っていれば、ほとんどのテンプレートは読めると思います。もちろん、html/CSS/Javascriptなどもある程度は理解できる知識が必要です(^-^;

<ループ section>

以下は、カテゴリリストを表示する処理です。「<{section……}>  ~  <{/section}>」

      <{section name=num loop=$category}>
        <{if $smarty.section.num.first }>
          <div>
            <h3 class=”pad_l_10″>カテゴリーから探す</h3>
            <ul class=”unstyled bor_b_1 mar_b_20″>
        <{/if}>
              <li class=”pad_10 bor_t_1″>
                <a href=”<{$category[num].link_url}>” class=”show txt_c_333″>
                  <{if $category[num].img_url != “”}>
                    <img src=”<{$category[num].img_url}>” class=”show hidden-phone mar_b_5 cat-left” />
                  <{/if}>
                  <{$category[num].name}>
                </a>
              </li>
        <{if $smarty.section.num.last }>
            </ul>
          </div>
        <{/if}>
      <{/section}>

<分岐 if>

以下は、ショップ会員機能が有効であれば、ログインしているかどうかで表示を変える部分です。

          <{if $members_use_flg == true}>
            <{if $members_login_flg == false}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-login”></i>ログイン</a>
              </li>
              <{if $members_register_flg == true}>
                <li class=”header-link”>
                  <a href=”<{$members_regi_url}>” class=”btn btn-01″><i class=”icon-w icon-adduser”></i>会員登録</a>
                </li>
              <{/if}>
            <{else}>
              <li class=”header-link”>
                <a href=”<{$members_login_url}>” class=”btn btn-01″><i class=”icon-w icon-logout”></i>ログアウト</a>
              </li>
            <{/if}>
          <{/if}>

<ループ状態 smarty.section>

<{smarty.section.xxx.yyyyy}> : section name=xxxのなかのプロパティyyyyyの値となります。

yyyyy:iteration(ループの現在の反復回数),index(ループのインデックスでしてしない場合は0から始まります),first(1回目の処理時にtrue),last(最後の処理時にtrue),rownum(iterationと同意,1から始まる),loop(ループの最後のインデックス番号,{section}の外で使えます。)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA