「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

商品説明文を2ヵ所以上に分割する方法

2016年2月4日

通常は商品説明は1ヵ所にしか入れることはできません。
その商品説明を2ヵ所以上に分けて好きなところに入れる方法です。

ただし、テンプレートを上級モードで編集できるくらいの知識は必要です。

テンプレートの編集

テンプレートの中から商品詳細を上級モードで編集します。

javascriptを記述

今回は4ヶ所に分割して記載するコードを使用しています。

    <script type="text/javascript">
		$(function() {
			var $productExplain = $('#product_explain');
			if ($productExplain.find('div').size() > 0) {
				$('#exp-1-view').html($('#exp-1').html());
				$('#exp-2-view').html($('#exp-2').html());
				$('#exp-3-view').html($('#exp-3').html());
				$('#exp-4-view').html($('#exp-4').html());
				$productExplain.hide();
			}
		});
	</script>
	<div>
		<{$product.explain}>
	</div>

上記のコードを商品詳細のテンプレートの上部に記述します。
今回は4ヶ所に分けるコードになっていますので、状況に応じて以下の部分を数字を変更して増減してください

				$('#exp-1-view').html($('#exp-1').html());

説明文が入る部分の変更

説明文は以下のコードによって呼び出されます。

    <{$product.explain}>

このコードは先程の作業で記述されていますので、先ほどのコード以外の記述は削除してください。

削除が終わりましたら、商品説明を呼び出したいところに以下のコードを記述します。

    <div id="exp-1-view"></div>

「exp-1-view」を「exp-2-view」にして2番目に表示したいところに記述してください。同様に3番目、4番目と記述してください。

商品詳細ページの編集

商品編集の「説明」の部分の書き方が少し変わりますので注意してください。

    <div id="exp-1">
		1番目に表示したい文章や画像を入力
    </div>
    
    <div id="exp-2">
		2番目に表示したい文章や画像を入力
    </div>
    
    <div id="exp-3">
		3番目に表示したい文章や画像を入力
    </div>
    
    <div id="exp-4">
		4番目に表示したい文章や画像を入力
    </div>

上記のように記述することで、通常は1ヶ所しか表示されなかった商品説明が2ヵ所以上の場所で読み込むことができます。

標準搭載して欲しいくらい便利な機能なので覚えておいて損はないですよ。

  • ブログランキングへ
  • にほんブログ村

カテゴリー:カラーミーショップ
タグ:

Comments

  1. 匿名 より:

    先日お問い合わせしましたものです。その後、解消できました。bitのカスタム方法を公開して下さっていてありがとうございます!

  2. Kawai より:

    初めまして。こんにちは。初めてカラーミーショップをカスタムしています。レスポンシブとシンプルさが気に入って、Bitを使用しています。そこで、検索でこちらのブログにたどり着き、カテゴリー表示方法を参考にさせて頂き、とっても助かりました!!

    そしてこの説明文を複数箇所に入れるというのも、何て素敵なんだー!と思い、教えの通りhtmlを編集し、商品登録してみたのですが、
    上部にjavascriptを追加した箇所に、説明文が全て表示されてしまいます。
    もし間違っている箇所がわかったら教えて頂けないでしょうか?

    突然、勝手なお願いで申し訳ございません。
    よろしくお願い致します。

    このタグまで丈夫に記述しています。それが良くないのでしょうか・・?

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年3月
« 2月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る