Incrustación del localizador de distribuidores en la página del sitio web

Incrustación del localizador de distribuidores en la página del sitio web

Puede incrustar el localizador directamente en una página. Suponiendo que haya seguido los pasos para agregar fragmentos de código de compra ahora de omacro a su página, use el siguiente ejemplo para representar el localizador dentro de la página misma.

Para ver una demostración en vivo, visite nuestro sitio de demostración en vivo

Un ejemplo de un localizador de distribuidores dedicado con estilos personalizados.

Paso 1: agregue la clase CSS a la página
Asegúrese de tener un elemento en la página con el nombre de clase de "oma-omacro".
  1. <div class="oma-omacro"></div>

Paso 2: agregue JavaScript a la página

Agregue el siguiente script a la página en cualquier lugar debajo del elemento HTML mencionado en el Paso 1 . La secuencia de comandos está diseñada para activar la función de procesamiento dentro de la secuencia de comandos Comprar ahora. Este script carga el widget una vez que se carga la página en lugar de hacer clic en un botón.

La magia ocurre dentro de la función omacro.buynow.widget.show() . Esta función acepta varios parámetros:
  1. Identificador de producto requerido : "*" (para el localizador de distribuidores genérico) o SKU o ID de producto de Omacro (se prefiere SKU)
  2. Pestaña de mercado : el valor puede ser "en línea" o "local" y especifica la pestaña de mercado que se mostrará de inmediato.
  3. Código de país ISO de 2 caracteres : "us", "ca", "au", etc.

Ejemplo de localizador de distribuidores generales

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

Ejemplo de localizador de distribuidores basado en productos

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

Paso 3: agregue una hoja de estilo en cascada a la página

Agregue el siguiente CSS (modifique según sea necesario) para ajustar el estilo del contenido Comprar ahora para que se represente correctamente dentro del documento de la página.

  1. <tipo de estilo="texto/css">
  2. cuerpo.oma-modal-in {
  3. desbordamiento: auto !importante;
  4. }
  5. .oma-omacro .oma-comprar ahora {
  6. opacidad: 1 !importante;
  7. pantalla: bloque !importante;
  8. posición: relativa !importante;
  9. arriba: auto !importante;
  10. derecha: auto !importante;
  11. abajo: auto !importante;
  12. izquierda: auto !importante;
  13. }
  14. .oma-omacro .oma-comprar ahora .oma-diálogo {
  15. transformar: ninguno !importante;
  16. transición: ninguna !importante;
  17. izquierda: auto !importante;
  18. margen derecho: auto !importante;
  19. margen izquierdo: auto !importante;
  20. }
  21. .oma-omacro .oma-comprar ahora .oma-diálogo .oma-contenido {
  22. box-shadow: ninguno !importante;
  23. color de fondo: transparente;
  24. }
  25. .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
  26. pantalla: ninguno;
  27. }
  28. .oma-omacro .oma-comprar ahora .oma-diálogo .oma-contenido .oma-cerrar {
  29. pantalla: ninguno;
  30. }
  31. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
  32. borde-fondo-color: #ddd;
  33. color de fondo: transparente;
  34. }
  35. .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
  36. color: #337ab7;
  37. color de fondo: transparente;
  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. texto-decoración: ninguno;
  42. color de fondo: #eee;
  43. color del borde: #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. color: #555;
  49. cursor: predeterminado;
  50. color de fondo: #fff;
  51. borde: 1px sólido #ddd;
  52. borde-fondo-color: transparente;
  53. }
  54. .oma-omacro .oma-comprar ahora .oma-footer {
  55. borde-superior-color: transparente;
  56. color de fondo: transparente;
  57. }
  58. .oma-omacro .oma-fondo {
  59. pantalla: ninguno !importante;
  60. }
  61. </estilo>