カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

SOY Shopに関する話題はこちら。

カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by rio327 on 2018年1月29日(月) 18:17

お世話になります。

https://saitodev.co/article/SOY_Shop%E3 ... C%E3%81%86
「SOY Shopで複数カテゴリの様な設定を行う」の記事を参考にしまして、商品管理画面で選択した商品を、商品一覧ページに表示することができました。

この時、上記記事でいうところの「カテゴリ」名をそのカテゴリ商品一覧ページ表示させたいと考えています。

http://ドメイン/ショップID/ページのURL/フィールドID/カスタムサーチフィールドの値

で商品管理画面のカスタムサーチフィールド(以下CSF)にチェックを入れた商品が表示できるわけですが、
この「カスタムサーチフィールドの値」を商品一覧ページ内の一部で取得・表示したいのです。

ソース的には
---------------------------------------------------

コード: 全て選択
<h1>カスタムサーチフィールドの値(カテゴリ名)<h1>

<!-- block:id="item_list" -->
<div>
         <a cms:id="item_link">
         <img cms:id="item_small_image">
      </a>
   </p>
   <dl>
      <dt cms:id="item_name">商品名</dt>
      <dd cms:id="item_price">商品の価格</dd>
   </dl>
   
</div>
<!-- /block:id="item_list" -->

---------------------------------------------------

このような感じです。
block:id="item_list" の中であれば
<!-- csf:id="custom_tags_0_visible" --><!-- csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0_visible" -->
の記述でカテゴリ名を表示させることができますが、これは商品の数だけ繰り返して表示されてしまうため、実用できません。

<!-- shop:module="common.custom_search_field" -->内に表示させる方法も検討しましたが、「CSFのカテゴリが大量にある中でチェックが最初から入っている項目だけを表示させる」方法がわかりませんでした。

具体例を挙げますと、
https://kyonou.com/item/list/%E6%9C%89% ... 5%E6%96%99

こちらのページがCSFを用いたものであるなら、「有機質肥料」というタイトル、これを取得して表示する方法はないでしょうか?ということです。

これができるならテンプレートページをCSFの項目数だけ用意しなくて済みますので、大変ありがたいです。
不可能ならば、CSFの項目数分、項目名を別にしたテンプレートを作成する以外私には現状方法が思いつきません。

よろしくお願いいたします。
rio327
 
記事: 14
登録日時: 2016年2月08日(月) 01:44

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by polka on 2018年1月30日(火) 20:23

はじめまして。いちユーザーです。

rio327 さんが書きました:block:id="item_list" の中であれば
<!-- csf:id="custom_tags_0_visible" --><!-- csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0_visible" -->
の記述でカテゴリ名を表示させることができますが、これは商品の数だけ繰り返して表示されてしまうため、実用できません。


試していないので正しく動くかどうかはわからないのですが、
一番目の商品だけに適応させられるsoy:id="at_first"をお使いになるのはどうでしょう?

<!-- soy:id="at_first" -->
<!-- csf:id="custom_tags_0_visible" --><!-- csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0" --><!-- /csf:id="custom_tags_0_visible" -->
<!-- /soy:id="at_first" -->

soy:id="at_first"については、こちらに詳しく書かれています。
https://saitodev.co/article/SOY_CMS_Sho ... F%E3%81%84
polka
 
記事: 151
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by inunosinsi on 2018年1月31日(水) 04:55

具体例を挙げますと、
https://kyonou.com/item/list/有機質肥料

こちらのページがCSFを用いたものであるなら、「有機質肥料」というタイトル、これを取得して表示する方法はないでしょうか?ということです。


こちらの件ですが、残念ながらkyonou.comでは、カスタムサーチフィールドを利用していないです。
対応方法ですが、前に投稿していただいているpolkaさんの方法で一応対応できるはず(試していません)ですが、
一応、パンくずモジュールでカスタムサーチフィールドの商品一覧ページにも対応するコードが書かれていますので、

商品一覧ページでパンくずを設置する - SOY Shopを使ってみよう
に記載されている内容でも表示されるはずです。

試してダメでしたら、再度ご連絡下さい。
SOY CMSの操作に関する質問は下記のページのフォームで受け付けています。
https://saitodev.co/soycms/inquiry

京都でフリーのプログラマをしています。
SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 540
登録日時: 2008年6月12日(木) 20:48

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by rio327 on 2018年2月01日(木) 13:53

polka様、inunosinsi様、ありがとうございます。
なるほど、思いもかけない方法があるものですね。
本当に助かりました。パンくずは盲点でした。

お二人に教えていただいた方法を参考に、ある程度希望の挙動をさせることができました。
現在のソースはこのようになっています。

コード: 全て選択
<!-- block:id="item_list" -->
<!-- soy:id="at_first" -->
<!-- csf:id="category_0_visible --><h2>おいしいりんごです。</h2>
<!-- /csf:id=category_0_visible" -->
<!-- csf:id="category_1_visible" --><h2>甘いみかんです。</h2>
<!-- /csf:id="category_1_visible" -->
<!-- csf:id="category_2_visible" --><h2>新鮮なバナナです。</h2>
<!-- /csf:id="category_2_visible" -->

<!-- shop:module="common.breadcrumb_navigation" -->
<p id="pankuzu">
  <!-- block:id="breadcrumb" -->
<h2><!-- cms:id="current_name" -->カテゴリ名<!-- /cms:id="current_name" --></h2>
</p>
<!-- /shop:module="common.breadcrumb_navigation" -->
<!-- /soy:id="at_first" -->

<div>
         <a cms:id="item_link">
         <img cms:id="item_small_image">
      </a>
      <dl>
      <dt cms:id="item_name">商品名</dt>
      <dd cms:id="item_price">商品の価格</dd>
   </dl>
   </div>
<!-- /block:id="item_list" -->


前提として、「cfs:id="kudamono"」カテゴリにてりんご・みかん・バナナにチェックが入っています。
ここで、
http://example.com/shop/item/yasai_kudamono/kudamono/りんご
というページを開いたとします。

そうすると、カテゴリ名には「りんご」が表示され、商品も「りんご」カテゴリのものが表示されます。
しかし、上記<!-- csf:id="category_*_visible -->の部分では、りんご・みかん・バナナそれぞれの説明が表示されてしまいます。
恐らく、カテゴリ名に関係なくcfs:id="kudamono"内のチェックがある商品が全て出てくる仕様だと思います。
これは致し方ない気もするのですが、ここでカテゴリ名に沿ったものだけが表示できるようになれば、テンプレートページ一枚で各カテゴリの説明文をも表示できるようになるはずです。

恐縮ですが、この点に関しましてもよい方法がありましたらご教示願えませんでしょうか。
よろしくお願いいたします。
rio327
 
記事: 14
登録日時: 2016年2月08日(月) 01:44

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by inunosinsi on 2018年2月01日(木) 15:11

shop:module="common.breadcrumb_navigation"はblock:id="item_list"内に記述するとおかしな挙動になってしまいます。
shop:module="common.breadcrumb_navigation"はblock:id="item_list"よりも外側に書かなければダメなので、今回のコードを改修しても要望どおりの表示まではおそらく到達出来ません。

コード: 全て選択
<!-- shop:module="common.breadcrumb_navigation" -->
<p id="pankuzu">
  <!-- block:id="breadcrumb" -->
<h2><!-- cms:id="current_name" -->カテゴリ名<!-- /cms:id="current_name" --></h2>
</p>
<!-- /shop:module="common.breadcrumb_navigation" -->

<!-- block:id="item_list" -->
<div>
         <a cms:id="item_link">
         <img cms:id="item_small_image">
      </a>
      <dl>
      <dt cms:id="item_name">商品名</dt>
      <dd cms:id="item_price">商品の価格</dd>
   </dl>
   </div>
<!-- /block:id="item_list" -->


このように改修した後、
PHPモジュールでURLから判定して表示を出し分けるスクリプトを自作して設置する必要があります。
共通箇所をPHPモジュールで管理する(SOY Shop)(要PHP) - SOY Shopを使ってみよう
SOY CMSの操作に関する質問は下記のページのフォームで受け付けています。
https://saitodev.co/soycms/inquiry

京都でフリーのプログラマをしています。
SOY ShopのプラグインやSOY Appの開発のサポートをしています。
http://saitodev.co/soycms(SOY CMSのマニュアルを作成しています)

株式会社京都農販(SOY Shopのサイト)
株式会社コトブキ園(SOY Shop)
inunosinsi
 
記事: 540
登録日時: 2008年6月12日(木) 20:48

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by rio327 on 2018年2月01日(木) 16:25

inunosinsi様

ありがとうございます。
やはり正常な記述ではないですよね。

カテゴリの説明文
カテゴリ名

という表示順にしたかったため、item_list内に記述してしまいました。

PHPのスクリプト作成まではハードルが高そうですので、残念ですが手作業でテンプレートを作っていくことにします。

ありがとうございました。
rio327
 
記事: 14
登録日時: 2016年2月08日(月) 01:44

Re: カスタムサーチフィールドの商品一覧ページで、カテゴリ名を表示させたい

投稿記事by polka on 2018年2月05日(月) 06:43

inunosinsiさんが仰っているように、
block:id="item_list"と
shop:module="common.breadcrumb_navigation"を
入れ子にしないようにした上で、Javaスクリプト(jQuery)を使う方法はどうでしょう?


▽HTML
<!-- csf:id="category_0_visible --><h2 class="ringo">おいしいりんごです。</h2>
<!-- /csf:id=category_0_visible" -->
<!-- csf:id="category_1_visible" --><h2 class="mikan">甘いみかんです。</h2>
<!-- /csf:id="category_1_visible" -->
<!-- csf:id="category_2_visible" --><h2 class="banana">新鮮なバナナです。</h2>
<!-- /csf:id="category_2_visible" -->


▽スタイルシート
<style type="text/css">
h2{
display: none;
}
h2.visible{
display: block;
}
</style>


▽スクリプト
<script>
$(function(){
var ttl = document.URL; // URL取得
ttl = ttl.split("/"); // URLを「/」で分割して配列に格納
var num = ttl.length - 1; // 配列の最後(小カテゴリの番号)を定義
switch(ttl[num]){ // 配列の最後のテキストによって分岐
case "りんご": // 小カテゴリ名が「りんご」の場合
$("h2.ringo").addClass("visible"); // 該当する<h2></h2>に表示用のCLASS名を付与
break;
case "みかん": // 小カテゴリ名が「みかん」の場合
$("h2.mikan").addClass("visible");
break;
case "バナナ": // 小カテゴリ名が「バナナ」の場合
$("h2.banana").addClass("visible");
break;
}
});
</script>


URLの一部である小カテゴリ名とclass名が
合致する<h2></h2>を表示される仕掛けです。

URLの最後が小カテゴリ名になることを前提にしています。
配列の番号(num)を数字決め打ちで記述しておく方が良いかもしれません。

<h2></h2>の表示スペースを画面上で予め確保しておくと、
レイアウトがガタっとならずに済むと思います。
polka
 
記事: 151
登録日時: 2013年5月20日(月) 08:15
所在地: 大阪府泉大津市二田町1-20-30-2F


Return to SOY Shop

オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[4人]

cron