WEB Tips デザイン・コーディング

カラーミーショップ 独自タグ カスタマイズ 【おすすめ商品】

2019-01-30

本記事にはプロモーションが含まれています。

カラーミーショップ 独自タグ カスタマイズ 【おすすめ商品】

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

カラーミーショップでネットショップを構築することになり、今まで何度か触っているカラーミーショップ独自のタグをおさらい中

※カラーミーショップはSmarty(PHPのテンプレートエンジン)を採用しています。

ショップのテンプレートはカラーミーショップで用意されているレスポンシブ対応の「カラーミーキット」を使っています。

カラーミーキット

"「カラーミーショップ」のカラーミーキットは、テンプレートのデザイン作業をより効率よくするフレームワークです。制作会社や個人のデザイナーのテンプレート作成を強力にバックアップ。

https://shop-pro.jp/?mode=tmpl_framework

smarty 基本のループ処理

<{section name=num loop=$productlist}>
  <div>
    <a href="<{$productlist[num].link_url}s>">
      <img src="<{$productlist[num].img_url}>"><br>
      <{$productlist[num].name}>
    </a>
    <br>
    <{$productlist[num].price}>円
  </div>
<{/section}>

トップページに載せる「おすすめ商品」のループ処理

<!-- おすすめ商品 -->
<{if $recommend_num != 0}>
  <div class="mar_b_50">
    <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn border-b-bl title">おすすめ商品</h2>
    <ul class="row unstyled">
      <{section name=num loop=$recommend}><!-- //おすすめ商品ループ start -->
        <li class="col col-xs-12 col-lg-6 recommend-unit pad_20 mar_b_30 txt_c">
          <a href="<{$recommend[num].link_url}>">
            <{if $recommend[num].img_url != ""}>
              <img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name}>" class="show mar_auto mar_b_10" />
            <{else}>
              <img src="https://img.shop-pro.jp/tmpl_img/73/noimage.png" alt="<{$recommend[num].name}>" class="show mar_auto mar_b_10" />
            <{/if}>
          </a>
          <a href="<{$recommend[num].link_url}>"><{$recommend[num].name}></a>
          <{if $recommend[num].s_expl != ""}>
            <{$recommend[num].s_expl}>
          <{/if}>
          <{if $recommend[num].soldout_flg == false}>
            <{if $members_login_flg == true && $recommend[num].discount_flg == true}>
             <{$recommend[num].regular_price}>
            <{/if}>
            <{$recommend[num].price}>
            <{if $members_login_flg == true && $recommend[num].discount_flg == true}>
              <{$recommend[num].discount_rate}>OFF!!
            <{/if}>
          <{else}>
            SOLD OUT
          <{/if}>
        </li>
      <{/section}>
    </ul>
  </div>
<{/if}>
<!-- // おすすめ商品 -->
  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-