[SOLUCIONADO] Corregir fancybox popup JS sencillo

[lepe]

Hola buenas

Tengo fancybox ya añadido en Prestashop 1.7 y estoy intentando añadir la class fancybox para que se abra un enlace en pop up.
Copie el codigo js desde otros ficheros que funciona modificandolo a mi class pero cuando doy click en lugar de abrir el popup me redirige al enlace.

Este es el código que añadi al JS principal de la tienda:

Código HTML:

$(document).ready(function(){
    $(".miclass").fancybox({
        'hideOnContentClick': false,
        'hideOnOverlayClick': true,
        'overlayOpacity': 0.4,
        'padding': 0,
    });
    return false;
});

Y este es el enlace que añado con mi class creada:

<a class="miclass" href="http://localhost/cas/content/1-entrega?content_only=1">Condiciones de entrega</a>

¿Sabeís que debería modificar para que el enlace no se abra en una pestaña nueva?

Lo que deseo es que el contenido de dicho enlace se muestre en el pop up y luego se cierre al hacer click

saludos

[lepe]

Nadie?

Intente añadir otro código pero me reporta un error de codigo js como si debería añadir "prototype" en lugar de "document.addEventListener"

https://developer.mozilla.org/es/doc...Not_a_function

Este es mi codigo añadido en el custom.js:
document.addEventListener("DOMContentLoaded", function (event) {
$("a.fancybox").fancybox();
});

En el ProductController.php añadí;
public function initContent()
{
$this->addJqueryPlugin('fancybox');


y el enlace es: <a class="fancybox" title="Popup test window" href="http://localhost/cas/content/1-entrega?content_only=1">Condiciones</a>

[ArturoGallegos]

Por tu titulo pensé que lo tendrías resuelto en caliente y compartirías la solución

Corregir fancybox popup JS sencillo

Venga pues vamos con la ayuda, empecemos por:
que versión de fancybox tienes instalada?
revisaste la documentación?

Revisaste la consola?

las herramientas de desarrollados apartado Red para verificar carguen todos los archivos necesarios?

Otra, ultima y muy importante....

ya revisaste la jerarquía de tu código?



recuerda que javascript corre en cascada, si llamas una función que aun no se crea dará error aunque esta sea cargada mas adelante.

--------------------------------------
Por la URL que muestras me da la impresión de que no es una imagen a lo que apunta.

[lepe]

Hola buenas

La version es fancyBox v2.1.5 ubicada en js\jquery\plugins\fancybox
Revise documentación pero me pierdo porque mis conocimiento de JS es 0.

Comenté sencillo porque pensé que con añadir 2 lineas como en Prestashop 1.6 funcionaria pero algo ha cambiado en Prestashop 1.7 que no es la version de fancybox que aún sigue siendo la misma 2.1.5

En PS 1.6 y anteriores funcionaba el siguiente código en global.js:

Código:

$(document).ready(function(){
	
	$('.myfancybox').fancybox({type:'ajax'});

y enlace: <a class="myfancybox" href="http://localhost/cas/content/1-delivery?content_only=1">Condiciones</a>

Sin embargo en PS 1.7 lo añado en custom.js y no funciona, he probado todos los códigos que encontré en la red sin suerte.
Cuando doy click al enlace no abre el popup y en consola me muestra el error "fancybox is not a function" y me sugiere ir a https://developer.mozilla.org/es/doc...Not_a_function

Parece ser que hay una class llamada "modal" que también sería posible utilizar para mostrar popup. Puedes ver el efecto clickando en la imagen del demo http://fo.demo.prestashop.com/es/art...ension-40x60cm

saludos

[ArturoGallegos]

El error es bastante claro
error "fancybox is not a function"

Este error es por 3 posibles causas

1.- la librería de fancybox no se esta cargando
2.- estas invocando a la función antes de cargar la librería
3.- estas cargando los archivos con async, esto hace que carguen mas rápidos pero no se respeta el orden y la secuencia de carga, lo que te lleva a errores.

Yo no se nada de prestashop y como cargue sus archivos pero si tu agregas tu código en custom.js
y al momento de cargar el sitio se carga primero este archivo y después fancybox.js
al momento de ejecutar la función fancybox esta no existe.


..................

Vamos a probar con esto,
1.- en tu navegador visita el sitio, una ves cargado presiona F12.
2.- Una vez que se habrá el panel de herramientas para desarrollo, selecciona el tab Network o Red, según tu idioma.
3.- Procede a presionar F5 y dejar que se recargue por completo tu sitio
4.- Una vez, terminado de recargar, busca en el listado, tus archivos js custom.js y fancybox.min.js o fancybox.js

¿Cual se cargo primero?

[lepe]

Hola Arturo

Gracias por tus consejos, estaba preparando un mensaje interminable de códigos

Afortunadamente el código que me ha funcionado es:

$(document).ready(function(){
$('.fancybox').fancybox({type:'ajax'});
});


Que es el código puro y duro del fancybox, en la anterior versión cambiaba $('.fancybox').fancybox por mi clase $('.miclasepropia').fancybox y funcionaba pero en PS 1.7 solo funca con este código sin poder añadir otras clases.

Saludos cordiales