Osadzanie lokalizatora dealerów na stronie internetowej

Osadzanie lokalizatora dealerów 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.

Aby zobaczyć demonstrację na żywo, odwiedź naszą witrynę demonstracyjną na żywo

Przykład dedykowanego Lokalizatora Dealerów z niestandardowymi stylami.

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 Kup teraz. Ten skrypt ładuje widżet po załadowaniu strony, a nie poprzez kliknięcie przycisku.

Magia zachodzi w funkcji omacro.buynow.widget.show() . Ta funkcja akceptuje kilka parametrów:
  1. Wymagany identyfikator produktu — „*” (dla ogólnego lokalizatora sprzedawców) lub SKU lub identyfikator produktu Omacro (preferowany SKU)
  2. Zakładka Rynek — wartość może być „online” lub „lokalna” i określa kartę do natychmiastowego wyświetlenia na rynku.
  3. 2-znakowy kod kraju ISO – „us”, „ca”, „au” itp.

Przykład ogólnego lokalizatora dealerów

  1. <skrypt>
  2. document.body.addEventListener("loaded.omacro.buynow", funkcja (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('*', 'lokalny', 'nas');
  5. }, FAŁSZ)
  6. </script>

Przykład lokalizatora dealerów na podstawie produktu

  1. <skrypt>
  2. document.body.addEventListener("loaded.omacro.buynow", funkcja (e) {
  3. e.preventDefault();
  4. omacro.buynow.widget.show('LA12345', 'online', 'ca');
  5. }, FAŁSZ)
  6. </script>

Krok 3: Dodaj kaskadowy arkusz stylów do strony

Dodaj następujący kod CSS (zmodyfikuj go w razie potrzeby), aby dostosować styl treści Kup teraz, tak aby była ona prawidłowo 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>