EC・カート機能

目次

EC・カート機能について

a-blog cms でEC・カート機能を利用するには、Shopping Cart 拡張アプリの使用を推奨しています。

Shopping Cart 拡張アプリとは

Shopping Cart 拡張アプリとは、1エントリーを1商品として扱い、カート機能や在庫管理機能、クレジットカード決済などのECサイトとしての基本的な機能を提供する拡張アプリです。

具体的には以下の機能を提供しています。

  • 1エントリーを1商品として扱うカート機能
  • 在庫管理機能
  • クレジットカード決済機能(Square)
  • 決済手数料の設定
  • 税金設定(税率、内税・外税)
  • 送料設定
  • 配送オプション(配送希望日時と追加手数料)
  • マイページ機能(閲覧ページ上でのユーザー情報の編集)

また、サンプルテーマとして EC テーマを同梱しています。カスタマイズの際はサンプルテーマを参考に実装することができます。

動作環境

  • a-blog cms: Ver. 3.0.0 ~
  • PHP: 7.4.x ~ 8.3.x
  • ブラウザ:Chrome、Firefox、Safari(>= 12)、Edge、iOS:Safari(>= 12)、Android Chrome

会員機能について

Shopping Cart拡張アプリと a-blog cms 標準の機能である会員機能は組み合わせて使用することで会員登録制のECサイトを作成することができるようになります。会員機能を有効にすることで、自由にユーザーを登録することができるようになるためです。さらに、読者権限ユーザーでユーザー登録をするように設定することで会員数が多くなっても安心の会員登録制のECサイトを構築できます。会員機能を利用するには管理画面>ご利用のコンフィグセットのコンフィグ管理 > ログイン設定 に移動し「ユーザー登録の外部申請」にチェックを入れてください。

会員機能について、詳しく知りたい方はこちらのドキュメントをお読みください。

同梱されているサンプルテーマについて

Shopping Cart 拡張アプリにはサンプルテーマとして、以下のテーマが同梱されています。ShoppingCart 拡張アプリを使用した EC サイト制作の参考にご利用ください。

  • ec
  • square@ec

まとめ

ここまで読んだあなたは、 a-blog cms で EC サイトを作るための学習をする準備が整いました。それでは実際に、Shopping Cart 拡張アプリをインストールして初期設定を行ってみましょう。

Shopping Cart 拡張アプリのインストールから基本設定までを解説したドキュメントはこちら​です。
一緒に、a-blog cms で ECサイトを作ってみましょう。

インストール方法

このエントリーでは、Shopping Cart 拡張アプリ及びサンプルテーマのインストール方法を説明します。Shopping Cart 拡張アプリのインストール方法は以下の2つの方法があります。

  • 簡単セットアップ for square@ec テーマを使用してインストールする
  • 手動でインストールして、メンテナンスページからサンプルテーマのデータをインポートする

それぞれ説明します。

簡単セットアップ for square@ec テーマを使用してインストールする

まず、簡単セットアップを使用してShopping Cart 拡張アプリ及びサンプルテーマのインストールをする方法をご紹介します。この方法が最も簡単にShopping Cart 拡張アプリ及びサンプルテーマのインストールができ、サンプルテーマのデータまで一括でインストールできるため、基本的には簡単セットアップを使用してインストールすることを推奨します。

簡単セットアップ for square@ec テーマ の使用方法

簡単セットアップ for square@ec テーマ をダウンロード

  1. 上記のボタンから簡単セットアップ for square@ec テーマ の zip ファイルをダウンロードしてください。
  2. ダウンロードした zip ファイルを解凍し、 setup.php を入手します。
  3. setup.phpをサーバーのインストールしたいディレクトリに設置します。
  4. setup.phpを設置したURLにブラウザからアクセスして、 setup.php を実行します。
  5. セットアップページが表示されたら、セットアップページのメッセージに従ってセットアップを進めてください。

手動でインストールして、メンテナンスページからサンプルテーマのデータをインポートする

次に紹介する方法は Shopping Cart 拡張アプリを手動でインストールする方法です。通常の拡張アプリを使用したことがある方や、a-blog cms に慣れている方はもしかしたらこちらの方法のほうがやりやすいかもしれません。

また、既に a-blog cms で制作しているサイトに EC 機能を追加したい場合にもこちらの方法がおすすめです。

この方法では、Shopping Cart 拡張アプリを extension/plugins/ に設置して、Shopping Cart 拡張アプリをダウンロード後、メンテナンスページのインポート機能を利用して、サンプルテーマのデータをインポートします。​

Shopping Cart 拡張アプリをダウンロード

  1. 上記のボタンからShopping Cart 拡張アプリ の zip ファイルをダウンロードしてください。
  2. ダウンロードした zip ファイルを解凍し、 plugins ディレクトリから、ShoppingCart 拡張アプリを入手します。
  3. 入手した ShoppingCart 拡張アプリを extension/plugins に設置してください。
  4. config.server.php で HOOK_ENABLE を有効化してください
  5. 管理画面 > 拡張アプリ から「インストール」ボタンをクリックして、インストールを行います。インストール後は拡張アプリが有効化された状態になります。
  6. ShoppingCart 拡張アプリのインストール時に themes ディレクトリに サンプルテーマがない場合、サンプルテーマがダウンロードされます。
  7. a-blog cms 設置ディレクトリ直下の setup_xxxx ディレクトリ(存在しない場合はご利用のa-blog cmsと同じバージョンをダウンロードし、パッケージ内にある setup ディレクトリを設置してください)内の bin ディレクトリ直下に ダウンロードしたファイル内のbinディレクトリから、利用したいテーマ名の フォルダ(例:square@ec)を設置します
  8. https://ドメイン/setup_xxxx/index.php にアクセスします。
  9. メンテナンスページのガイドに従ってサンプルテーマのデータをインポートします。(メンテナンスページのインポート手順に関してはこちらのドキュメントを参考にしてください)

まとめ

ここまでで、Shopping Cart 拡張アプリ のインストール方法について学びました。ここまでの内容を理解することができたら、次は Shopping Cart 拡張アプリの基本設定を学ぶと良いでしょう。Shopping Cart 拡張アプリの基本設定についてはこちらのエントリーで解説しています。

アップデートについて

このエントリーでは、Shopping Cart 拡張アプリのアップデート方法を説明します。

Shopping Cart 拡張アプリは手動でファイルを置き換えてアップデートする必要がありますので、手順を説明します。

Shopping Cart 拡張アプリをダウンロード

  1. 上記のボタンからShopping Cart 拡張アプリ の zip ファイルをダウンロードしてください。
  2. ダウンロードした zip ファイルを解凍し、 plugins ディレクトリから、ShoppingCart 拡張アプリを入手します。
  3. 入手した ShoppingCart 拡張アプリを extension/plugins にアップロードして、ファイルの置き換えを行います。
  4. ルートブログの管理画面 > 拡張アプリ から「アップデート」ボタンをクリックして、アップデートを行います。

以上で、Shopping Cart 拡張アプリのアップデートは完了です。

リリースノート

Ver. 2.2.6

Released on 2024/11/28

Fixed

  • fix: a-blog cms Ver. 3.1.12 及び Ver. 3.0.32 のセキュリティ修正により、.envの書き換えができるずSquareとの連携に失敗する問題の修正

Ver. 2.2.5

Released on 2024/09/10

Fixed

  • build: 依存関係をアップデート
  • fix: Ver. 2.2.2 より、一時キャッシュのドライバー設定が memory 以外になっている場合、他のユーザーのカートの情報が表示されてしまう可能性がある問題の修正
  • fix(theme): メールテンプレート及び確認画面で、address3 や deliver-address3 が表示されない箇所が存在する問題の修正

Ver. 2.2.4

Released on 2024/05/27

Fixed

  • パスワード再発行メールの認証URL変数が間違っている問題を修正

Ver. 2.2.3

Released on 2024/04/30

Fixed

  • fix: Ver. 2.2.2 より管理画面でPHPエラーが発生する問題の修正

Ver. 2.2.2

Released on 2024/04/30

Features

  • 監査ログ対応
  • feat: Square 連携のクレジットカード決済機能でメモをカスタマイズできる機能を追加(square-note)
  • feat: PHP8.3対応

Fixed

  • Square SDKをVer. 34.0.1.20240118 へアップデート(pnp.iniがを読み込む権限がない場合でもPHPエラーがでないように修正)
  • fix: カート内商品情報を更新すると、表示順が更新順(降順)になってしまう問題の修正
  • fix: 購入時に在庫数が足りないことが原因でエラーが発生した場合の表示を改善
  • a-blog cms Ver. 3.1.7で実装されたallow_dangerous_tagの対応
  • support PSR12
  • POSTによる注文フォームへのアクセスからだと、購入ができない問題を修正
  • fix: サブディレクトリへのインストール時にSquareのWebhook APIが動作しない問題の修正
  • fix: 購入フォームで、決済方法を送信しない場合PHPエラーが出る問題の修正
  • ECテーマの軽微な不具合修正

Ver. 2.2.1

Released on 2023/011/17

Fixes

  • fix: インストール時にAPI機能が無効になっている問題の修正
  • エントリー一覧からカートに入れる機能を実装できるようにテーマを改修

Ver. 2.2.0

Released on 2023/011/17

Features

  • ECテーマを Ver. 3.1系で利用できるように改修
  • インストーラーをVer. 3.1対応

Fixes

  • fix: PHP7.4系で決済後にカート及び受注情報が削除されない問題の修正
  • fix: カート情報はShoppingForm_Submitモジュールの処理内で削除するように修正
  • fix: Invalid argument supplied for foreach()エラーが発生する問題の修正

Ver. 2.1.4

Released on 2023/07/12

Fix

  • カートと受注情報の削除タイミングをシャットダウン時に実行するように変更
  • フォームIDのインポートデータが壊れている問題の修正

Ver. 2.1.3

Released on 2023/06/28

Changed

  • インストール時にクレジットカードのサンプル画像をメディアに追加し、決済方法画像に追加する機能を廃止

Ver. 2.1.2

Released on 2023/05/15

Fixed

  • ECテーマ: IOSでモーダルの背景がスクロールできてしまう問題の修正
  • ShippingGroup_AdminSelect モジュールの変数表が間違っている問題の修正
  • Firefox でクレジットカード決済が必ずエラーになってしまう問題の修正
  • Ver. 16 未満の Safariで Square の クレジットカード情報取得時にフォームが送信されない問題の修正
  • カート及び決済フォームを表示するページはページキャッシュされないように修正

Ver. 2.1.1

Released on 2023/05/09

Fixed

  • fix: PHP7.4で syntax error, unexpected '|', expecting variable (T_VARIABLE) が発生する問題の修正
  • ECテーマ詳細ページの Entry_Summary で ページネーションが表示されてしまう問題の修正

Ver. 2.1.0

Released on 2023/05/09

Added

  • Order_Summaryモジュールで注文商品・決済方法・追加手数料・配送地域・総注文商品(エントリー)数合計・総注文商品の数量合計のデータを出力できるブロック、変数を追加
  • ShoppingForm モジュールで適用中の決済方法の説明用画像を表示できるように改良
  • 決済方法に利用条件を設定できる機能及び、利用条件を満たした決済方法を表示するモジュール(Payment_Select)を追加
  • フォーマットした送料無料のしきい値(小計)を表示するグローバル変数(%{SHIPPING_FREE_SUBTOTAL_FORMATTED} )を追加
  • ShoppingCart 及び ShoppingCart_Summary モジュールで配送グループ(shippingGroup)ブロックを表示できるように改修
  • 決済方法・配送グループ・追加手数料にステータス設定を追加(公開 or 非公開)& Payment_Selectモジュールでステータスを考慮した決済方法のみを表示するように改修 & ステータスを考慮した配送グループ・追加手数料を表示するモジュール(ShippingGroup_AdminSelect・Addition_Select)を追加
  • Squareで決済をした場合、レシート番号(square-receiptNumber)とレシートURL(square-receiptUrl)をメール用の変数として表示できる機能を追加
  • ShoppingCart_Summary モジュールで税金情報と小計を表示できる変数を追加(taxAmount:loop, subtotal)

Changed

  • ECテーマのカート追加・更新・削除時にJavaScriptを触らずにバリデーションを追加できる用に変更
  • 管理画面のタブの分け方を変更
  • ECテーマでOrder_SummaryモジュールからAPI経由で取得していたカート内商品のデータをShoppingCart_Summary に置き換え
  • ECテーマの決済フォームのカテゴリーを cart → shopping に変更
  • ECテーマ決済フォームにおいて、注文情報を Order_Summaryモジュールで表示するように変更
  • ECテーマの不要なCSS及びJavaScript を削除など整理

Fixed

  • ECテーマのカート追加時に、カラーとサイズの必須チェックをするように修正
  • 送料無料のしきい値に0を設定した場合に、送料無料にならない問題の修正
  • ShippingCart_Summaryモジュールの変数表に(sort, usort, csort, ecd)を追加
  • 設定されている決済方法・配送グループ・追加手数料が0個の場合、エラーが出る問題を修正

リファレンス

Shopping Cart 拡張アプリで提供している機能についてのリファレンスです。

GETモジュール

Shopping Cart 拡張アプリで提供している GET モジュールについてのリファレンスです。

ショッピングカートサマリー
ShoppingCart_Summary
カート内エントリー(商品)の一覧を表示
ショッピングカートセッティングス
ShoppingCart_Settings
ShoppingCart拡張アプリの設定を表示
オーダーサマリー
Order_Summary
注文情報を表示
ショッピングカート
ShoppingCart
カートへの追加・削除・更新などの処理を行った結果を表示
シッピンググループアドミンセレクト
ShippingGroup_AdminSelect
Ver. 2.1.0〜
エントリー編集画面で選択可能な配送グループを表示
ペイメントセレクト
Payment_Select
Ver. 2.1.0〜
決済フォームで選択可能な決済方法を表示
アディションセレクト
Addition_Select
Ver. 2.1.0〜
決済フォームで選択可能な追加手数料を表示
ショッピングフォーム
ShoppingForm
決済フォームの表示
ショッピングフォーム ナウ
ShoppingForm_Now
今すぐ決済フォームの表示

ShoppingCart_Summary

カート内エントリー(商品)の一覧を表示できます。モジュールID設定 > 条件設定 > 引数 でブログIDを指定することで、指定したブログのカート内容を表示できます。

Order_Summary

カートの注文内容(注文商品、決済方法、追加手数料、注文金額)を表示します。POSTリクエスト(ShoppingForm_XXXモジュールでの送信)に配送地域、決済方法、追加手数料のデータをカスタムフィールド形式で送信した場合、配送料、決済手数料、追加手数料の金額も表示できます。

また、モジュールID設定 > 条件設定 > 引数のエントリーIDを指定することで、商品(エントリー)1つの注文内容を表示できます。(Ver. 2.1.0より、エントリーIDを指定しなくても、商品(エントリー)1つの注文内容を表示できるようになりました。)今すぐ購入フォームを実装する場合に利用できます。

タッチモジュール

Shopping Cart 拡張アプリで提供しているタッチモジュールについてのリファレンスです。

Touch_CartItem カートに商品が存在するときのみ表示する ソース
<!-- BEGIN_MODULE Touch_CartItem -->
<!-- END_MODULE Touch_CartItem -->
Touch_NotCartItem カートに商品が存在しないときのみ表示する ソース
<!-- BEGIN_MODULE Touch_NotCartItem -->
<!-- END_MODULE Touch_NotCartItem -->

POST モジュール

Shopping Cart 拡張アプリで提供している POST モジュールについてのリファレンスです。



モジュール名 概要
ShoppingCart_AddItem カートに商品を追加・更新します。
ShoppingCart_RemoveItem カートから商品を削除します。
ShoppingCart_Update_Quantity カートアイテムの数量を更新します。
ShoppingForm_Confirm 購入フォームを別のステップに遷移します。
ShoppingFrom_Submit 購入フォームを送信します。標準のFrom_Submitモジュールの機能に加えて、在庫管理や決済処理を行います。
ShoppingForm_ConfirmNow 今すぐ購入フォームを別のステップに遷移します。
ShoppingFrom_SubmitNow 今すぐ購入フォームを送信します。標準のFrom_Submitモジュールの機能に加えて、在庫管理や決済処理を行います。

ShoppingCart_AddItem

ShoppingCart_AddItem モジュールは、カートに商品を追加・更新するためのモジュールです。

フィールド

以下のフィールドを指定して実行できます。



フィールド 概要 備考
eid カートに追加するエントリー(商品)のエントリーID 必須
quantity カートに追加する数量を数値で指定 必須, 数値

カートアイテムには、上記の項目に加えて独自のデータをカスタムフィールドの形式で追加することができます。以下のソースコードは、カラーとサイズの項目をカートのカスタムフィールドとして追加する際のテンプレート例です。

<!-- BEGIN_MODULE ShoppingCart -->
<!-- BEGIN add -->
<!-- BEGIN_IF [{status}/eq/success] -->
<p class="acms-alert acms-alert-success">カートに商品を追加しました。</p>
<!-- ELSE -->
<p class="acms-alert acms-alert-danger">カートに商品を追加できませんでした。</p>
<!-- END_IF -->

<form action="" method="post" enctype="multipart/form-data">
    <div class="entry-price-bottom-box">
      <table class="entry-item-select-table">
        <tr>
          <th>色選択</th>
          <td>
            <select name="item_color">
              <option value="">選択してください</option>
              <option value="赤">赤色</option>
              <option value="黄">黄色</option>
            </select>
            <input type="hidden" name="field[]" value="item_color" />
          </td>
        </tr>
        <tr>
          <th>サイズ</th>
          <td>
            <select name="item_size">
              <option value="">選択してください</option>
              <option value="S">S</option>
              <option value="M">M</option>
              <option value="L">L</option>
            </select>
            <input type="hidden" name="field[]" value="item_size" />
          </td>
        </tr>
        <tr>
          <th>個数</th>
          <td>
            <select name="quantity" class="acms-admin-form-width-full">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            <input type="hidden" name="cart[]" value="quantity">
            <div role="alert" aria-live="assertive">
              <div
                data-validator-label="quantity-v-required"
                class="validator-result-{quantity:validator#required}"
              >
               <p class="form-error-text">数量を選択してください。</p>
              </div>
            </div>
            <div role="alert" aria-live="assertive">
              <div
                data-validator-label="quantity-v-regex"
                class="validator-result-{quantity:validator#regex}"
              >
               <p class="form-error-text">数量の形式が間違っています。</p>
              </div>
            </div>
            <div role="alert" aria-live="assertive">
              <div
                data-validator-label="quantity-v-min"
                class="validator-result-{quantity:validator#min}"
              >
               <p class="form-error-text">1未満の数量は選択できません。</p>
              </div>
            </div>
            <div role="alert" aria-live="assertive">
              <div
                data-validator-label="quantity-v-stock"
                class="validator-result-{quantity:validator#stock}"
              >
               <p class="form-error-text">注文可能な数量を超えています。</p>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <button class="btn is-width-full" type="submit" name="ACMS_POST_ShoppingCart_AddItem">
      <span>カートに入れる</span>
    </button>
    <input type="hidden" name="eid" value="%{EID}">
    <input type="hidden" name="cart[]" value="eid">
</form>
<!-- END add -->
<!-- END_MODULE ShoppingCart -->

エラー時の表示

ShoppingCart_AddItem モジュール実行時に何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
eid required カートに追加したい商品のエントリーIDが指定されていなかった場合に発生します。
quantity required カート追加したい数量が指定されていなかった場合に発生します。
quantity regex 数量の形式が符号なし整数でない場合に発生します。
quantity min 1未満の数量を指定した場合に発生します。
quantity stock 商品の在庫数を超えた数量を選択した場合に発生します。

ShoppingCart_RemoveItem

ShoppingCart_RemoveItem モジュールは、カートから商品を削除するためのモジュールです。

フィールド

以下のフィールドを指定して実行できます。



フィールド 概要 備考
eid カートから削除するエントリー(商品)のエントリーID 必須

以下はカートからエントリー(商品)を削除するサンプルコードです。

<!-- BEGIN_MODULE ShoppingCart -->
<!-- BEGIN remove -->
<!-- BEGIN_IF [{status}/eq/success] -->
<p class="acms-alert acms-alert-success">カートから商品を削除しました。</p>
<!-- ELSE -->
<p class="acms-alert acms-alert-danger">カートから商品を削除できませんでした。</p>
<!-- END_IF -->
<form action="" method="post" enctype="multipart/form-data"">
    <button class="btn" type="submit" name="ACMS_POST_ShoppingCart_RemoveItem">
      <span>カートから削除する</span>
    </button>
    <input type="hidden" name="eid" value="%{EID}">
    <input type="hidden" name="cart[]" value="eid">
</form>
<!-- END remove -->
<!-- END_MODULE ShoppingCart -->

エラー時の表示

ShoppingCart_RemoveItem モジュール実行時に何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
eid required カートから削除したい商品のエントリーIDが指定されていなかった場合に発生します。

ShoppingCart_Update_Quantity

ShoppingCart_Update_Quantity モジュールは、カートアイテムの数量を更新するためのモジュールです。

フィールド

以下のフィールドを指定して実行できます。



フィールド 概要 備考
eid 数量を更新するカートアイテムのエントリーID 必須
quantity 更新する数量 必須, 数値

以下はカート内エントリー(商品)の数量を更新するサンプルコードです。

<!-- BEGIN_MODULE ShoppingCart -->
<!-- BEGIN update.quantity -->
<!-- BEGIN_IF [{status}/eq/success] -->
<p class="acms-alert acms-alert-success">カート内商品の数量を更新しました。</p>
<!-- ELSE -->
<p class="acms-alert acms-alert-danger">カート内商品の数量を更新できませんでした。</p>
<!-- END_IF -->

<form action="" method="post" enctype="multipart/form-data">
    <input  type="number" name="quantity" min="1" value="" >
    <input type="hidden" name="cart[]" value="quantity" >
    <div role="alert" aria-live="assertive">
      <div
        data-validator-label="quantity-v-required"
        class="validator-result-{quantity:validator#required}"
      >
        <p class="form-error-text">数量を入力してください。</p>
      </div>
    </div>
    <div role="alert" aria-live="assertive">
      <div
        data-validator-label="quantity-v-regex"
        class="validator-result-{quantity:validator#regex}"
      >
        <p class="form-error-text">数量の形式が間違っています。</p>
      </div>
    </div>
    <div role="alert" aria-live="assertive">
      <div
        data-validator-label="quantity-v-min"
        class="validator-result-{quantity:validator#min}"
      >
        <p class="form-error-text">1未満の数量は選択できません。</p>
      </div>
    </div>
    <div role="alert" aria-live="assertive">
      <div
        data-validator-label="quantity-v-stock"
        class="validator-result-{quantity:validator#stock}"
      >
        <p class="form-error-text">注文可能な数量を超えています。</p>
      </div>
    </div>
    <button class="btn" type="submit" name="ACMS_POST_ShoppingCart_Update_Quantity">
      <span>数量を更新する</span>
    </button>
    <input type="hidden" name="eid" value="%{EID}">
    <input type="hidden" name="cart[]" value="eid">
</form>
<!-- END update.quantity -->
<!-- END_MODULE ShoppingCart -->

エラー時の表示

ShoppingCart_Update_Quantity モジュール実行時に何らかのエラーが起きた場合には以下のフィールド(項目)がバリデーションエラーとして表示されます。



フィールド(項目)名 オプション名 概要
eid required 数量を更新したいカート内商品のエントリーIDが指定されていなかった場合に発生します。
quantity required 数量が指定されていなかった場合に発生します。
quantity regex 数量の形式が符号なし整数でない場合に発生します。
quantity min 1未満の数量を指定した場合に発生します。
quantity stock 商品の在庫数を超えた数量を選択した場合に発生します。

ShoppingCart モジュール

ShoppingCart モジュール は カートへの追加・削除・更新などのPOST処理を行った結果を表示する GET モジュールです。表示できる変数やブロックについては拡張アプリ管理画面から変数表を確認してください。

ShoppingForm_Confirm

ShoppingForm_Confirm モジュールは、Form_Confirm モジュールを継承して作成されたモジュールです。Form_Confirm モジュールの機能に加えて以下のことを行っています。

  • カートに在庫数を購入数が超過したアイテムが存在する場合、shoppingError ステップに遷移する

ShoppingForm_Submit

ShoppingForm_Submit モジュールは、Form_Submit モジュールを継承して作成されたモジュールです。Form_Submit モジュールの機能に加えて以下のことを行っています。

  • カートに在庫数を購入数が超過したアイテムが存在する場合、shoppingError ステップに遷移する
  • 決済処理
  • 在庫管理(注文数分の在庫数を減らす)
  • 購入フォームの送信が成功した場合、カート内商品の削除

ShoppingForm_ConfirmNow

ShoppingForm_ConfirmNow モジュールは 今すぐ決済フォームを実装するためのPOSTモジュールです。今すぐ決済フォームを実装することでカートを経由することなく、商品を購入できます。

ShoppingForm_SubmitNow

ShoppingForm_SubmitNow モジュールは 今すぐ決済フォームを実装するためのPOSTモジュールです。今すぐ決済フォームを実装することでカートを経由することなく、商品を購入できます。

グローバル変数

Shopping Cart 拡張アプリで提供しているグローバル変数についてのリファレンスです。



%{PAYMENT_SERVICE} Shopping Cart 設定 > 基本設定 > 決済サービス設定で設定した決済サービス(square)を表示
%{SQUARE_JS} square を利用した決済を行う場合に必要な JavaScript のURL
%{TAX_EXPRESSION_FORMAT} Shopping Cart 設定 > 基本設定 > 税金設定で設定した消費税区分(intax | extax)
%{TAX_CALC_METHOD} Shopping Cart 設定 > 基本設定 > 税金設定で設定した税計算方式(rebate | pileup)
%{TAX_ROUNDING_METHOD} Shopping Cart 設定 > 基本設定 > 税金設定で設定した税計算端数処理方式(floor | round | ceil)
%{INVOICE_NUMBER} Shopping Cart 設定 > 基本設定 > 適格請求書発行事業者の設定で設定した登録番号
%{INVOICE_NAME} Shopping Cart 設定 > 基本設定 > 適格請求書発行事業者の設定で設定した氏名または名称
%{SHIPPING_DATE_FROM} Shopping Cart 設定 > 注文画面設定 > 配送設定で設定した配送希望日の選択肢(開始)
%{SHIPPING_DATE_TO} Shopping Cart 設定 > 注文画面設定 > 配送設定で設定した配送希望日の選択肢(終了)
%{SHIPPING_FREE_SUBTOTAL} Shopping Cart 設定 > 注文画面設定 > 送料設定で設定した送料無料のしきい値(小計)
%{SHIPPING_FREE_SUBTOTAL_FORMATTED}
Ver. 2.1.0〜
%{SHIPPING_FREE_SUBTOTAL} をフォーマットした文字列
%{SHIPPING_CALC_METHOD} Shopping Cart 設定 > 送料設定で設定した送料の計算方法(sum | max)

校正オプション

Shopping Cart 拡張アプリで提供している校正オプションについてのリファレンスです。



convertToIncludingTax 税抜き価格を税込価格にします。適応する変数の価格は税抜きである必要があります。。
例:{price}[convertToIncludingTax('{tax}') | number_format]
priceが1000、taxが0.1のとき、1,100に校正されます。
convertToTotalPrice 単価 × 個数を計算します。第一引数に個数、第二引数に税率(省略可)を指定できます。
例:{price}[convertToTotalPrice('{quantity}', '{tax}') | number_format]
priceが1000、quantityが3、taxが0.1のとき、3,300に校正されます。
convertToTax 単価に対する消費税を計算します。
例:{price}[convertToTax('{tax}') | number_format]
priceが1000、taxが0.1 の場合、消費税区分が外税のとき、100に校正され、内税のとき、91に校正されます。
shippingGroupName 配送グループID から 配送グループ名を表示します。
例: {item_shipping_group_id}[shippingGroupName]

商品データ(エントリー)を登録する

Shopping Cart 拡張アプリでは1エントリーを1商品として扱います。そのため、商品データをサイトに追加したい時は、Shopping Cart 拡張アプリのルールに従ってエントリーを作成する必要があります。安心してください。難しいことは何もありません。Shopping Cart 拡張アプリを使用したECサイトで商品を登録する方法を学習しましょう。

商品を登録する手順は以下になります。

  • 商品管理に必要なエントリーのカスタムフィールドを追加する
  • 配送グループを選択するカスタムフィールドを追加する

商品管理に必要なエントリーのカスタムフィールドを追加する

Shopping Cart 拡張アプリを使用した、ECサイト構築ではエントリーを商品データとして扱うために必要なカスタムフィールドがいくつか設定されています。



フィールド 概要
item_price 商品の販売価格を設定するためのカスタムフィールドです。 1000
item_stock 商品の在庫数を設定するためのカスタムフィールドです。このフィールドの値が空文字の場合、その商品(エントリー)について在庫管理をしないことになります。 100
item_tax 商品の消費税率を設定するためのカスタムフィールドです。 0.1
item_shipping_group_id 商品の配送グループを設定するためのカスタムフィールドです。 Shopping Cart 設定で設定した配送グループの id の値を設定します。 group_default

※ Shopping Cart拡張アプリに同梱しているサンプルテーマでは、「商品を探す(products)」カテゴリーでエントリーを作成すると、上記の商品データ用のカスタムフィールドが設置された状態でエントリーを作成できるようになっています。

配送グループを選択するカスタムフィールドを追加する

エントリーのカスタムフィールドで Shopping Cart 拡張アプリ設定で設定した配送グループを設定できるようにするには、ShippingGroup_AdminSelect モジュール を使用して以下のように記述する必要があります。

ShippingGroup_AdminSelect モジュール を利用することで、自動的に配送グループのステータスを考慮した選択肢を表示することができます。

<select name="item_shipping_group_id">
  <!-- BEGIN_MODULE ShippingGroup_AdminSelect -->
    <!-- BEGIN shippingGroup:loop -->
    <option value="{id}" \{item_shipping_group_id:selected#{id}\}>{name}</option>
    <!-- END shippingGroup:loop -->
  <!-- END_MODULE ShippingGroup_AdminSelect -->
  </select>
<input type="hidden" name="field[]" value="item_shipping_group_id" />

【Tips】エントリー(商品)で在庫管理を行うかどうかを判定する

エントリーにおいて、在庫管理が有効かどうかは、エントリーのカスタムフィールド item_stock の値が空文字であるかどうかによって決まります。そのため、エントリーを表示するときに以下のようなIFブロックを記述することで、そのエントリーで在庫管理を行うかどうかを判定することができます。在庫管理を行うかどうかによってテンプレートを分岐させたい場合に活用できます。

<!-- BEGIN_IF [{item_stock}/isset] -->
在庫管理が有効な場合
<!-- ELSE -->
在庫管理が無効な場合
<!-- END_IF -->

まとめ

これで、ECサイトに商品データ(エントリー)を登録できるようになりました。商品データを登録できるようにはなりましたが、商品を購入できるようにするにはどうしたら良いのでしょうか?ユーザーが商品を購入するためには以下の2つのステップが必要になります。

  1. カート機能(カートへの商品の追加・削除)機能の実装
  2. 決済用フォームの実装

カートへの商品の追加・削除の実装方法ついてはリファレンスにて説明しています。また、決済用のフォームの作成についてはこちらのエントリーで説明しています。さぁ、ECサイトの構築完成まであと少しです!この調子で制作を進めていきましょう。

購入フォームを作成する

このエントリーでは、Shopping Cart 拡張アプリを使用して、購入フォームを作成する手順を説明します。購入フォームは以下の手順で作成できます。

  1. 決済フォーム用のGETモジュールを設定する
  2. 決済フォーム用のPOSTモジュールを設定する
  3. 決済方法の選択肢を実装する
  4. 追加手数料の選択肢を実装する

決済フォーム用のGETモジュールを設定する

a-blog cms でフォームを設置する場合は、Form モジュールをつかってフォームを作成しますが、決済フォームでは Shopping Cart 拡張アプリで提供している ShoppingForm モジュールを使用します。

基本的には、Form モジュールを設置していたところを ShoppingForm モジュールに置き換えていただくことで動作いたします。また、標準の Form モジュールを継承しているため、バリデーターやステップフォームの機能も備えています。

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step-->
<!-- 新規 -->
<!-- END step -->

<!-- BEGIN step#reapply -->
<!-- 修正 -->
<!-- END step#reapply -->

<!-- BEGIN step#confirm -->
<!-- 確認 -->
<!-- END step#confirm -->

<!-- BEGIN step#result -->
<!-- 完了 -->
<!-- END step#result -->

<!-- END_MODULE ShoppingForm -->

また、ShoppingForm モジュールでは、決済フォームで選択した決済方法や追加手数料を以下の変数とブロックで表示することが可能です。

Ver. 2.1.0 より、Order_Summary モジュールを利用して、決済フォームで選択した決済方法や追加手数料を表示できるようになりました。そのため、Ver. 2.1.0 以降では Order_Summary モジュールを利用して注文情報を表示することを推奨します。

Order_Summary モジュールで利用できる変数については、ShoppingCart 拡張アプリの管理画面内にある変数表からご確認ください。



変数名 概要
paymentMethodBlock 選択された決済方法のブロック
paymentMethodName 選択された決済方法の名前
paymentMethodCommissionPaid 選択された決済方法の決済手数料
paymentMethodDescription 選択された決済方法の説明テキスト
paymentMethodMailMessage 選択された決済方法のメール用テキスト


変数名 概要
additionId 選択された追加手数料のID
additionName 選択された追加手数料の名前
additionFee 選択された追加手数料の手数料

追加手数料を表示する変数は additionGroup:loop ブロック内で表示できます。

<h3 class="form-table-title">追加手数料</h3>
<table class="form-table">
  <!-- BEGIN additionGroup:loop -->
  <tr>
    <th></th>
    <td>
      {additionId} {additionName}(¥{additionFee}[number_format])
    </td>
  </tr>
  <!-- END additionGroup:loop -->
</table>

決済フォーム用のPOSTモジュールを設定する

a-blog cms でフォームを送信する場合は、Form_Confirm モジュールや Form_Submit モジュールを利用してフォームの確認ステップやエラーステップに遷移しますが、決済フォームでは Shopping Cart 拡張アプリで提供している ShoppingForm_Confirm モジュール及び、ShoppingForm_Submit モジュールを使用します。

利用方法は普段、Form_Confirm モジュールを使用しているところで ShoppingForm_Confirm モジュールを使用し、Form_Submit モジュールを使用しているところで、ShoppingForm_Submit モジュールを使用してフォーム送信を行うようにテンプレートを記述します。具体的なサンプルコードは以下になります。

ShoppingForm_Confirm モジュールを使用するサンプルコード

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Confirm"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

ShoppingForm_Submit モジュールを使用するサンプルコード

<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_Submit"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="result" />
  <input type="hidden" name="error" value="confirm" />
  <input type="hidden" name="id" value="shoppingForm" />
</form>

これで「決済フォーム用のPOSTモジュールを設定する」のステップは完了です。ShoppingForm_Confirm 及び、ShoppingForm_Submit モジュールが具体的に何をやっているかについてはリファレンスを参照してください。

決済方法を指定するカスタムフィールドを実装する

Shopping Cart 設定で設定した決済方法を指定するカスタムフィールドを作成します。フィールド名は payment-method である必要があります。以下は Payment_Select モジュールを使用して実装したサンプルコードになります。

Payment_Select モジュールを利用することで、自動的に決済方法のステータスを考慮した選択肢を表示することができます。

        <!-- BEGIN_MODULE Payment_Select -->
        <ul>
          <!-- BEGIN payment:loop -->
          <li>
            <div
              class="acms-form-radio"
            >
              <input
                id="input-radio-payment-method-{block}"
                type="radio"
                name="payment-method"
                value="{block}"
                \{payment-method:checked#{block}\}
                <!-- BEGIN_IF [\{payment-method\}/em/_and_/{payment.i}/eq/1] -->
                checked="checked"
                <!-- END_IF -->
                data-validator="payment-method"
              />
              <label for="input-radio-payment-method-{block}">
                <i class="acms-ico-radio"></i>{name}<!-- BEGIN_IF [{commissionPaid}/gt/0] -->:手数料 ¥{commissionPaid}[number_format]<!-- END_IF -->
              </label>
              <!-- BEGIN description:veil -->
              <div>
                <!-- BEGIN_IF [{description}[delnl]/nem] -->
                <div>{description}[nl2br]</div>
                <!-- END_IF -->
                <!-- BEGIN_IF [{image@path}/nem] -->
                <img
                  src="%{MEDIA_ARCHIVES_DIR}{image@path}"
                  class="acms-img-responsive"
                  alt="{image@alt}"
                  width="{image@width}"
                  height="{image@height}"
                >
                <!-- END_IF -->
              </div>
              <!-- END description:veil -->
            </div>
          </li>
          <!-- END payment:loop -->
        </ul>
        <!-- END_MODULE Payment_Select -->
        <input type="hidden" name="field[]" value="payment-method" />
        <input type="hidden" name="payment-method:v#required" id="payment-method-v-required" />
        <div role="alert" aria-live="assertive">
          <div data-validator-label="payment-method-v-required" class="validator-result-\{payment-method:v#required\}">
            <p class="form-error-text">決済方法を選択してください</p>
          </div>
        </div>

追加手数料を指定するカスタムフィールドを実装する

Shopping Cart 設定で設定した追加手数料を指定するカスタムフィールドを作成します。フィールド名は additionである必要があります。追加手数料は複数の値を指定して送信することが可能です。複数の値を指定してフォームを送信した場合、追加手数料は各手数料を合計した金額になります。以下は Addition_Select モジュールを使用して実装したサンプルコードになります。

Addition_Select モジュールを利用することで、自動的に決済方法のステータスを考慮した選択肢を表示することができます。

<!-- BEGIN_MODULE Addition_Select -->
<!-- BEGIN addition:veil -->
<h3>追加手数料</h3>
<table>
  <tbody>
    <tr>
      <th></th>
      <td>
        <ul>
          <!-- BEGIN addition:loop -->
          <li>
            <div class="acms-form-checkbox">
              <input type="checkbox" name="addition[]" value="{id}" \{addition:checked#{id}\} id="input-checkbox-addition-{id}" />
              <label for="input-checkbox-addition-{id}">
                <i class="acms-ico-checkbox"></i>{name}(¥{fee}[number_format])</label>
            </div>
          </li>
          <!-- END addition:loop -->
        </ul>
        <input type="hidden" name="field[]" value="addition" />
      </td>
    </tr>
  </tbody>
</table>
<!-- END addition:veil -->
<!-- END_MODULE Addition_Select -->

配送地域を指定するカスタムフィールドを実装する

決済フォームでは、配送先を送信することで、ShoppingCart設定 で配送グループごとに設定した送料設定に従って送料を計算します。送料を指定するフィールド名は deliver-area である必要があります。以下はサンプルコードになります。サンプルコードでは1つ前のステップで送信したカスタムフィールド deliver-pref の値を指定しています。

<input
  type="hidden"
  name="deliver-area"
  value="{deliver-pref}"
/>
<input type="hidden" name="field[]" value="deliver-area" />

購入エラー時のステップを追加する

購入フォームでは、購入時にエラーが発生した場合に表示する shoppingError ステップが標準で用意されています。

shoppingError ステップは購入処理中の商品に在庫切れの商品が存在する場合などに表示されます。

<!-- BEGIN_MODULE ShoppingForm -->

<!-- BEGIN step#shoppingError -->
<section>
  <h2>購入エラーが発生しました。</h2>
  <p class="message">購入手続き中の商品に問題がある可能性があります。お手数ですが、はじめからやり直して下さい。</p>
  <div class="form-btn-wrap">
    <a href="%{BASE_URL}cart/" class="btn">購入フォームに戻る</a>
  </div>
</section>
<!-- END step#shoppingError -->

<!-- END_MODULE ShoppingForm -->

まとめ

このエントリーでは、購入フォームを作成する方法を学びました。購入フォームのカスタマイズができるようになれば基本的なECサイトの構築についてはバッチリです。しかし、このままではサイト内で決済をすることができません。決済サービスと連携して、オンライン上で決済ができるECサイトを制作したい場合はこちらのドキュメントも合わせてご覧ください。

【非推奨】マイページ機能を利用して、閲覧ページ上からユーザー情報を変更できるようにする

Ver. 3.1 より、a-blog cms にマイページ機能が追加されたためこの機能は非推奨になりました。マイページ機能を利用したい場合は、標準機能のモジュールをご利用ください。


Shopping Cart 拡張アプリを使用することでマイページ機能を実装することができます。通常では、ユーザーの情報(基本設定・カスタム設定)を変更するためには管理画面上で編集する必要がありますが、マイページ機能を利用することで閲覧ページ上からユーザーの情報(基本設定・カスタム設定)を変更することができるようになります。


このエントリーではマイページ機能を実装して、閲覧ページ上でユーザー情報を変更できるようにする方法を解説します。

Mypage モジュール

Shopping Cart 拡張アプリをインストールすることで Mypage モジュールという GET モジュールが利用できるようになります。

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の表示、更新時にエラーを検知した場合や更新に成功した場合に表示するブロックを提供しています。

ユーザーの情報(基本設定・カスタム設定)の表示

Mypage モジュールを利用することで、ユーザーの情報(基本設定・カスタム設定)の表示ができます。例えば、以下のように記述することでユーザーの名前を表示できます。

<!-- BEGIN_MODULE Mypage -->
<input id="name" type="text" name="name" autocomplete="name" class="" value="{name}" placeholder="山田太郎"data-validator="name">
<input type="hidden" name="user[]" value="name">
<input type="hidden" name="name:v#required"> <!-- 必須項目 -->
<!-- BEGIN name:v#required -->
<p class="form-error-text">名前を入力してください</p>
<!-- END name:v#required -->
<!-- END_MODULE Mypage -->

更新時にエラーを検知した場合にエラーメッセージを表示する

ユーザーの情報(基本設定・カスタム設定)の更新時に、フォームのバリデーターに引っかかった場合などでエラーが発生してユーザー情報(基本設定・カスタム設定)の更新ができないことがあります。Mypage モジュールを利用することで、更新時のエラーを検知して、エラーメッセージを表示することができます。

Mypage モジュールでは、 msg#error ブロックを記述することで、エラー時に msg#error ブロックを表示することができます。

<!-- BEGIN msg#error -->
<p class="alert-message">マイページの更新に失敗しました</p>
<!-- END msg#error -->

ユーザー情報の更新に成功した場合に、更新成功メッセージを表示する

Mypage モジュールでは、ユーザーの情報(基本設定・カスタム設定)の更新に成功した場合に msg#update ブロックを表示します。

<!-- BEGIN msg#update -->
<p class="success-message">マイページの更新に成功しました</p>
<!-- END msg#update -->

MypageUpdate モジュール

Shopping Cart 拡張アプリをインストールすることで MypageUpdate モジュールという POST モジュールが利用できるようになります。

MypageUpdate モジュールは、ユーザーの情報(基本設定・カスタム設定)の更新を行うためのモジュールになります。使い方は、他の POSTモジュールと同様に送信したいフォームの submit ボタン要素の name 属性の値に ACMS_POST_Mypage_Update を指定します。

<form action="" method="post">
  <!-- フォーム部品を読み込むためのinclude文 -->
  @include("/login/basic.html")
  <div class="form-btn-wrap">
    <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">マイページ情報を更新する</button>
  </div>
</form>

また、MypageUpdate モジュールの仕様として、基本設定には更新可能な項目と不可能な項目が存在します。カスタム設定はユーザーのカスタムフィールドになるので、すべての値が更新可能です。

MypageUpdate モジュールで更新できるユーザー情報(基本設定)



ユーザー情報 フィールド 概要
名前 name ユーザーの名前です。(日本語可)
ユーザーID code ユーザーがログイン時に入力するIDです。半角英数字で設定します。
アイコン画像 icon ユーザーのアイコン画像です。
メールアドレス mail ユーザーのメールアドレスです。
メールマガジン mail_magazine この値が有効だとメールマガジンを送信できます。
メールアドレス (携帯) mail_mobile ユーザーの携帯電話のEメールアドレスです。
メールマガジン(携帯) mail_mobile_magazine この値が有効だとメールマガジンを送信できます。
URL url ユーザーがwebサイトを持っている場合のURLです。
ロケール locale ユーザーのロケールです。
パスワード pass ユーザーのパスワードです。

MypageUpdate モジュールで更新できないユーザー情報(基本設定)



ユーザー情報 フィールド 概要
ステータス status ユーザーのステータスです。
有効期限 login_expire ユーザーの有効期限です。
ログイン端末の制限 user_login_terminal_restriction この値が有効だと許可された端末からしかログイン出来なくなります。
どこでもログイン login_anywhere この値が有効だとユーザーが所属するブログ以下のどのブログでもログインできるようになります。
インデキシング indexing この値が有効だとユーザー一覧に表示されます。
子ブログへの権限 global_auth この値が有効だとユーザーに子ブログへの権限を与えます。

MypageUpdate モジュールでユーザー情報を更新する場合の注意点

MypageUpdate モジュールでユーザー情報を更新する場合、基本設定の項目はフィールドが送信されなかった場合、空として保存されてしまいます。更新が不要な項目は以下のように hidden で設定しておくことで、ユーザー情報が空で保存されてしまうことを防ぐことができます。

<form action="" method="post" class="h-adr js-validator">
  <!-- マイページ更新時に空で保存されないようにする -->
  <input type="hidden" name="code" value="{code}">
  <input type="hidden" name="user[]" value="code">

  <input type="hidden" name="url" value="{url}">
  <input type="hidden" name="user[]" value="url">

  <input type="hidden" name="locale" value="{locale}">
  <input type="hidden" name="user[]" value="locale">
  
  <!-- 更新するフィールドは省略 -->
  <button type="submit" class="btn" name="ACMS_POST_MypageUpdate">
    <!--T-->保存する<!--/T-->
  </button>
</form>

カスタムフィールドのデータの場合、こちらのドキュメントで説明されている内容を実装することで、送信されなかった項目が空になることを回避することができます。

まとめ

マイページ機能を実装することで、閲覧画面上からユーザー自身でユーザーの情報(基本設定・カスタム設定)を変更することができるようになり、ユーザーの引っ越しなどで、お届け先の住所が変更した場合でも、ユーザー側で住所を自由に変更するといったことができるようになります。ECサイトにおいては便利な機能かと思いますので、ぜひご活用ください。

Shopping Cart 拡張アプリの設定

このエントリーでは、Shopping Cart 拡張アプリの設定について以下のことを説明します。

  • 税金について設定する
  • 適格請求書発行事業者について設定する
  • 決済方法について設定する
  • 配送について設定する
  • 追加手数料について設定する

税金について設定する

Shopping Cart 設定 > 基本設定 > 税金設定では、税金についての設定ができます。Shopping Cart 拡張アプリの税金設定では以下の項目の設定ができます。

  • 消費税区分(内税・外税)
  • 税計算方式(積み上げ・割り戻し)
  • 税計算端数処理(切り捨て・四捨五入・切り上げ)

消費税区分の設定は、注文内容の金額や convertToTax 校正オプションの計算などで利用されます。
消費税区分が外税の場合、エントリー(商品)のカスタムフィールド(item_price)で設定した販売価格は、消費税を含んでいないものとして扱われます。消費税区分を外税で使用する場合、商品価格の総額表示が義務付けられておりますので、商品価格を掲載する際は税込価格を表示する必要があることに注意してください。

税計算方式の設定は、注文内容の金額や convertToTotalPrice 校正オプションの計算などで利用されます。
割り戻し計算は商品の税別合計金額から消費税を計算する方式。積み上げ計算は商品毎に消費税を計算し合計する方式(令和5年9月30日以降使用不可)となっております。

税計算端数処理の設定は、注文内容の金額や、convertToIncludingTax 、convertToTotalPrice 、convertToTax 校正オプションの計算などで利用されます。

Shopping Cart 拡張アプリでは、税金設定に合わせて税込価格を計算するための GET モジュールと校正オプションを用意していますのでご活用ください。詳細はリファレンスを参照してください

適格請求書発行事業者について設定する

Shopping Cart 設定 > 基本設定 > 適格請求書発行事業者の設定では、以下の項目の設定ができます。

  • 登録番号
  • 氏名または名称

決済方法ついて設定する

Shopping Cart 設定 > 決済方法設定では、注文画面で表示する決済方法を設定します。

決済方法設定で重要な設定項目は、ブロックと手数料です。

基本的にはブロックは任意の文字列を設定することができますが、クレジットカード決済を設定する場合は creditcard ​という文字列を設定する必要があります。また手数料についても注文内容の金額の計算に使用されるため、正しい数値を設定する必要があります。手数料を空で設定した場合は決済手数料が0円ということになります。

利用条件設定

利用条件によって決済手数料を変動させたいといった場合には、決済方法の利用条件を設定することができます。

例えば、以下のように設定することで、注文の合計金額が0円 ~ 9999円の場合の決済手数料は 330 円、10000円 以上の場合の決済手数料は 440 円 とすることができます。



利用条件設定を有効にすることで、代引き手数料など、金額によって決済手数料が変動するような決済方法を販売者側の損になることなく導入することが可能になります。

配送について設定する

Shopping Cart 設定 > 配送設定では、配送についての設定をすることができます。

送料無料のしきい値(小計)

注文商品の小計金額(消費税を含む)が設定した値を超えている場合、送料を無料にする金額を数値で設定できます。

送料の適用方法

注文時に複数の商品を購入した場合の送料の適用方法を設定できます。

配送グループ

配送グループを設定します。配送グループには名前と全国一律の送料、送料の計算方法を設定できます。全国一律の送料は送料設定で送料が設定されていなかった場合に適用される送料になります。配送グループを追加すると、追加された名前と同名のタブが送料設定に追加され、送料設定で設定できるようになります。

送料設定

送料設定では、配送グループで設定したグループに対して、地域と送料を設定できます。配送地域ごとに送料を変更したい場合に設定する設定項目になります。

追加手数料について設定する

Shopping Cart 設定  > 追加手数料の項目では追加手数料についての設定をすることができます。例えば、ギフト用のラッピング手数料の設定などにお使いいただけます。

まとめ

ここまでで、Shopping Cart 拡張アプリ 設定について学びました。ここまでの内容を理解することができたら、次は商品データ(エントリー)を登録する方法を学ぶと良いでしょう。商品データ(エントリー)を登録する方法についてはこちらのエントリーで解説しています。

今すぐ購入フォームを作成する

このエントリーでは、Shopping Cart 拡張アプリを使用して、今すぐ購入フォームを作成する手順を説明します。

今すぐ購入フォームとは

今すぐ購入フォームとは、カートを経由することなく商品(エントリー)を購入することができるフォームです。商品詳細ページのフォームから必要な情報を入力し、フォームを送信することで特定の商品のみを購入できます。

今すぐ購入フォームは GETモジュールである ShoppingForm_Now モジュールと、POST モジュールである ShoppingForm_ConfirmNow, ShoppingForm_SubmitNow モジュールを使用することで実装できます。

基本的には、購入フォームを作成する で作成したフォームのShoppingForm モジュールを ShoppingForm_Now モジュールへ、POSTモジュールをShoppingForm_ConfirmNow, ShoppingForm_SubmitNow モジュールに置き換えるだけで動作します。

<!-- BEGIN_MODULE ShoppingForm_Now -->
<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_ConfirmNow"
      value="入力内容の確認へ"
    />
  </div>
  <input type="hidden" name="quantity" value="1" />
  <input type="hidden" name="field[]" value="quantity" />
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingNowForm" />
</form>
<!-- END_MODULE ShoppingForm_Now -->
<!-- BEGIN_MODULE ShoppingForm_Now -->
<form action="" method="post" class="js-unload_alert" enctype="multipart/form-data">
  <div class="form-btn-wrap">
    <input
      type="submit"
      name="ACMS_POST_ShoppingForm_SubmitNow"
      value="注文を確定する"
    />
  </div>
  <input type="hidden" name="quantity" value="1" />
  <input type="hidden" name="field[]" value="quantity" />
  <input type="hidden" name="takeover" value="{takeover}" />
  <input type="hidden" name="step" value="confirm" />
  <input type="hidden" name="error" value="reapply" />
  <input type="hidden" name="id" value="shoppingNowForm" />
</form>
<!-- END_MODULE ShoppingForm_Now -->

今すぐ購入フォームの仕様

今すぐ購入フォームは商品(エントリー)詳細ページでのみ動作します。というのも、商品(エントリー)詳細ページのエントリーIDから注文情報を作成しているためです。購入させたい商品(エントリー)の詳細ページでないページからの購入は出来ませんのでご注意ください。

また、今すぐ購入フォームでは、購入する商品の数量を選択するフォームを作成できます。入力フィールドに name属性が quantity のフィールドをカスタムフィールドの形式で設置することで数量を選択できます。フォームに数量のフィールドを送信しなかった場合、数量はデフォルト値として0となります。

例えば、以下はセレクトタグで実装した例になります。

<select name="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<input type="hidden" name="field[]" value="quantity" />

今すぐ購入フォームの注文内容の金額情報を表示する

カートから購入する場合、Order_Summary モジュールを利用することで注文内容の金額情報を表示できました。今すぐ購入フォームにおいても、Order_Sumamry モジュールを利用することでその詳細ページのみの注文内容を表示できます。詳しい利用方法については、リファレンスやスニペットを参照してください。

まとめ

ShoppingCart 拡張アプリではカートを経由しない決済フォームも作成できます。カートを経由しないことで必要なステップを減らすことや、他の商品とは一緒に購入されたくないといったことを実現することが出来ます。

Squareと連携してクレジットカード決済機能を実装する

Shopping Cart 拡張アプリでは、決済サービスと連携することで、ECサイトにクレジットカード決済機能を実装することができます。このエントリーでは決済サービスとして Square と連携して、クレジットカード決済機能を実装する手順を説明します。

Square でクレジットカード決済を実装する場合の注意点

Square でクレジットカード決済を実装する場合、以下の場合は使用できませんのでご注意ください。

  • 税計算方式が「積み上げ」に設定されている
  • 税計算端数処理が「四捨五入」もしくは「切り上げ」に設定されている

クレジットカード決済機能を実装する

Squareと連携してクレジットカード決済機能を実装するには、以下の設定をする必要があります。

  • クレジットカード決済で使用するサービスとして Square を選択する
  • クレジットカード決済用の決済方法を登録する

また、a-blog cms を設置しているディレクトリに .env ファイルが作成されている必要があります。

クレジットカード決済で使用するサービスとして Square を選択する


連携するクレジットカード決済を設定する項目

連携するクレジットカード決済を選択する

クレジットカード決済を利用できるようにするためには、連携するクレジットカード決済を選択する必要があります。Shopping Cart 設定 > 基本設定 > 決済サービス設定で設定することができます。

クレジットカード決済用の決済方法を登録する


クレジットカード決済用の決済方法を登録する場合はブロック名を「creditcard」にする必要があります。

クレジットカード決済用の決済方法を登録する場合はブロック名を「creditcard」にする必要があります。


クレジットカード決済用の決済方法を登録する場合はブロック名を「creditcard」にする必要があるので、ブロック名を「creditcard」と入力した決済方法を Shopping Cart 設定 > 注文画面設定 > 決済方法と手数料で登録してください。

Square との連携

Square との連携は以下の手順で行います。

  1. アプリケーションを新規作成または選択する
  2. アプリケーションのOAuth設定をする
  3. a-blog cms と Square を OAuth 認証する
  4. Square を利用したクレジットカード決済に必要な HTML をテンプレートに記述する

1. アプリケーションを新規作成または選択する

まず、Square Developer にログインし、Applications 選択ページへ移動します。Square Developer のアカウントがなければ以下のURLから新規作成してください。


Applications 選択ページへ移動すると ↓ のような画面になっています。


アプリケーション選択ページ

アプリケーション選択ページ


次に、Shopping Cart 拡張アプリと連携させたいアプリケーションを新規作成または選択し、アプリケーションの個別の設定ページへ移動します。

2. アプリケーションの OAuth 設定をする


アプリケーションの個別ページ

アプリケーションの個別ページ


アプリケーションの個別の設定ページへ移動すると、↑ のような画面になっています。

画面左のメニューから、アプリケーションの OAuth 設定ページに移動します。開発中であれば Sandbox タブ、本番運用なら Production タブを選択します。(画像は Sandbox タブ)



OAuth 設定ページを開いたら、「Application ID」と「Application Secret」をメモ帳などに控えておいてください。

最後に、「Redirect URL」に https://ドメイン名/bid/ブログID/admin/app_shopping_cart_square_callback/と設定して保存します。https:// から始まるURLでないと登録できませんので注意してください。

a-blog cms と Square を OAuth 認証する

Square 側の設定ができたら、今度は a-blog cms 側の設定を行います。

まず、a-blog cmsの起動ファイルである、index.php と同じ階層に .env ファイルを設置します。a-blog cms をインストールした際に env.txt として設置してあるファイルを .env にリネームしていただければ ok です。

次に、拡張アプリの設定を行います。ShoppingCart 設定 > 決済サービスとの連携タブを選択してください。


Square との OAuth 認証が完了する前の設定画面

Square との OAuth 認証が完了する前の設定画面


先程メモ帳に控えた、「Application ID」と「Application Secret」を入力します。Sandbox(テスト運用)モードで認証する場合は、Sandbox(テスト運用)モードの設定 の入力欄に、Production(本番運用)モードで認証する場合は、Production(本番運用)モードの設定の入力欄に「Application ID」と「Application Secret」を入力してください。また、Sandbox(テスト運用)モードで認証する場合は、Sandboxモードのチェックボックスを有効にしてください。

「Application ID」と「Application Secret」の入力ができたら、一度「保存」ボタンをクリックし、設定を保存してください。保存すると、「認証する」ボタンがクリックできるようになります。

「認証する」ボタンがクリックできるようになったのを確認したら、「認証する」ボタンをクリックし、Square と OAuth 認証を行います。認証ページに遷移するので、ページ内の「許可」ボタンをクリックして認証を許可します。


認証の許可後、Shopping Cart 設定ページにリダイレクトされた画面

認証の許可後、Shopping Cart 設定ページにリダイレクトされた画面


認証の許可後、Shopping Cart 設定ページに自動的にリダイレクトされます。リダイレクト後の画面は ↑ のような画面になっています。ここまでで、OAuth 認証は完了しましたが、Square との連携はまだ完了できていません。ここまでの設定ができると、店舗というセレクトボックスが選択できるようになります。店舗のセレクトボックスから、アプリケーションで使用する店舗を選択して、保存してください。


OAuth 認証と店舗の設定が完了すると、認証ステータスが緑色になります。

OAuth 認証と店舗の設定が完了すると、認証ステータスが緑色になります。


店舗の設定が完了すると、Square との OAuth 認証は完了です。↑ 画像のように、認証ステータスが緑色になっていたらSquareとの連携が完了しています。

OAuth 認証時に、"サンドボックスアカウント用のOAuthフローを開始するには、最初に開発者向けSquare データから加盟店向けテストアカウントを起動します。" というエラーが発生した場合は、あらかじめCMSにログインしているブラウザで、開発者向けのSquareアカウントを起動してください。


開発者向けの Square アカウントを起動する手順は以下になります。


  1. Squareの ダッシュボード を開く
  2. 「Sandbox Test Accounts」のアカウントの「Open」ボタンをクリック
  3. CMSの管理画面に戻り、再度「認証」ボタンをクリックする

Square Sandbox とは

Square Sandbox とは、Square API のテストを行うために Square が用意している特別な環境です。

例えば、本番環境で Square API を利用したクレジットカード決済を行った場合は決済手数料がかかりますが、Sandbox 環境ではクレジットカードが実際に請求されることはなく、実際の銀行で支払いが処理されることはないため、決済手数料はかかりません。

Sandbox 環境では通常のクレジットカードは使用できません。Sandbox Payments に記載されているテスト用のクレジットカードを使用する必要がありますのでご注意ください。

Square を利用したクレジットカード決済に必要なテンプレートを記述する

最後に、Square を利用したクレジットカード決済に必要な テンプレートを記述します。

まず、Square と連携してクレジットカード決済をするために必要なJavaScript ライブラリを読み込みます。head要素内に下記のコードを記述してください。

<!-- BEGIN_MODULE Admin_InjectTemplate id="%{PAYMENT_SERVICE}-js" -->
<!-- END_MODULE Admin_InjectTemplate -->

次に、クレジットカード情報の入力欄を表示します。 クレジットカード情報の入力欄を表示したい箇所に下記のコードを記述してください。

<div id="js-sq-card-container">
<!-- Squareのクレジットカード情報入力用コンポーネントが表示されます -->
</div>

最後に、先程読み込んだJavaScriptライブラリを活用してクレジットカード情報入力用のコンポーネントを初期化します。 Admin_InjectTemplate モジュールで JavaScript ライブラリを読み込めていた場合、acmsSquare というオブジェクトが参照できるようになっています。acmsSquare オブジェクト の creditCard メソッドを実行することでクレジットカード情報入力用のコンポーネントを初期化できます。そのとき、第1引数に、クレジットカード入力要コンポーネントを表示したい要素をセレクター形式で指定してください。サンプルコードでは、先程 クレジットカード情報の入力欄を表示したい箇所に記述した要素を指定しています。

<script>  
  window.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('#js-sq-card-container')) {
      acmsSquare.creditCard('#js-sq-card-container');
    }
  });
</script>

creditCard メソッドを実行することで、クレジットカード情報入力用のコンポーネントを囲む form 要素の送信ボタンをクリックしたときに、Squareと通信し、クレジットカードの識別情報を取得します。

Square から取得した、クレジットカード識別情報は、「square-nonce」というフィールドに格納されます。このフィールドは JavaScript によって自動で追加されます。

<input type="hidden" name="square-nonce" value="取得したクレジットカード情報">
<input type="hidden" name="field[]" value="square-nonce">

ここまでできたら、Square と連携したクレジットカード決済機能が実装できています。実際に決済フォームからクレジットカード決済を試してみてください。

クレジットカード決済の失敗を表示する

不正なクレジットカード番号で決済が行われた場合など、クレジットカード決済でエラーとなることがあります。決済時にエラーが起きたことを表示できるようにするため、決済フォームでクレジットカード決済が失敗した場合、creditcard というフィールドの auth オプションがエラー判定されるようになっています。

そのため、決済フォームに、creditcard フィールドの auth オプションがエラー判定されたときのコードを書いておくと、クレジットカード決済が失敗した場合のエラーメッセージを表示可能です。以下はサンプルのソースコードです。

<div role="alert" aria-live="assertive">
  <div class="validator-result-{creditcard:v#auth}">
    <p class="form-error-text">クレジットカード認証に失敗しました。</p>
  </div>
</div>

オプション

payments オブジェクトの creditCard メソッドは第2引数にオプションを設定することができます。オプションは以下の項目が利用可能です。



オプション名 概要 デフォルト値
submitterElementOrSelector 購入フォームを送信するボタン要素を指定します。セレクター形式の文字列 or HTMLElement 型 で指定することが出来ます。 '[name*="ACMS_POST_ShoppingForm"]'
calbacks クレジットカード情報入力用のコンポーネントにイベントを追加できます。squareで用意されているイベントが設定できます。詳しくはこちらを参照してください。 {}
focus 初期化時に、クレジットカード情報入力用のコンポーネント内の特定のフィールドにフォーカスをセットします。指定できるフィールドについてはこちらを参照してください。フィールドを文字列形式でしていできるほか、関数を指定することも可能です。関数を指定した場合 focus メソッドが指定した関数の引数に渡されます。 undefined
recalculateSize クレジットカード情報入力用のコンポーネントのサイズを再計算します。カードコンポーネントは通常、購入者のブラウザのサイズに基づいて自動的にサイズ変更されますが、カードコンポーネントが display: none の計算スタイルプロパティを持つ要素に含まれている場合、カードコンポーネントは定義された幅を持たなくなり、したがってモバイルとデスクトップの構成間で適切にサイズ変更されなくなります。再び表示されたとき、Card コンポーネントはブラウザウィンドウに合わせて自動的にサイズを更新しません。
このメソッドrecalculateSize()を使用すると、Cardコンポーネントのサイズを強制的に再計算し、モバイルまたはデスクトップ用に適切に表示することで、このエッジケースを処理することができます。関数で設定でき、設定された関数には、recalculateSize  メソッドが引数として渡されます。
() => {}
squareCardOptions クレジットカード情報入力用のコンポーネントのスタイルや動作をカスタマイズするためのオプションです。こちらに記載されている項目がそのまま利用可能です。 { postalCode: '' }

オプション設定例

オプションを設定する例になります。

<script>
  acmsSquare.creditCard('#js-sq-card-container', {
    submitterElementOrSelector: '#js-shoppingForm-submit'
    callbacks: {
      cardBrandChanged(event) {
        console.info(event)
      },
      errorClassAdded(event) {
        console.info(event)
      },
      errorClassRemoved(event) {
        console.info(event)
      },
      escape(event) {
        console.info(event)
      },
      focusClassAdded(event) {
        console.info(event)
      },
      focusClassRemoved(event) {
        console.info(event)
      },
      postalCodeChanged(event) {
        console.info(event)
      },
      submit(event) {
        console.info(event)
      },
    },
    focus: 'cardNumber', // or (focus) => { focus('cardNumber') }
    recalculateSize: (recalculateSize) => {
      document
        .querySelector('.js-recalculate-size-trigger')
        .addEventListener('change', () => {
            recalculateSize();
         });
    },
    squareCardOptions: {
      postalCode: '',
      includeInputLabels: true,
      style: {
         "input": {
           "color": "red",
         },
         "@media screen and (max-width: 600px)": {
           "input": {
             "fontSize": "12px",
           }
         }
       }
     },
  });
</script>

イベント

Square 用の JavaScriptライブラリ では以下のイベントを用意しています。イベントを活用することで、特定のアクションが発生した時に処理を挟み込めます。



イベント名 概要
acmsSquareTokenizeSuccessed クレジットカード情報の取得に成功したときに発生します。
acmsSquareTokenizeFailed クレジットカード情報の取得に失敗したときに発生します。

イベント設定例

window.addEventListener('acmsSquareTokenizeSuccessed', (event) => {
  // クレジットカード情報の取得に成功したとき
  console.info(event)
})

window.addEventListener('acmsSquareTokenizeFailed', (event) => {
  // クレジットカード情報の取得に失敗したとき
  console.info(event)
})

メールテンプレートで利用可能な変数

Square を利用して決済した場合、メールテンプレートで以下の変数が利用可能です。



変数名 概要
square-last4 クレジットカード番号の下4桁を表示できます。
square-receiptNumber
Ver. 2.1.0〜
Square によって発行されるレシート番号
square-receiptUrl
Ver. 2.1.0〜
Square によって発行されるレシートのURL

お取引一覧のメモをカスタマイズする Ver. 2.2.2〜


Square の管理画面内のお取引一覧ページ

Square のお取引一覧ページ

Square のお取引一覧ページに表示されるメモをカスタマイズすることができます。デフォルト値は "a-blog cms による決済" です。

購入フォームにカスタムフィールドで square-note の値として、任意のメモを送信することで、Square のお取引一覧ページに表示されるメモを任意のテキストにカスタマイズできます。

以下は フォームのサンプルコードになります。

<input type="hidden" name="square-note" value="ウェブサイト決済" />
<input type="hidden" name="field[]" value="square-note" />

上記の例では、お取引一覧ページに表示されるメモを "ウェブサイト決済" という文字にカスタマイズしています。

おめでとうございます。ついに、ECサイトにクレジットカード決済機能を導入することができました。ここまでできたら ECサイトとしての機能はひととおり実装できているでしょう。

Square の Webhook API を活用して、Square のダッシュボードから Oauth 認証を解除する

Square の Webhook API を活用することで、Square のダッシュボードから Oauth 認証を解除することができます。この記事では、Square のWebhook API と連携する手順を説明します。Webhook APIと連携することで、 Square の販売者用ダッシュボードから OAuth 認証を解除することができるようになります。

Webhook API との連携手順

Webhook API との連携は以下の手順で設定することができます。

  1. Square Developer で Webhook を登録する
  2. ShoppingCart設定に Signature Key を設定する

Square Developer で Webhook を登録する

まず、Square Developer にログインし、連携する(ご利用の) アプリケーションを選択してアプリケーションの個別ページに移動してください。次に、左のパネルから Webhooks > Subscriptions​をクリックして、Webhook subscriptions のページに移動します。Webhook subscriptions のページに移動できたら、Add subscription ボタンをクリックします。すると、Webhook の登録に必要な項目を入力するためのフォームが表示されるので入力して保存してください。

URLの入力フィールドには、https://ドメイン/bid/ブログID/webhook/shopping-cart/square/ ​を入力してください。

Events の項目は oauth.authorization.revoked の項目にチェックを付けて保存してください。また、Sandbox モードと Production モードで Webhook の設定が異なるため注意してください。


Eventsの項目で oauth.authorization.revoked の項目を選択する

Eventsの項目で oauth.authorization.revoked の項目を選択する


Webhook の登録が完了すると、Webhooks 一覧に表示されるようになります。一覧に表示された Webhook をクリックすると詳細情報が表示されるので、「Signature Key」をメモ帳などに控えておいてください。

これで、 Square Developer で Webhook を登録する作業は完了です。

ShoppingCart設定に Signature Key を設定する

次に、ShoppingCart拡張アプリに先ほど控えた「Signature Key」を設定します。ShoppingCart 設定 の決済サービスとの連携タブを表示して、Signature Key の項目に、先程控えた「Signature Key」を入力して保存してください。


ShoppingCart 拡張アプリに「Signature Key」を設定する。

ShoppingCart 拡張アプリに「Signature Key」を設定する。


これで、ShoppingCart設定に Signature Key を設定する作業は完了です。

Webhook の動作を確認する

ここまでの設定が完了したら、無事 Webhook API との連携が完了しています。実際に Webhook が正常に動作しているか確認しましょう。Square の販売者用ダッシュボードから OAuth 認証を解除したときに、ShoppingCart 拡張アプリでも OAuth 認証が解除されているかを確認します。Square の販売者用ダッシュボードから OAuth 認証を解除は、販売者用ダッシュボード > 設定 > アプリ外部ツール から行うことができます。

また、Square Developer では、Webhook API の イベントログを確認できます。イベントログから、Webhook のリクエストがうまくいっているかどうかを確認することができます。詳しくは Square Event Logs のドキュメントを参照してください。

まとめ

Webhook API を利用することで Square のダッシュボードから Oauth 認証を解除するということができるようになります。Webhook 連携をしていない場合、Square のダッシュボードから Oauth 認証を解除しても、ShoppingCart 拡張アプリでは、Oauth 認証が解除されたことにならず、よきせぬ不具合が起こる可能性がありますので、設定することをおすすめいたします。

【Square】OAuth 認証のアクセストークンを cron から自動更新する

Square との OAuth 認証で使用されているアクセストークンを cron から更新する方法を紹介します。

OAuth 認証を行う場合、APIを提供する側のサーバー(リソースサーバー)のAPIを利用するためにアクセストークンというトークンが発行されます。アクセストークンには有効期限が設定されているため、有効期限が切れる前に新しいアクセストークンを取得する必要があります。

Squareでは、7日以内ごとに OAuth のアクセストークンを自動的に更新することを推奨しています。7日以内に更新することで、エラーを発見し解決するための十分な時間を確保できます。アクセストークンの更新を行わない場合、アクセストークンの更新の失敗を見逃し、Webサイトの運用者やその顧客に予期せぬ経験をもたらすリスクが高くなります。


ShoppingCart 拡張アプリでは、インストール時から標準で用意されている a-blog cms をスタンドーアローン起動できるプログラムを利用して、cron から OAuth 認証のアクセストークンを定期的に自動更新することができます。

a-blog cms インストールした時点で、cron/example.php に a-blog cms をスタンドーアローン起動できるプログラムを利用するためのサンプルファイルが用意されています。この記事ではこの cron/example.php を利用することを前提として説明します。

cron/example.php を以下のように記述します。

<?php

// デフォルトではBID=1の文脈で実行されるため、
// OAuth認証を行っているブログのBIDが1以外の場合、
// php/standalone.php を読み込むより前にBIDを設定してください。
define('BID', 2);

// 設置場所に合わせて、php/standalone のパスを合わせてください。
require_once dirname(__FILE__) . '/../php/standalone.php';

use Acms\Plugins\ShoppingCart\ServiceProvider;

set_time_limit(0);
ini_set('memory_limit', '512M');

acmsStandAloneRun(function () {
    acmsStdMessage('[Start] 処理を開始しました');
    try {
        // ShoppingCart拡張アプリを初期化
        $App = new ServiceProvider();
        $App->init();

        App::make('square.service.oauth');

        acmsStdMessage('[Success] 処理を完了しました');
    } catch (\Exception $e) {
        acmsStdMessage('[Error] ' . $e->getMessage());
        return false;
    }
    return true;
});

実行時にアクセストークンの更新が必要かどうかを判定し、必要であればアクセストークンの更新を行います。

次に、サーバーでcronの設定を行います。7日おきに実行されるように設定したいため、例えば以下のように設定します。

0 0 */7 * * php path/to/cron/example.php

これで7日おきに、cronが実行され、アクセストークンの更新が必要かどうかを判定し、必要であればアクセストークンの更新を自動で行う事ができるようになります。