Skip to main content
Replo est un puissant créateur de pages d’atterrissage, mais son comportement « Add to Cart » par défaut redirige vers la page du panier Shopify. Cela interrompt l’expérience Upcart prévue, qui utilise un tiroir coulissant. Avec un simple extrait de code JavaScript, vous pouvez indiquer à Replo de notifier Upcart lorsqu’un produit est ajouté, ce qui permet au client de rester sur la même page et d’ouvrir immédiatement le tiroir. Cela montre comment JavaScript peut être utilisé non seulement pour l’intégration d’Upcart, mais aussi pour une personnalisation plus large du panier sur votre boutique.

​
Pourquoi cette intégration est importante

Par défaut, Replo prend en charge plusieurs comportements après l’ajout au panier :
  • Redirection vers la page du panier Shopify
  • Redirection vers le paiement
  • Rester sur la page (aucune interaction avec le tiroir)
Upcart ne s’ouvre pas automatiquement sauf si vous le déclenchez explicitement. Cette configuration garantit que le tiroir s’ouvre juste après le clic sur le bouton « Add to Cart » de Replo.

​
Étape 1 : ouvrez la page produit dans Replo

  1. Ouvrez votre page produit ou votre page d’atterrissage dans l’éditeur Replo
  2. Sélectionnez le bouton Add to Cart dans la mise en page
  3. Dans la barre latérale de droite, cliquez sur l’onglet Interactions

​
Étape 2 : ajoutez une seconde interaction

  1. Confirmez que le bouton utilise déjà l’interaction Add Product to Cart
  2. Cliquez sur l’icône + sous On Click
  3. Dans la liste des actions, sélectionnez Run JavaScript
  4. Dans le champ de code, collez ce qui suit :
    Cela indique à Upcart d’ouvrir le tiroir dès que le produit est ajouté au panier.

​
Étape 3 : désactivez la redirection de Replo vers la page du panier

  1. Sélectionnez à nouveau l’interaction Add Product to Cart
  2. Désactivez l’option Go to cart after?
Cela empêche Replo de rediriger vers la page du panier Shopify, ce qui contournerait entièrement le tiroir Upcart.

​
Étape 4 : prévisualisez et publiez

  1. Cliquez sur Preview dans Replo pour tester l’interaction
  2. Ajoutez un produit au panier et confirmez que le tiroir Upcart s’ouvre automatiquement
  3. Une fois la confirmation faite, cliquez sur Publish Page pour mettre les modifications en ligne

​
Remarques

  • Cette configuration doit être appliquée à chaque page où vous utilisez Replo + Upcart ensemble
  • La fonction window.upcartRegisterAddToCart(); provient de l’API publique d’Upcart et fonctionne sans installation de code supplémentaire
  • Cela fonctionne pour les versions mobiles et de bureau des pages Replo

​
Remarques

Replo devrait maintenant cesser de rediriger vers la page du panier Shopify et notifier Upcart à la place lorsqu’un article est ajouté au panier. Veuillez noter : vous devrez effectuer ce processus pour chaque page produit que vous concevez dans Replo Landing Page Designer.