ロッカールーム

科目一覧

EC-CUBEのためのレンタルサーバー「EC-CUBEのサーバー」 会員登録(無料)はこちら
サイトマップ ご意見箱

EC-CUBEの商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編)

カスタマイズ講座

ホーム > カスタマイズ講座 > 【上級】カスタマイズ > EC-CUBEの商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編)
【上級】カスタマイズ1
2008.10.11 (更新日: 2009.09.17)

EC-CUBEの商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編)

【用意するもの】
・EC-CUBE2がインストールされた状態のサーバ
・EC-CUBEカスタマイズするための予備知識
(参照:レシピ2 EC-CUBEカスタマイズ、ちょっとその前に・・・ファイルの位置関係を把握しよう。)


皆さん、こんにちは!家庭科担当の穂満です。
今日もざっくざっくとEC-CUBEを料理していきましょう!

さて今回は、EC-CUBE無い機能で、あったら便利な機能の一つだと勝手に思っている「在庫数表示機能」の追加です。
また、在庫表示にも別ウィンドウに表示する方法と詳細ページそのまま表示する方法の2パターンがありますが、今回は前者の「別ウィンドウに表示する方法」をご説明します。
別ウィンドウに表示するメリットは、詳細ページのデザインを崩したくないときに有効です。というのも、規格名が長かったりすると詳細ページのデザインが崩れる恐れがあるからです。

それでは、早速見ていきましょう!


調理例
下図のような感じになります。
詳細ページに「在庫の詳細を見る」というリンクを張り、別ウィンドウ内に表示します。

在庫数表示の調理例




どういう作業が必要か
始める前に、まずどういった作業をしていくのか把握しておきましょう。
在庫数表示はもともと無い機能ですから、在庫数をデータベースから収集するPHPスクリプトと内容を表示するためのデザインテンプレートが必要になります。
そして、詳細ページから別ウィンドウに開く為のリンクを張るので、詳細ページのデザインテンプレートを修正してリンクを張らねばなりません。

まとめますと、以下の3ステップになります。

  1. 在庫表示用PHPスクリプトの作成
  2. 在庫表示用テンプレートの作成
  3. 詳細ページからリンクを張る



(2ページへ続く)

ここから先は、会員限定の特別公開記事になっております。
ここから先は、会員限定の特別公開記事になっております。
ここから先は、会員限定の特別公開記事になっております。

このページを見ている人は、以下のページも参照しているようです・・・!

レビュー

レビューによるご意見・ご質問は会員登録された方のみとなっております。
  • ★★★★★ コミュからきましたー 2008/10/21
    レビュアー:yuji

    HOMAN先生はいつも別サイトでお世話になっておりました

    情報の共有化やソースの解説はやはり大変期待してしまいます
    今後とも頑張って運営の方御願い致します

  • ありがとうござます! 2008/10/21
    レビュアー:aratana

    yuji様 コミュニティよりお越しいただきまして、ありがとうございます。

    まだまだ内容が薄く、
    日々の業務の合間での更新になるかとおもいますが、
    ご満足いただけるように努力して参ります。
    今後ともよろしくお願いいたします!

  • ★★★★★ このサイト全体的なことになりますが。 2008/10/28
    レビュアー:masaya

    EC-CUBEの学校全体的なことになりますが、紹介されているコードはどのようなライセンスになりますか?
    GPLを継承するという形でいいのでしょうか?

    EC-CUBEの勉強を始めたばかりで、実際に使いながら勉強したい物で・・

  • GPLライセンスの元で自由に複製、改変、頒布することができます。 2008/10/28
    レビュアー:aratana

    早い話、「商用・非商用に関わらず、自由にお使い下さい。但し、納品の際にはテキストエディタ等でPHPソースが見える形(PHPソースを難読化や暗号化、バイナリに変換しない)で納品して下さい」ということですね。

    当サイトの利用規定(www.eccube-school.jp/kitei.html)にて記述しておりますが、Q&Aにもあるとよいですね。入れておきます。

    ご利用の際は特に許可などを得る必要もございませんが、「助かりました」などのコメントを頂けると、モチベーションが上がります(笑

  • 規格1と規格2のタイトル(規格名)が逆になるのですが…。教えてください。 2009/06/02
    レビュアー:fukuma

    管理画面より規格有り商品を登録しました。サイズを規格1、カラーを規格2にしました。
    これは、異常なく在庫が表示されるのですが、規格1と規格2を逆にして、つまり、規格1にカラー、規格2にサイズ。として管理画面から商品登録を行うと、在庫の中身は正常なのですが、規格1と規格2のタイルだけが逆になってしまっています。
    (例)正常
    商品番号 カラー サイズ 販売価格 在庫数
    RO090088-1-HY ホワイト S 通常6,090円のところ 4,200円 4

    逆になる
    商品番号 サイズ カラー 販売価格 在庫数
    RO090088-1-HY ホワイト S 通常6,090円のところ 4,200円 4
    以上の原因を教えてください。

  • 規格1と規格2のタイトル(規格名)が逆になるのです…。教えてください。 2009/06/02
    レビュアー:福間 正人

    管理画面から規格有り商品を登録したところ、規格1をサイズ、規格2をカラーとしました。
    こちらは正常に動きますが、問題は、規格1、2を逆に登録したときです。

    規格1にカラー、規格2にサイズとして管理画面より商品を登録したところ、表示される在庫画面の規格1と規格2がタイトル(規格名)が逆に表示されます。

    中身は合っているのですが、タイトルだけが逆です。

    詰まっています。よろしくお願いいたします。

  • 現在調査中です。 2009/06/02
    レビュアー:homan

    福間さま、ご報告ありがとうございます。
    ご報告通り、タイトルだけが逆になる事があるようです。おそらく、規格名のrankなどが関わっていそうな感じがします。

    調査してみます。

  • 規格1と規格2のタイトル(規格名)が逆になる現象 2009/09/09
    レビュアー:nom nom

    以前からあがっている規格1と規格2のタイトル(規格名)が逆になる現象はどうしたらな直るのでしょうか?非常に便利な機能なので是非採用したいのですが、まだ未熟なせいもあり、解決しません。どうか、教えてください。

  • 修正したファイルを再掲載してみました。 2009/09/10
    レビュアー:homan

    修正が遅くなって申し訳ございません><

    以前ご質問があった方に修正ファイルをメールで送ってご確認いただくようにお願いしておりましたが、その後返事がなく解決したのがどうかが不明な状態でした。

    一応、弊社内ではチェックしてみましたが、
    問題なかったものをアップしました。
    汎用的なものを目指したつもりですが、万一不具合がございましたら、ご報告頂けますと幸いです。

    <修正した部分>
    (2009年9月10日更新)と赤文字で表示している項目。

    ・LC_Page_Products_Stock.php(2ページ)
    ・stock.tpl(3ページ)
    ・スタイルシート(3ページ)

  • ★★★★★ EC-CUBEの商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編) 2009/09/16
    レビュアー:meg

    お世話になります。初コメです★
    在庫数のカスタマイズ方法とってもありがたいです!
    で、さっそく試してみたところ、
    最後の閉じるボタンで閉じれません。

    stock.tplの在庫数の表示のところで、
    10以上は○、10以下は△、みたいなif文に置き換えたのが問題なのでしょうか・・・。

    <td class="center">
    <!--{if $row.stock_unlimited != 1}-->
    <!--{if $row.stock != 0}--><!--{$row.stock}-->
    <!--{else}--><strong class="attention">SOLDOUT</strong><!--{/if}-->
    <!--{else}-->有り<!--{/if}-->
    </td>

    ↓↓
    <td class="center">
    <!--{if $row.stock_unlimited != 1}-->
    <!--{if $row.stock == 0}-->
    <strong class="attention">SOLDOUT</strong>
    <!--{elseif $row.stock < 10}-->

    <!--{else}-->

    <!--{/if}-->
    <!--{else}-->
    有り
    <!--{/if}-->

    </td>

  • ★★★★★ 商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編) 2009/09/17
    レビュアー:なか

    お世話になります。
    表題のカスタマイズを試しました!
    すごく便利で良いですね!!!!

    ただ別窓で在庫表示が出た時に、
    閉じるボタンを押しても閉じれないのです。

    先生の指示通りのソースを貼り付けているんですが・・・。
    もしかしたら、ECCUBEのフォーラムで見つけた、10以上なら○、10以下なら△、在庫なしはSOLDOUTという風にしたくて、
    一部以下ソースに書き換えたのが問題なのでしょうか?

    <!--{if $row.stock_unlimited != 1}-->
    <!--{if $row.stock == 0}-->
    <strong class="attention">SOLDOUT</strong>
    <!--{elseif $row.stock < 10}-->

    <!--{else}-->

    <!--{/if}-->
    <!--{else}-->
    有り
    <!--{/if}-->


    【閉じる部分の記載内容】
    <form>

    <div class="btn"><a href="#script tag escaped#window.close()" onmouseover="chgImg('<!--{$TPL_DIR}-->img/common/b_close_on.gif','b_close');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/common/b_close.gif','b_close');"><img src="<!--{$TPL_DIR}-->img/common/b_close.gif" width="150" height="30" alt="閉じる" border="0" name="b_close" /></a></div>

    </form>

    </div>



    </div>

    </div>

    </body>

    </html>

  • 閉じるボタンのJavascriptが無害化されていました。。 2009/09/17
    レビュアー:homan

    megさん、なかさん、ご報告ありがとうございます。
    (同一の方でしょうか?)

    閉じるボタンにはJavascriptを使っていたのですが、EC-CUBEの機能により閉じるボタン部分のJavascriptが別の記述(#script tag escaped#)に置き換わってしまっていて、そのままコピーすると利用できなくなっておりました。

    テンプレート部分の閉じるボタン周辺だけをコピーして、ご利用のテンプレートに貼り付けてみてください。

    うまくいかない場合は、Javascriptについてネットで調べて、閉じるボタンに導入してみてください。全然難しくなく、10数文字以内の記述で実現できるかと思います^^

  • ★★★★★ 閉じるボタンについて 2009/09/17
    レビュアー:meg&なか

    megとなかで投稿したものです。
    すみません、最初の投稿失敗したかと思って、
    再投稿しちゃいましたm(_ _)m
    ご返事ありがとうございます。
    さっそく、ご指示頂いた方法で試してみます★

    本当に良いサイトをありがとうございます!
    これからも応援してます(~~)

    -------------------------------
    megさん、なかさん、ご報告ありがとうございます。
    (同一の方でしょうか?)

    閉じるボタンにはJavascriptを使っていたのですが、EC-CUBEの機能により閉じるボタン部分のJavascriptが別の記述(#script tag escaped#)に置き換わってしまっていて、そのままコピーすると利用できなくなっておりました。

    テンプレート部分の閉じるボタン周辺だけをコピーして、ご利用のテンプレートに貼り付けてみてください。

    うまくいかない場合は、Javascriptについてネットで調べて、閉じるボタンに導入してみてください。全然難しくなく、10数文字以内の記述で実現できるかと思います^^

  • ★★★★★ EC-CUBEの商品詳細ページに在庫数を表示する方法(別ウィンドウ表示編「閉じる」ボタンで閉じない件 2009/09/19
    レビュアー:precisiontaxi

    いつも拝見させていただいております。こんなに役に立つ情報を無料で公開していただけるなんて、頭の下がる思いです。
    私も「閉じるボタンで閉じない(エラーが表示される)」件で調べてみました。結局はJavaScriptをちょこっと触るだけでOKでしたのでご報告申し上げます。

    /data/Smarty/templates/default/products/stock.tpl
    終わりの方に<div class="btn">でくくられたa href="self.close()"を修正しました。
    修正部分 a href="self.close()"
    修正後 <a href="#" onClick="window.close();return false;"
    onmouseover以下はそのままです。

    ただいま自分のショップを自鯖で構築中で、こちらのサイトを参考にさせていただいております。本も買っちゃいました!(ブルーの方)これからもわかりやすい親切なサイトの「EC-CUBEの学校」を応援いたします!
    スタッフの皆様、がんばってください。

この記事に対するトラックバック

この記事のトラックバック先URL

EC-CUBE+安心=カゴラボ