Q&A
回答頂いてから返信が遅くなりすいません。 また回答ありがとうございます。
smartyの書き方についてはおっしゃる通り、通常のHTMLと違い<{if}>～<{/if}>で終わる構文というのはわかりますが、それ自体を既存のソースに<div>~</div>と組み込んでも崩れてしまうと思ってやっていません。 独自タグ、Smartyでなければセクションを追加するだけなのですが、そもぞもどのような構文を書けば挿入したい箇所に表示されるかが分からないのです。
前提・実現したいこと
カラーミーショップで運営しているサイト内のトップにおすすめ商品(NEW ARRIVAL)があり
その下に別の商品を掲載するためのsectionを作りたいです。
RANKINGの上部に
実装させたいサイト
http://shop.cherry-ann.com/
発生している問題・エラーメッセージ
エラーはまだおきていません。
追加したらレイアウトが崩れるのではないかと思い、特に手は加えていません。
該当のソースコード
デザイン編集のトップページ かなり長いの一部、省略します
<!-- スライドショー --> <{if $slideshow_html}> <div class="slider"> <{$slideshow_html}> </div> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#slider').bxSlider({ auto: true, pause: 5000, speed: 500, controls: true, captions: true, pager: false, responsive: true, useCSS: false, mode: 'fade' }); }); //]]> </script> <{/if}> <!-- //スライドショー --> <br><br> <!--べた付けバナー --> <div style="margin-bottom:10px;"> <div class="hidden-phone"><a href="http://shop.cherry-ann.com/?mode=f34"><img src="http://cherry-ann.com/cherry_ann_page/page/renewal_2019/renewal_ban.jpg" alt="Cherry Ann Renewal" target="_blank" width='100%' /></a></div> </div> <!--べた付けバナー--> <!-- 固定バナーSP --> <div class="side_banner side_banner_lists row unstyled visible-phone container"><a href="http://shop.cherry-ann.com/?mode=f34"><img src="http://cherry-ann.com/cherry_ann_page/page/renewal_2019/renewal_ban.jpg" alt="Cherry Ann Renewal" width='100%' /></a></div> <!-- // 固定バナーSP --> <!-- 元からあったお知らせ <{if $info != ""}> <div class="info"> <h2 class="info_heading heading">インフォメーション</h2> <dl class="info_detail info_detail_lists"> <{$info}> </dl> </div> <{/if}> // 元からあったお知らせ --> <!-- お知らせ --> <div> <h2 class="h2_title"><a href="http://shop.cherry-ann.com/?mode=f32">INFORMATION<i class="fas fa-arrow-alt-circle-right"></i></a></h2> </div> <!-- // お知らせ --> <hr> <!-- おすすめ商品 --> <{if $recommend_num != 0}> <div class="recommend"> <h2 class="h2_title">NEW ARRIVAL</h2><!--<font color="#cf0400">9/15(金)21:00 発売</font>--> <ul class="row unstyled recommend_lists"> <{section name=num loop=$recommend}> <li class="col col-sm-4 col-lg-4 recommend_list<{if $smarty.section.num.iteration > 6}> hidden-phone<{/if}>"> <a href="<{$recommend[num].link_url}>"> <{if $recommend[num].img_url != ""}> <img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name}>" class="show item_img" /> <{else}> <img src="https://img.shop-pro.jp/tmpl_img/76/noimage.png" alt="" class="show item_img" /> <{/if}> </a> <a href="<{$recommend[num].link_url}>"> <span class="item_name show"><{$recommend[num].name}></span> </a> <{if $recommend[num].soldout_flg == false}> <{if $members_login_flg == true && $recommend[num].discount_flg == true}> <span class="item_regular_price show"><{$recommend[num].regular_price}></span> <{/if}> <{if $members_login_flg == true && $recommend[num].discount_flg == true}> <span class="item_price item_price_discount show"><{$recommend[num].price}></span> <span class="item_discount_rate">[ <{$recommend[num].discount_rate}>OFF ]</span> <{else}> <span class="item_price show"><{$recommend[num].price}></span> <{/if}> <{else}> <span class="item_price show"><{$recommend[num].price}></span> <span class="item_soldout show">SOLD OUT</span><!--9/15(金) <br>21:00 発売--> <{/if}> </li> <{/section}> </ul> <{if $recommend_num > 6}> <div class="more-prd btn btn-block btn-more hidden-tablet hidden-desktop"> <span>もっと見る</span> </div> <{/if}> </div> <{else}> <div class="recommend_else"><img src="http://cherry-ann.com/cherry_ann_page/img/21.png" alt="ただいま発売準備中です。開始時刻まで今しばらくお待ちくださいませ。発売は21時となっております。" style="width: 100%;"></div> <{/if}> <div style="text-align:center; margin-top: 10px;"><a href=" http://shop.cherry-ann.com/?mode=grp&gid=417540" class="more_square_btn">MORE <i class="fas fa-caret-right"></i></a></div> <!-- // おすすめ商品 --> <br> <hr> <{* ↓↓↓↓↓---------- サイドバナー上部 - 差替箇所 ----------↓↓↓↓↓ *}> <{* <a href="リンク先URL"><img src="画像URL" alt="説明文" />となります。それぞれ任意に差し替えてご利用下さい。 *}> <{* 不要の場合には<ul>----</ul>を<!-- <ul>----</ul> -->のようにコメントアウトしていただければ表示されません。 *}> <ul class="side_banner side_banner_lists row unstyled visible-phone container"> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=grp&gid=417540"><img src="http://cherry-ann.com/cherry_ann_page/banner/new_arrival_540.jpg" alt="NEW ARRIVAL" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=f4"><img src="http://cherry-ann.com/cherry_ann_page/banner/schedule_540.jpg" alt="発売予定" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=f23"><img src="http://cherry-ann.com/cherry_ann_page/banner/ig_540.jpg" alt="Instagram Coordinate" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=f38"><img src="http://cherry-ann.com/cherry_ann_page/banner/ban_540_250_4.jpg" alt="Cherry Ann Pre Spring Collection 2019 Vol3" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=f37"><img src="http://cherry-ann.com/cherry_ann_page/banner/ban_540_250_3.jpg" alt="Cherry Ann Pre Spring Collection 2019 Vol2" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=f35"><img src="http://cherry-ann.com/cherry_ann_page/banner/ban_540_250_2.jpg" alt="Cherry Ann Pre Spring Collection 2019" /></a></li> <li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?mode=grp&gid=2015941"><img src="http://cherry-ann.com/cherry_ann_page/banner/ban_sof_side.jpg" alt="Spring Outer Fair" /></a></li> <!--<li class="side_banner_list col col-sm-4 col-xs-12"><a href="http://shop.cherry-ann.com/?tid=28&mode=f33"><img src="http://cherry-ann.com/cherry_ann_page/banner/2018_aw_1_540.jpg" alt="Early Autumn Collection" /></a></li>--> <!--<li class="side_banner_list col col-sm-4 col-xs-12"><a href=""><img src="http://cherry-ann.com/cherry_ann_page/banner/2018_ss_1_540.jpg" alt="下段バナーの説明文" /></a></li>--> </ul> <div class="side_banner side_banner_lists row unstyled visible-phone container" style="text-align:center;"><a href="http://shop.cherry-ann.com/?mode=f31" class="more_square_btn">MORE <i class="fas fa-caret-right"></i></a></div> <{* ↑↑↑↑↑---------- //サイドバナー上部 - 差替箇所 ----------↑↑↑↑↑ *}> <hr class="side_banner side_banner_lists row unstyled visible-phone container"> <!-- ランキング --> <!-- <h2 class="h2_title">RANKING</h2> <section class="center slider"> <div >1位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> <div>2位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> <div>3位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> <div>4位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> <div>5位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> <div>6位<br> <img src="http://img12.shop-pro.jp/PA01067/663/product/135344772.jpg"> </div> </section> <br> <br> --> <!-- // ランキング --> <!-- 売れ筋商品 --> <{if $seller_num != 0}> <div class="seller"> <h2 class="h2_title">RANKING</h2> <ul class="row unstyled seller_lists"> <div class="slider-wrapper"> <div class="rank_slider"> <{section name=num loop=$seller}> <div class="rank_slide"> <li class="col col-sm-4 col-lg-3 seller_list<{if $smarty.section.num.iteration > 6}> hidden-phone<{/if}>"> <span class="rank_box rank_pc_box"> <span class="rank_number rank_pc_number"></span> </span> <a href="<{$seller[num].link_url}>"> <{if $seller[num].img_url != ""}> <img src="<{$seller[num].img_url}>" alt="<{$seller[num].name}>" class="show item_img" /> <{else}> <img src="https://img.shop-pro.jp/tmpl_img/76/noimage.png" alt="" class="show item_img" /> <{/if}> </a> <a href="<{$seller[num].link_url}>"> <span class="item_name show"><{$seller[num].name}></span> </a> <{if $seller[num].soldout_flg == false}> <{if $members_login_flg == true && $seller[num].discount_flg == true}> <span class="item_regular_price show"><{$seller[num].regular_price}></span> <{/if}> <{if $members_login_flg == true && $seller[num].discount_flg == true}> <span class="item_price item_price_discount show"><{$seller[num].price}></span>
試したこと
カラーミーショップは独自タグとsmartyで構成されているので
htmlソースを加えただけでは追加できない
そのため、調べてajax、javascriptで特定のカテゴリーを
トップに表示させることができると知りましたが実装の仕方がわかりません
補足情報（FW/ツールのバージョンなど）
参考サイト
https://kotaroishii.com/colorme-ajax
回答2件
0
ベストアンサー
とりあえず参考にあげられたページのコードでできそうな物ですが、試していないのであれば試してから出会った問題について質問されることをお勧めします。
【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips
追加したらレイアウトが崩れるのではないかと思い、特に手は加えていません。
追加の仕方によってはそうなるでしょう。たしか仕様が変わっていなければ、カラーミーが対応していないSmartyの書き方や関数を使った場合、ページ自体が表示されません（エラー文のみが表示されたと思います）。HTML/CSSも文法を間違えると意図した表示になりません。</div>が少ないだけでも意図しない場所に要素が表示されることもあるかもしれません。JavaScriptはHTMLを書き換えることが出来るため、意図しない要素を消す可能性もあります。
で、カスタマイズするには当然それら（Smarty/HTML/CSS/JavaScript）の知識が必要になります。
cerfwebさんも書かれているように、テスト環境を用意して色々試すか、お金を払ってきちんとできる人に依頼されることをお勧めします。
投稿2019/03/10 17:09
総合スコア69400
0
Smartyのコードの書き方がわからないという意味かと思うのですが、いくつか気になる点を挙げます。
まず、<{if ...}>のような書き方をされている部分はhtmlタグとしての< >でない限りは{if ...}のような書き方になるはずです。if文だけでなく、<{...}>となっているところすべてに関してです。
また、テンプレートファイルに直接JavaScriptなどのコードを書き込む場合は
Smarty
1{literal} 2// ここにJavaScriptのコード 3{/literal}
というように囲む必要があります。
投稿2019/03/08 13:50
総合スコア1899
回答欄に書きましたように<{if}>～<{/if}>という書き方は間違っています。Smartyは{if ...}〜{/if}という書き方になるはずです。
ソースを書き込むのが怖くてできないと言うのであれば、テスト環境を用意して色々試すのがよろしいかと思いますが、もしそれもできないのであれば、お金を払ってきちんとできる人に依頼されることをお勧めします。
To: cerfwebさん
カラーミーの仕様です。
【独自タグ一覧（PC、スマートフォン） | カラーミーショップ マニュアル】
https://shop-pro.jp/manual/menu_06_02_01
【カラーミーショップでカスタマイズするときに覚えておきたい条件分岐【ページ編】 | UNORTHODOX WORKBOOK | Blog】
https://theorthodoxworks.com/color-me-shop/conditional-branch/
kei344さん、ご指摘ありがとうございます。そうなんですね。知りませんでした。
chamaki40さん、ということで、私の出る幕ではなさそうです。お力になれずすみません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。