Implémentation du code du site Web du localisateur de distributeur

Implémentation du code du site Web du localisateur de distributeur

Étape 1 : Inclure le script dans le site Web

L'exemple ci-dessous montre ce qui est nécessaire pour intégrer le widget Distributor Locator à votre site. Mettez simplement à jour les paramètres souhaités, puis copiez l'extrait de code sur votre site Web.
Tous les paramètres d'extrait de code sont ajoutés à la source du script et doivent être conformes aux normes des identificateurs de ressource uniformes .

entrepriserequise
Il s'agit de l'identifiant de votre entreprise fourni par Omacro. Cet ID a été attribué lors de la création de votre compte d'entreprise et ne changera jamais. L'exemple d'extrait ci-dessus inclut déjà l'identifiant de votre entreprise.
pays
Il s'agit d'un code pays ISO à deux chiffres ISO 3166-1 alpha-2 code ou auto. S'il n'est pas fourni, une carte sera présentée pour permettre à l'utilisateur de sélectionner son pays. Lorsqu'il est fourni et non défini sur automatique , l'utilisateur voit immédiatement les résultats pour le pays spécifié. Lorsqu'il est réglé sur auto, le pays sera automatiquement déterminé par l'adresse IP de l'utilisateur.
valider
Lorsque la valeur est true, l'extrait vérifie que chaque identifiant de produit disponible sur la page est valide et renvoie un produit. Une fois la validation terminée, l'extrait de code ajoutera la classe CSS correspondante à l'élément déclencheur : obn-validate-pass ou obn-validate-fail . Pendant que la validation est en attente, l'élément déclencheur aura la classe CSS obn-validate-pending.
déboguer
Lorsqu'il est vrai, l'extrait de code aidera au débogage en enregistrant toutes les activités et notifications sur la console de votre navigateur. Il est recommandé de désactiver cette fonctionnalité une fois le débogage terminé.

Étape 2 : Choisissez la manière dont vous souhaitez mettre en œuvre le localisateur de distributeurs.

Option 1 : Déclenché via un clic sur un bouton pour ouvrir une fenêtre contextuelle de modèle.

Étape 1 : Pour déclencher la fenêtre contextuelle, nous devrons d'abord modifier notre chemin de script à l'étape 1 et ajouter un paramètre supplémentaire appelé "mode" avec une valeur de "distributeur". Voir exemple ci-dessous :
  1. <script id="omacro-widget-buynow" src=" https://buynow.omacro.com/embedded/bn.loader.js?company=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&country=auto&validate=false&debug=false &mode =distributeur " async></script>
Étape 1 : Affectez le déclencheur aux boutons.
L'exemple ci-dessous illustre une balise d'ancrage simple (lien) utilisée comme déclencheur de bouton. Vous pouvez facilement utiliser des éléments existants ou nouveaux sur votre site Web en ajoutant simplement le paramètre requis.

  1. <a href="#obn" data-product="*">Trouver un distributeur</a>

Les paramètres de déclenchement ont priorité sur les paramètres d'extrait de code, ce qui permet aux paramètres d'être définis globalement avec des exceptions si nécessaire. Tous les paramètres de déclenchement sont des attributs de données HTML qui nécessitent qu'ils commencent par ' data- '.

produit  requis
Il s'agit de l'identifiant du produit et doit être défini sur "*".

Option 2 : intégré dans la page du site Web.

Vous pouvez intégrer le localisateur directement sur une page. En supposant que vous avez suivi les étapes d'ajout d'extraits de code d'achat immédiat d'omacro à votre page, utilisez l'exemple suivant pour afficher le localisateur dans la page elle-même.
Étape 1 : Ajoutez une classe CSS à la page.
 Assurez-vous d'avoir un élément sur la page avec le nom de classe "oma-omacro".
  1. <div class="oma-omacro"></div>

Étape 2 : Ajoutez JavaScript à la page
Ajoutez le script suivant à la page n'importe où sous l' élément HTML mentionné à l' étape 1 . Le script est conçu pour déclencher la fonction de rendu dans le script Distributor Locator. Ce script charge le widget une fois la page chargée plutôt que via un clic sur un bouton.
  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.showDistributors();
  5. }, FAUX)
  6. </script>

Étape 3 : Ajouter une feuille de style en cascade à la page
Ajoutez le CSS suivant (modifiez-le si nécessaire) pour ajuster le style du contenu du localisateur de distributeur afin qu'il s'affiche correctement dans le document de la page.

  1. <style type="text/css">
  2. body.oma-modal-dans {
  3. débordement : auto !important ;
  4. }
  5. .oma-omacro .oma-buynow {
  6. opacité : 1 !important;
  7. affichage : bloc !important ;
  8. position: relative !importante;
  9. haut : auto !important ;
  10. à droite : auto !important ;
  11. bas : auto !important ;
  12. gauche : auto !important;
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. transformation : aucune !important ;
  16. transition : aucune !important ;
  17. gauche : auto !important;
  18. marge-droite : auto !important ;
  19. marge-gauche : auto !important ;
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. box-shadow: aucun !important;
  23. couleur de fond : transparente ;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. affichage : aucun ;
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. affichage : aucun ;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. border-bottom-color : #ddd ;
  33. couleur de fond : transparente ;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. couleur : #337ab7 ;
  37. couleur de fond : transparente ;
  38. }
  39. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:focus,
  40. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:hover {
  41. décoration de texte : aucune ;
  42. couleur de fond : #eee ;
  43. border-color : #eee #eee #ddd ;
  44. }
  45. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a,
  46. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:focus,
  47. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:hover {
  48. couleur : #555 ;
  49. curseur : par défaut ;
  50. couleur de fond : #fff ;
  51. bordure : 1px solide #ddd ;
  52. border-bottom-color : transparent ;
  53. }
  54. .oma-omacro .oma-buynow .oma-footer {
  55. border-top-color : transparent ;
  56. couleur de fond : transparente ;
  57. }
  58. .oma-omacro .oma-toile de fond {
  59. affichage : aucun ! important ;
  60. }
  61. </style>