baserCMS で簡易的なショッピングカートをつくれる「baserCart」の紹介

2016.11.01

 

こんにちは。 baserCMS ユーザ会北海道幹事をやらせていただいております、ひろましゃと申します。

今回は、baserCMS 上で簡易的なショッピングカートをつくれる「baserCart」テーマの紹介をしたいと思います。

baserCart は、“森の動物たちの小さなお店”というコンセプトを元に、baserCMSテーマコンテスト向けに、私達、札幌のウェブ製作チーム「こもりこめろましゃ」によってつくられました。

かわいらしいファンタジーの世界を表現しながらも、メールベースのショッピングカートの雛形や、baserCMS のプラグイン作成手法の参考になるようつくられています。

baserCart でできること

baserCart は、テーマとプラグインをワンパッケージで配布できる baserCMS の機能を活用したテーマとなっています。テーマを導入することで baserCMS が持つ標準機能(新着情報、固定ページ、お問い合わせフォーム等々)に加え、次の機能が使えるようになります。

  • 閲覧者がサイト上で商品を選択し、カートに入れ、注文内容をメールアドレスとともに送信できる。
  • 管理者が送信された内容を、管理画面で確認でき、発注ステータスを更新できる。
  • 管理者が商品の情報や、付与するタグを登録・修正・削除ができる。

実際に動作しているデモサイトがありますので、閲覧者側の動きを確認することができます。

商品一覧|basercart

閲覧者による注文

閲覧者は、サイト上からタグなどの条件を元に商品を選択し、買い物かごから出し入れするといった、一般的なカート操作を行うことができます。

basercart01-580.png

最終的な購入は、お名前とメールアドレスを入力し、サイト管理者に対して注文を行います。

basercart02-580.png

管理者による発注確認

管理者は、システムナビ -> ショッピングカート -> 注文一覧より注文の一覧や詳細を確認することができます。また「ステータス」を操作することにより、未返信や返信済み、送金確認や発送済みといった状態を変更することができます。

basercart03-580.png

商品の管理

管理者は、システムナビ -> ショッピングカート -> 商品一覧よりサイトに表示する商品の管理を行うことができます。商品の売切れ状況や、分類するためのタグ、説明、価格、加えて、画像を4つまで登録できます。

basercart04-580-02.png

baserCart の改良

baserCart は簡易的なショッピングカートですが、その実態は baserCMS の API が、開発者が格納したいデータの形を自由に作成・操作できるように開放されていることを最大限に活用した高度なテーマです。

注文や商品の情報は、テーマが管轄する領域(テーブル)に格納され、プログラムを修正することで、管理画面を含めてカスタマイズが可能なように設計されています。

ソースコードを以下で公開しています。baserCMS に対して機能を追加するサンプルテーマとしても参考になるかと思います。 また、CSS についても修正が可能なよう、製作時に使われた Sass 定義を含みました。

h1romas4/basercart: Shopping cart for baserCMS

ダウンロード

baserCart | baserマーケット

  • baserCartは現在 baserCMS 3系で動作確認を行っています。

ひろましゃ

baserCMS ユーザ会 北海道幹事をやらせていただいております、"ひろましゃ" です。 どうぞよろしくお願いいたします。