Skip to main content
Replo は強力なランディングページビルダーですが、デフォルトの「Add to Cart」の挙動では Shopify のカートページにリダイレクトされます。これにより、スライド式のドロワーを使用する Upcart 本来の体験が中断されてしまいます。 シンプルな JavaScript スニペットを使えば、商品が追加されたときに Replo から Upcart に通知し、お客様を同じページにとどめたままドロワーをすぐに開くことができます。 これは、JavaScript が Upcart との連携だけでなく、ストアにおけるより幅広いカートのカスタマイズにも活用できることを示す好例です。

​
この連携が重要な理由

デフォルトでは、Replo はカート追加後の挙動として複数の選択肢をサポートしています。
  • Shopify のカートページにリダイレクト
  • チェックアウトにリダイレクト
  • ページにとどまる（ドロワーの操作なし）
Upcart は明示的にトリガーしない限り自動では開きません。この設定により、Replo の「Add to Cart」ボタンがクリックされた直後にドロワーが開くようになります。

​
ステップ 1: Replo で商品ページを開く

  1. Replo エディターで商品ページまたはランディングページを開きます
  2. ページレイアウト内の Add to Cart ボタンを選択します
  3. 右側のサイドバーで Interactions タブをクリックします
Replo エディターの Interactions タブで Add to Cart ボタンに On Click インタラクションを追加

​
ステップ 2: 2 つ目のインタラクションを追加する

  1. ボタンにすでに Add Product to Cart インタラクションが設定されていることを確認します
  2. On Click の下にある + アイコンをクリックします
  3. アクションの一覧から Run JavaScript を選択します
  4. コード入力欄に以下を貼り付けます。
    これにより、商品がカートに追加されるとすぐに Upcart がドロワーを開くようになります。

​
ステップ 3: Replo のカートページへのリダイレクトを無効にする

  1. もう一度 Add Product to Cart インタラクションを選択します
  2. Go to cart after? トグルを無効にします
これにより、Replo が Shopify のカートページにリダイレクトして Upcart のドロワーを完全にスキップしてしまうことを防げます。

​
ステップ 4: プレビューして公開する

  1. Replo で Preview をクリックしてインタラクションをテストします
  2. 商品をカートに追加し、Upcart のドロワーが自動的に開くことを確認します
  3. 確認できたら、Publish Page をクリックして変更を公開します

​
注意事項

  • この設定は、Replo + Upcart を併用する各ページに適用する必要があります
  • window.upcartRegisterAddToCart(); 関数は Upcart の公開 API によるもので、追加のコードのインストールなしで動作します
  • Replo ページのモバイル版・デスクトップ版の両方で機能します

​
注意事項

これで、Replo は Shopify のカートページへのリダイレクトを行わなくなり、代わりに商品がカートに追加されたときに Upcart に通知するようになります。 ご注意: Replo Landing Page Designer でデザインする各商品ページごとに、この手順を実施する必要があります。