<< EC CUBEインストールメモ【1】 | main | EC-CUBE2.11.0が正式公開! >>

スポンサーサイト

0

    一定期間更新がないため広告を表示しています


    • 2011.09.11 Sunday
    • -
    • -
    • -
    • -
    • -
    • by スポンサードリンク

    EC-CUBEをカスタマイズする

    0

      EC-CUBEのカスタマイズメモです。

      カスタマイズといっても、何をどうすればいいのか不明なので、書籍などの購入も検討したのですが、バージョンの問題も出てきそう。。。(2011.03.19現在最新Ver2.4.4)
      EC-CUBE〈Ver2.4.0対応〉公式ガイドブック
      EC-CUBE〈Ver2対応〉公式ガイドブック

      上記のようなものも販売されていますが、下記サイトを見ればかなり参考になります。
      EC-CUBEマニュアルサイト

      まずはカスタマイズするにあたり、必ずバックアップをとります。

      1.デフォルトのテンプレートをバックアップ
      管理画面にログインし、「デザイン管理」⇒「テンプレート設定」⇒デフォルトのテンプレートの欄からダウンロードをクリックして任意の場所に保存します。

      これでバックアップのGZファイルがダウンロードできました。


      2.バックアップファイルをアップロードする
      今度はバックアップしたファイルをアップロードし、このファイルをカスタマイズしていきます。
      管理画面にログインし、「デザイン管理」⇒「テンプレート追加」
      今回は以下のように入力しました。
      テンプレートコード:custom
      テンプレート名:カスタマイズ
      テンプレートファイル:参照ボタンからダウンロードしたGZファイルを選択し。

      アップロードボタンをクリックして完了。



      テンプレート設定に戻ってみると、カスタマイズという項目が増えています。
      カスタマイズのほうを選択して、こちらを反映させ、いじっていきます。


      3.カスタマイズするファイルの場所を把握する
      カスタマイズはPC用とモバイル版それぞれをカスタマイズすることができます。
      テンプレートの場所を把握します。

      【カスタマイズファイル】
      ▼CSSのファイル場所
      shop/user_data/packages/custom/css/

      ▼画像のファイル場所
      shop/user_data/packages/custom/img/

      ※index.php(トップ)のカスタマイズは、後述します。

      【モバイルのカスタマイズファイル】
      ▼トップのテンプレートの場所
      data/Smarty/templates/custom/mobile/
      ・top.tplからインクルードで同ディレクトリのfooter.tplなどを読み込んでいます。
      <!--{include file='footer.tpl'}-->


      4.ファイルの構成

      webデザイナーなら、やはり完全にオリジナルのデザインを組み込みたいと考えるものです。その際に注意しておいたほうがいいのが、セレクタ名の指定です。
      オリジナルのセレクタ名でも問題有りませんが、CSSファイルもそれに応じて書き換えるようになるので、デフォルトのセレクタ名を把握し、準じるようにコーディングしたほうが効率的です。

      【3カラム】
      <body>
        <div id="header"><!--ヘッダーここから-->
        </div><!--ヘッダーここまで-->
        <div id="container">
          <div id="leftcolum"><!--左カラムここから-->
            <div id="cartarea">
            </div>
            <div id="categoryarea">
              <ul id="categorytree
                <li class="level1"></li>
              </ul>
            </div>
            <div id="guidearea">
              <ul id="categorytree
                <li class="level1"></li>
              </ul>
            </div>
          </div>
          <div id="three_maincolum">
            <div id="flasharea">
            </div>
            <div id="newsarea">
            </div>
            <div id="recomendarea">
              <div id="recomendblock">
                <div id="recomendleft">
                </div>
                <div id="recomendright">
                </div>
              </div>
            </div>
          </div><!--左カラムここまで-->
          <div id="leftcolum"><!--右カラムここから-->
            <div id="loginarea">
              <form>
              <div id="login">
              </div>
              </form>
            </div>
          </div><!--右カラムここまで-->
        </div>
        <div id="footer"><!--フッターここから-->
        </div><!--フッターここまで-->
      </body>


      5.index.phpのカスタマイズ

      全体の編集はこちらからできます。
      /data/Smarty/templates/default/site_main.tpl

      ですが、実際にそれぞれのボックスを編集するには、管理画面からブロック編集やヘッダー/フッター編集からテンプレートをカスタムできるので、それを利用すれば3カラムレイアウトは問題なく組めます。
      全体を囲むdivなどを使う場合でも、ヘッダー編集欄に開始タグとフッター編集欄に終了タグを記述すればいいわけです。


      それぞれのブロックの編集
      管理画面にログインし、「デザイン管理」⇒「ブロック編集」⇒「編集可能ブロック


      ヘッター/フッターの編集
      管理画面にログインし、「デザイン管理」⇒「ヘッダー/フッター編集」


      6.オリジナルのレイアウト編集するコツ
      まずは既存のセレクタ名をそのまま使って、普通にレイアウトをHTML+CSSで組みます。
      CSSも作りなれた形で作ります。
      作ったCSSを以下に突っ込みます。
      shop/user_data/packages/custom/css/



      以下CSSファイルに@importの形で追記。
      shop/user_data/packages/custom/css/import.css

      ※オリジナルで作ったCSSの3ファイルへの記述を追加します。
       hoge.css


      【変更前】
      @charset "utf-8";

      @import url("./main.css");
      @import url("./index.css");
      @import url("./products.css");
      @import url("./under.css");
      @import url("./under02.css");
      @import url("./mypage.css");
      @import url("./window.css");
      * {
              padding:0;
              margin:0;
      }



      【追記後】
      @charset "utf-8";

      @import url("./main.css");
      @import url("./index.css");
      @import url("./products.css");
      @import url("./under.css");
      @import url("./under02.css");
      @import url("./mypage.css");
      @import url("./window.css");
      @import url("./hoge.css"); /*←ここに追加*/
      * {
              padding:0;
              margin:0;
      }

      これでオリジナルのCSSを反映させることが可能になりました。

      7.トップページのみに画像を表示させる記述

      <!--{assign var=●● value="`$smarty.const.URL_DIR`index.php"}-->
      <!--{ if $smarty.server.PHP_SELF==$●●}-->
      表示させたい内容をここに書く
      <!--{/if}-->
      この記述の●●の部分には、自分が分かり易い単語を入れてください。
      また、index.phpの部分には、その画像を表示させたいページのパスを記入。
      こっちも参考に。

      トップページのみ表示
      <!--{if $smarty.server.PHP_SELF == "/index.php"}-->
      表示させたい内容をここに書く
      <!--
      {else}--><!--{/if}-->

      商品詳細ページだけに表示
      <!--{if $smarty.server.PHP_SELF == "/products/detail.php"}-->
      表示させたい内容をここに入れる
      <!--{else}--><!--{/if}-->

      カテゴリIDや商品IDで振り分ける
      <!--{if $category_id == "1"or $arrProduct.product_id == "5"}-->
      表示させたい内容をここに入れる
      <!--{/if}-->

      8.商品一覧ページのCSS
      shop/user_data/packages/custom/css/products.css
      カラムにズレが生じていたため、clearfixを挿入。
      <ul class="pagenumberarea">のところに挿入。

      <ul class="pagenumberarea clearfix">

      9.商品詳細ページでタイトルにサブカテゴリも表示
      data/class/pages/products/LC_Page_Products_Detail.php
      上記のファイルの// サブタイトルを取得を書き換える。

      // サブタイトルを取得 こちらがカスタム
          $arrCategory_id = $objDb->sfGetCategoryId($arrRet[0]['product_id'], $status);
          $arrFirstCat = $objDb->sfGetFirstCat($arrCategory_id[0]); // この行いらないかも
          $this->tpl_subtitle = $objDb->sfGetCatCombName($arrCategory_id[0]);


      10.サブカテゴリも、メニューに常に表示させる
      デフォルトの設定では、カテゴリメニューにサブカテゴリは表示されないようになっています。

      管理画面にログインし、デザイン管理⇒ブロック編集⇒カテゴリ
      以下の記述を探し、

      <!–{if $arrTree[cnt].display == 1}–>

      と書かれている部分を

      <!–{if $arrTree[cnt].display == 1|| $arrTre[cnt].level <=1}–>

      へ修正すればOK。

      <=1}の部分を<=2}にすると孫カテゴリまで<=3}にするとひ孫と階層が増えていきます。


      11.モバイルの新規ページを追加する
      data/class/pages/guide/LC_Page_Guide_Usage.php
      に以下の番号を増やす。

      switch (@$_GET['page']) {
      case '1':
      case '2':
      case '3':
      case '4':



      switch (@$_GET['page']) {
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
      case '10':
      case '11':
      case '12':
      case '13':
      case '14':
      case '15':
      case '16':
      case '17':
      case '18':
      case '19':
      case '20':


      次にdata/Smarty/templates/テンプレート/mobile/guide
      フォルダにてusage1.tplファイルをコピーしてusage5.tpl〜usage20.tplの間で
      名前を変えて複製。ページ数を増やす場合は番号を追加する。

      参照元はこちら
      モバイルの新規ページを作成するにはどの様にしたら良いでしょうか?


      12.子カテゴリ(商品一覧ページ)で子カテゴリ名を見出しに追加
      子カテゴリ一覧ページの見出しに以下の形で表示させる。
      親カテゴリ名|子カテゴリ名

      data/class/pages/products/LC_Page_Products_List.php

      [修正前]
      $arrFirstCat = $objDb->sfGetFirstCat($arrCategory_id[0]);
      $tpl_subtitle = $arrFirstCat['name'];

      [修正後]
      $tpl_subtitle = $objDb->sfGetCatCombName($arrCategory_id[0]);

      とすることで、親カテゴリー+子カテゴリーも表示する事が可能。

      参照元はこちら
      http://yaplog.jp/af698t66/archive/31


      13.おすすめ商品を2列から3列に変更する
      管理画面にログインし、デザイン管理⇒ブロック編集⇒オススメ商品を編集。

      1. step=2をstep=3に変更する。
      [修正前]
      <!–{section name=cnt loop=$arrBestProducts step=2}–>
      [修正後]
      <!–{section name=cnt loop=$arrBestProducts step=3}–>


      2. 2つめの商品ブロック<div class="recomendright">〜</div>の
       recomendright を recomendleft に変更し、1行目の下記を修正。
      [修正前]
      <!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }–>
      [修正後]
      <!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }–>

      3.さらに

      [修正前]
      <!–{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}–>
      <!–{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}–>
      [修正後]
       <!–{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}–>
      <!–{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}–>

      4.この2つ目の商品ブロックをコピーして追加(1つ目の商品ブロックでもどちらでも可)
      <div class="recomendleft">〜</div>の recomendleftrecomendright に変更。


      5.var=cnt2 を var=cnt3 に、step-2 を step-1 に変更↓
      [修正前]
       <!–{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }–>
      [修正後]
      <!–{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }–>

      6.[$cnt2] を [$cnt3] に変更↓

      [修正前]
      <!–{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}–>
      <!–{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}–>
      [修正後]

       <!–{assign var=price01 value=`$arrBestProducts[$cnt3].price01_min`}–>
      <!–{assign var=price02 value=`$arrBestProducts[$cnt3].price02_min`}–>
      ※今回の場合はコンテンツエリアを広げているので、スタイルシートでrecomendrightをfloat:left;に変更しました。←通常は必要ないと思います。
      参照元
      http://www28.atwiki.jp/lucier/pages/14.html

      14.タイトルをSEO最適化
      デフォルトでは、各ページのタイトルタグが以下のようになっています。
      ex)商品詳細ページ
      ⇒ ショップ名|商品詳細|商品名

      SEO対策的に、やはりここは気になるので、まず下記のように順番を逆にする。
      ⇒ 商品名|ショップ名

      手順は、/data/Smarty/templates/default/site_frame.tpl

       <title><!--{$arrSiteInfo.shop_name}-->/<!--{$tpl_title|escape}--></title>
      を下記に変更
       <title><!--{$tpl_title|escape}-->/<!--{$arrSiteInfo.shop_name}--></title>

      次に「商品詳細」という文字を消し去る。
      /data/class/pages/product/LC_Page_Products_Detail.php のファイルを編集。

      // タイトルに商品名を入れる
      $this->tpl_title = "商品詳細 ". $this->arrProduct["name"];
      っていうのと
      // タイトルに商品名を入れる
      $this->tpl_title = "商品詳細 ". $this->arrProduct["name"];
      の2箇所にある「商品詳細」の文字を削除する。
      これで完了。

      15.管理画面から編集できない各ページを編集

      当サイトについてや特定商取引法などのページのカスタマイズはテンプレートファイルなどを直接編集する必要があります。

      ■お問い合わせ
      /home/web/sample.ec-cube.net/data/Smarty/templates/contact/index.tpl
      ■お問い合わせ確認
      /home/web/sample.ec-cube.net/data/Smarty/templates/contact/secret.tpl
      ■お問い合わせ完了
      /home/web/sample.ec-cube.net/data/Smarty/templates/contact/confirm.tpl
      ■特定商取引法に関する法律に基づく表記
      /home/web/sample.ec-cube.net/data/Smarty/templates/order/index.tpl

      ■当サイトについて
      /home/web/sample.ec-cube.net/data/Smarty/templates/abouts/index.tpl

      ■エラー画面(共通)
      /home/web/sample.ec-cube.net/data/Smarty/templates/error.tpl

      ■会員登録(入力)
      /home/web/sample.ec-cube.net/data/Smarty/templates/entry/index.tpl
      ■会員登録(確認)
      /home/web/sample.ec-cube.net/data/Smarty/templates/entry/confirm.tpl
      ■会員登録(仮登録完了)
      /home/web/sample.ec-cube.net/data/Smarty/templates/entry/complete.tpl
      ■会員登録(規約)
      /home/web/sample.ec-cube.net/data/Smarty/templates/entry/kiyaku.tpl
      ■会員登録(エラー)
      /home/web/sample.ec-cube.net/data/Smarty/templates/regist/error.tpl
      ■会員登録(本登録完了)
      /home/web/sample.ec-cube.net/data/Smarty/templates/regist/complete.tpl

      ■パスワードを忘れた場合
      /home/web/sample.ec-cube.net/data/Smarty/templates/forgot/index.tpl
      ■パスワードを忘れた場合(秘密の質問)
      /home/web/sample.ec-cube.net/data/Smarty/templates/forgot/secret.tpl
      ■パスワードを忘れた場合(完了)
      /home/web/sample.ec-cube.net/data/Smarty/templates/forgot/complete.tpl

      ■商品購入(ログイン)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/index.tpl
      ■商品購入(非会員購入時・お客様情報登録)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/nonmember_input.tpl
      ■商品購入(お届け先選択)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/deliv.tpl
      ■商品購入(お支払い方法選択)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/payment.tpl
      ■商品購入(商品購入確認)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/confirm.tpl
      ■商品購入(商品購入完了)
      /home/web/sample.ec-cube.net/data/Smarty/templates/shopping/complete.tpl

      ■商品詳細 拡大イメージ
      /home/web/sample.ec-cube.net/data/Smarty/templates/products/detail_image.tpl
      ■ユーザーレビュー登録
      /home/web/sample.ec-cube.net/data/Smarty/templates/products/review.tpl
      ■ユーザーレビュー確認
      /home/web/sample.ec-cube.net/data/Smarty/templates/products/review_confirm.tpl
      ■ユーザーレビュー完了
      /home/web/sample.ec-cube.net/data/Smarty/templates/products/review_complete.tpl

      ■MYページ(購入履歴一覧)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/index.tpl
      ■MYページ(購入履歴詳細)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/history.tpl
      ■会員登録内容
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/change.tpl
      ■会員登録内容(確認)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/change_confirm.tpl
      ■会員登録内容(完了)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/change_complete.tpl
      ■お届け先追加・変更(一覧)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/delivery.tpl
      ■お届け先追加・変更(追加)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/delivery_addr.tpl
      ■退会手続き
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal.tpl
      ■退会手続き(確認)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal_confirm.tpl
      ■退会手続き(完了)
      /home/web/sample.ec-cube.net/html/user_data/templates/mypage/refusal_complete.tpl

      参考元
      EC-CUBEマニュアルサイト
















      環境:EC-CUBE 2.4.4


      スポンサーサイト

      0

        • 2011.09.11 Sunday
        • -
        • 17:29
        • -
        • -
        • -
        • -
        • by スポンサードリンク

        コメント
        コメントする









        この記事のトラックバックURL
        トラックバック
        PR
        calendar
           1234
        567891011
        12131415161718
        19202122232425
        262728293031 
        << March 2017 >>
        ウィルス対策ならこれで
        ソーシャルブックマーク
        おすすめリスト

        気分転換にiphone4ケース


        会社の人が持ってました。自分は革のやつ


        無くてもいいけど、玄関が急におしゃれに


        会社用に買いました。地味に便利です


        ポケットWi-fiとi-phoneとipad2とi-podとか全部カバーする凄いやつ
        XPERIAとかにも対応してるみたい
        selected entries
        categories
        archives
        recent comment
        profile
        search this site.
        others
        mobile
        qrcode
        powered
        無料ブログ作成サービス JUGEM
        JUGEMのブログカスタマイズ講座