Este es su identificador de empresa proporcionado por Omacro. Este ID se asignó cuando se creó originalmente la cuenta de su empresa y nunca cambiará. El fragmento de ejemplo anterior ya incluye el identificador de su empresa.
Este es un código de país ISO de dos dígitos ISO 3166-1 código alfa-2 o automático. Si no se proporciona, se presentará un mapa para que el usuario pueda seleccionar su país. Cuando se proporciona y no se establece en automático , al usuario se le presentan inmediatamente los resultados para el país especificado. Cuando se establece en automático, el país será determinado automáticamente por la dirección IP de los usuarios.
Cuando sea verdadero, el fragmento verificará que cada identificador de producto disponible en la página sea válido y devuelva un producto. Una vez que se complete la validación, el fragmento agregará la clase CSS respectiva al elemento desencadenante: obn-validate-pass u obn-validate-fail . Mientras la validación esté pendiente, el elemento activador tendrá la clase CSS obn-validate-pending.
Cuando sea verdadero, el fragmento ayudará con la depuración al registrar toda la actividad y las notificaciones en la consola de su navegador. Se recomienda deshabilitar esta función una vez que se complete la depuración.
Paso 1: para activar la ventana emergente, primero debemos modificar nuestra ruta de script en el Paso 1 y agregar un parámetro adicional llamado "modo" con un valor de "distribuidor". Vea el ejemplo a continuación:
- <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 &modo =distribuidor " asíncrono></script>
Paso 1: Asigne disparadores a los botones.
El siguiente ejemplo muestra una etiqueta de anclaje simple (enlace) que se usa como un disparador de botón. Puede usar fácilmente elementos existentes o nuevos en su sitio web simplemente agregando el parámetro requerido.
- <a href="#obn" data-product="*">Encuentre un distribuidor</a>
Los parámetros de activación tienen prioridad sobre los parámetros de fragmento, esto permite que los parámetros se configuren globalmente con excepciones si es necesario. Todos los parámetros de activación son atributos de datos HTML que requieren que comiencen con ' data- '.
producto requeridoEste es el identificador del producto y debe establecerse en "*".
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".
- <div class="oma-omacro"></div>
Paso 2: agregue JavaScript a la páginaAgregue 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 del localizador de distribuidores. Este script carga el widget una vez que se carga la página en lugar de hacer clic en un botón.
- <script>
- document.body.addEventListener("loaded.omacro.buynow", function (e) {
- e.preventDefault();
- omacro.buynow.widget.showDistributors();
- }, FALSO)
- </script>
Paso 3: agregue una hoja de estilo en cascada a la páginaAgregue el siguiente CSS (modifique según sea necesario) para ajustar el estilo del contenido del Localizador de distribuidores para que se represente correctamente dentro del documento de la página.
- <tipo de estilo="texto/css">
- cuerpo.oma-modal-in {
- desbordamiento: auto !importante;
- }
- .oma-omacro .oma-comprar ahora {
- opacidad: 1 !importante;
- pantalla: bloque !importante;
- posición: relativa !importante;
- arriba: auto !importante;
- derecha: auto !importante;
- abajo: auto !importante;
- izquierda: auto !importante;
- }
- .oma-omacro .oma-comprar ahora .oma-diálogo {
- transformar: ninguno !importante;
- transición: ninguna !importante;
- izquierda: auto !importante;
- margen derecho: auto !importante;
- margen izquierdo: auto !importante;
- }
- .oma-omacro .oma-comprar ahora .oma-diálogo .oma-contenido {
- box-shadow: ninguno !importante;
- color de fondo: transparente;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-header .oma-title {
- pantalla: ninguno;
- }
- .oma-omacro .oma-comprar ahora .oma-diálogo .oma-contenido .oma-cerrar {
- pantalla: ninguno;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs {
- borde-fondo-color: #ddd;
- color de fondo: transparente;
- }
- .oma-omacro .oma-buynow .oma-dialog .oma-content .oma-tabs>li>a {
- color: #337ab7;
- color de fondo: transparente;
- }
- .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 {
- texto-decoración: ninguno;
- color de fondo: #eee;
- color del borde: #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 {
- color: #555;
- cursor: predeterminado;
- color de fondo: #fff;
- borde: 1px sólido #ddd;
- borde-fondo-color: transparente;
- }
- .oma-omacro .oma-comprar ahora .oma-footer {
- borde-superior-color: transparente;
- color de fondo: transparente;
- }
- .oma-omacro .oma-fondo {
- pantalla: ninguno !importante;
- }
- </estilo>