OpenCart One Page Advanced Checkout Extension – Manuel de l’utilisateur

 

1.0 Présentation

1 utilisateur en ligne sur 10 est obligé d’abandonner son panier juste à cause de la procédure de paiement longue et compliquée. De plus, vous pouvez optimiser le paiement de votre site en un site intéressant en incorporant l’extension de paiement avancé OpenCart One Page de Knowband. En fait, le module contextuel de paiement réactif OpenCart transforme l’ensemble du processus de paiement en un seul popup basé sur ajax. De plus, ce qui se déclenche sur l’écran lorsque le client choisit d’acheter un produit dans le magasin. Ainsi, ce One Page Checkout pour OpenCart réduit l’abandon de panier en proposant l’intégralité du processus d’achat sur une seule fenêtre contextuelle, sans charger la page suivante.

1.1 Caractéristiques de One Page Checkout pour OpenCart

L’intégration de One Page Checkout pour la boutique OpenCart n’est pas un gros problème car elle offre une personnalisation simple sans impliquer de compétences techniques ni de modifications de code existantes. Ainsi, permettez rapidement à vos clients d’acheter le produit via une seule fenêtre contextuelle, ce qui leur permet de payer plus rapidement. De plus, une expérience moins d’interruption. Ainsi, vous trouverez ci-dessous les points forts de cette extension OpenCart One Page Checkout. 1. Le module OpenCart One Page Checkout affiche le total des champs de paiement sous la forme d’une fenêtre contextuelle de paiement réactive basée sur ajax sur le frontend. En outre, du site Web sans rediriger vers une autre URL. 2. Ce paiement en une page pour OpenCart offre un moyen transparent d’augmenter les abonnements à la newsletter pour les activités en ligne. 3. La fenêtre contextuelle de paiement réactif incorporée à l’aide du module de paiement simplifié OpenCart peut être facilement activée ou désactivée à l’aide du bouton bascule fourni au niveau du backend. 4. La fonction d’enregistrement des invités de la fenêtre contextuelle de paiement réactif OpenCart enregistre automatiquement le client sur le site. De plus, envoyez-leur le mot de passe de connexion sur leur e-mail. 5. Vous avez la possibilité d’activer ou de désactiver la fonctionnalité de paiement invité du module OpenCart One Page Checkout. 6. À l’aide de cette extension de paiement OpenCart Single Page, vous pouvez ajouter du code CSS à la page de paiement avancée. 7. Le module de paiement OpenCart Single Page offre une fonctionnalité de mode de test qui vous permet de tester la fonctionnalité avancée de la page de paiement sur une adresse IP spécifique. 8. Avec le module de paiement simplifié OpenCart, offrez aux clients les avantages des options de connexion sociale. Par exemple, Google et Facebook sur la page de paiement. 9. L’extension de paiement rapide OpenCart vous permet d’afficher/masquer différemment les champs d’adresse de paiement et d’expédition pour les clients connectés et invités du magasin. 10. Les marques de champ d’adresse personnalisées sont nécessaires ou facultatives à l’aide de ce module OpenCart One Page Supercheckout. 11. En utilisant One Page Checkout pour le site OpenCart, vous pouvez fournir plusieurs méthodes d’expédition et de paiement aux clients qui sont configurables à partir du backend. 12. Le module contextuel de paiement réactif OpenCart vous permet de définir une image de logo et un titre souhaités pour chacune des méthodes de paiement et d’expédition affichées sur la page de superpaiement. 13. La fonctionnalité ship2pay de l’extension de paiement rapide OpenCart sélectionne automatiquement le mode de paiement correspondant à chaque mode d’expédition sélectionné par le client. 14. L’extension contextuelle de paiement réactif OpenCart offre un panier configurable dont les champs peuvent être fixés selon les besoins de l’entreprise. 15. Le module OpenCart One Page Checkout est compatible avec plusieurs magasins et plusieurs langues. 16. L’extension de paiement rapide OpenCart offre une mise en page réactive mobile aux clients. 17. La fonctionnalité MailChimp Integrator d’OpenCart Single Page Checkout synchronise automatiquement les données du client avec le compte MailChimp connecté du vendeur.

1.2 Interface avant du module contextuel OpenCart Responsive Checkout

Lorsque l’utilisateur clique sur le bouton “Ajouter au panier” correspondant à un produit, il verra le curseur de paiement réactif suivant sur son écran.

Section récapitulative du panier d’OpenCart One Page Advanced Checkout

De plus, lorsqu’ils cliquent sur le bouton “Commander”, ils peuvent visualiser et remplir le formulaire de paiement avancé complet en une seule fois, comme indiqué dans les images ci-dessous :

Section de connexion au compte

Si le client décoche la case “Expédier à la même adresse”, il verra la section de l’adresse de livraison comme indiqué ci-dessous :

Section Mode d’expédition et de paiement

Guide d’installation 2.0 de l’extension de paiement avancé OpenCart One Page

Avant de commencer le processus d’installation, vous devez acheter le module OpenCart One Page Checkout dans la boutique Knowband. De plus, une fois acheté, vous recevrez les fichiers suivants dans votre e-mail enregistré.

• Code source de l’extension OpenCart One Page Advanced Checkout au format de fichier compressé.
• Manuel d’utilisation de l’extension OpenCart One Page Checkout.

Maintenant, pour installer cette OpenCart Advanced Checkout sur votre boutique en ligne, suivez les étapes indiquées : 1. Décompressez le fichier zip. Vous obtiendrez les dossiers comme indiqué dans l’image ci-dessous

2. Copiez tous les dossiers du fichier zip dans le répertoire racine de la configuration d’OpenCart via le gestionnaire FTP. Ainsi, OpenCart One Page Advanced Checkout est maintenant installé avec succès. De plus, il est prêt à être utilisé dans votre magasin. De plus, allez dans le menu d’administration. De plus, cliquez sur les extensions et cliquez ainsi sur le bouton de configuration à côté de One Page Advanced Checkout.

Interface d’administration 3.0 d’OpenCart Responsive Checkout Popup

Juste après l’installation réussie de One Page Checkout pour OpenCart sur le site Web, vous pouvez configurer les champs du formulaire de paiement selon vos besoins. De plus, vous devez naviguer dans les paramètres dans l’ordre indiqué : Panneau d’administration > Extensions > Modules > Paiement avancé en une page.

L’interface d’administration simple à comprendre de l’extension de paiement rapide OpenCart est divisée en neuf sections, à savoir :

1. Paramètres généraux
2. Paramètres de connexion
3. Adresse de facturation
4. Adresse de livraison
5. Méthodes d’expedition
6. Ship2Pay
7. Mode de paiement
8. Panier
9. Newsletter

Paramètres généraux 3.1

• Activer désactiver: Cette option vous permet d’activer ou de désactiver la fonctionnalité complète de One Page Checkout pour Opencart le site Web. Si elle est désactivée, la caisse Opencart standard est présentée aux clients.
• Activer l’option Newsletter : En utilisant cette option, vous pouvez afficher ou masquer la boîte d’inscription à la newsletter de votre site. Si le client coche l’option newsletter, il s’abonnera aux mises à jour du site (newsletter).
• Enregistrez l’invité automatiquement : Vous pouvez activer l’enregistrement automatique pour vos clients invités (utilisateurs qui effectuent le paiement en tant qu’invité). Cette option enverra automatiquement un mot de passe au client pour une utilisation ultérieure du compte.
• Créer un compte: En activant cette option, vous pouvez donner des champs de mot de passe lors du paiement d’une seule page où l’utilisateur peut entrer son mot de passe pour s’inscrire.
• Afficher l’invité : Cette option affichera ou masquera l’option invité dans la section de connexion du paiement. À l’aide de cette option, les utilisateurs peuvent effectuer un paiement en tant qu’invité pour leurs articles.
• Ajouter un style personnalisé : Cette option vous permet d’inclure un style personnalisé supplémentaire (code CSS), affiché sur le devant de leur site Web.
• Mode de test: Vous pouvez activer cette option pour tester la fonctionnalité du module de paiement en une page avant de la mettre en ligne pour les clients.
• Ajouter une adresse IP: Cette option vous permet d’entrer l’adresse IP spécifique où vous souhaitez tester les fonctionnalités avancées de supercheckout.

3.2 Paramètres de connexion

• Activer la connexion Facebook : Cette option activera ou désactivera l’option de connexion Facebook affichée sur le devant du formulaire de paiement d’une page.
• ID d’application Facebook: Cette option vous permet de définir l’ID d’application Facebook requis pour vous connecter à votre compte Facebook.
• Secret de l’application Facebook : Cette option définira la clé secrète de l’application Facebook. Remarque : Vous pouvez obtenir l’ID de l’application Facebook et la clé secrète à partir de https://developers.facebook.com/ qui a été discuté dans la section 3.2.1
• Activer la connexion Google : Cette option activera ou désactivera l’option de connexion Google affichée sur le devant du formulaire de paiement d’une page.
• ID d’application Google : Cette option vous permet de définir l’ID d’application Google requis pour vous connecter à votre compte Google.
• Identifiant client Google: Cette option vous permet de définir l’ID client Google.
• Enfin, Google�App�Secret :�Cette option définira la clé secrète de l’application Google.

Remarque : Vous pouvez obtenir l’ID d’application Google, l’ID client et la clé secrète à partir de https://code.google.com/apis/console, dont il a été question à la section 3.2.2.

3.2.1 Comment configurer la connexion Facebook

L’application Facebook peut être créée en suivant les étapes ci-dessous : – 1 : Accédez à l’URL indiquée : https://developers.facebook.com/apps/ 2 : Cliquez sur le bouton “Ajouter une nouvelle application”. 3&4 : Entrez le nom de votre application et votre identifiant de messagerie, puis cliquez sur le bouton “Créer un identifiant d’application”.

5&6 : Après avoir cliqué sur Créer un ID d’application, vous devrez passer un contrôle de sécurité comme indiqué :

7 : Cliquez sur l’onglet “Paramètres”.

8-13 : Deux options seront disponibles dans le menu déroulant, Basique et Avancé, cliquez sur « Basique ». Et puis entrez votre “Domaine d’application”, “E-mail de contact”, “URL de confidentialité”, “URL des conditions générales”, “Ajouter un logo”, “Sélectionner une catégorie” et cliquez sur le bouton “Enregistrer les modifications”. App Domains : votredomaine.com est correct votredomaine.com/store est incorrect www.domaine.com est incorrect

14 : Cliquez maintenant sur « + Ajouter une plate-forme ».

15 : Et sélectionnez Site Web comme plate-forme

16 : Entrez maintenant l’URL de votre site.

17&18 : Cliquez sur “Produits+” et sélectionnez Connexion Facebook.

19 : Sélectionnez Web comme plate-forme pour l’application.

20 : Maintenant, cliquez sur enregistrer.

21&22 : Cliquez sur Paramètres et ajoutez un URI de redirection OAuth valide. URI de redirection OAuth valide : https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

23&24 : Cliquez sur “App review”. Et marquez “Rendre ‘votre nom d’application’ public” sur Oui.

Dernière étape : copiez l’ID d’application et le secret d’application et collez-les dans les champs fournis dans le module.

3.2.2 Comment configurer la connexion Google

Suivez les étapes ci-dessous pour obtenir l’ID client et le secret client. 1. Allez sur le lien ” https://console.developers.google.com/project “. 2. Cliquez sur l’option déroulante mise en évidence dans le bouton ” 2 ” puis cliquez sur “Créer un projet”.

3. Entrez le nom de projet souhaité et cliquez sur “Créer”.

4. Accédez au gestionnaire d’API, cliquez sur Créer des informations d’identification et sélectionnez l’option ID client OAuth.

5. Cliquez sur le bouton “Configurer l’écran de consentement”.

6. Entrez “Email Id”, “Product Name” puis cliquez sur le bouton “Save”.

7. Sélectionnez “Application Web”, Entrez “Nom”, “URI redirigés autorisés” comme mentionné ci-dessous et cliquez sur le bouton “Créer”,

Utilisez l’URL de redirection suivante

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout

8. Copiez l’ID client et le secret client.

9. Collez l’ID client et le secret client dans le champ de texte indiqué ci-dessous dans le panneau d’administration du module de paiement en une page de Prestashop.

Comment générer la clé API Google :

1) Allez dans API Manager, cliquez sur le menu de gauche, cliquez sur API & Services, puis cliquez sur Credentials.

2) Cliquez sur Créer des informations d’identification, puis sélectionnez la clé API.

3) Copiez la clé API et entrez-la dans le champ Google App Id de la page de connexion du module de fin d’administration

3.3 Adresse de paiement

OpenCart One Page Checkout vous permet d’afficher ou de masquer n’importe quel champ pour l’adresse de paiement. Les champs peuvent être activés ou désactivés séparément pour les clients connectés et déconnectés. Vous pouvez marquer n’importe quel champ comme requis, différemment pour les clients connectés et déconnectés du magasin. De plus, vous pouvez réorganiser les champs d’adresse à l’aide d’une simple action de glisser-déposer.

3.4 Adresse de livraison

 

Le module contextuel de paiement réactif OpenCart vous permet d’afficher ou de masquer n’importe quel champ pour l’adresse de livraison. Les champs peuvent être activés ou désactivés séparément pour les clients connectés et déconnectés. En utilisant OpenCart One Page Advanced Checkout, vous pouvez marquer n’importe quel champ comme requis, différemment pour les clients connectés et déconnectés du magasin. De plus, vous pouvez réorganiser les champs d’adresse à l’aide d’une simple action de glisser-déposer. Remarque : Pour inclure et afficher plus de champs personnalisés dans la section Adresse de paiement, Adresse de livraison, panier ou compte de la caisse, vous pouvez vous référer à la section 3.10

Méthode d’expédition 3.5

• Afficher les méthodes d’expédition : Cette option affichera/masquera la liste complète des méthodes d’expédition fournies sur la page de paiement avancé.
• Style d’affichage : Avec cette option, vous pouvez sélectionner le style d’affichage des méthodes d’expédition. Il peut s’agir uniquement d’une image de logo, uniquement de texte ou des deux.
• Afficher le titre de la méthode d’expédition : Cette option activera ou désactivera le titre pour la méthode d’expédition particulière.
• Sélectionnez la méthode d’expédition par défaut : Avec cette option, vous pouvez sélectionner n’importe quelle méthode d’expédition comme méthode par défaut.
• Titre: Cette option définit le titre souhaité pour la méthode d’expédition.
• Logo: Cette option définit l’image du logo pour la méthode d’expédition.

De même, vous pouvez modifier le titre et l’image du logo pour toutes les méthodes d’expédition à l’aide de ce module de paiement avancé OpenCart One Page.

3.6 Expédier à Payer

Méthode de paiement 3.7

• Afficher les modes de paiement : Cette option affichera/masquera la liste complète des méthodes de paiement fournies sur la page de paiement avancé.
• Style d’affichage : Avec cette option, vous pouvez sélectionner le style d’affichage des modes de paiement. Il peut s’agir uniquement d’une image de logo, uniquement de texte ou des deux.
• Sélectionnez le mode de paiement par défaut : Avec cette option, vous pouvez sélectionner n’importe quel mode de paiement comme méthode par défaut.
• Titre: Cette option définit le titre souhaité pour le mode de paiement.
• Logo: Cette option définit l’image du logo pour le mode de paiement.

De même, vous pouvez modifier le titre et l’image du logo pour tous les modes de paiement à l’aide d’une page supercheckout.

3.8 Chariot

Dans cette section d’OpenCart One Page Supercheckout, vous pouvez personnaliser le panier et l’afficher comme vous le souhaitez dans votre magasin. La taille de l’image des articles du panier peut être facilement modifiée en définissant la hauteur et la largeur de l’image.

• Taille de l’image du produit: Cette option vous permet de définir la taille de l’image pour les produits affichés dans la section panier de la page de paiement. De plus, vous pouvez afficher ou masquer les différents champs du panier pour vous connecter et vous déconnecter des clients du magasin. Des champs comme “Accepter les conditions”. De plus, commandez les commentaires marqués comme facultatifs ou facultatifs selon les exigences de votre site.

Bulletin d’information 3.9

• Activer MailChimp : Cette option d’Opencart one page supercheckout, vous permet d’activer ou de désactiver la fonctionnalité d’intégration MailChimp pour votre boutique.
• Clé API MailChimp : Avec cette option, vous pouvez définir la clé API MailChimp qui connectera votre site au compte MailChimp du vendeur.
• Liste MailChimp : En utilisant cette option, vous pouvez récupérer et sélectionner la liste particulière connectée au compte MailChimp.

3.9.1 Comment configurer MailChimp

1. Connectez-vous à votre compte Mail Chimp.
2. Cliquez sur l’onglet du coin droit > Choisissez Profil > Extras > Clés API.
3. Ici, l’administrateur peut créer une clé API en cliquant sur le bouton “Créer une clé”.
4. Copiez la clé API.
5. L’administrateur peut également créer une liste différente pour chaque client de connexion sociale en cliquant sur “Liste” dans la barre de menu supérieure.
6. Collez maintenant la clé API dans la section Clé API de chimpanzé fournie par Mail et cliquez sur le bouton “Get List”.
7. Sélectionnez la liste dans le menu déroulant.

3.10 Comment ajouter modifier ou supprimer des champs personnalisés à la page Supercheckout

Afin d’ajouter des champs personnalisés à n’importe quelle section de One Page Checkout, vous pouvez accéder à l’option “Champs personnalisés” sous l’onglet “Clients” dans la section de gauche de l’interface d’administration.