0

Soy novato en esto y estoy con una tienda en Wordpress.. Ahora re-formulo la pregunta..

Voy probando validar por el atributo data-product_id los 15 productos que están en la 1* página, con los que se hayan agregado al carrito.

Donde sumo una clase al botón Agregar + , si se encuentran en el carrito.

Y al estar dentro del carrito cuando se elimina el producto también se elimina dicha clase.

Ésta validación se ejecuta al cargar la página (tanto si se retrocede desde otra página) y cuando se agrega ó elimina un producto del carrito.

=> Pude hacerlo solo con el primer producto, pero quiero que valide todos los productos que estan en el carrito con los visibles en la tienda.

Si alguien sabe y puede ayudarme se lo re agradezco! =)

Les adjunto un fragmento el código que pude lograr..

HTML

<!--ESTRUCTURA DE 1 PRODUCTO DE 12 EN LA PRIMERA PAGINA-->
    <li class="cart" enctype="multipart/form-data">
        <button data-quantity="1" data-product_id="2251" class="add_to_cart_button">Agregar +</button>
    </li>
    <li class="cart" enctype="multipart/form-data">
        <button data-quantity="1" data-product_id="2255" class="add_to_cart_button">Agregar +</button>
    </li>

<!-- ESCTRUCTURA DE 1 PRODUCTO AGREGADO AL MINI-CARRITO -->
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <button class="remove_from_cart_button" aria-label="Borrar este artículo" data-product_id="2251" data-cart_item_key="d5e2c0adad503c91f91df240d0cd4e49">X</button>
    </li>
    <li class="woocommerce-mini-cart-item mini_cart_item">
        <button class="remove_from_cart_button" aria-label="Borrar este artículo" data-product_id="2255" data-cart_item_key="d5e2c0adad503c91f91df240d0cd4e49"">X</button>
    </li>

JS

        const $id_cart_button = document.querySelector('.add_to_cart_button'),
              $id_miniCart = document.querySelector('.mini_cart_item button');

        let dataIdButton = $id_cart_button.dataset.product_id,
            dataIdCart = $id_miniCart.dataset.product_id;

        function enCarrito() {
            if (dataIdCart === dataIdButton) {
                $id_cart_button.classList.add("blue");
                $id_cart_button.innerHTML = "En el Carrito ";
            }
        };

        function borrarClaseEnCarrito() {
            if (dataIdCart === dataIdButton) {
                $id_cart_button.classList.remove("blue");
                $id_cart_button.innerHTML = "Agregar +";
            }
        };

        window.onload = enCarrito();

        $id_cart_button.addEventListener("click", enCarrito);
        $id_miniCart.addEventListener("click", borrarClaseEnCarrito);
2
  • y cual es el error???
    – user46896
    el 12 oct. 2021 a las 19:55
  • no puedo ejecutar el código PHP desde JS cuando se carga la pagina, (me refiero cuando se hace un retroceso o avance desde los botones del explorador) no se si estará mal planteado... el 13 oct. 2021 a las 1:34

1 respuesta 1

1

En WordPress las funciones ajax funcionan de forma diferente, lo primero que tienes que hacer es registrar un nuevo archivo js que se encargara de procesar la información de la llamada ajax, usado la función wp_enqueue_script, luego obtener ese archivo creado usando la función wp_localize_script.

Para poder hacer una llamada ajax esta debe ser procesada mediante el archivo ajax.php, deberá poseer un action que se conectara a la función php que se ejecutara y por seguridad pasar un nonce para evitar posibles problemas de seguridad.

Este código no lo he probado por lo que no estoy seguro si servirá, pero puede usarlo como punto de partida.

Agrega lo siguiente a su archivo functions.php

// Encolando Archivo

function customAjaxFunctions() {

    // Encolamos el archivo js
    wp_enqueue_script( 'ajax-cart', get_stylesheet_directory_uri( '/ajax.js',__FILE__ ),array( 'jquery' ) );

    // Obtenemos el archivo js y le pasamos la url del archivo admin-ajax.php, pasamos un nonce y la action de la función que ejecutaremos
    wp_localize_script( 'ajax-cart', 'ajax_vars', array(
        'url'    => admin_url( 'admin-ajax.php' ),
        'nonce'  => wp_create_nonce( 'ajax-nonce' ),
        'action' => 'cart_verification',
    ) );

}
add_action( 'wp_enqueue_scripts', 'customAjaxFunctions' );

// Creando la función

function verificar_carrito() {

    // Obtenemos el id del producto actual
    $product_id = get_the_ID();
    $in_cart = false;

    // Verificamos que exista en el carrito
    foreach( WC()->cart->get_cart() as $cart_item ) {
       $product_in_cart = $cart_item['product_id'];
       if ( $product_in_cart === $product_id ) $in_cart = true;
    }

    // Si el producto existe hacemos un echo del texto a mostrar
    if ( $in_cart ) {
        echo 'En el Carrito - ¿Añadir +?';
    }

}
add_action( 'wp_ajax_nopriv_cart_verification', 'verificar_carrito' );
add_action( 'wp_ajax_cart_verification', 'verificar_carrito' );

// La función wp_ajax_nopriv permite ejecutar la llamada ajax en usuarios no autenticados
// La función wp_ajax permite ejecutar la llamada ajax en usuarios autenticados
// A esta función se le pasa el action "cart_verification" que habiamos registrado anteriormente

En su Archivo ajax.js

jQuery(document).ready(function ($) {

    // Creamos la función que ejecutara nuestro código
    function get_product_cart() {
        jQuery.ajax({
            type: "post",
            url: ajax_vars.url, // Pasamos la url del archivo admin-ajax.php
            data: "action=" + ajax_vars.action + "&nonce=" + ajax_vars.nonce, // Enviamos el "action" a ejecutar junto con el nonce
            success: function(result){
                let newResult = result.substring(0, result.length - 1);
                // Si el resultado el correcto, lo pintamos en el hmtl del boton de woocommerce
                $('button[name="add-to-cart"]').html( newResult );
            }
        });
    }

    // Lanzamos la función
    get_product_cart();

});

Con eso habrá realizado una comprobación mediante ajax y pintado el resultado en el DOM.

Puede usar este código de referencia para extenderlo y realizar lo que desea.

Necesitara obligatoriamente pintar el resultado en el DOM, pues solo hacer la verificación no hará que el DOM cambie, por lo que si quiere hacerlo con varios productos a la vez lo mejor seria trabajar con arrays.

1
  • lo probé rápidamente pero no me funciono, mañana me sentare con mas tiempo. Gracias por tu respuesta! el 13 oct. 2021 a las 1:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.