Cierre el menú desplegable del mini carrito automáticamente después de 2 segundos en WooCommerce

4 minutos de lectura

avatar de usuario
itayko

En mi tienda de woocommerce, EnlaceCambié el botón Agregar al carrito, cuando un usuario hace clic en el botón Agregar al carrito, el menú desplegable del carrito cae desde arriba, ¿cómo puedo cerrarlo después de 2 segundos a menos que lo toque (tema plano) alguien puede ayudarme a averiguarlo ¿Qué js u otra solución puedo agregar para que el menú desplegable del carrito se cierre solo después de 2 segundos?

Si alguien quiere agregar un cuadro de cantidad con +/- al lado de agregar al carrito que mostrará el menú desplegable del carrito aquí están los códigos: disfruta.

    <script>
// JS
function addToCartLink(evt, pid) {
    var x = jQuery("#quantity_" + pid);
    var y = evt.closest("div");
    var qty = y.getElementsByClassName("input-text")[0].value;

 const addToCartUrl="/?wc-ajax=add_to_cart";
    var xWWWFormUrlencodedData = "quantity=" + qty;
xWWWFormUrlencodedData += "&product_id=" + pid;
 jQuery.post(addToCartUrl, xWWWFormUrlencodedData, {
        withCredentials: true,
        headers: {
            'Cache-Control': 'no-cache',
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
            'Pragma': 'no-cache'
        }
    }).success(result => {
        if (result.error) {
            console.warn('The product has been added to the cart despite that the result object indicates an error!');
            return;
        }
        console.log('Success.', result);
        jQuery("div.widget_shopping_cart_content").replaceWith(result.fragments["div.widget_shopping_cart_content"]);
        jQuery("span.mega-menu-woo-cart-total").replaceWith(result.fragments["span.mega-menu-woo-cart-total"]);
        jQuery("span.mega-menu-woo-cart-count").replaceWith(result.fragments["span.mega-menu-woo-cart-count"]);
        jQuery(".header .cart-icon").replaceWith(result.fragments[".header .cart-icon"]);
        jQuery(".image-icon.header-cart-icon").replaceWith(result.fragments[".image-icon.header-cart-icon"]);
jQuery(".cart-price").replaceWith(result.fragments[".cart-price"]);
        jQuery("li.cart-item.has-icon.has-dropdown").addClass("current-dropdown");



    });

 return false;

}
</script>

y en funciones.php

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() && ! is_cart() ) {

        $html="<a rel="nofollow" data-product_id="". $product->id .'" onclick="addToCartLink(this,' . $product->id .')" class="add_to_cart_button product_type_simple button primary is-flat mb-0 is-small">הוסף לסל</a>';
        //$html="<a onclick="addToCartLink(this,". $product->id .')">הוסף לסל</a>';

        $html .= '<div class="quantity buttons_added">';
        $html .= '<input type="button"  value="-"  class="minus button is-form">';
        $html .= '<input type="number" id="quantity_'. $product->id .'" class="input-text qty text" step="1" min="0" max="9999" name="quantity" value="1" title="כמות" size="4" pattern="[0-9]*" inputmode="numeric" >';
        $html .= '<input type="button" value="+" class="plus button is-form">';
        $html .= '</div>';

    }
    return $html;
}

  • Debería proporcionarnos un enlace de sitio web en vivo (editando su pregunta, por favor)…

    – LoicTheAztec

    9 dic 2017 a las 20:15


  • Aqui esta el link Enlace, agregue un producto al carrito, el carrito caerá desde la parte superior, ¿cómo puedo agregar un js para cerrarlo después de 2 segundos? Gracias Loico 🙂

    – itayko

    10 de diciembre de 2017 a las 6:14


avatar de usuario
LoicTheAztec

Podrías intentar algo como esto (sin garantía ya que no puedo probarlo):

add_action( 'wp_footer', 'custom_jquery_script' );
function custom_jquery_script(){
    ?>
    <script>
        (function($){
            $('body').on( 'added_to_cart', function(){
                setTimeout( function(){
                    $('ul.nav.top-bar-nav > .cart-item').removeClass('current-dropdown');
                }, 2000 );
            });
        })(jQuery);
    </script>
    <?php
}

Explicaciones:

Cuando se agrega un artículo al carrito, la clase current-dropdown se agrega a:

<li class="cart-item has-icon has-dropdown">

y aplicará un CSS a este elemento html secundario para hacerlo visible (el contenido emergente del carrito):

<ul class="nav-dropdown nav-dropdown-default" style="">

Entonces, con mi código jQuery, capturo el evento delegado “cuerpo” added_to_cart y uso la función javascript setTimeout() para eliminar eso current-dropdown clase despues de 2 segundos (2000 milli seconds). Al eliminar la clase, oculta automáticamente la ventana emergente de contenido del mini carrito…

Ese debería ser el camino correcto.


si no funcionapuedes probar (2 alternativas):

1) para reemplazar en el código 'added_to_cart' por 'adding_to_cart' evento en su lugar
2) para reemplazar $('body').on( 'added_to_cart', function(){ por:

$('.add_to_cart_button').click( function(){

Espero que funcione…

  • De nuevo, gracias por tu ayuda. desafortunadamente no funcionó, probé todos los escenarios, ¿alguna idea de por qué? Gracias

    – itayko

    10 dic 2017 a las 13:50

  • @itayko Así que sé que puede ser el problema es: ¿Cómo incrustas este script? Incluso si no funciona en absoluto por ahora (recuerde que no puedo probarlo de verdad), esta respuesta no merece ser votada porque mis explicaciones son el proceso real…

    – LoicTheAztec

    10 de diciembre de 2017 a las 16:44


  • Estoy incrustando este código dentro del encabezado, lo intenté también en el pie de página, ¿te funciona en el modo de inspección? el carrito debe cerrarse automáticamente sin tocar con el mouse, ¿es posible? 🙁

    – itayko

    11 de diciembre de 2017 a las 16:10


  • Te voté, eres genial, desafortunadamente, todavía no funciona 🙁

    – itayko

    12 de diciembre de 2017 a las 10:03

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad