eccube

ショッピングカートバージョンアップ

LINEで送る
Pocket

会員登録ページ

随分時間がかかりましたが本日ショッピングカート
をバージョンアップいたしました
カート内で会員登録すると会員様価格が表示され
特別価格でご購入いただけます
(会員様/非会員様、同価格の商品もございます)

実は先日バージョンアップを実施しようとしましたが
色々な問題がありやむなく中断しました
何度も動作確認をし行いましたがインストールが出来ず
画面が真っ白
動作確認後にアップした.htaccessが原因か、いや
プラグインではないかと あれこれ
プラグインを削除したらデータベースに登録した
会員価格も全部削除されてしまったり
一度仕切りなおしをしようと思い本日にいたりました

競合が多いのでプラグインをあまり使用しないように
していますが会員価格はプラグインを利用しています

商品一覧/商品詳細ページにキーワードやディスクリプション
を登録できるようにカスタマイズしたのですが
上記プラグインをONにすると商品詳細ページに設定した
キーワードやディスクリプションが表示されない
そこで今度はプラグインに手を加えて問題を解決しました

カスタマイズは以下
FAQ管理
メンテナンス管理
いいねボタン設置
お問い合わせ管理機能
お問い合わせ返信機能
受注一覧でステータス変更
注文ステータス表示
虫眼鏡機能
QRコード設置
会員価格設定 ※プラグイン
商品メインコメントを分ける(PC,スマホ)
コメントをつけてお気に入りに登録
売上ランキング表示
最近チェックした商品表示
会員登録時に性別や職業を記入する欄 削除
入力欄の必須項目を見やすくしました
MYページにログアウトボタンを追加
OGP/ツイッターカード タグ挿入
会員登録完了ページに「購入画面へ」のボタン追加
404エラー画面
商品詳細/一覧の個別キーワード/ディスクリプション設定欄 追加
(設定されていないものは空欄)

今月から新しい商品の追加がありますがこれから
キーワード、ディスクリプションを追加していきます

より便利に簡単にご購入いただけるようにして
参ります
皆様のご来店楽しみにお待ちしております

あとは4/08までにXPからwindows7にバージョンアップ

LINEで送る
Pocket

ショッピングカートにいいねボタンの追加

LINEで送る
Pocket

先日から取り組んでおりますOGP設定ようやく
本店で動作確認が取れました
ショッピングカート(ECCUBE)の商品ページに
いいねボタンと送信ボタンを追加しました
ECCUBEにはプラグインがありますので最初は
プラグインを利用してと思っていましたが
スマホに対応していないようでしたのでファイルを
直接編集して設定いたしました

送信ボタンも友達(お客さん)に実際に送信してみました
返事を返してくれたものに意図する情報も記載されて
いました
(朝早くにすみません ありがとうございました)

スマホはまだ設定中ですがどうもうまく動きません
実機でないのでテスト中ということで

https://developers.facebook.com/apps/ でアプリを作成

アプリIDをコピー(控える)
/data/Smarty/templates/テンプレート名/site_frame.tplを編集
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja” class=”<!–{$tpl_page_class_name|h}–>”>
以下に変更

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja” xmlns:og=”http://ogp.me/ns#” xmlns:fb=”http://www.facebook.com/2008/fbml” class=”<!–{$tpl_page_class_name|h}–>”>

以下を追加
<!–{assign var=detail value=”`$smarty.const.ROOT_URLPATH`products/detail.php”}–>
<!–{assign var=list value=”`$smarty.const.ROOT_URLPATH`products/list.php”}–>
<!–{if $smarty.server.PHP_SELF==$detail}–>
<meta property=”og:title” content=”<!–{$arrProduct.name|escape}–>” />
<meta property=”og:type” content=”product” />
<meta property=”og:image” content=”http://<!–{$smarty.server.SERVER_NAME}–>/環境にあわせ変更/upload/save_image/<!–{$arrProduct.main_image}–>” />
<meta property=”og:site_name” content=”<!–{$arrProduct.name|escape}–> | <!–{$arrSiteInfo.shop_name|h}–>” />
<meta property=”og:url” content=”http://<!–{$smarty.server.SERVER_NAME}–>/環境にあわせ変更/products/detail.php?product_id=<!–{$arrProduct.product_id}–>” />
<meta property=”og:description” content=”<!–{$arrProduct.main_comment}–>” /> ※ディスクリプションとして表示したいデータ
<meta property=”fb:app_id” content=”アプリID” />
<!–{elseif $smarty.server.PHP_SELF==$list}–>
<meta property=”og:title” content=”<!–{$tpl_subtitle|h}–> | <!–{$tpl_title|escape}–>” />
<meta property=”og:type” content=”product” />
<meta property=”og:image” content=”http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/favicon.ico” />
<meta property=”og:site_name” content=”<!–{$tpl_subtitle|h}–> | <!–{$arrSiteInfo.shop_name|h}–>” />
<meta property=”og:url” content=”http://<!–{$smarty.server.SERVER_NAME}–><!–{$smarty.server.REQUEST_URI|h}–>” />
<meta property=”og:description” content=”<!–{$arrSiteInfo.shop_name|h}–>” />
<meta property=”fb:app_id” content=”アプリID” />
<!–{else}–>
<meta property=”og:title” content=”<!–{$arrPageLayout.description|h}–>” />
<meta property=”og:type” content=”product” />
<meta property=”og:url” content=”http://<!–{$smarty.server.SERVER_NAME}–>” />
<meta property=”og:image” content=”http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/favicon.ico” />
<meta property=”og:site_name” content=”<!–{$arrSiteInfo.shop_name|h}–>” />
<meta property=”fb:admins” content=”アプリID” />
<!–{/if}–>

METAタグの確認
https://developers.facebook.com/tools/debug にアクセスし
該当のURLを入力 表示内容を確認

いいねボタンの作成
https://developers.facebook.com/docs/reference/plugins/like/
でURL入力
http://okadakisho.com/shop/products/detail.php?product_id=103107

GET CODEをクリックするとスクリプトと挿入するコードが表示されます

/data/Smarty/templates/テンプレート名/footer.tplを編集
最下部にスクリプトを追加
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=アプリIDが記載されています”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

/data/Smarty/templates/テンプレート名/products/detail.tplを編集
いいねボタンを表示させたい場所に作成したコードを変更して追加
作成したもの
<div class=”fb-like” data-href=”http://okadakisho.com/shop/products/detail.php?product_id=103107″ data-send=”true” data-width=”50″ data-show-faces=”true”></div>

http://okadakisho.com/shop/products/detail.php?product_id=103107 のところを
https://<!–{$smarty.server.SERVER_NAME}–>/shop/products/detail.php?product_id=<!–{$arrProduct.product_id}–>
に変更

変更したもの
<div class=”fb-like” data-href=”https://<!–{$smarty.server.SERVER_NAME}–>/shop/products/detail.php?product_id=<!–{$arrProduct.product_id}–>” data-send=”true” data-width=”50″ data-show-faces=”true”></div>

これでいいねボタンが表示され動作しました
上記内容はドメイン名/shop です ドメイン名/htmlの方は
shopの箇所がhtmlとなります
また上記コードの中には「送信」ボタンが含まれています
https://developers.facebook.com/docs/reference/plugins/like/
でお好みのボタンを作成し該当箇所だけ書き換えてください

FACEBOOKをご利用でお気に入りの商品がございましたら是非
「いいね」をクリックしてください よろしくお願いいたします

LINEで送る
Pocket

Twitter Card申請(WordPress/ECCUBE)

LINEで送る
Pocket

twitter1

左下の「Twitter Cards」をクリック

twitter2

右下の 3.「validate your meta tags.」をクリック

twitter3

Summaryを選択(どれでも良いと思います)

twitter4

Try Cardsでは何も入力せずValidata&Apply
をクリック
Try Cardsに入力すると申請画面に進むと
思いましたが進まないのでいろいろ検索
して時間を消費

twitter5

Validata&ApplyをクリックするとURL入力欄
がありますのでブログなら記事のURLを入力
ECCUBEなら商品詳細ページのURLを入力しGOを

そうすると申請する為のボタンがでてきて
申請ができます

申請というのでトップページを入力するのだ
と勘違いしhttp://okadakisho.info/ 失敗

またどこから申請すれば良いのかわからず
検索 ここでソースの確認をした時、記事
にしかtwitter用のmetaタグが出力されて
いなかったのを思い出し記事のURLを入力し
申請完了

METAタグ確認 記事のURL入力 申請完了
とても簡単だったのでした

今度はECCUBEのプラグインをインストール
METAタグを確認し商品詳細ページのURL
受け付けない
製作者の方にメールで問合せましたら
申請のサイトの方でエラーがでている時が
あるとのこと、時間をおいてURLを入力したら
めでたく申請完了

現在はカード選択画面でローディングエラー
他のサイトを申請したくてもできない状態です

LINEで送る
Pocket