Opencart One Page Checkout – User Manual


1.0 Présentation

La plupart des visiteurs quittent la caisse pour le produit souhaité simplement parce qu’ils trouvent le processus complexe et long à terminer. Cela conduit finalement à de plus en plus de chariots abandonnés. Pour contrôler les taux de sortie et d’abandon des paniers, Knowband a proposé OpenCart One Page Checkout Pro plugin pour les magasins OpenCart. En mettant en œuvre le paiement en une page pour votre site de commerce électronique, vous pouvez améliorer les taux de conversion car il remplace la page de paiement en plusieurs étapes par une page de paiement unique.

Vue mobile:

Principales caractéristiques de l’extension OpenCart One Page Checkout:

  1. L’extension offre une fonctionnalité de paiement invité par laquelle les utilisateurs peuvent facilement et rapidement terminer leurs commandes en tant que clients invités sans créer un nouveau compte sur la boutique en ligne.
  2. L’extension OpenCart Fast Checkout permet aux clients de se connecter rapidement au site Web en utilisant leurs comptes Google, Facebook et Paypal.
  3. Les champs de la page de paiement peuvent être facilement personnalisés par l’administrateur à partir du back-end de l’extension OpenCart One Page Checkout Pro. L’administrateur du magasin peut afficher ou masquer l’un des champs de la page de paiement ou les rendre facultatifs ou obligatoires pour les utilisateurs. L’administrateur peut également réorganiser les champs de position avec la fonctionnalité glisser-déposer.
  4. Le propriétaire du magasin peut facilement personnaliser l’aspect et la convivialité de la page de paiement, notamment en modifiant la couleur des boutons, la couleur du bouton d’arrière-plan, la couleur du texte, etc.
  5. L’OpenCart One Page Supercheckout offre une compatibilité multi-magasin et multilingue.
  6. L’extension OpenCart One Step Checkout prend en charge presque toutes les principales méthodes d’expédition et de paiement qui renforcent la confiance des clients pour choisir la méthode de leur choix sur la page de paiement.
  7. L’e-commerçant peut appliquer n’importe laquelle des mises en page de conception à partir de 3 mises en page de paiement différentes, à savoir, 1 colonne, 2 colonnes ou 3 colonnes. Les champs peuvent être facilement réorganisés par glisser-déposer.
  8. Le module OpenCart Quick Checkout offre une intégration avec MailChimp, Klaviyo et SendinBlue qui vous permet de synchroniser automatiquement la base de données de vos utilisateurs avec ces comptes sans aucun effort manuel.
  9. L’e-commerçant peut également personnaliser l’aspect et la convivialité de l’extension via des CSS et JS personnalisés.
  10. Le module OpenCart Responsive One Step Checkout offre la fonction de mode de test par laquelle le propriétaire du magasin peut vérifier et afficher les personnalisations effectuées avant de les rendre en ligne sur le site Web.
  11. Le module de paiement simplifié d’OpenCart offre la fonction Ship2Pay par laquelle le propriétaire du magasin peut mapper des méthodes de paiement particulières avec les méthodes de livraison sélectionnées. Il masque tous les autres modes de paiement lors de la sélection d’un mode de livraison particulier et affiche uniquement les modes de paiement qui sont mappés au mode de livraison sélectionné à l’utilisateur.

2.0 Guide d’installation de Extension OpenCart One Page Checkout

Avant de commencer le processus d’installation, vous devez acheter le Extension OpenCart One Page Checkout du magasin Knowband. Une fois acheté, vous recevrez les fichiers suivants sur votre e-mail enregistré.

  • Code source de l’extension OpenCart One Page Checkout au format de fichier zippé.
  • Manuel de l’utilisateur de l’extension OpenCart One Page Checkout.

Maintenant, pour installer ce paiement à une seule page OpenCart 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.

Étapes pour installer le fichier OCMOD
  • Après avoir décompressé le dossier, vous trouverez un fichier supercheckout_pro.ocmod.xml comme indiqué ci-dessous:
  • Maintenant, dans le panneau d’administration, cliquez sur Extensions dans le menu de gauche. Cliquez ensuite sur Extension Installer ( Accueil-> extension).

  • Maintenant, téléchargez le fichier supercheckout_pro.ocmod.xml. Un message de réussite s’affiche une fois le fichier téléchargé.
  • Une fois le fichier téléchargé, allez à Accueil-> Modification
  • Vous trouvez un fichier avec le nom Supercheckout Pro v2.8 (cela signifie que votre ocmod a été installé avec succès). Cliquez sur l’icône “+” correspondante pour l’activer. L’icône verte devient rouge comme illustré ci-dessous.
  • Enfin, cliquez sur le bouton d’actualisation (Ceci est obligatoire).

Alors, OpenCart One Page Checkout Pro est maintenant installé avec succès et est prêt à être utilisé dans votre magasin. Allez dans le menu admin et cliquez sur les extensions puis sur les modules. Cliquez sur le bouton de configuration à côté de Knowband Supercheckout.

3.0 Interface d’administration de Module de paiement en une étape réactif OpenCart

Juste après l’installation réussie du site Web One Page Checkout pour OpenCart, vous pouvez configurer les champs du formulaire de paiement selon vos besoins. Vous devez parcourir les paramètres dans l’ordre indiqué: panneau d’administration > Extensions > Modules > Knowband Supercheckout

L’interface d’administration simple à comprendre de OpenCart One Page Checkout Pro est divisé en dix sections à savoir: 1. Paramètres généraux 2. Personnalisateur 3. Paramètres de connexion 4. Adresse de paiement 5. Adresse de livraison 6. Méthode d’expédition 7. Ship2Pay 8. Méthode de paiement 9. Panier 10. Conception 11. Newsletter Chacune de ces sections a été discuté ci-dessous:

Paramètres généraux 3.1

  • Activer désactiver: En utilisant cette option, vous pouvez activer ou désactiver la fonctionnalité complète du OpenCart One Page Checkout Pro plugin de OFF à ON.
  • Activer l’option de newsletter: Vous pouvez activer ou désactiver l’option Newsletter sur la page Supercheckout. Une fois que vous avez activé ce bouton, voici les cas suivants: a.) L’option Newsletter sera visible pour le client de la caisse, uniquement si vous avez activé l’option Enregistrer l’invité automatiquement. b.) L’option Newsletter sera toujours visible pour le client s’il crée un nouveau compte. c.) L’option Newsletter ne sera jamais visible pour les clients connectés.
  • Enregistrer l’invité automatiquement: Vous pouvez activer cette option pour enregistrer automatiquement les clients invités dans votre magasin. En activant cette option, vous pouvez enregistrer vos clients dans la boutique et leur envoyer un mot de passe généré sur leur e-mail.
  • Créer un compte: En activant ce champ, vous pouvez afficher un champ de mot de passe sur la page de super-vérification afin que les nouveaux utilisateurs puissent facilement définir le mot de passe souhaité pour leur compte.
  • Sélectionnez l’option par défaut à la caisse: Avec cette option, vous pouvez définir une option par défaut dans la section de connexion de votre OpenCart“ Une page Supercheckout ”page hors des options comme Invité, Connexion et Inscription.
  • Désactiver l’invité: Vous pouvez activer ou désactiver la fonctionnalité d’invité pour les utilisateurs dans la section de connexion de One Page Checkout.
  • Ajouter un style personnalisé:Avec cette option, vous pouvez ajouter ou inclure un style personnalisé à la page Supercheckout. Pour appliquer du CSS personnalisé sur la page Supercheckout, vous pouvez écrire ce CSS dans la zone de texte qui se trouve juste à droite de l’étiquette Ajouter un style personnalisé. Par exemple: vous pouvez changer la couleur des boutons sur la page Supercheckout.
  • Ajouter un montant minimum pour afficher la bannière de livraison gratuite: À partir de cet onglet, l’administrateur peut ajouter un montant minimum requis après lequel les clients pourront bénéficier de la livraison gratuite de leur commande.
  • Activer la détection automatique du pays: Après avoir activé cette fonctionnalité, l’extension détectera et remplira automatiquement le pays de l’utilisateur dans la section pays.
  • Validation en ligne: Avec cette fonctionnalité, l’extension affiche une erreur chaque fois que l’utilisateur manque de remplir un champ obligatoire sur la page de paiement.
  • Activez le remplissage automatique des adresses Google: Dès que l’utilisateur commence à taper son adresse, l’extension suggère son adresse si cette fonctionnalité est activée.
  • Mode de test:“ Cette option vous aide à activer ou désactiver la fonctionnalité de mode de test de ceci Extension OpenCart One Page Checkout.
  • URL de test:Une fois que vous activez le mode de test, vous pouvez définir une URL de supercheckout où vous pouvez tester la fonctionnalité de paiement d’une page.

Customizer

À partir de l’onglet Personnalisateur, vous pouvez personnaliser la couleur d’arrière-plan du bouton, la couleur de la bordure du bouton Aperçu du bouton, la couleur du texte du bouton, la couleur du bas de la bordure du bouton, la couleur de l’arrière-plan du bouton de mon compte, la couleur de l’arrière-plan du bouton de connexion, la couleur de l’arrière-plan du bouton de connexion, la couleur de l’arrière-plan du bouton de déconnexion, le coupon Couleur d’arrière-plan du bouton de code, couleur d’arrière-plan du bouton de code de bon, etc.

  • Livraison gratuite Couleur de fond de la barre: Cette section vous permet de changer la couleur d’arrière-plan de la barre de livraison gratuite sur la page de paiement.
  • CSS et JS personnalisés: Cette section vous permet de personnaliser l’apparence de la page de paiement avec CSS et JS personnalisés.

3.2 Connexion

Sous cet onglet, vous trouverez des options pour configurer les options de connexion Facebook, Google et Paypal comme indiqué ci-dessous.

  • Activer la connexion Facebook: Avec cette option, vous pouvez activer / désactiver l’option de connexion Facebook sur One Page Checkout.
  • ID d’application Facebook: Cette option vous permet de définir l’ID d’application Facebook qui peut être généré à l’aide du compte du développeur Facebook.
  • Secret d’application Facebook: En utilisant cette option, définissez la clé secrète générée à l’aide du compte du développeur Facebook.
  • Activer la connexion à Google:“ Avec cette option, vous pouvez activer / désactiver l’option de connexion Google lors du paiement en une page.
  • ID d’application Google:Cette option vous permet de définir l’identifiant GoogleApp.
  • Identifiant client Google: Ce champ vous permet de définir l’ID client Google créé à partir de la console Google.
  • Google App Secret:À l’aide de cette option, vous pouvez définir la clé secrète d’application générée à l’aide de la console Google.
  • Activer la connexion Paypal: Avec cette option, vous pouvez permettre à vos clients de se connecter via leurs comptes Paypal.
  • Identifiant du client Paypal: Cette option vous permet d’ajouter votre identifiant de client Paypal.
  • Secret du client Paypal: Cette option vous permet d’ajouter votre identifiant secret de client Paypal.

Pour obtenir des instructions détaillées sur la génération de l’ID d’application, de la clé secrète d’application et de l’ID client, passez à la section suivante.

3.2.1 Comment configurer la connexion Facebook

L’application Facebook peut être créée en suivant les étapes mentionnées ci-dessous: – Étape 1: Allez à l’URL donnée: https://developers.facebook.com/apps/ Étape 2: Cliquez sur le bouton «Ajouter une nouvelle application». Étape 3 et 4: Entrez le nom de votre application et votre adresse e-mail, puis cliquez sur le bouton “Créer un identifiant d’application”.

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

7

Étape 7: Cliquez sur l’onglet «Paramètres».

8

Étape 8-13: Deux options seront disponibles dans le menu déroulant, Basique et Avancé, cliquez sur “Basique”. Ensuite, entrez votre “Domaine d’application”, “Email 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”. Domaines d’application: votredomaine.com est correct votredomaine.com/store est incorrect www.domaine.com est incorrect

9

Étape 14: Cliquez maintenant sur “+ Ajouter une plate-forme”.

10
Étape 15: Et sélectionnez le site Web comme plate-forme

11
Étape 16: Entrez maintenant l’URL de votre site.

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

13
Étape 19: Sélectionnez le Web comme plate-forme pour l’application.

14
Étape 20: Cliquez maintenant sur Enregistrer.

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

16
Étape 23 et 24: Cliquez sur “Revue de l’application”. Et marquez “Rendre” le nom de votre application “public” sur Oui.

17
Étape finale: copiez l’ID de l’application et le secret de l’application et collez-les dans les champs fournis dans le module.

18

3.2.2 Comment configurer la connexion Google

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

19

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

20
4. Allez dans API Manager, cliquez sur Create Credentials et sélectionnez l’option OAuth client ID.

21

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

22

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

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

24
Utilisez l’URL de redirection suivante http: //your_store_url/index.php? Fc = module & module = supercheckout & controller = supercheckout & login_type = google 8. Copiez l’ID client et le secret client.

25

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

26

3.3 Adresse de paiement

Cet onglet contient les paramètres des champs qui doivent être affichés dans la section Adresse de paiement ou de facturation de la page de paiement, comme indiqué ci-dessous.

  1. Il se compose de deux sections. Celui de gauche est pour les clients invités et celui de droite pour les clients connectés.
  2. Pour faire afficher / masquer un champ dans la page de paiement, cochez la case juste à gauche de Afficher l’étiquette.
  3. Pour rendre un champ obligatoire (champ obligatoire), cochez la case juste à gauche de Exiger une étiquette.
  4. Les champs peuvent également être réorganisés en fonction des besoins. Pour réorganiser, déplacez simplement le curseur sur l’icône de glisser et faites glisser et déposez le champ là où il est nécessaire, comme indiqué ci-dessous.
  5. Lors de l’enregistrement, les champs seront réorganisés selon les modifications.

3.4 Adresse de livraison

Cet onglet contient les paramètres pour les champs qui doivent être affichés dans la section Adresse de livraison de la page de paiement, comme indiqué ci-dessous.

  1. Il se compose de deux sections. Celui de gauche pour les clients invités et celui de droite pour les clients enregistrés.
  2. Pour faire afficher / masquer un champ dans la page de paiement, cochez la case juste à gauche de Afficher l’étiquette.
  3. Pour rendre un champ obligatoire (champ obligatoire), cochez la case juste à gauche de Exiger une étiquette.
  4. Les champs peuvent également être réorganisés en fonction des besoins. Pour réorganiser, déplacez simplement le curseur sur l’icône de glisser et faites glisser et déposez le champ là où il est nécessaire, comme indiqué ci-dessous.
  5. Lors de l’enregistrement, les champs seront réorganisés selon les modifications.

Méthode d’expédition 3.5

Cet onglet contient les paramètres de la méthode d’expédition qui sont affichés sur la page de paiement. Il contient essentiellement des paramètres pour activer / désactiver et définir la méthode d’expédition par défaut, comme indiqué ci-dessous:

  • Afficher les méthodes d’expédition: Par cette option, vous pouvez afficher / masquer les méthodes d’expédition sur la page de paiement. Pour cela, il faut passer le bouton de ON à OFF ou vice-versa.
  • Style d’affichage: Cette option vous permet de sélectionner le style d’affichage des méthodes d’expédition que vous avez ajoutées pour votre site Web. Vous pouvez choisir n’importe quel style parmi les trois options suivantes: Texte uniquement, Image uniquement ou Texte avec images.
  • Afficher le titre de la méthode d’expédition: Avec cette option, vous pouvez activer ou désactiver le titre des méthodes d’expédition affichées sur la page de paiement.
  • Sélectionnez une méthode d’expédition par défaut: Cette option vous aide à sélectionner n’importe quelle méthode comme méthode d’expédition par défaut pour votre boutique.
  • Titre: Avec cette option, vous pouvez définir des titres correspondant à chacun des modes d’expédition ajoutés et configurés pour votre boutique. Vous pouvez définir le titre en anglais ou en français.
  • Logo: Cette option vous permet de définir un logo souhaité correspondant à chacun des modes d’expédition configurés pour votre boutique.

3.6 Ship2Pay

La fonction ship2pay offerte par le module OpenCart Supercheckout désactive automatiquement les modes de paiement en fonction du mode d’expédition sélectionné par le client. Autrement dit, l’administrateur peut mapper certaines options de paiement particulières avec certaines options d’expédition particulières sur le magasin.

Méthode de paiement 3.7

Cet onglet contient les paramètres des modes de paiement affichés sur la page de paiement, tels que l’activation / la désactivation ou la sélection d’une méthode par défaut.

  • Afficher les méthodes de paiement:“ Avec cette option, vous pouvez afficher / masquer les méthodes de paiement sur la page de paiement. Pour cela, vous devez passer le bouton de ON à OFF ou vice-versa.
  • Style d’affichage:Cette option vous permet de sélectionner le style d’affichage des modes de paiement que vous avez ajoutés pour votre site Web. Vous pouvez choisir n’importe quel style parmi les trois options suivantes: Texte uniquement, Image uniquement ou Texte avec images.
  • Sélectionnez un mode de paiement par défaut:Cette option vous aide à sélectionner n’importe quelle méthode comme méthode de paiement par défaut pour votre boutique.
  • Titre: Avec cette option, vous pouvez définir des titres correspondant à chacun des modes de paiement ajoutés et configurés pour votre boutique. Vous pouvez définir le titre en anglais ou en français.
  • Logo:Cette option vous permet de définir le logo souhaité correspondant à chacun des modes de paiement configurés pour votre boutique.

3.8 Charrette

Dans cette section, vous trouverez les champs du panier divisés en deux sections, celle de gauche pour les clients invités et celle de droite pour les clients enregistrés ou connectés.

  1. Pour afficher / masquer le panier à partir de la page de paiement, cochez la case située devant l’étiquette Afficher le panier.
  2. Pour activer / désactiver une colonne dans le panier, cochez / décochez la case en face de cette colonne respective.
  3. Pour activer / désactiver les images contextuelles du produit, cochez / décochez la case en face de cette colonne respective.
  4. Pour modifier la taille de la fenêtre contextuelle de l’image, entrez la largeur et la hauteur de la fenêtre contextuelle dans la zone de texte devant l’étiquette Taille de l’image du produit.
  5. Les options de coupon, de points de récompense et de bon peuvent également être désactivées ou activées en cochant / décochant la case en face de ce champ respectif. Veuillez noter que la zone de texte des points de récompenses ne sera visible sur la page Supercheckout qu’une fois que les trois conditions suivantes seront remplies. a.) Le client doit être connecté. b.) Il doit avoir au moins 1 point de récompense dans son compte. c.) Il doit avoir un produit dans le panier qui peut être acheté avec des points de fidélité.

Confirmer:

  1. Cet onglet est à nouveau divisé en deux sections, celle de gauche pour les clients invités et celle de droite pour les clients enregistrés ou connectés.
  2. Pour activer la boîte de commentaire pour la commande par client, cochez la case en face de Laisser un commentaire pour l’étiquette de la commande et pour désactiver, décochez la même case.
  3. Pour activer l’acceptation du terme ou de toute autre information enregistrée dans l’administrateur pour le magasin, cochez / décochez la case en face de J’accepte l’étiquette des conditions.

3.9 Onglet Conception

Cet onglet contient les paramètres de conception de OpenCart One Page Checkout Pro comme indiqué ci-dessous:

1 colonne

2 colonne

3 colonne

Vous pouvez facilement modifier la largeur de n’importe quelle colonne et ajuster le curseur présent en haut comme indiqué ci-dessous.

 

En outre, vous pouvez repositionner différents blocs de la page de paiement en utilisant une simple action de glisser-déposer. Lors de l’enregistrement, le bloc sera réorganisé dans la page de paiement en fonction des modifications.

Bulletin d’information 3.10

En cliquant sur l’onglet Newsletter de Module de paiement en une étape réactif OpenCart, vous pouvez configurer les paramètres MailChimp, SendinBlue et Klaviyo Integrator comme indiqué ci-dessous:

  • Activer MailChimp: Vous pouvez activer ou désactiver la fonctionnalité MailChimp Integrator pour votre boutique. Vous pouvez activer cette option si vous souhaitez augmenter les abonnements à la newsletter pour votre boutique.
  • Clé d’API MailChimp: Cette option vous aide à définir la clé API Mailchimp pour capturer les e-mails des clients.
  • Liste MailChimp: Une fois la clé configurée avec ceci Extension de paiement rapide OpenCart, vous pouvez récupérer et sélectionner la liste MailChimp.

La même chose peut être faite pour SendinBlue et Klaviyo.

4.0 Interface avant de Extension de paiement en une étape OpenCart

Lorsque l’utilisateur clique sur le bouton «Ajouter au panier» correspondant à un produit et effectue sa commande, il verra le supercheckout suivant sur son écran.

Extension OpenCart One Page Checkout: https://www.knowband.com/opencart-one-supercheckout-pro

Démo de l’administrateur OpenCart One Page Checkout: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

Démo OpenCart One Page Checkout Front: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

OpenCart One Page Checkout depuis le marché officiel d’OpenCart: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353

Cela vous intéresserait aussi:

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *