他アプリとの互換性

Shopifyアプリやテーマは、それぞれが商品ページ、カート、価格、チェックアウト、注文、フルフィルメントを変更する場合があります。そのため、アプリ名だけでAnyGiftとの互換性を保証することはできません。導入時に、実際に利用するアプリ・テーマ・設定の組み合わせで確認してください。

互換性を確認する範囲

AnyGiftはストアフロントの表示、カート、eギフト用チェックアウト、注文情報、受取処理、条件付きの発送保留などに関係します。同じ箇所を変更するアプリやテーマを利用している場合は、実際のバージョンと設定の組み合わせで確認してください。

過去の検証結果は、アプリやテーマの更新後にも同じになるとは限りません。更新時には購入から出荷までを再テストしてください。

導入前に確認する項目

利用中のテーマ名・バージョンと、商品・カート・価格・注文・フルフィルメントに関係するアプリを一覧にします。
本番テーマを直接変更せず、複製テーマまたは検証用ストアでテストします。
AnyGiftと対象アプリを本番と同じ設定にし、通常商品への影響も含めて確認します。
少なくとも次を確認します。
eギフト対象商品の表示と、通常商品の表示
eギフト選択、カート投入、価格、割引、送料
チェックアウトと決済
Shopify注文の件数、タグ、属性、支払・フルフィルメント状態
受取URLの発行と受取フォーム
受取情報反映後の住所、発送保留、OMS側の取込状態
アプリのオン・オフや設定変更で比較する場合は、各アプリの担当者の承認を得て検証環境で行い、変更前の状態へ戻せるよう記録します。

問題が起きた場合

発生時刻、ストア、テーマと各アプリのバージョン、対象商品、注文番号、操作手順を記録してください。
ブラウザ表示だけでなく、カート、決済、Shopify注文、受取URL、フルフィルメントまで影響範囲を確認してください。
本番テーマへLiquidやJavaScriptの回避コードを追加する前に、テーマ開発者、対象アプリ提供者、AnyGift担当窓口へ確認してください。
別方式のAnyGiftへ切り替えれば必ず解消するとは限りません。アプリ境界と移行影響を確認してから判断してください。

第三者アプリごとの正式な互換性、必要設定、回避策は、現行版でのテスト結果を添えてAnyGift担当窓口へお問い合わせください。

他アプリの動作によってAnyGiftが動作しない時のトラブルシューティング

すでに干渉を確認しているアプリ

以下のアプリでは、AnyGiftアプリと干渉し、AnyGiftが正常に動作しないことを確認しています。

現在利用していないアプリの場合は、アプリの機能をオフにすることで解消するケースがあります。お試しください。

アプリ名	干渉によって発生する事象	備考
Bold CSP v3 Prices	eギフトボタンが表示されない	特定の条件によって商品価格を書き換えるアプリです。 AnyGiftの描画が途中で中止されます。画面を更新すると表示される場合があります。
Automatic Discounts & Upsells	下書きチェックアウトに遷移しない
定期購買アプリ		ハックルベリー社の「定期購買アプリ」を利用している場合は、定期購買商品の購入フローとAnyGiftの購入フローが干渉しないよう、アプリ提供元にもご確認ください。
pagefly		PageFlyで商品ページを作成している場合は、AnyGiftのブロックが正しく配置されているか確認してください。

干渉を確認する前に

AnyGiftのスクリプトが読み込まれる前にチェックアウトボタンが押され、チェックアウトページへ遷移してしまうことで、下書きチェックアウトが適用されない場合があります。

まず、次の対応をお試しください。

eギフト固定送料を設定している場合は、eギフト固定送料を設定しているのに固定送料として注文が作成されていないを確認します。
それでも解決しない場合は、次の「干渉しているアプリを特定する方法」へ進みます。

干渉しているアプリを特定する方法

Shopify管理画面で「オンラインストア」>「テーマ」を開き、対象テーマの「テーマを編集する」を押します。
「アプリの埋め込み」を開き、AnyGift以外のすべての埋め込みアプリをオフにします。
AnyGiftのボタンが表示されること、または下書きチェックアウトに遷移することを確認します。
正常に動作する場合は、埋め込みアプリのいずれかが干渉しています。
手順5へ進みます。
正常に動作しない場合は、埋め込みアプリによる干渉ではなく、スクリプトの読み込みが遅延している可能性があります。
「干渉が解決しない場合の対応方法」を検討してください。
埋め込みアプリを1つずつオンにし、そのたびにAnyGiftの動作を確認します。
正常に動作しなくなった時点で、干渉しているアプリを特定できます。
特定したアプリをオフにできないか、アプリ提供元または担当者に確認します。
過去にインストールして埋め込みをオンにしたまま、現在は利用していないアプリが残っている場合もあります。

干渉するアプリをオフにできない場合は、「干渉が解決しない場合の対応方法」を検討してください。

eギフト固定送料を設定しているのに固定送料として注文が作成されていない

前提

eギフト固定送料を設定している場合、通常は注文が2つ作成されます。

ただし、次のような場合はJavaScriptの処理が完了せず、下書き注文に遷移しないままeギフト注文が生成されることがあります。

カートページから急いでチェックアウトボタンを押した場合
購入者のネットワーク環境が遅い場合
購入者のブラウザでJavaScriptがオフになっている場合

この場合もeギフト受け取りURLは問題なく生成され、受け取り完了後には配送先情報が正常に更新されます。

ただし、eギフト固定送料が適用されず、購入者の住所に基づく送料が適用されます。

解決方法

以下のテーマ編集を行い、カートページの読み込みから1.5秒間はチェックアウトへ遷移できないようにします。

少々エンジニアの知識が必要です。

1.5秒経過してもJavaScriptが読み込まれないケースでは解決できない場合があります。

ドロワーカートを使用している場合は、チェックアウトボタンのDOMが後から生成・差し替えされることがあります。ドロワーカート側のチェックアウトボタンを初期状態でdisabledにし、一定時間後に解除してください。

ドロワーカートを使っている場合

ファイル名: assets/anygift.js

ドロワーカートのチェックアウトボタンを初期状態で無効にし、1.5秒後に有効化します。テーマに合わせてセレクタを変更してください。

const WAIT_MS = 1500;
const SELECTOR = 'button#CheckOut[name="checkout"][form="cart"]';

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const enableLater = (button) => {
  if (!button || button.dataset.anygiftUnlockScheduled === '1') return;
  button.dataset.anygiftUnlockScheduled = '1';
  button.disabled = true;
  setTimeout(() => {
    button.disabled = false;
  }, WAIT_MS);
};

const findAndSchedule = () => {
  enableLater(document.querySelector(SELECTOR));
};

findAndSchedule();

const observer = new MutationObserver(findAndSchedule);
observer.observe(document.documentElement, { childList: true, subtree: true });

(async () => {
  for (let i = 0; i < 50; i += 1) {
    findAndSchedule();
    await sleep(100);
  }
})();

ファイル名: main-cart.liquid

ドロワーカートのチェックアウトボタンにdisabledを付与します。

<button
  id="CheckOut"
  class="button button--regular button--solid button--move"
  type="submit"
  name="checkout"
  form="cart"
  disabled
>
  <span class="button__text">チェックアウト</span>
</button>

カートページを使っている場合

ファイル名: main-cart.liquid

カートページのチェックアウトボタンにdisabledを追加します。

<button
  type="submit"
  name="checkout"
  data-terms-required="{{ settings.cart_terms_conditions_enable }}"
  class="btn cart__checkout"
  disabled
>
  {{ 'cart.general.checkout' | t }}
</button>

ファイル名: anygift-custom.js.liquid

ページの読み込みから1.5秒後に、カートページのチェックアウトボタンのdisabledを解除する処理を追加します。テーマによってボタンのセレクタが異なるため、実際のHTMLに合わせてセレクタを調整してください。

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    document.querySelectorAll('button[name="checkout"]').forEach((button) => {
      button.disabled = false;
    });
  }, 1500);
});

干渉が解決しない場合の対応方法

Shopifyアプリではなく、タグ連携でAnyGiftを導入する方法があります。アプリの干渉を解決できず、Shopifyアプリでの導入が難しい場合は、タグ連携での導入をご案内ください。

テーマやアプリのコードを変更する場合は、事前にテーマを複製し、検証環境で動作を確認してください。コード編集に不安がある場合は、テーマ開発者またはAnyGift担当窓口へご相談ください。