質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

カラーミーショップのトップページ内にコンテンツを追加したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 812

chamaki40

score 11

前提・実現したいこと

カラーミーショップで運営しているサイト内のトップにおすすめ商品(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">[&nbsp;<{$recommend[num].discount_rate}>OFF&nbsp;]</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&nbsp;<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&nbsp;<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

https://www.hanano-ya.jp/blog/programming/4654

https://naeco.jp/customize/smarty-for-colorme-shop

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

とりあえず参考にあげられたページのコードでできそうな物ですが、試していないのであれば試してから出会った問題について質問されることをお勧めします。

【質問するときのヒント|teratail(テラテイル)】
https://teratail.com/help/question-tips


追加したらレイアウトが崩れるのではないかと思い、特に手は加えていません。 

追加の仕方によってはそうなるでしょう。たしか仕様が変わっていなければ、カラーミーが対応していないSmartyの書き方や関数を使った場合、ページ自体が表示されません(エラー文のみが表示されたと思います)。HTML/CSSも文法を間違えると意図した表示になりません。</div>が少ないだけでも意図しない場所に要素が表示されることもあるかもしれません。JavaScriptはHTMLを書き換えることが出来るため、意図しない要素を消す可能性もあります。

で、カスタマイズするには当然それら(Smarty/HTML/CSS/JavaScript)の知識が必要になります。
cerfwebさんも書かれているように、テスト環境を用意して色々試すか、お金を払ってきちんとできる人に依頼されることをお勧めします。 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

Smartyのコードの書き方がわからないという意味かと思うのですが、いくつか気になる点を挙げます。
まず、<{if ...}>のような書き方をされている部分はhtmlタグとしての< >でない限りは{if ...}のような書き方になるはずです。if文だけでなく、<{...}>となっているところすべてに関してです。
また、テンプレートファイルに直接JavaScriptなどのコードを書き込む場合は

{literal}
// ここにJavaScriptのコード
{/literal}


というように囲む必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/10 21:24

    回答頂いてから返信が遅くなりすいません。 また回答ありがとうございます。
    smartyの書き方についてはおっしゃる通り、通常のHTMLと違い<{if}>~<{/if}>で終わる構文というのはわかりますが、それ自体を既存のソースに<div>~</div>と組み込んでも崩れてしまうと思ってやっていません。 独自タグ、Smartyでなければセクションを追加するだけなのですが、そもぞもどのような構文を書けば挿入したい箇所に表示されるかが分からないのです。

    キャンセル

  • 2019/03/11 01:07

    回答欄に書きましたように<{if}>~<{/if}>という書き方は間違っています。Smartyは{if ...}〜{/if}という書き方になるはずです。
    ソースを書き込むのが怖くてできないと言うのであれば、テスト環境を用意して色々試すのがよろしいかと思いますが、もしそれもできないのであれば、お金を払ってきちんとできる人に依頼されることをお勧めします。

    キャンセル

  • 2019/03/11 01:27

    To: cerfwebさん
    カラーミーの仕様です。

    【独自タグ一覧(PC、スマートフォン) | カラーミーショップ マニュアル】
    https://shop-pro.jp/manual/menu_06_02_01

    【カラーミーショップでカスタマイズするときに覚えておきたい条件分岐【ページ編】 | UNORTHODOX WORKBOOK | Blog】
    https://theorthodoxworks.com/color-me-shop/conditional-branch/

    キャンセル

  • 2019/03/11 01:34

    kei344さん、ご指摘ありがとうございます。そうなんですね。知りませんでした。

    chamaki40さん、ということで、私の出る幕ではなさそうです。お力になれずすみません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる