7.商品ページを管理しやすく構築しよう?カスタムフィールドの利用

7-1.カスタムフィールドの設定

1)商品価格の作成

 ・「設定」- カスタムフィールド
 ・システムオブジェクト:ブログ記事
 ・名前:価格
 ・説明:フォームを入力する際の注意書き
 ・種類:テキスト
 ・テンプレートタグ:item_price

mt7-1.jpg

「種類」の選択によって、ラジオボタン、プルダウン、チェックボックスなどの選択項目としても利用できる。


2)設定したカスタムフィールドの項目を反映させる

 「新規作成」-「ブログ記事」
    ・ 表示オプションをクリック
      フィールド項目の「価格」にチェックを入れる。→「OK」ボタン
    ・ページを更新すると、「本文」の下に「価格」フォームが表示される。

mt7-2.jpg

3)ブログ記事テンプレートの変更

(1)新モジュールを追加する
 ・「デザイン」- テンプレート
 ・テンプレートモジュールの作成
   テンプレート名:商品詳細フィールド
  MTタグ: 

 <div class="g-price">
  <MTIfNonEmpty tag="item_price">
     価格: <MTitem_price>円
  </MTIfNonEmpty>
  </div>


 6.gif<A><A> : 編集時は、<A>モードで操作

 16-message-warn.pngインデントする場合、全角スペースは、入れないように。

mt7-3.jpg
(2)テンプレート:ブログ記事に(1)のモジュールを挿入
 57行目:<$mt:EntryBody$>の下部に挿入


 <$mt:Include module="商品詳細フィールド"$>
 
 m001_11.gifアーカイブテンプレートのプレビュー表示(「確認」ボタン)を行うと、公開の状態が、「公開しない」に勝手になっている場合がある。ページが生成されなかったり、更新していないときは要確認!
 
同様に、商品番号、買い物カゴタグなど、商品ごとに固有なフィールドを設定することで、定型ページを作ることができる。
 
4)ブログ記事の「価格」欄に価格=数字をいれて保存
 
価格が表示されます。
価格表示には、スタイルシート設定、class="g-price"に赤文字、文字サイズが設定されています。
 
mt7-4.jpg
 
このページのトップへ▲

このブログ記事について

このページは、taskmotherが2009年11月 9日 15:23に書いたブログ記事です。

ひとつ前のブログ記事は「8.スタイルシート(CSS)を編集できるようにしよう 」です。

次のブログ記事は「6.テンプレートの構成を理解しよう」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。