「Drupal Commerce」を使ってECサイトを作成する方法

モチヤスタッフ

オープンソースのCMSとして有名なDrupalですが、ECサイトの作成もできることはご存知でしょうか。

どうやら「Drupal Commerce」というモジュールを使用することで、ECサイトに必要な機能が追加できるようです。

今回は実際にDrupal Commerceを使って、ECサイトの作成をしてみました。

なお、ECサイトは弊社ではまだ扱ってことがないため(2024年1月時点)、あくまで「Drupalでもこんなことができる」参考としてご覧ください。

作成した環境はDrupal 10.2とDrupal Commerce 2.37です。

Drupal Commerceのインストール

Inline Entity Formのインストール

まず、「Drupal Commerce」に必要な「Inline Entity Form」というモジュールをインストールします。

Inline Entity Formのモジュールページにアクセスし、ページ下にあるComposerのインストールコマンドを実行してインストールしましょう。

モジュールのインストール

次にDrupal Commerceをインストールします。

Drupal Commerceのモジュールページにアクセスして、Inline Entity Formと同様にページ下にあるComposerのインストールコマンドを実行してインストールします。

ちなみに、「Drupal Commerce 1」はDrupal 7までのモジュールで、Drupal 9以降は「Drupal Commerce 2」を使用します。

管理画面からモジュールを有効化する

モジュールをインストールしたら、管理画面からそのモジュールを有効化します。
Drupalの管理画面メニューの[管理]→[機能拡張]をクリックします。

モジュールをインストールしていると、「Commerce」セクションが追加されているので、必要なモジュールにチェックを入れてページ最下部の「インストール」をクリックすれば完了です。

スクリーンショット「拡張機能からCommerce関連をフォーカスしている」

先ほど追加した「Inline Entity Form」も必要なので、合わせてチェックを入れてインストールするようにしましょう。

なお、各モジュールの大まかな機能内容は下記の通りです。
今回はひと通りの機能が使えるようにするために、すべて有効にしました。

モジュール名 内容
Commerce ECの基礎となるモジュール
Commerce Cart カート機能を追加する
Commerce Checkout チェックアウトフローの機能を追加する
Commerce Log ECのログ機能を追加する
Commerce Number Pattern 連番を生成するための機能を追加する
Commerce Order オーダーに関連する機能を追加する
Commerce Payment 決済機能を追加する
Commerce Payment Example 支払い機能のゲートウェイの例を追加する
Commerce Price 通貨の設定機能を追加する
Commerce Product 商品に関連する機能を追加する
Commerce Promotion プロモーションを管理するためのUIを追加する
Commerce Store ストアに関する機能を追加する
Commerce Tax 税金機能を追加する

また、Commerceは必須モジュールが多く、有効になっていないモジュールがある場合は「いくつかの必須モジュールを有効にする必要があります」というページが表示されます。

「継続」ボタンを押して、一緒に有効にしておきましょう。

スクリーンショット「必須モジュールを有効にする画面で継続ボタンをフォーカスしている」

Commerceを有効化すると、Drupal管理画面メニューに新たに[管理]→[Commerce]メニューが追加されます。

また、カートや決済用のページが追加されたり、ECを利用する人がサイトに登録するための「顧客」というProfile typesが自動的に追加されます。

利用者は「顧客」権限でDrupalのアカウントを作成し、住所を登録・保存したり、注文を行うことになります。

Drupal Commerceの初期設定

モジュールのインストールが完了したので、ここからは初期設定を行います。

ちなみに、Drupal Commerceの公式サイトにドキュメントがあります。
すべて英語ですが、開発者向けとユーザー向けに分かれて詳しく説明されているので、Drupal Commerceを使う場合は目を通しておいた方が良いでしょう。

また、Drupal Commerceは非常に機能が多いモジュールです。

すべての機能を紹介するのは難しいため、今回はサイト上でオリジナルのTシャツを販売することを想定し、それに必要な最低限の設定を行っていきます。

通貨の確認と設定

まずは通貨の確認をしましょう。
Drupalで設定している国の通貨が自動的に設定されるようになっていますが、本当に問題ないかの確認と、複数の通貨に対応したい場合は追加が必要です。

Drupal管理画面メニューの[管理]→[Commerce]に移動し、「環境設定」をクリックします。

スクリーンショット「commerceメニューから環境設定をフォーカスしている」

Commerceの環境設定の中から[通貨]メニューをクリックして、通貨ページに移動します。

スクリーンショット「環境設定から通貨を選択している」

通貨ページには、現在追加されているすべての通貨のリストが表示されます。
今回はデフォルトの国が「日本」に設定されてあるため、「日本円」が既に登録されています。

スクリーンショット「追加している通貨の一覧画面」

もし通貨を追加したい場合は、「Add currency」ボタンをクリックします。
通貨のリストが表示されるので、通貨を選択して「追加」をクリックすれば追加完了です。

ストアの作成

次に商品を追加する前に、ストアの作成が必要になります。
Commerceの環境設定の中から[ストア]メニューをクリックして、ストア一覧ページに移動します。

スクリーンショット「環境設定からストアを選択している」

ストア一覧ページで「Add store」ボタンをクリックします。

スクリーンショット「ストアリストページで、Add storeボタンをフォーカスしている」

ストアの名前やメールアドレス、住所などの必要な情報を入力します。

スクリーンショット「ストア情報入力画面」

また、右サイドバーでサポートする国や、税金の設定、ショップのURLを指定します。
すべて入力したら、「保存」ボタンをクリックして保存しましょう。

決済方法の設定

あとは決済方法に関しても設定が必要です。
Commerceの環境設定の中から[決済ゲートウェイ]メニューをクリックします。

スクリーンショット「Commerceメニューから決済ゲートウェイをフォーカスしている」」

決済方法の一覧ページが表示されるので、「Add payment gateway」ボタンをクリックします。

スクリーンショット「決済ゲートウェイリスト画面でAdd payment gatewayボタンをフォーカスしている」

Drupal Commerceは、いくつかの決済プロバイダーに関するモジュールも用意されています。

PayPalStripeBraintreeなどが使えるので、支払い方法を追加したい場合は、必要に応じてモジュールをインストールし、決済方法を増やしましょう。

「プラグイン」で追加された決済プロバイダーを選択し、情報を入力すれば設定完了です。

スクリーンショット「決済ゲートウェイの設定画面」

今回はお試しなので「プラグイン」は「Manual」を選択し、とりあえず決済方法を1つ用意しておきます(1つも用意していないと、決済に進めなくなります)。

商品の追加と管理方法

商品バリエーションタイプの作成

ここからは商品を追加するために必要な準備をしていきます。

Drupal Commerceでは、「商品タイプ」と呼ばれる、カテゴリーのようなものを作成して商品を管理します。
商品タイプは「Tシャツ」などの商品の大枠のカテゴリーだと考えて作成すればOKです。

そのために、まずは商品タイプの元となる「商品バリエーションタイプ」を作成します。

Commerceの環境設定の中から[商品バリエーションタイプ]メニューをクリックして、商品バリエーション一覧ページに移動します。

スクリーンショット「Commerceメニューから商品バリエーションタイプをフォーカス」

「Add product variation type」ボタンをクリックして、追加します。

スクリーンショット「商品バリエーションタイプリスト画面からAdd product variation typeボタンをフォーカスしている」

追加画面では、「ラベル」と「Order item type」を選択します。
「Order item type」は商品注文の設定を商品バリエーションタイプごとに切り替えられる機能ですが、今回は「デフォルト」を選択しておきます。

スクリーンショット「product variation type 追加画面」

「保存」ボタンをクリックして、作成します。

作成後に「編集」ボタンの右の三角アイコンをクリックし、「フィールドの管理」をクリックすると、フィールドの追加や管理が可能です。

スクリーンショット「商品バリエーション画面からフィールドの管理をフォーカスしている」

「新しいフィールドの作成」ボタンから、必要に応じてフィールドを追加します。

スクリーンショット「フィールドの管理画面から新しいフィールドの作成ボタンをフォーカスしている」

商品タイプの作成

次に、先ほど作成した商品バリエーションタイプを元に、「商品タイプ」を作成しましょう。

Commerceの環境設定の中から[商品タイプ]メニューをクリックして、商品タイプ一覧ページに移動します。

スクリーンショット「commerceメニューから商品タイプをフォーカスしている」

「Add product type」ボタンをクリックして、商品タイプの追加ページに移動します。

スクリーンショット「商品タイプリスト画面からAdd product typeボタンをフォーカスしている」

「ラベル」など必要な情報を入力します。

「Product variation type」という項目は、「- Create New -」ではなく「- Use existing -」を選択し、先ほど作成した商品バリエーションタイプにチェックを入れます。

スクリーンショット「product type追加画面からUse existingを選択している」

商品の追加

最低限必要な設定が完了したので、あとは商品の追加を行います。

Drupal管理画面メニューの[管理]→[Commerce]に移動し、「Products」をクリックします。

スクリーンショット「CommerceメニューからProductsをフォーカスしている」

商品一覧ページが表示されるので、「商品を追加」ボタンをクリックします。

ちなみに、商品タイプが複数ある場合は、ここで商品タイプを選択する画面が表示されます。
追加したい商品タイプを選択して、次に進みましょう。

スクリーンショット「商品一覧画面の商品を追加ボタンをフォーカスしている」

コンテンツの作成画面と似たページなので、同じ感覚で商品情報の追加を行います。

スクリーンショット「商品追加画面」

入力できたら「保存」ボタンをクリックします。

商品のバリエーションを追加する

商品の編集画面から、[バリエーション]タブをクリックすると、バリエーションの一覧画面が表示されます。

例えばTシャツのカラーバリエーションやサイズなど、商品のバリエーションの数だけ「Add variation」ボタンをクリックして追加します。

スクリーンショット「商品バリエーション画面からAdd variationボタンをフォーカス」

この商品バリエーションごとに、「SKU(商品を識別するためのID)」や「料金」を入力します。

スクリーンショット「バリエーション追加画面」

これで商品の登録は完了です。

表示確認

実際はグローバルナビゲーションの設定や各商品の一覧ページの整備も必要ですが、ひとまず商品の登録が完了したので、カートに追加して注文するまでの流れを確認します。

商品の[ビュー]タブをクリックすると、商品の詳細ページが表示されます(URLは「/product/[id]」)。
ここで「カートに入れる」ボタンをクリックすると、商品がカートに追加されます。

スクリーンショット「商品の表示画面」

カートに入れたタイミングで「商品をカートに追加しました」というトースターが表示されるので、そこに表示されるリンクをクリックするか、もしくは「/cart」URLにアクセスすると、カートが表示されます。

スクリーンショット「ショッピングカート画面」

ここで「購入手続き」ボタンをクリックすると、確認ページに遷移しますが、注文情報が入力されていないアカウントの場合は、注文情報の入力ページが表示されます。

スクリーンショット「注文情報表示画面」

入力し、確認画面を進めていくと、購入完了画面までたどり着けます。

そして、実際に注文が通っているかどうか確認するためには、Drupal管理画面メニューの[管理]→[Commerce]の[Orders]に移動します。

スクリーンショット「commerceメニューからordersをフォーカスしている」

ここに注文情報が追加されています。
実際にECサイトを運営する場合は、ここの注文情報を確認して、発送処理などを行うことになります。

スクリーンショット「注文情報リスト画面」

このように、Drupal Commerceを使えば、ECサイトに必要な機能をDrupalに追加できます。

まとめ

今回はDrupal Commerceモジュールを使って、ECサイトを作成しました。
ドキュメントが英語なこともあって大変でしたが、商品を追加して一連の流れを確認できるところまで作成できました。

とはいえ、まだまだページやテンプレートの整備が必要だったり、一部英語のままになっている部分もあるので、日本語に翻訳していくなどの作業も発生しそうです。

また、Drupal Commerce公式以外の情報が少なかったり、あっても情報が古い場合が多かったです。
DrupalでもECサイトの作成は可能ですが、かなり大がかりな作業が必要になりそうです。

モチヤスタッフ

Drupalなど技術に関する投稿をモチヤのスタッフが行っています。

モチヤスタッフ の書いた記事一覧

最新の関連記事

Contact お問い合わせ

Drupalでの開発・運用、サーバー構築、Webサイト構築全般、制作費用などに関してお気軽にご相談ください。