Shopify用地図ウィジェット

Shopifyアプリよりテーマセクションが優れている理由

「地図アプリ」の多くは、インストールと、ストアデータへの権限、そして月額料金を求めます。結局のところ、たった1つのiframeのためにです。これは正直な代替案です：自分のテーマの中に置くLiquidファイル1つだけ。ストアの権限を一切要求せず、ページにスクリプトを追加せず、どこにもデータを送らず、費用もかかりません。訪問者が行う外部リクエストは、whatismylocation.aiのサンドボックス化された地図iframeとそのOpenStreetMapタイルだけです——Googleのクッキーはなく、同意バナーの面倒もありません。万一サービスに接続できなくなっても、iframeは静かに失敗するだけで、ページが壊れることはありません。セクションのファイルを削除すれば、痕跡は何も残りません。

whatismylocation-shopify-sections.zip をダウンロード — 両方のセクションとREADMEが入って、わずか数キロバイトです。あとは下のインストール手順に従ってください。

インストールは約2分

作業は2つ。ファイルを一度貼り付け、あとは組み込みのセクションと同じように使うだけです。

ファイルを貼り付ける：Shopify管理画面 ▸ オンラインストア ▸ テーマ ▸ ⋯ ▸ コードを編集。左サイドバーのSectionsで新しいセクションを追加をクリックし、whatismylocation-mapという名前を付けます。初期のサンプル内容を削除して、whatismylocation-map.liquidの内容を丸ごと貼り付けてください。末尾の{% schema %}ブロックが設定パネルを組み立てているので、必ず一緒に含めます。そして保存します。

使う：テーマエディタ（カスタマイズ）を開き、お問い合わせページ（または任意のページ）に移動してセクションを追加を押し、WhatIsMyLocation Mapを選びます。設定パネルが左側に表示されます。座標を入力するまでは、必要な情報を教えてくれる親切なプレースホルダーがセクションに表示されます。

座標は地図埋め込みビルダーで取得します。住所を入力し、コピーする前にピンを入口までドラッグしてください。セクションには最終的な座標が書き込まれるので、あとからピンがずれることはありません。

支店はブロック

複数店舗のストアには一番うれしい部分があります。テーマエディタでは、各支店がブロックになります。支店を追加を押して緯度・経度・ラベル・住所を入力し、ドラッグで並べ替えられます（最大10件）。地図はすべての支店に自動でフィットし、ピンには一覧と対応する番号が付き、訪問者にはロケーションパネルが表示されます——パソコンでは地図の横のアコーディオン、スマホではスワイプできるカードの帯です。支店ごとの経路案内と、任意で「Google マップ / Apple マップで開く」アイコンも付きます。パネルの配置（auto、横、下、なし）と切り替えアニメーション（スムーズ、フェード、にぎやか、なし——動きを減らす設定の訪問者には常に即時版が表示されます）は、同じパネル内のドロップダウンです。

設定項目のすべて

同じzipにはwhatismylocation-widget.liquidも入っています——現在地ウィジェットを2つ目のセクションとして（テーマ、コンパクト／フルモード、高さ）、配達ページや店舗検索に使えます。

トラブルシューティング

「セクションを追加」にセクションが出てこない。ファイルはSections（SnippetsやAssetsではなく）に置き、貼り付けはファイル全体である必要があります。{% schema %}ブロックが切れていると、Shopifyはセクションを拒否するか非表示にします。ファイル全体を貼り直して保存してください。

保存時に「Invalid schema」エラーが出る。貼り付けが途中で切れています。多いのは、最後の1行を選び忘れて閉じ括弧が欠けているケースです。完全なファイルをもう一度貼り付けてください。Liquidに詳しくない場合は、スキーマを手で編集しないでください。

地図が灰色のまま。地図タイルはtile.openstreetmap.orgから読み込まれます。強力な広告ブロッカーや社内ネットワークが遮断していることがあります。モバイル回線のスマホで確認してみてください。お客様にはほぼ確実に正常に見えています。

ピンが店の入口にない。ビルダーで座標を作り直し、ピンを入口までドラッグして、新しい値をセクション設定に貼り付けてください。

編集が公開中のストアに反映されない。下書き、または未公開のテーマを編集しています。公開中のテーマで変更してください（または編集したテーマを公開します）。ウィジェット自体にキャッシュするものはありません。