Ventana emergente lightbox en la acción add_to_cart de WooCommerce

Question

Ventana emergente lightbox en la acción add_to_cart de WooCommerce

8 may 2013, 15:28:52

Vistas: 38.7K

Votos: 5

Me gustaría crear una ventana modal 'pop-up' en WooCommerce que aparezca cuando se hace clic en el botón "Añadir al carrito". Esto debe ocurrir después de las acciones de WC que realmente añaden el producto al carrito pero antes/en lugar de cualquier redirección.

He encontrado varios hooks, acciones y filtros posibles/probables que pueden serme útiles, pero no estoy seguro de cuáles necesito y cómo usarlos correctamente (perdón, soy un principiante total en WooCom):

woocommerce_template_loop_add_to_cart
woocommerce_template_single_add_to_cart
woocommerce_after_add_to_cart_button
también está el filtro add_to_cart_redirect para $url

¡Tampoco estoy seguro de cómo activar realmente el lightbox para que aparezca desde PHP! (En HTML uso un elemento como un hipervínculo que debe ser clickeado, pero ¿cómo activar lo mismo en un punto determinado de la ejecución de PHP? -- ¿Necesito AJAX?)

Por último, estaba planeando usar ThickBox ya que viene incluido con WordPress, ¿hay alguna razón para evitarlo y/o una mejor opción disponible, o hay alguna implementación de lightbox incluida con WooCommerce?

¡Muchas gracias por toda la ayuda!

Bucky

235

jquery plugins thickbox

Comentarios

¡Gracias por el voto negativo! Aprecio que quizás esta no sea la pregunta más clara o directa, pero estaba intentando cubrir mucha ignorancia en un espacio pequeño. ¿La próxima vez podrías dejarme algunos consejos sobre cómo mejorar mi pregunta?

Bucky

9 may 2013 11:39:08

Todas las respuestas a la pregunta

Comentarios

¡Guau, gracias por una respuesta tan brillante, es perfecta! Probé prettyPhoto pero descubrí que era difícil modificar las dimensiones en CSS sin también cambiar las de las ventanas emergentes de la galería (aunque, en retrospectiva, un poco de jQuery podría haberlo solucionado). De todos modos, ¡gracias de nuevo! :)

Bucky

14 may 2013 07:49:10

adelval 832 · Accepted Answer · 2013-05-12T17:42:41Z

Lo siguiente me funciona para las páginas de archivo de productos (esto incluye tanto la página principal de la tienda como las páginas de archivo para categorías de productos, por ejemplo).

Mostrará el contenido actual del carrito en un thickbox. Elegí mostrar esto para este ejemplo simplemente porque son los datos que se obtienen a través de Ajax después de hacer clic en el botón de añadir al carrito, pero es posible que desees un tipo diferente de información en tu cuadro. Puedes obtener el product_id del producto recién añadido, por ejemplo, mirando los elementos html circundantes.

En el functions.php de tu tema (o en la definición de clase para el tema, si tienes una) probablemente haya alguna función 'enqueue_scripts'. Debes agregar esto a esta función para asegurarte de que el script thickbox se cargue.

if (is_woocommerce() && is_archive()) {
    wp_enqueue_script( 'frontend-custom', get_template_directory_uri() . '/js/frontend-custom.js', array("jquery"));
    add_thickbox();
}

En un archivo (en el directorio de tu tema) js/frontend-custom.js (o donde tengas el js de tu tema):

jQuery(document).ready(function($) {
    $('body').on('added_to_cart',function(e,data) {
        //alert('Added ' + data['div.widget_shopping_cart_content']);
        if ($('#hidden_cart').length == 0) { //añadir contenido del carrito solo una vez
            //$('.added_to_cart').after('<a href="#TB_inline?width=600&height=550&inlineId=hidden_cart" class="thickbox">View my inline content!</a>');
            $(this).append('<a href="#TB_inline?width=300&height=550&inlineId=hidden_cart" id="show_hidden_cart" title="<h2>Carrito</h2>" class="thickbox" style="display:none"></a>');
            $(this).append('<div id="hidden_cart" style="display:none">'+data['div.widget_shopping_cart_content']+'</div>');
        }
        $('#show_hidden_cart').click();
    });
});

Algunas notas adicionales:

Supongo que también puedes mostrar javascript directamente en la página desde php. En este caso, creo que probablemente querrás engancharte con add_action('woocommerce_ajax_added_to_cart', 'myfunction'); Esta acción se ejecuta dentro de woocommerce_ajax_add_to_cart() justo después de añadir un artículo al carrito (pasando la validación, etc.), pero antes de redirigir.
Las páginas de productos individuales no funcionan de la misma manera ('añadir al carrito' es allí un formulario php normal, no hay ajax involucrado).
No he probado esto, pero WooCommerce viene con su propio 'prettyphoto.js', que funciona añadiendo 'rel="prettyPhoto"' a un enlace href, de manera muy similar a como funciona la clase thickbox en el ejemplo anterior. Podrías probarlo para mantener la consistencia de diseño con WooCommerce.