事象

初期設定を完了し、AnyGiftの「住所を知らない相手にeギフトで贈る」のUIが表示されるようになったが、これを選択して商品をカートに入れてチェックアウトしても、eギフトでの購入にならない(通常購入になり、eギフトURLが発行されない)という場合があります。

原因

<aside> 💡 少々エンジニアの専門的な内容となっております。

</aside>

AnyGiftでは、Shopifyの**Line Item Propeties(以下LIPと呼びます)**という機能を用いて、商品がeギフトであるかを判別しています。→Shopifyの公式ガイド

通常では、「住所を知らない相手にeギフトで贈る」を選択してフォームにギフトメッセージ等を入力すれば、以下のようなプロパティが商品に設定されます。このままチェックアウトを完了することで、AnyGift側でeギフトを判別できます。

通常のShopifyのテーマであれば、AnyGiftをインストールするだけで、これらは自動的に設定されます。しかし、テーマをかなりカスタマイズしている場合(主にカートに追加処理をJavaScriptで実装されている場合)、eギフトを選んで「カートに追加」を行っても、プロパティが設定されなくなっている場合があります。

解決法

<aside> 💡 少々エンジニアの専門的な内容となっております。

</aside>

JavaScriptで「カートに追加」処理を独自に行っている場合、LIPを設定しながらカートに追加するように修正する必要があります。

具体的には、こちらの記事の通り、 <input name="properties[{任意のプロパティ名}]]">なinput要素がform内にある場合、そのプロパティ名とvalue値を取得して、カートに追加のAPIに渡す必要がります。

例として、現在のページのLIP値を{ key: value} のオブジェクトで取得する関数を下に記載しました。

const getCurrentLineItemProperties = () => {
  const properties = {}

  // name属性が「properties[」から始まるinput要素を全件取得
  const propertiesInputs = document.querySelectorAll('[name^="properties["]')
  if (propertiesInputs) {
    // nameが 'attributes[*]' で、valueが空ではない要素を有効なAttributeとする
    // radioとcheckboxの場合は、チェックされていることも条件とする
    propertiesInputs.forEach(element => {
      if (element.type === 'radio' || element.type === 'checkbox') {
        if (!element.checked || element.value === '') return
      }
      if (element.value === '') return

      const key = element.name.replace(/^properties\\[/, '').replace(/\\]$/, '')
      // フォームの値を優先する
      properties[key] = element.value
    })
  }
  
	return properties
}