Questo è il tuo identificatore aziendale fornito da Omacro. Questo ID è stato assegnato quando il tuo account aziendale è stato originariamente creato e non cambierà mai. L'esempio di snippet sopra include già l'identificativo della tua azienda.
Questo è un codice paese ISO a due cifre ISO 3166-1 alpha-2 code o auto. Se non viene fornita, verrà presentata una mappa per consentire all'utente di selezionare il proprio paese. Se fornito e non impostato su auto , all'utente vengono immediatamente presentati i risultati per il paese specificato. Se impostato su auto, il paese sarà determinato automaticamente dall'indirizzo IP dell'utente.
Se vero, lo snippet verificherà che ogni identificatore di prodotto disponibile sulla pagina sia valido e restituisca un prodotto. Una volta completata la convalida, lo snippet aggiungerà la rispettiva classe CSS all'elemento trigger: obn-validate-pass o obn-validate-fail . Mentre la convalida è in sospeso, l'elemento trigger avrà la classe CSS obn-validate-pending.
Se vero, lo snippet assisterà con il debug registrando tutte le attività e le notifiche nella console del browser. Si consiglia di disabilitare questa funzione una volta completato il debug.
Passaggio 1: per attivare la finestra popup, dobbiamo prima modificare il percorso dello script nel passaggio 1 e aggiungere un parametro aggiuntivo chiamato "mode" con un valore di "distributor". Vedi l'esempio qui sotto:
- <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 =distributore " async></script>
Passaggio 1: assegna il trigger ai pulsanti.
L'esempio seguente mostra un semplice tag di ancoraggio (collegamento) utilizzato come pulsante di attivazione. Puoi facilmente utilizzare elementi esistenti o nuovi sul tuo sito Web semplicemente aggiungendo il parametro richiesto.
- <a href="#obn" data-product="*">Trova un distributore</a>
I parametri trigger hanno la priorità sui parametri snippet, ciò consente di impostare i parametri globalmente con eccezioni, se necessario. Tutti i parametri trigger sono attributi di dati HTML che richiedono che inizino con ' data- '.
Prodotto necessarioQuesto è l'identificatore del prodotto e deve essere impostato su "*".
Passaggio 1: aggiungi la classe CSS alla pagina.
Assicurati di avere un elemento sulla pagina con il nome della classe "oma-omacro".
- <div class="oma-omacro"></div>
Passaggio 2: aggiungi JavaScript alla paginaAggiungi il seguente script alla pagina in qualsiasi punto sotto l'elemento HTML indicato nel passaggio 1 . Lo script è progettato per attivare la funzione di rendering all'interno dello script Distributor Locator. Questo script carica il widget una volta caricata la pagina anziché tramite un clic del pulsante.
- <copione>
- document.body.addEventListener("loaded.omacro.buynow", function (e) {
- e.preventDefault();
- omacro.buynow.widget.showDistributors();
- }, falso)
- </script>
Passaggio 3: aggiungi il foglio di stile a cascata alla paginaAggiungi il seguente CSS (modifica se necessario) per regolare lo stile del contenuto di Distributor Locator in modo che venga visualizzato correttamente all'interno del documento della pagina.
- <style type="text/css">
- body.oma-modal-in {
- overflow: auto !importante;
- }
- .oma-omacro .oma-acquista ora {
- opacità: 1 !importante;
- display: blocco! importante;
- posizione: relativa !importante;
- in alto: auto! importante;
- destra: auto !importante;
- in basso: auto! importante;
- a sinistra: auto !importante;
- }
- .oma-omacro .oma-buynow .oma-dialog {
- trasformare: nessuno! importante;
- transizione: nessuna !importante;
- a sinistra: auto !importante;
- margin-right: auto !important;
- margin-left: auto !important;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content {
- box-shadow: nessuno !importante;
- colore di sfondo: trasparente;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
- display: nessuno;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
- display: nessuno;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
- colore-bordo-inferiore: #ddd;
- colore di sfondo: trasparente;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
- colore: #337ab7;
- colore di sfondo: trasparente;
- }
- .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 {
- decorazione del testo: nessuna;
- colore di sfondo: #eee;
- bordo-colore: #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 {
- colore: #555;
- cursore: predefinito;
- colore di sfondo: #fff;
- bordo: 1px solido #ddd;
- border-bottom-color: trasparente;
- }
- .oma-omacro .oma-buynow .oma-footer {
- border-top-color: trasparente;
- colore di sfondo: trasparente;
- }
- .oma-omacro .oma-sfondo {
- display: nessuno! importante;
- }
- </stile>