EC-CUBE カートへのタグ設置方法
概要
EC-CUBE は日本国内で利用されているオープンソースの EC プラットフォームです。基本構成では商品詳細ページのテンプレートへスクリプトタグとマーカータグを追加します。テンプレート構造や商品識別の方法は環境ごとに異なるため、公開前に表示・商品選択・購入フローを確認してください。
EC-CUBE テンプレートの特定方法
テンプレート編集画面へのアクセス
- EC-CUBE 管理画面にログイン
- デザイン → テンプレート を開く
- 商品詳細ページ用テンプレートを探す
- テンプレート名に「商品詳細」「商品表示」などが含まれていることが多い
- 複数のテンプレートがある場合は、実際に使用されているものを確認
利用可能なテンプレート変数の確認
EC-CUBE テンプレートで使用する商品ID変数を特定します：
- テンプレート編集画面を開く
- 右側のパネルまたはヘルプボタンで利用可能な変数を表示
- 商品関連の変数（
{$product->id}、{$productId}など）を確認 - 実装時に使用する正確な変数名をメモ
よくある変数形式：
{$product->id} <!-- 商品オブジェクトの ID プロパティ -->
{$productId} <!-- 配列形式のプロダクト ID -->
{$product->code} <!-- 商品コード（SKU） -->
設置手順
ステップ1: スクリプトタグを挿入する
- テンプレート編集画面の最下部を探す
</body>タグの直前に以下のコードを挿入します
<!-- AnyGift スクリプト start -->
<script type="text/javascript">
window.AnyGift = {
productCode: '{$product->id}',
storeId: 'YOUR_STORE_ID',
};
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
<!-- AnyGift スクリプト end -->
コード内の変数説明
| 変数 | 説明 | 置換例 |
|---|---|---|
{$product->id} |
EC-CUBE テンプレートで利用可能な商品ID変数 | {$productId} や {$product->code} の場合も |
YOUR_STORE_ID |
AnyGift から発行されたストア ID（固定値） | abc123def456 |
注意: 上記の {$product->id} は一例です。実装時には、ステップ1で確認した正確な変数名に置き換えてください。
ステップ2: マーカータグを挿入する
- 同じテンプレート編集画面で、「ギフトとして贈る」ボタンを表示したい位置にマーカータグを挿入します
- 通常は、商品の購入ボタンの近くに設置することを推奨します
<!-- AnyGift マーカー start -->
<div data-anygift="marker"></div>
<!-- AnyGift マーカー end -->
推奨される設置位置
| 位置 | 利点 |
|---|---|
| 購入ボタンの直上 | 最も自然な配置；購入前にギフト選択肢を提示 |
| 購入ボタンの直下 | 購入ボタンのすぐ下；セカンダリ選択肢として認識される |
| 商品説明の下部 | ページ下部での告知；スクロール後に発見 |
複数設置の活用:
data-anygift="marker" を使う従来方式は、ページ内の先頭の1個だけを表示対象にします。複数個所に表示する場合は、各位置に <div data-anygift-product-code="{$product->id}"></div> を設置してください。
ステップ3: テンプレート保存と反映
- テンプレート編集画面で 保存 または 更新 をクリック
- 保存完了メッセージを確認
- 必要に応じて キャッシュクリア を実行
動作確認手順
- EC-CUBE のストアフロントで商品詳細ページにアクセス
- 「ギフトとして贈る」ボタンが表示されているか確認
- ボタンをクリックして、AnyGift の購入画面が開くか確認
トラブルシューティング
| 症状 | 原因と対応 |
|---|---|
| ボタンが表示されない | スクリプトタグまたはマーカータグが挿入されていないか、ストア ID が正しくないか確認。ページソース（Ctrl+U）で window.AnyGift を検索 |
| productCode が空白 | テンプレート変数 {$product->id} が正しく評価されていない。ページソースで実際の商品 ID に置き換わっているか確認 |
| CDN エラー | https://d1ioo46r7yo3cy.cloudfront.net/store.js がロードされているか、ブラウザ開発者ツールの Network タブで確認 |
| 一部の商品でボタンが表示されない | その商品のテンプレート変数が未設定の可能性。開発者ツールで productCode の値を確認 |
サポート
問題が解決しない場合は、AnyGiftサポートにお問い合わせください。以下の情報をご用意ください：
- ストア ID
- EC-CUBE のバージョン
- ブラウザコンソールのエラーメッセージ
- 実装したコード