カテゴリー: ECサイト向け

【EC-CUBE】WYSIWYGの組み込み(FCKediter)

商品の詳細情報入力にWYSIWYGを組み込む。

  1. FCKediterのパッケージをダウンロード&解凍してFTPでアップロード。(/html/に設置)
    (※FCKエディタのほうのファイルにも、事前に組み込み用の設定をいくつかしないといけない。下のほうに詳細を書く。)
  2. /admin/main_frame.tpl にJSの読み込みリンク記述。

    <script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/file_manager.js”></script>
    <script type=”text/javascript” src=”<!–{$TPL_DIR}–>js/jquery.js”></script>
    <script type=”text/javascript” src=”<!–{$smarty.const.URL_DIR}–>fckeditor/fckeditor.js”></script>

  3. 入力テンプレートのtextareaにエディタの組み込みタグを入れる。
    /admin/products/product.tpl の入力エリアにID属性を追加。
    idの値がname属性と同じになるように、ID属性を追加する。

    <tr>
      <td bgcolor=”#f2f1ec” width=”160″ class=”fs12n”>詳細-メインコメント<span class=”red”>(タグ許可)*</span></td>
      <td bgcolor=”#ffffff” width=”557″ class=”fs10n”>
      <span class=”red12″><!–{$arrErr.main_comment}–></span>
      <textarea id=”main_comment” name=”main_comment” value=”<!–{$arrForm.main_comment|escape}–>” maxlength=”<!–{$smarty.const.LLTEXT_LEN}–>” style=”<!–{if $arrErr.main_comment != “”}–>background-color: <!–{$smarty.const.ERR_COLOR}–><!–{/if}–>”  cols=”60″ rows=”8″ class=”area60″><!–{$arrForm.main_comment|escape}–></textarea><br /><span class=”red”> (上限<!–{$smarty.const.LLTEXT_LEN}–>文字)</span></td>
    </tr>

  4. /admin/products/product.tpl にエディタのJS呼び出し用のJAVASCTIPTを追加する。上のほう。

    <script type=”text/javascript”>
    $(function(){
      var oFCKeditor = new FCKeditor( ‘main_comment’ ) ;
      oFCKeditor.ToolbarSet = ‘ECCUBE’ ;
      oFCKeditor.ReplaceTextarea() ;
    });
    </script>

———
FCKediter用の設定。

その1:アップロード機能。
fckconfig.jsの以下の部分を修正する。

var _FileBrowserLanguage = ‘php’ ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = ‘php’ ; // asp | aspx | cfm | lasso | php

FCKConfig.LinkUpload = false ;

FCKConfig.ImageUpload = false ;

FCKConfig.FlashUpload = false ;コネクターにはPHPを使う。
そして、アップロードタブは表示しない。アップロードタブで選択するアップローダにはバグがあり、目的のフォルダにアップロードできない。

editor/filemanager/browser/default/connectors/php/config.phpの以下の部分を修正する。

$Config[‘Enabled’] = true ;

// $Config[‘UserFilesPath’] = ‘/UserFiles/’ ;コネクターを使用可にする。
アップロードディレクトリを動的に指定できるようにする。

アップロードディレクトリ
アップロードディレクトリを作成しておく。Webサーバが更新できるよう、アクセス権を設定しておく。PHPやCGIでユーザ別のディレクトリを作成する場合も、同様にアクセス権を設定させる。

FCKeditorのファイルマネージャは、指定されたアップロードディレクトリ上に、自動的にタイプ別のサブディレクトリを作成する。
このため、PHPがセーフモードの場合にはアップロードしたファイルを保存できないので注意が必要。

その2:組み込みのカスタマイズ。→面倒なのでやらない。
 
その3:fckconfig.jsに、テーマを追加する。
defoultの記述をコピーしてECCUBEという名称で作成。(ボタンの数や並びは適宜修正すること)

これだけ分のコードをコピペで複製してDefaultをECCUBEに変更。
FCKConfig.ToolbarSets[“Default“] = [ 
 [‘Source’,’DocProps’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],
 [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-‘,’Print’,’SpellCheck’],
 [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
 [‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
 ‘/’,
 [‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],
 [‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
 [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
 [‘Link’,’Unlink’,’Anchor’],
 [‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’],
 ‘/’,
 [‘Style’,’FontFormat’,’FontName’,’FontSize’],
 [‘TextColor’,’BGColor’],
 [‘FitWindow’,’ShowBlocks’,’-‘,’About’]  // No comma for the last row.

【参考】

■最新版の日本語エディタ(文字変換とかチップスの表示とかが日本語化されているので使いやすく不要なエラーに遭遇しなくてすむ)
http://www.dakiny.com/archives/fckeditor/ajax_wysiwyg_editor_fckeditor_26/

■アップロード機能を正常に使うための設定とツールバーの設定についてアップされている記事
http://akira.matrix.jp/index.php?ID=58
http://akira.matrix.jp/index.php?ID=61

【EC-CUBE】新着商品をブロックで表示する

1)まずはオススメ商品のPHPソース3つをコピーして新着商品用にファイル名変更。

  • /data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5.php
  • /data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Best5_Ex.php
  • /frontparts/bloc/best5.php

をそれぞれコピーし、Best5のところをNewに変更する。

  • /data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_New.php
  • /data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_New_Ex.php
  • /frontparts/bloc/new.php

2)PHPソースの中の変数などBest5→Newへbest5→newへ置き換えする。(数箇所ある)

3)LC_Page_FrontParts_Bloc_New.phpのソースを変更。(Ver.2.3RC1の場合L55~)

    function process() {

        if (defined(“MOBILE_SITE”) && MOBILE_SITE) {
            $objView = new SC_MobileView();
        } else {
            $objView = new SC_SiteView();
        }
        $objSiteInfo = $objView->objSiteInfo;

~(中略:この中身を下記ソースに入れ替え)

        $objView->display($this->tpl_mainpage);
    }

———-(モバイルについて記載している↓この手前まで)
    /**
     * モバイルページを初期化する.
———-

  function process() {
if (defined(“MOBILE_SITE”) && MOBILE_SITE) {
$objView = new SC_MobileView();
} else {
$objView = new SC_SiteView();
}
$objSiteInfo = $objView->objSiteInfo;

// 基本情報を渡す
$objSiteInfo = new SC_SiteInfo();
$this->arrInfo = $objSiteInfo->data;
$objQuery = new SC_Query();

//検索したい商品のステータスを設定
//NEW→1, 残りわずか→2, ポイント2倍→3, オススメ→4, 限定品→5
$productFlag = 1;

//検索する商品のステータスをランダムに決定し、表示させたい場合は以下のコメントを外してください。
//$id_count = $objQuery->count(mtb_status);
//$productFlag = rand(1,$id_count);

$this->statusName =$objQuery->get(“mtb_status_image”, “name”, “id={$productFlag}”);

//表示する商品の件数
$listCount = 8;

$ret = “”;
$arrTmp[$productFlag] = “1”;

for($i = 1; $i <= $productFlag; $i++) {
if($arrTmp[$i] == “1”) {
$ret.= “1”;
} else {
$ret.= “_”;
}
}

if($ret != “”) {
$ret.= “%”;
}
//$col = “dtb_products.product_id, dtb_products.name, dtb_products.main_image,
// MIN(dtb_products_class.price02) AS price02_min, MAX(dtb_products_class.price02) AS price02_max”;
//$from = “dtb_products INNER JOIN dtb_products_class using(product_id)”;
//$where = “product_flag LIKE \”{$ret}\””;
//$groupby = “product_id”;
//$this->groupby=$objQuery->setgroupby($groupby);
//商品の表示はupdate_dateが新しい順
//$order = “dtb_products.update_date DESC”;
//$this->order=$objQuery->setorder($order);

$col = “DISTINCT price02_min, product_id, price02_max, main_list_image, status, product_flag, name”;
$from = “vw_products_allclass AS T1”;
$where = “del_flg = 0 AND status = 1 AND product_flag LIKE ‘{$ret}'”;
//商品の表示はproduct_id逆順
$order = “product_id DESC”;
$this->order=$objQuery->setorder($order);

$arrFlagList = $objQuery->select($col, $from, $where);

//商品の表示をランダムに抽出する場合は以下のコメントを外してください。
//srand((double)microtime()*1000000); //乱数生成器を初期化
//shuffle($arrFlagList);

$this->arrFlagProducts = array_slice($arrFlagList, 0, $listCount);
//この変数名をテンプレの値の呼び出しに使うので注意。

$objSubView = new SC_SiteView();
$objSubView->assignobj($this);
$objSubView->display($this->tpl_mainpage);
}

元のソースの最後のほうの商品検索functionは不要なので、削除。

4)上記の3つのファイルをアップロード。

5)新着商品用のブロックを作り、DBを修正する。

まず、管理画面で「デザイン管理」→「ブロック編集」でブロック名「新着商品表示」/ファイル名「new(.tpl)」を作成する。
内容は、おすすめ商品用ブロック(best5.tpl)をコピーして保存。

phpMyAdminでデータベースを開いて、「dtb_bloc」テーブルの中を見ると、新商品用ブロックのデータ、NEWが追加されているので、その中の、php_path(最初はnullとなっている)に「frontparts/bloc/new.php」と値をセット。

各ファイルの中で変数名がEC-CUBEのバージョンアップによって変更になったりすることがある。そのときは、BEST5のソースを参考にして、適宜調整するとよい。

例えば、$arrBest5は→$arrFlagProductsとなる。

これでOK。ブロックのレイアウトは表示したいように適宜変更。

参考:http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=ASC&topic_id=1276&forum=6

【EC-CUBE】ヘッダーにログインやかごの中ブロックを表示するには

ヘッダーを編集して、

「ログイン」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/login.php}-->

「商品検索」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/search_products.php}-->

「かごの中」を表示したい場合

<!--{include_php file=`$smarty.const.HTML_PATH`frontparts/bloc/cart.php}-->

をそれぞれヘッダーのソースに追加する。(ver.2.3RC1にて動作検証)

フッターは未検証だが、多分同様にすれば可能。

【EC-CUBE】モバイルでのポイント使用が出来るように改造する

ロジックは、あるから、テンプレの変更で対応できる。

1)/data/Smarty/templates/default/mobile/shopping/deliv_date.tpl

の33~35行目を

<!–{if $tpl_login == 1}–>
<!–<input type=”hidden” name=”point_check” value=”2″>–>
<!–{/if}–>

↓このように変更。

<!–{if $tpl_login == 1}–>
■ポイント利用<br />
現在の所持ポイントは「<!–{$tpl_user_point|default:0}–> pt」です。<br />
所持ポイント以上のポイントはご利用いただけません。<br />
<input type=”hidden” name=”point_check” value=”1″ />
<input type=”text” name=”use_point” istyle=”4″ />
<!–{/if}–>

2)/data/Smarty/templates/default/mobile/shopping/confirm.tpl

の72行目に以下を挿入。

【購入金額】<br>
商品合計:<!–{$tpl_total_pretax|number_format}–><br>
送料:<!–{$arrData.deliv_fee|number_format}–><br>
<!–{if $arrData.charge > 0}–>手数料:<!–{$arrData.charge|number_format}–><br><!–{/if}–>
(ここへコードを追加。)
合計:<!–{$arrData.payment_total|number_format}–><br>
(内消費税:<!–{$arrData.tax|number_format}–>)<br>

↓このように。

【購入金額】<br>
商品合計:<!–{$tpl_total_pretax|number_format}–><br>
送料:<!–{$arrData.deliv_fee|number_format}–><br>
<!–{if $arrData.charge > 0}–>手数料:<!–{$arrData.charge|number_format}–><br><!–{/if}–>
<!–{assign var=discount value=`$arrData.use_point*$smarty.const.POINT_VALUE`}–>-<!–{$discount|number_format|default:0}–>円
合計:<!–{$arrData.payment_total|number_format}–><br>
(内消費税:<!–{$arrData.tax|number_format}–>)<br>