Snipcart連携

概要:
SnipcartをWordPressと連携させる手順。APIキーの取得、HTMLコードの埋め込み、ドメインのホワイトリスト登録、プラグインの設定、テーマファイルの修正、製品の追加、アーティファクトの生成とデプロイについて説明します。

参照資料:

Snipcart公式サポートドキュメント: WordPress連携：製品をより簡単に管理する方法
Scotchチュートリアル: SnipcartとWordPressの完全なEコマース連携

フェーズ1：Snipcartアカウントの設定

目的:
サインアップし、APIキーとHTMLコードを取得してWordPress連携の準備をする。

手順:

Snipcartにサインアップ: https://snipcart.com/
[TEST]が有効になっていることを確認:
ページ右上のアカウントアイコンをクリック:
[API KEYS]をクリック:
APIキーを含むHTMLコードをコピー:
このコードはWordPressテーマのファイルに貼り付けます。
ドメインをホワイトリストに登録:
[ACCOUNT]メニューの[DOMAINS & URLS]に移動します。
デフォルトのウェブサイトドメインを設定:
- [PROTOCOL]から[https]を選択
- ドメイン名（例：www.example.com,
  getshifter.io）をDOMAINフィールドに入力
[Save]をクリックして変更を適用:

フェーズ2：WordPressにプラグインをインストールして設定する

目的:
必要なプラグインをインストールし、設定してSnipcartが動作することを確認する。

手順:

WordPressを起動:
- Shifterダッシュボードにログイン: https://go.getshifter.io/
- WordPressを起動してログイン
必要なプラグインをインストール:
- Advanced Custom Field
- Custom Post UI
Custom Post UIプラグインの設定:
- Custom Post UIプラグインをインストールする
- 新しい投稿タイプを追加する。
  - サンプル:
    - 投稿タイプスラッグ: snipcart_product
    - 複数形ラベル: Product
    - 単数形ラベル: Product
Advanced Custom Fieldの設定:
- Advanced Custom Fieldをインストールする
- 新しいフィールドグループを追加する
  - タイトル: Snipcard Product
  - ルール: [投稿タイプ]が[等しい][Product]
- 作成したフィールドグループをクリックする (例: Snipcard Product)
- [+ Add Field]ボタンをクリックして、以下のフィールドを追加します
  - (1) 名前
    - フィールドラベル: 名前
    - フィールド名: snipcart_name
    - フィールドタイプ: テキスト
  - (2) 価格
    - フィールドラベル: 価格
    - フィールド名: snipcart_price
    - フィールドタイプ: 数値
  - (3) 簡単な説明
    - フィールドラベル: 簡単な説明
    - フィールド名: snipcart_description
    - フィールドタイプ: テキストエリア
  - (4) 画像
    - フィールドラベル: 画像
    - フィールド名: snipcart_image
    - フィールドタイプ: 画像
    - 返却形式: 画像URL
- [Update]をクリックして変更を保存します
Snipcartが動作することを確認:
生成してデプロイする。

フェーズ3：テーマファイルの編集

推奨: Shifter Github Theme/Plugin
Installerを使用する。詳細はGitHubを使用したShifterでのWordPressサイトの開発を参照。

注意: 以下のサンプルコードは、Snipcartの公式ドキュメントから引用されています。

header.php:

APIキーを含むコピーしたHTMLコードをheader.phpに挿入します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" id="snipcart" src="https://app.snipcart.com/scripts/snipcart.js" data-api-key="{YOUR_API_KEY}"></script>
<link type="text/css" id="snipcart-theme" href="https://app.snipcart.com/themes/base/snipcart.css" rel="stylesheet" />

注:
テーマがすでにjQueryを呼び出している場合は、jQueryコードを削除できます。

single-snipcart_product.php:

single.phpをコピーしてsingle-snipcart_product.phpに名前を変更し、Snipcartの購入ボタンを設定するように修正します。

<div id="product" class="site-content">
  <img src="<?php the_field('snipcart_image') ?>" />
  <button class="snipcart-add-item"
    data-item-id="<?php echo $post->ID ?>"
    data-item-name="<?php the_field('snipcart_name') ?>"
    data-item-url="<?php echo get_permalink(); ?>"
    data-item-price="<?php the_field('snipcart_price') ?>"
    data-item-description="<?php the_field('snipcart_description') ?>"
    data-item-image="<?php the_field('snipcart_image') ?>">
    Buy now for <?php the_field('snipcart_price') ?> $
  </button>
</div>

archive-snipcart_product.php:

テーマディレクトリの下にarchive-snipcart_product.phpを作成して、製品を一覧表示します。

注:
archive-snipcart_product.phpを使用するには、カスタム投稿タイプの作成時に[アーカイブを持つ]をTrueに設定する必要があります。

<h1>Products</h1>
<?php if ( have_posts() ) : ?>
  <table>
    <thead>
      <th> Name </th>
      <th> Price </th>
    </thead>
    <tbody>
      <?php while ( have_posts() ) : the_post(); ?>
        <tr>
          <td>
            <a href="<?php echo get_permalink(); ?>">
              <?php the_field('snipcart_name') ?>
            </a>
          </td>
          <td>
            <?php the_field('snipcart_price') ?> $
          </td>
        </tr>
      <?php endwhile; ?>
    </tbody>
  </table>
<?php endif; ?>

フェーズ4：新しい製品を追加する

手順:

ShifterとWordPressに戻ります。[Products]メニューに移動します
[Add New]ボタンをクリックします
製品名、価格、説明、画像を追加して公開します
製品が実行中のWordPressに表示されることを確認します

フェーズ5：アーティファクトを生成してデプロイする

手順:

Shifterダッシュボードに戻り、アーティファクトを生成します
次に、製品のページにアクセスして、動作することを確認します
テスト注文を必ず確認してください。Snipcrtのダッシュボードの[ORDERS]に移動します。

以上です！