Incorporamento di Dealer Locator all'interno della pagina del sito web

Incorporamento di Dealer Locator all'interno della pagina del sito web

Puoi incorporare il localizzatore direttamente in una pagina. Supponendo che tu abbia eseguito i passaggi per aggiungere frammenti di codice acquista ora di omacro alla tua pagina, usa il seguente esempio per visualizzare il localizzatore all'interno della pagina stessa.

Per assistere a una dimostrazione dal vivo, visita il nostro sito di demo dal vivo

Un esempio di Dealer Locator dedicato con stili personalizzati.

Passaggio 1: aggiungi la classe CSS alla pagina
Assicurati di avere un elemento sulla pagina con il nome della classe "oma-omacro".
  1. <div class="oma-omacro"></div>

Passaggio 2: aggiungi JavaScript alla pagina

Aggiungi 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 Acquista ora. Questo script carica il widget una volta caricata la pagina anziché tramite un clic del pulsante.

La magia avviene all'interno della funzione omacro.buynow.widget.show() . Questa funzione accetta diversi parametri:
  1. Identificatore prodotto richiesto - "*" (per localizzatore rivenditore generico) o SKU o ID prodotto Omacro (preferibilmente SKU)
  2. Scheda Mercato : il valore può essere "online" o "locale" e specifica la scheda da mostrare immediatamente sul mercato.
  3. Codice paese ISO di 2 caratteri : "us", "ca", "au", ecc.

Esempio di localizzatore di rivenditori generici

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

Esempio di localizzatore di rivenditori basato sul prodotto

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

Passaggio 3: aggiungi il foglio di stile a cascata alla pagina

Aggiungi il seguente CSS (modifica se necessario) per regolare lo stile del contenuto Acquista ora in modo che venga visualizzato correttamente all'interno del documento della pagina.

  1. <style type="text/css">
  2. body.oma-modal-in {
  3. overflow: auto !importante;
  4. }
  5. .oma-omacro .oma-acquista ora {
  6. opacità: 1 !importante;
  7. display: blocco! importante;
  8. posizione: relativa !importante;
  9. in alto: auto! importante;
  10. destra: auto !importante;
  11. in basso: auto! importante;
  12. a sinistra: auto !importante;
  13. }
  14. .oma-omacro .oma-buynow .oma-dialog {
  15. trasformare: nessuno! importante;
  16. transizione: nessuna !importante;
  17. a sinistra: auto !importante;
  18. margin-right: auto !important;
  19. margin-left: auto !important;
  20. }
  21. .oma-omacro .oma-buynow .oma-dialog .oma-content {
  22. box-shadow: nessuno !importante;
  23. colore di sfondo: trasparente;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. display: nessuno;
  27. }
  28. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-close {
  29. display: nessuno;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. colore-bordo-inferiore: #ddd;
  33. colore di sfondo: trasparente;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. colore: #337ab7;
  37. colore di sfondo: trasparente;
  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. decorazione del testo: nessuna;
  42. colore di sfondo: #eee;
  43. bordo-colore: #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. colore: #555;
  49. cursore: predefinito;
  50. colore di sfondo: #fff;
  51. bordo: 1px solido #ddd;
  52. border-bottom-color: trasparente;
  53. }
  54. .oma-omacro .oma-buynow .oma-footer {
  55. border-top-color: trasparente;
  56. colore di sfondo: trasparente;
  57. }
  58. .oma-omacro .oma-sfondo {
  59. display: nessuno! importante;
  60. }
  61. </stile>