php - Los artículos del carrito de encabezado de Ajaxify cuentan en Woocommerce

jquery wordpress

Question

Estoy creando un tema integrado de WooCommerce personalizado para WordPress.

Tengo un blob en la parte superior que muestra el número total de artículos en el carrito, quiero actualizar este blob usando Jquery (sin recargar la página). Pude aumentar el número de artículos obteniendo el número actual en el blob y al aumentarlo en +1 por cada clic, el problema es que agregar al carrito tiene una opción para seleccionar la cantidad de artículos que desea agregar al carrito. Entonces, si selecciono 3 elementos y hago clic en el botón, el blob solo aumenta en uno.

Puedo crear una forma de obtener el número de elementos que se agregan desde el front-end, pero creo que es innecesario. Quiero poder obtener el número total de sesiones de PHP usando jquery para que con cada clic de agregar elemento o eliminar elemento obtenga el número actual dinámicamente del servidor.

Lo que he hecho hasta ahora es crear un archivo reloadCart.php que refleje el total del carrito, aquí está el código

<?php
require(''../../../wp-blog-header.php'');
global $woocommerce;
echo $woocommerce->cart->get_cart_contents_count();
?>

Cuando visito esta página, hace eco de los totales de los elementos actuales, pero no puedo obtener estos datos de jquery, ha pasado algún tiempo desde la última vez que usé AJAX y no he trabajado en proyectos web durante mucho tiempo, pero con lo que recuerdo, el La llamada AJAX que estoy haciendo es correcta.

He intentado usar las funciones get () y post () de jquery, así como la función ajax () normal, pero nada parece funcionar. ¿Puede ayudarme alguien, por favor?

$(".ajax_add_to_cart").click(function () {
   /*$("#bag-total").html(function () {
        var bagTotal = parseInt($(this).html());
        return ++bagTotal;
    });*/
    alert(''clicked'');
    $.get("<?php echo get_template_directory_uri(); ?>/reloadCart.php", function(data){
        alert("Data: " + data);
    });
}); 

Las líneas que se comentan son las que estaba usando anteriormente, para agregar el total del carrito obteniendo el número actual del carrito desde el front-end.

Cualquier ayuda sería apreciada. ¡Gracias por adelantado!

Answer 1

No he usado woocommerce antes, pero una opción bastante simple cuando dices en tu publicación:

Cuando visito esta página, se hacen eco de los totales de artículos actuales, pero no puedo obtener estos datos de JQuery

... sería usar una variable de JavaScript del lado del usuario para la pantalla, y luego simplemente llamar a los métodos de actualización de PHP para agregar artículos a su carrito usando AJAX (que no se muestra a continuación porque no ha proporcionado ese código).

<?php
    //hardcoded value for $woocommerce->cart->get_cart_contents_count()
    $woocommerce = 59;
?>
<button class="ajax_add_to_cart">Add to cart</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    //user sided variable for PHP value
    var total = parseInt($(".totalCost").text()); 
    $(".ajax_add_to_cart").click(function(){
        total++;                     //add to cart
        $(".totalCost").text(total); //update
    });
});
</script>

<p class="totalCost">
    <?php echo json_encode($woocommerce); ?>
</p>

Puede copiar y probar este fragmento en: http://phpfiddle.org/

Básicamente, en el código anterior, configuro el valor de PHP como texto de párrafo en la carga de la página y luego leo ese valor en una variable JS para alterar los datos en el lado del cliente de la aplicación y luego actualizo el texto de la pantalla según sea necesario.

Answer 2

Para cualquiera que quiera la implementación adecuada de ajax, este es el camino a seguir.

en functions.php

add_action(''wp_ajax_cart_count_retriever'', ''cart_count_retriever'');
add_action(''wp_ajax_nopriv_cart_count_retriever'', ''cart_count_retriever'');
function cart_count_retriever() {
    global $wpdb;
    echo WC()->cart->get_cart_contents_count();
    wp_die();
}

en su archivo de secuencia de comandos (suponiendo que haya conquistado el archivo de secuencia de comandos y haya pasado el objeto ajax a la secuencia de comandos. También debe colocar este bloque en un setInterval o en alguna otra acción jquery.

var data = {
  ''action'': ''cart_count_retriever''
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
  alert(''Got this from the server: '' + response);
});

Answer 3

No debe usar ninguna recarga para actualizar el recuento de contenido del carrito ... En su lugar, debe usar el gancho de acción dedicado woocommerce_add_to_cart_fragments que funciona con Ajax .

1) El HTML que se actualizará: por lo tanto, primero en el archivo header.php su tema, debe incrustar el recuento del carrito en una etiqueta html específica con un ID único definido (o una clase), por ejemplo algo como:

?>
    <div id="mini-cart-count"></div>
<?php

o:

echo ''<div id="mini-cart-count"></div>'';

2) El código:

add_filter( ''woocommerce_add_to_cart_fragments'', ''wc_refresh_mini_cart_count'');
function wc_refresh_mini_cart_count($fragments){
    ob_start();
    ?>
    <div id="mini-cart-count">
        <?php echo WC()->cart->get_cart_contents_count(); ?>
    </div>
    <?php
        $fragments[''#mini-cart-count''] = ob_get_clean();
    return $fragments;
}

si usa una clase en su etiqueta html, reemplazará [''#mini-cart-count''] por [''.mini-cart-count''] . Este gancho también se utiliza para actualizar el contenido del mini carrito.

El código va en el archivo function.php de su tema secundario activo (o tema) o también en cualquier archivo de complemento.

Desde hace unos años global $woocommerce; + $woocommerce->cart está desactualizado y reemplazado por WC()->cart para acceder al objeto de carrito WooCommerce.

Si necesita jQuery para forzar la actualización de ese recuento, puede probar wc_fragment_refresh o wc_fragments_refreshed eventos delegados, como:

$(document.body).trigger(''wc_fragment_refresh'');

o:

$(document.body).trigger(''wc_fragments_refreshed'');