XOOPS EC
           Distribution Package



Presented By Bluemoon inc.
    Session #2 2013-4-6
自己紹介
• 有限会社ブルームーン CEO 酒井能克
• Twitter @bluemooninc
• https://www.facebook.com/bluemooninc
• http://www.bluemooninc.jp
• N88-Basic,MASM,Quick-C,MS-
  C,VB,桐,dBaseIII,MS-Access 2.0 –
  2013,PHP, JavaScript 等25年間職業プログ
  ラマ
• 最近は iPhone/Andriod開発に興味あり。
コンセプト
• シンプルに導入しやすく!
  os-commerce,zen-cart,ec-cube,magento,uu-
  cart等色んなオープンソースの経験より
• 磨き込まれたUXの注入
  ヤフオク、アマゾン、価格.com等のエッ
  センスを取り入れてデザインしたUX。
• コアは最小限に拡張性は無限に
  学習コストを最小にするが拡張性は犠牲
  にしない。
https://www.xoopsec.com
https://github.com/bluemooninc/xoopsec
特徴
•   ヤフオク&アマゾンから発想したUX
•   アマゾンと同様の簡単クレジット決済
•   スマホ/タブレット自動サイズ調整
•   メール通知と共にサイト内メッセージも配信
•   CSVインポート・エクスポート=全テーブル
•   動作環境=PHP5.3/MySQL5.5以降
•   GPL V3 オープンソース・無償ダウンロード
•   XOOPS Cube V2.2最新コア対応
•   Legacy モジュール上位互換(機能追加あり)
•   Facebookログイン
導入ガイダンス
インストール
• html, xoops_trust_path をサーバにアップ
ウィザードの始まり
アクセス権限チェック
データベースの設定
内容を確認
mainfile.php の生成
書込可能フォルダのチェック
設定のチェック
データベースの設定
データベースの存在チェック
データベースの作成とチェック
システムテーブル作成
アプリのインストール
サイトページへログイン
バックヤードへ
ブロックの表示位置調整
デモサイトと同様の画面
カートモジュール基本設定
• 管理者メニューより設定(初期設定有
  り)
App_userName, App_orderId
                      広告枠




アプリケーションのサービス提供スタイル
を模索しています。現行ではデモサイトで
(仮想で)何か買物をすると広告枠を除去
出来ます。
クレジット機能のセットアップ
GMO-PGX モジュール
GMO-PG API連携の設定
クレジットカードのテストID取
       得
https://service.gmo-pg.com/cyllene/entry/trialStart.htm
登録してメールを受信
テスト環境使用の確認
ID/PWをメールで取得
Facebookアプリの登録



           サブドメインは入れな
               い。
Facebook認証の設定




• Facebook developers にて作成したアプリ
  ケーションの情報を記載
Facebookログイン
Yahoo! ログイン
http://developer.yahoo.co.jp/yconnect/
OpenID / Oauth2




           ここはテスト
              用
ショッピングカートにつ
    いて
最近チェックした商品




•   非ログイン時はセッションで管理
•   ログインしてもセッションを引き継ぐ
•   常に最新のチェック品が左先頭来る
•   左右スライダーでページ切り替え
ブックマークした商品




   • 商品詳細の下部の「この
     ページをブックマークす
     る」にチェックして今すぐ
     更新をクリックするとブ
     ロック表示される。
   • チェックマークを外せば消
     える。
カテゴリー
• ヤフオクと同じUXで動くカテゴリーブ
  ロック
• カテゴリーの樹形図は無限(Callback with
  closure 使用=PHP V5.3 以降必須)
商品の検索
• 商品名タイトルとバーコードで検索可能
商品の編集について




• クリックで商品詳細>編集へ
商品の編集
• 編集する>バックステージの編集へ
画像を説明文に追加
• 商品説明にも画像の追加が可能
サーバ側での画像管理
商品説明の整形例
新規商品の登録(管理画面)
商品一覧
商品一覧で追加を確認




•   鉛筆アイコンで再編集
•   ×は削除
•   その隣は画像ファイル登録
•   目のアイコンは表の画面で確認
•   販売しない時は、在庫を0にしておきます。
新規登録(フロント画面)
SKUのある商品




SKUを追加すると従来の在庫設定はシス
テム上、未使用となります。
画像カタログに写真を追加
商品画像一覧表で確認
2枚目の画像を追加
• 無限に追加可能
2枚の画像を登録完了
YouTube動画の追加
YouTubeのIDをセットするだけ
      11桁の文字
      列
YouTubeコード入力
表の画面で確認




追加した画像の確認




            LPO やメルマガ用
イベント通知の設定1
イベント通知設定2
     • 注文があった場
       合の通知に
       チェック
     • 商品コメントは
       利用者向け
     • ブックマーク設
       定解除でブロッ
       ク表示される
注文があった時
     • 管理者のメッ
       セージボック
       スに注文の
       メッセージが
       入る。
     • ワンクリック
       でバックヤー
       ドで受注管理
       画面へ
カートに入れてレジへ
注文内容の確認
• 配送先を入力して、支払い方法を選択>注文
  を確定
お届け先を入力
お届け先登録完了
クレジットカードの利用登録
• 全ページ右側のクレジットカード下のボ
  タンをクリック
登録完了
• 既に登録されている場合はワーニング
クレジットカード登録
• GMOペイメントのAPIで登録
注文を確定する
ご注文一覧
• ご注文有り難うございますのメッセージ
  後遷移先
確認メール
   • Bmcart
     /languages
     /ja_utf_8
     /ThankYouForOrder.tpl
            メッセージでも補
                完
足あと(購入履歴)
クレジットの利用履歴
受注管理画面
管理者メニューより注文一覧
をクリック
配送情報の入力
クレジット課金




    決済実行で課金API実
    行。日時が入り、決済実
    行アイコン(鍵)が消え
    る。
商品発送の連絡
発送メール
   • Bmcart
     /languages
     /ja_utf_8
     /ShoppingNpw.tpl
CSV入出力




• モジュール名テーブル名毎にCSVを入出力
• エクセルファイルで編集して一括登録可
• テストと本番のデータ入れ替えに最適
B.M.Cart CSV




• ダウンロードするとヘッダ付きCSVをエク
  セルで編集できる。エクセル編集後のCSV
  を読み込ませて更新、追加が可能。
Category
• 樹形構造=parent_id
• カテゴリーID=category_id
Item (商品)




•   `item_id` int(8) unsigned NOT NULL auto_increment, 商品ID
•    `category_id` int(8) unsigned NOT NULL, カテゴリID
•    `uid` int(8) unsigned NOT NULL, 登録者ユーザID
•    `item_name` varchar(255) NOT NULL, 商品名称
•    `item_desc` text, 商品説明
•    `price` decimal(13,2), 商品価格
•    `shipping_fee` decimal(13,2), 送料
•    `stock_qty` int(1) unsigned NOT NULL, 在庫数量
•    `last_update` int(10) unsigned NOT NULL, 最終更新日
•    `publish_date` int(10) unsigned NOT NULL, 公開日(将来対応予定)
•    `expire_date` int(10) unsigned NOT NULL, 公開終了日(将来対応予定)
Order

•   `order_id` int(8) unsigned NOT NULL auto_increment, 注文番号
•    `uid` int(8) unsigned NOT NULL, ユーザID
•    `first_name` varchar(80) NOT NULL, 名
•    `last_name` varchar(80) NOT NULL, 氏
•    `zip_code` varchar(10) NOT NULL, 郵便番号
•    `state` varchar(32) NOT NULL, 都道府県
•    `address` varchar(80) NOT NULL, 市区町村
•    `address2` varchar(80) NOT NULL, 番地、建物等
•    `phone` varchar(12) NOT NULL, 電話番号
•    `payment_type` tinyint(1) unsigned NOT NULL, 支払い(1:銀行振込、2:カード
•    `card_order_id` varchar(14), カード側へのオーダーID
•    `sub_total` decimal(13,2), 商品系
•    `tax` decimal(13,2),消費税
•    `shipping_fee` decimal(13,2),送料
•    `amount` decimal(13,2), 合計
•    `order_date` int(10) unsigned, 注文日時
•    `paid_date` int(10) unsigned, 支払日
•    `shipping_date` int(10) unsigned, 配送日
•    `shipping_carrier` varchar(32), 配送会社名称
•    `shipping_number` varchar(24), 配送伝票番号
•    `shipping_memo` text, 配送に関するメモ
•    `notify_date` int(10) unsigned, 配送事項送信日時
OrderItems



• `orderItem_id` int(8) unsigned NOT NULL
  auto_increment, 注文カウントID
• `order_id` int(8) unsigned NOT NULL, 注文ID
• `item_id` int(8) unsigned NOT NULL, 商品ID
• `price` decimal(13,2),商品価格
• `shipping_fee` decimal(13,2),送料
• `qty` int(1) unsigned NOT NULL,数量
XoopsEC独自の構成
• 尐々ある
本日リリースした内容まとめ
使ったテーマ
フレームワーク
• Achtungbaby(と呼んでます)
  –   admin = Mojavi のactionです
  –   App = CakePHPのrewriteルール
  –   Model = FuelPHPライクなForge
  –   Dependency Injection ( BearPHP )
• それぞれの好きなとこだけ集
  めて作りました。
• 注意)app/webrootの.htaccess
  はサクラ共有サーバで
  RedirectBase 設定が必要
Dependency Injection
• Setter Injection
                Object
       item
                                           item_id(商品ID)注入
                                         Sku_id(色/サイズ)注入
      itemSku   Object
                                              購買数を注入



                         Cart   Object           setterInjection関
                                                 数にobject宛てる
                                                 >関心のある
                                                 データだけが注
                                                 入される
     fetchConcern関数で関心              Table
      が満たされたチェック
cURL,JSON
• 広告枠の実験

                  XoopsEC.com
                                     認証無ければ
                                      コンテンツ
 App_UserId                   JSON
                                        注入
 App_OrderId                  コン
               JSON           テン
               認証              ツ




                      Your Site

Xoopsec