Intégration du localisateur de revendeurs dans la page du site Web

Intégration du localisateur de revendeurs 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.

Pour voir une démonstration en direct, veuillez visiter notre site de démonstration en direct

Un exemple de localisateur de revendeurs dédié avec des styles personnalisés.

Étape 1 : Ajouter 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 Buy Now. Ce script charge le widget une fois la page chargée plutôt que via un clic sur un bouton.

La magie se produit dans la fonction omacro.buynow.widget.show() . Cette fonction accepte plusieurs paramètres :
  1. Identifiant de produit requis - "*" (pour le localisateur de revendeur générique) ou SKU ou ID de produit Omacro (SKU préféré)
  2. Onglet du marché - La valeur peut être "en ligne" ou "locale" et spécifie l'onglet du marché à afficher immédiatement.
  3. Code de pays ISO à 2 caractères - "us", "ca", "au", etc.

Exemple de localisateur de revendeur général

  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('*', 'local', 'nous');
  5. }, FAUX)
  6. </script>

Exemple de localisateur de revendeur basé sur le produit

  1. <script>
  2. document.body.addEventListener("loaded.omacro.buynow", function (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('LA12345', 'en ligne', 'ca');
  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 Acheter maintenant 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>