Implementacja kodu strony internetowej lokalizatora dystrybutorów

Implementacja kodu strony internetowej lokalizatora dystrybutorów

Krok 1: Dołącz skrypt do witryny

Poniższy przykład pokazuje, co jest potrzebne do zintegrowania widżetu Lokalizator dystrybutorów z Twoją witryną. Po prostu zaktualizuj żądane parametry, a następnie skopiuj fragment kodu do swojej witryny.
Wszystkie parametry fragmentu kodu są dołączane do źródła skryptu i muszą być zgodne ze standardami jednolitych identyfikatorów zasobów .

wymagana firma
To jest Twój identyfikator firmy dostarczony przez Omacro. Ten identyfikator został przypisany podczas tworzenia konta firmowego i nigdy się nie zmieni. Powyższy fragment kodu zawiera już identyfikator Twojej firmy.
kraj
Jest to dwucyfrowy kod ISO kraju Kod ISO 3166-1 alfa-2 lub auto. Jeśli nie zostanie dostarczona, zostanie przedstawiona mapa, aby umożliwić użytkownikowi wybór kraju. Gdy jest podany i nie jest ustawiony na auto , użytkownikowi natychmiast prezentowane są wyniki dla określonego kraju. W przypadku ustawienia automatycznego kraj zostanie określony automatycznie na podstawie adresu IP użytkownika.
uprawomocnić
W przypadku wartości true fragment kodu zweryfikuje, czy każdy identyfikator produktu dostępny na stronie jest prawidłowy i zwróci produkt. Po zakończeniu sprawdzania poprawności fragment kodu doda odpowiednią klasę CSS do elementu wyzwalającego: obn-validate-pass lub obn-validate-fail . Podczas sprawdzania poprawności element wyzwalający będzie miał klasę CSS obn-validate-pending.
odpluskwić
Jeśli to prawda, fragment kodu pomoże w debugowaniu, rejestrując całą aktywność i powiadomienia w konsoli przeglądarki. Zaleca się wyłączenie tej funkcji po zakończeniu debugowania.

Krok 2: Wybierz sposób wdrożenia Lokalizatora Dystrybutorów.

Opcja 1: Wyzwalane kliknięciem przycisku w celu otwarcia wyskakującego okna modelu.

Krok 1: Aby uruchomić wyskakujące okienko, najpierw musimy zmodyfikować ścieżkę skryptu w kroku 1 i dodać dodatkowy parametr o nazwie „tryb” z wartością „dystrybutor”. Zobacz przykład poniżej:
  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 &tryb =dystrybutor " async></script>
Krok 1: Przypisz wyzwalacz do przycisków.
Poniższy przykład pokazuje prosty tag zakotwiczenia (link) używany jako wyzwalacz przycisku. Możesz łatwo wykorzystać istniejące lub nowe elementy na swojej stronie, po prostu dodając wymagany parametr.

  1. <a href="#obn" data-product="*">Znajdź dystrybutora</a>

Parametry wyzwalacza mają pierwszeństwo przed parametrami fragmentu kodu, co pozwala na globalne ustawianie parametrów z wyjątkami w razie potrzeby. Wszystkie parametry wyzwalacza są atrybutami danych HTML , które wymagają rozpoczynania się od „ data- ”.

produkt  wymagany
To jest identyfikator produktu i powinien być ustawiony na „*”.

Opcja 2: Osadzona na stronie internetowej.

Możesz osadzić lokalizator bezpośrednio na stronie. Zakładając, że wykonałeś już wszystkie czynności związane z dodawaniem fragmentów kodu Kup teraz omacro do swojej strony, skorzystaj z poniższego przykładu, aby wyświetlić lokalizator na samej stronie.
Krok 1: Dodaj klasę CSS do strony.
 Upewnij się, że na stronie znajduje się element o nazwie klasy „oma-omacro”.
  1. <div class="oma-omacro"></div>

Krok 2: Dodaj JavaScript do strony
Dodaj następujący skrypt do strony w dowolnym miejscu poniżej elementu HTML wspomnianego w kroku 1 . Skrypt jest przeznaczony do wyzwalania funkcji renderowania w skrypcie Lokalizatora Dystrybutorów. Ten skrypt ładuje widżet po załadowaniu strony, a nie poprzez kliknięcie przycisku.
  1. <skrypt>
  2. document.body.addEventListener("loaded.omacro.buynow", funkcja (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.showDystrybutorzy();
  5. }, FAŁSZ)
  6. </script>

Krok 3: Dodaj kaskadowy arkusz stylów do strony
Dodaj następujący kod CSS (zmodyfikuj w razie potrzeby), aby dostosować styl zawartości Lokalizatora dystrybutorów, tak aby była ona poprawnie renderowana w dokumencie strony.

  1. <style type="text/css">
  2. body.oma-modal-in {
  3. przepełnienie: auto !ważne;
  4. }
  5. .oma-omacro .oma-kup teraz {
  6. krycie: 1 !ważne;
  7. wyświetlacz: blok !ważny;
  8. pozycja: względna !ważna;
  9. u góry: auto !ważne;
  10. po prawej: auto !ważne;
  11. dół: auto !ważne;
  12. po lewej: auto !ważne;
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. transformacja: brak !ważne;
  16. przejście: brak !ważne;
  17. po lewej: auto !ważne;
  18. prawy margines: auto !ważne;
  19. margines-lewo: auto !ważne;
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. box-shadow: brak !ważne;
  23. kolor tła: przezroczysty;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. Nie wyświetla się;
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. Nie wyświetla się;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. kolor-dolnego-obramowania: #ddd;
  33. kolor tła: przezroczysty;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. kolor: #337ab7;
  37. kolor tła: przezroczysty;
  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. dekoracja tekstu: brak;
  42. kolor tła: #eee;
  43. kolor obramowania: #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. kolor: #555;
  49. kursor: domyślny;
  50. kolor tła: #fff;
  51. obramowanie: pełne 1px #ddd;
  52. kolor obramowania: przezroczysty;
  53. }
  54. .oma-omacro .oma-buynow .oma-footer {
  55. kolor górnej krawędzi: przezroczysty;
  56. kolor tła: przezroczysty;
  57. }
  58. .oma-omacro .oma-backdrop {
  59. wyświetlacz: brak !ważne;
  60. }
  61. </style>