Dies ist die von Omacro bereitgestellte Firmenkennung. Diese ID wurde bei der ursprünglichen Erstellung Ihres Firmenkontos zugewiesen und wird sich nie ändern. Das Snippet-Beispiel oben enthält bereits Ihre Firmenkennung.
Dies ist ein zweistelliger ISO-Ländercode, ISO 3166-1 Alpha-2- Code oder Auto. Wenn keine Angabe erfolgt, wird eine Karte angezeigt, auf der der Benutzer sein Land auswählen kann. Wenn diese Option bereitgestellt und nicht auf „Automatisch“ eingestellt ist, werden dem Benutzer sofort Ergebnisse für das angegebene Land angezeigt. Bei der Einstellung „Auto“ wird das Land automatisch anhand der IP-Adresse des Benutzers ermittelt.
Bei „true“ überprüft das Snippet, ob alle auf der Seite verfügbaren Produktkennungen gültig sind, und gibt ein Produkt zurück. Sobald die Validierung abgeschlossen ist, fügt das Snippet die entsprechende CSS-Klasse zum Triggerelement hinzu: obn-validate-pass oder obn-validate-fail . Während die Validierung aussteht, verfügt das Triggerelement über die CSS-Klasse obn-validate-pending.
Wenn dieser Wert wahr ist, hilft er beim Debuggen, indem er alle Aktivitäten und Benachrichtigungen in Ihrer Browserkonsole protokolliert. Es wird empfohlen, diese Funktion zu deaktivieren, sobald das Debuggen abgeschlossen ist.
Schritt 1: Um das Popup-Fenster auszulösen, müssen wir zunächst unseren Skriptpfad in Schritt 1 ändern und einen zusätzlichen Parameter namens „mode“ mit dem Wert „distributor“ hinzufügen. Siehe Beispiel unten:
- <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 =distributor " async></script>
Schritt 1: Auslöser den Tasten zuweisen.
Das folgende Beispiel zeigt die Verwendung eines einfachen Ankertags (Link) als Schaltflächenauslöser. Sie können problemlos vorhandene oder neue Elemente auf Ihrer Website verwenden, indem Sie einfach die erforderlichen Parameter hinzufügen.
- <a href="#obn" data-product="*">Finden Sie einen Händler</a>
Trigger-Parameter haben Vorrang vor Snippet-Parametern. Dies ermöglicht die globale Festlegung von Parametern mit Ausnahmen bei Bedarf. Alle Triggerparameter sind HTML-Datenattribute , die mit „ data- “ beginnen müssen.
Produkt erforderlichDies ist die Produktkennung und sollte auf „*“ gesetzt werden.
Schritt 1: Fügen Sie der Seite eine CSS-Klasse hinzu.
Stellen Sie sicher, dass auf der Seite ein Element mit dem Klassennamen „oma-omacro“ vorhanden ist.
- <div class="oma-omacro"></div>
Schritt 2: Fügen Sie der Seite JavaScript hinzuFü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 Distributor Locator-Skripts auslösen. Dieses Skript lädt das Widget, sobald die Seite geladen wird, und nicht über einen Klick auf eine Schaltfläche.
- <Skript>
- document.body.addEventListener("loaded.omacro.buynow", Funktion (e) {
- e.preventDefault();
- omacro.buynow.widget.showDistributors();
- }, FALSCH)
- </script>
Schritt 3: Fügen Sie der Seite ein Cascading Style Sheet hinzuFügen Sie das folgende CSS hinzu (ändern Sie es nach Bedarf), um den Stil des Distributor Locator-Inhalts so anzupassen, dass er im Seitendokument ordnungsgemäß gerendert wird.
- <style type="text/css">
- body.oma-modal-in {
- Überlauf: auto !important;
- }
- .oma-omacro .oma-buynow {
- Deckkraft: 1 !important;
- Anzeige: block !important;
- Position: relativ !important;
- oben: auto !important;
- rechts: auto !important;
- unten: auto !important;
- links: auto !important;
- }
- .oma-omacro .oma-buynow .oma-dialog {
- transformieren: keine !important;
- Übergang: keine !important;
- links: auto !important;
- margin-right: auto !important;
- margin-left: auto !important;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content {
- box-shadow: keine !important;
- Hintergrundfarbe: transparent;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
- Anzeige: keine;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
- Anzeige: keine;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
- Rahmenfarbe unten: #ddd;
- Hintergrundfarbe: transparent;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
- Farbe: #337ab7;
- Hintergrundfarbe: transparent;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:focus,
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a:hover {
- Textdekoration: keine;
- Hintergrundfarbe: #eee;
- Rahmenfarbe: #eee #eee #ddd;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a,
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:focus,
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li.oma-active>a:hover {
- Farbe: #555;
- Cursor: Standard;
- Hintergrundfarbe: #fff;
- Rand: 1px fest #ddd;
- Rand-Unterseite-Farbe: transparent;
- }
- .oma-omacro .oma-buynow .oma-footer {
- Rand-Top-Farbe: transparent;
- Hintergrundfarbe: transparent;
- }
- .oma-omacro .oma-backdrop {
- Anzeige: keine !important;
- }
- </style>