Einbetten der Händlersuche in die Website-Seite

Einbetten der Händlersuche in die Website-Seite

Sie können den Locator direkt in eine Seite einbetten. Angenommen, Sie haben die Schritte zum Hinzufügen von omacro-Sofortkauf-Code-Snippets zu Ihrer Seite ausgeführt, verwenden Sie das folgende Beispiel, um den Locator innerhalb der Seite selbst zu rendern.

Um eine Live-Demonstration zu sehen, besuchen Sie bitte unsere Live-Demo-Site

Ein Beispiel für eine spezielle Händlersuche mit benutzerdefinierten Stilen.

Schritt 1: CSS-Klasse zur Seite hinzufügen
Stellen Sie sicher, dass Sie auf der Seite ein Element mit dem Klassennamen "oma-omacro" haben.
  1. <div class="oma-omacro"></div>

Schritt 2: JavaScript zur Seite hinzufügen

Fügen Sie das folgende Skript an einer beliebigen Stelle unterhalb des in Schritt 1 erwähnten HTML-Elements zur Seite hinzu. Das Skript soll die Renderfunktion innerhalb des Skripts „Jetzt kaufen“ auslösen. Dieses Skript lädt das Widget, sobald die Seite geladen wird, und nicht über einen Klick auf eine Schaltfläche.

Die Magie tritt innerhalb der Funktion omacro.buynow.widget.show() auf. Diese Funktion akzeptiert mehrere Parameter:
  1. Produktkennung erforderlich – „*“ (für allgemeine Händlersuche) oder SKU oder Omacro-Produkt-ID (SKU bevorzugt)
  2. Market-Tab – Der Wert kann entweder „online“ oder „lokal“ sein und gibt den Tab an, der sofort angezeigt werden soll.
  3. 2-stelliger ISO-Ländercode – „us“, „ca“, „au“ usw.

Allgemeines Beispiel für die Händlersuche

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

Beispiel für eine produktbasierte Händlersuche

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

Schritt 3: Cascading Style Sheet zur Seite hinzufügen

Fügen Sie das folgende CSS hinzu (ändern Sie es nach Bedarf), um den Stil des Inhalts „Jetzt kaufen“ so anzupassen, dass er innerhalb des Seitendokuments richtig gerendert wird.

  1. <style type="text/css">
  2. body.oma-modal-in {
  3. Überlauf: auto !wichtig;
  4. }
  5. .oma-omacro .oma-buynow {
  6. Deckkraft: 1 !wichtig;
  7. Anzeige: block !wichtig;
  8. Position: relativ !wichtig;
  9. oben: auto !wichtig;
  10. rechts: auto !wichtig;
  11. unten: auto !wichtig;
  12. links: auto !wichtig;
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. transformieren: keine !wichtig;
  16. Übergang: keine !wichtig;
  17. links: auto !wichtig;
  18. margin-right: auto !wichtig;
  19. margin-left: auto !wichtig;
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. box-shadow: keine !wichtig;
  23. Hintergrundfarbe: transparent;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. Anzeige: keine;
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. Anzeige: keine;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-inhalt .oma-tabs {
  32. Rahmenfarbe unten: #ddd;
  33. Hintergrundfarbe: transparent;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-inhalt .oma-tabs>li>a {
  36. Farbe: #337ab7;
  37. Hintergrundfarbe: transparent;
  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. Textdekoration: keine;
  42. Hintergrundfarbe: #eee;
  43. Rahmenfarbe: #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. Farbe: #555;
  49. Cursor: Standard;
  50. Hintergrundfarbe: #fff;
  51. Rand: 1px solide #ddd;
  52. Rahmenfarbe unten: transparent;
  53. }
  54. .oma-omacro .oma-buynow .oma-footer {
  55. Rahmenfarbe oben: transparent;
  56. Hintergrundfarbe: transparent;
  57. }
  58. .oma-omacro .oma-hintergrund {
  59. Anzeige: keine !wichtig;
  60. }
  61. </style>