2015年7月31日金曜日

【ECCUBE】2.12系 在庫のない規格を選択肢から消す。

ECCUBE 2.12系で在庫のない商品の規格を選択肢から削除したい。
在庫がない場合、選択肢の横に(品切れ中)とは表示されるが、紛らわしいので消してしまおうという事に。

まずは「商品詳細ページ」のページ詳細を見てみる事に。
どうやら規格の選択肢の生成にはSmartyのhtml_optionを使っているようだ。


Smarty公式によると
{html_options} は、HTML の <select><option> グループにデータを代入して作成する カスタム関数 です。

html_optionsのオプションのoptionsに配列を渡して選択肢を作るようだ。
ではさてoptionsに渡されている変数は$arrClassCat1
これはLC_Page_Products_Detail.phpで渡されているが、中身はSC_Product.phpで設定されているようだ。

290行目付近で設定されていました。


ここを在庫がない場合は非表示にする為に下記の様に分岐をさせます。


これで在庫のない規格は選択肢から消え去ります。

2015年7月24日金曜日

Automatorを使って楽天のランキングをチェックしてメールする

MacのデフォルトアプリでもあるAutomator
こんなやつです。

知名度は低いですが、色々と作業を自動化してくれる優れもの。

今回はAutomatorを使って毎日決まった時間にデイリーランキング、毎週決まった時間にウイークリーランキングに自分のお店の商品がランクインしているか調べて、
順位と商品をメールで送ってもらいましょう。

まずはAutomatormを立ち上げ、ファイル>新規を選択します。
ウィンドウが立ち上がります。書類の種類を選択してください。今回は決まった時間に実行するので「カレンダーアラーム」を選択します。

こんな画面が立ち上がります。

左側のライブラリ一覧から処理を選び、右側で処理の順番を組み立てて行きます。
まずは、サイトから情報を引っ張ってくるので、ライブラリ>インターネット>指定されたURLを取得をダブルクリック。
下の画像のようになると思います。
デフォルトではアップルのURLが入っていますね。
楽天市場のランキングのRSSのURLをここに入れたいので、楽天市場でランキングを見たいジャンルまで絞り込むと、右下にちっちゃく「RSS」の表示があるので、リンクをコピーして、アップルのURLと差し替えてください。
デイリーやウィークリー等、URLが変わりますのでここで決めます。

次は、取得したURLの内容にフィルタをかけます。「内容」が「・・・」を含むの・・・の部分を自分達のお店の名前にしてください。
これでランクインしていれば順位と商品名などが抽出されます。

今は抽出しただけなので、記事からテキストを取得しましょう。
ライブラリ>インターネット>記事からテキストを取得を追加。
メールを送信する時に本文に自動で追加する為に、いくつか処理を追加します。
ライブラリ>ユーティリティ>クリップボードにコピー
ライブラリ>ユーティリティ>クリップボードの内容を取得
以上を追加すると下記のようになるかと思います。

さて、残るはメールを送信するだけです!
ライブラリ>メール>新規メールメッセージ
宛先に自分のメールアドレス、件名に一工夫しましょう。メッセージは自動で入ります。

左上のアクションを変数に変更し、日付と時刻から今日の日付を件名にドラッグ&ドロップします。自動で今日の日付が挿入されます。

最後にメールを送信します。
ライブラリ>メール>送信メッセージを送信

以上でAutomatorの設定は以上です。
次はカレンダーの設定になります。保存するとカレンダーアラームの名前を入力する欄が出てきます。
デイリーランキングとでも入れておきましょう。

カレンダーの画面が立ち上がるので、実行したい時間に設定しましょう。
とりあえず毎日11時に設定。

繰り返しはアラームをダブルクリックして設定すればOK!

これで毎朝11時にランクインのメールが届きます。
ちなみにランクインしてなくてもメールは届きます。。。本文は空なので、そこで判断しましょう。

2015年7月18日土曜日

【ECCUBE3】最近購入された商品のブロックの追加

ECCUBE3にて最近購入された商品を表示するブロックを追加していきましょう。
ECCUBE2系の頃とは作り方すっかり変わっていますが、慣れてしまえば簡単な追加はやりやすいです。

最終的な表示は下記の様になります。

まずは管理画面からブロックを追加しましょう。
コンテンツ管理>ブロック管理から新規入力で追加します。

それぞれ下記の様に入力します。ブロックデータはとりあえず何か入力しておきます。
ブロック名 最近購入された商品
ファイル名 recentPurchase.twig
ブロックデータ hoge

登録するとデータベースのdtb_blockに追加されます。
今回はただの画像やテキストを表示するブロックではなく、データベースから値を取得して表示するため、dtb_blockのlogic_flgを0から1に変更します。
logic_flgを1にするとFrontControllerProviderにコントローラーを探しに行きます。

次は、FrontControllerProviderにコントローラーを登録します。
/eccube/src/Eccube/ControllerProvider/FrontControllerProvider.php
75~79行目あたりのblockが定義されてるあたりに下記行を追加
$c->match('/block/recentPurchase', '\Eccube\Controller\Block\recentPurchaseController::index')->bind('block_recentPurchase');

登録したコントローラーを作成します。
下記ファイルを新規作成。
/eccube/src/Eccube/Controller/Block/recentPurchaseController.php

内容は下記のとおり。
namespace Eccube\Controller\Block;

use Eccube\Application;

class recentPurchaseController
{
    public function index(Application $app)
    {
        $OrderList = $app['orm.em']->getRepository('\Eccube\Entity\OrderDetail')
            ->findBy(
                array(),
                array('id' => 'DESC')
            );

        return $app['view']->render('Block/recentPurchase.twig', array(
            'OrderList' => $OrderList,
        ));
    }
}

コントローラーに登録が出来ましたので、下記twigを作成していきます。
/eccube/src/Eccube/Resource/template/default/Block/recentPurchase.twig

中身は下記の通り、新着商品のcss使いまわしてます。レスポンシブデザインにも対応してます。
<div id="contents_top">
  <div id="item_list">

    <div class="col-sm-12">
      <h2 class="heading00">最近購入された商品</h2>
    </div>

    <div class="row">
      {% for Order in OrderList | slice(0,8) %}
        <div class="col-sm-3 col-xs-6">
            <div class="pickup_item">
                <span class="date">{{ Order.Order.order_date|date("Y年m月d日H時i分") }}</span>
                <a href="{{ url('product_detail', {'id': Order.Product.id}) }}">
                    <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{ Order.Product.main_list_image|no_image_product }}"></div>
                    <dd class="item_comment">{{Order.Product.description_detail[:30] ~ '...' }}</p>
                    <dl>
                      <dt class="item_name">{{Order.product_name}}</dt>
                      <dd class="item_price">{{ Order.Price }}</dd>
                    </dl>
                </a>
            </div>
      </div>
      {% endfor %}
    </div>
    
  </div>
</div>

最後に管理画面のコンテンツ管理>ページ管理、該当のページのレイアウト管理から最近購入された商品ブロックを好きな所に配置します。

以上で8件の最近購入された商品が表示されます。


2015年7月14日火曜日

ECCUBE3正式版のインストール(さくらVPS)

さくらVPSサーバへ晴れて正式に3となったECCUBEをサーバーへインストールしていきす。

サーバーの構成とバージョンは下記
CentOS:6.6
Apache:2.2.15
PHP:5.6.10
PostgreSQL:9.4.1

phpPgAdminはインストールされているものとします。

EC-CUBE3のシステム要件は下記
Apache 2.2.x 以上 2.4.x 以上
PHP5.3.9以降
PostgreSQL 8.4.x以降 9.x以降
MySQL5.1.x以降 MySQL5.5.x以降

となっているので、sshでサーバーにログインし、各バージョンを確認してください。
Apacheの確認
httpd -v

phpのバージョンの確認
php -v

PostgreSQLのバージョンの確認
psql --version

MySQLのバージョンの確認
(Distribの方を見て下さい)
mysql --version

バージョンが要件を満たしていない場合は各自アップデートしてください。

さて、インストールにあたり、ECCUBE本体をダウンロードしてきます。
ECCUBEダウンロードページ
今回は3.0.1のバージョンでやっています。

ダウンロードしたものをzipのまま、FTPで/var/www/html/にアップロード。
SSHでアップロードした階層に移動
cd /var/www/html
解凍
unzip eccube-3.0.1.zip
zipファイルは消します。
rm eccube-3.0.1.zip
フォルダの名前を変更
mv eccube-3.0.1 eccube

インストールしていきます。
http://サイトURL/eccube/html へアクセス

インストールが始まります。
「次へ進むをクリック」

アクセス権のチェック。異常がある場合は、FTP等でパーミッションをチェックしてみて下さい。

お店の設定をします。

データベースの設定をします。

問題なければデータベースの初期化が始まります。

完了です!


ドキュメントルートを変更しましょう。
vi /etc/httpd/conf/httpd.conf
下記行を探して
DocumentRoot "/var/www/html"
下記に変更します。
DocumentRoot "/var/www/html/eccube/html"

下記URLでECCUBEのトップ画面が表示されるようになります。
http://サイトURL/

管理画面はインストール時に決めたURLでアクセス可能です。
http://サイトURL/★管理画面のURL★

インストールがうまく行かなければhttp://サイトURL/install.phpにアクセスすれば再インストール可能です。
インストール出来た後はhtml/install.phpのファイルを削除して下さい。

2015年7月13日月曜日

テキストエディターAtomで楽天goldのファイルを直で編集

楽天goldを運用していて、FTPしか使えず、FTPを開いて、該当のファイルをダウンロードして、バナーや商品を追加し、FTPにアップロードする。
運用上の一連の流れですが、これをAtomというテキストエディターを使って直でFTPのファイルを編集して行きましょう。

まずAtomをダウンロードしてきます。AtomはGitHubが開発したテキストエディターです。
Atomのダウンロード

ダウンロードしてきたら、インストールですね。
※今回はmacでの説明になります。

インストールが終わったら、開きます。
英語ですね、、、まずは日本語化していきましょう。

設定に日本語が用意されているわけではなく、第三者の開発したプラグインをインストールして日本語化等の機能を増やしていく事になります。

まずメニューの「Atom」>「Preference」をクリック。
「Setting」画面が開いたら「Install」をクリックします。

画面中央の「Search Package」に「japanese-menu」と入力しエンター。
下記パッケージをインストール。

無事、日本語になりました。

さて、本題のFTPの直編集に移ります。
先ほどと同様に、PreferenceのInstallのSearch Packageに「remote-edit」と入力し、下記パッケージをインストールします。

インストールができたら、メニュー>パッケージ>Remote Edit>Add New Host(ftp)をクリック
FTP情報を入力する画面が出てきます。

「Hostname」「Username」「Port」「Password」へそれぞれ入力し、saveを押します。
いよいよ接続です。
メニュー>パッケージ>Remote Edit>Browse Hostsをクリック、先ほど入力した接続先が出ていると思いますので、クリック。
無事接続されれば、goldへ接続可能です。

編集した後は保存する度にサーバーのファイルも更新されます。
※保存する度にサーバーのファイルも更新されるので、間違った状態で保存するとエライ事になります。。。
慣れてる場合や、ちょこっと編集したいなんて時に最高です。


2015年7月11日土曜日

【ECCUBE】バナーやプラグインのクリック数を調べる

バナーを貼ったけど、どれ位クリックされてるの??
新着商品やニュース、最近売れた商品やランキング等、販促系プラグインを色々入れてみたけど、どのプラグインが効果あるの??

アナリティクスで解析しても、どのキーワードで検索されたか、どこから来たか、どの商品が人気かはわかるけど、自分たちの作ったバナーや導入したプラグインの効果がわからないんだよなぁ、という時は「Googleアナリティクスのイベントトラッキング」を使えば、どのバナーやリンクが何回クリックされたかわかっちゃいます。

時間かけて作ったバナーが実はクリックされていないとう事もわかっちゃいます。。。

効果のあるバナーやプラグインがわかれば、次の一手が見えてくるかもしれません。

※Googleアナリティクスがユニバーサルアナリティクスの場合の説明になります。

リンクや画像がクリックされる度に、googleにクリックされたよという事を伝える事になります。
下記の様な設定になります。

計測したい全てのバナー、プラグインのリンクにonClick="ga('send','event','カテゴリ','アクション','ラベル'); を追記します。


onClick="ga();"の部分がリンクがクリックされた時に処理されます。

onClick="ga();"の中身を左から順番に説明
1.'send' [必須] ここは固定です。変更しないで下さい。
2.'event' [必須] ここは固定です。変更しないで下さい。
3.'カテゴリ' [必須] バナーの名前やプラグイン毎に好きな様に設定してください。
4.'アクション'[必須] 訪問者の行動。今回の場合はクリック。何かダウンロードしてもらう場合はダウンロード等。
5.'ラベル' [省略可能] 細かく名称を設定したい場合に。

バナーの場合は、'category'と画像名を一緒にするとわかりやすいと思います。

アナリティクスの行動>イベントで表示されます。







ECCUBEプラグインの場合の導入ケース

次はプラグイン導入の場合の説明をしていきます。
EC-CUBEのプラグインは、tplファイルでループして商品を取得している場合がほとんどです。
なので、tplで商品のリンクを生成している部分に上記onClick="ga('send','event','カテゴリ','アクション','ラベル'); を追記していきましょう。

試しに、「最近チェックした商品」に設定していきましょう。
このプラグインのtemplates/plg_checkeditems.tplを修正していきます。

aタグの部分に追記していきます
46行目を

下記に


49行目を

下記に


カテゴリにはプラグイン名、アクションにはクリック、ラベルにはプラグイン名+PCと設定しています。
スマホの場合はラベルにプラグイン名+SP等と設定するとよいでしょう。
パソコンとスマホではよくクリックされるプラグインに差異が出てきたりします。

上記で最近チェックした商品がクリックされた回数がアナリティクスに蓄積されていきます。

他のプラグインも設定する事で、効果のあるプラグインはどのページでも目につきやすい所に移動したり、あまりクリックされずパフォーマンスの悪いプラグインは外したり等、改善に役立つと思います。

是非活用してみてください。