✅Carrusel de Productos en Woocommerce (Sin Plugins)

Este código para WordPress es como la orquestación detrás de bambalinas que hace que tu sitio web sea más atractivo y funcional. Su función principal es mejorar la experiencia del usuario al incorporar un carrusel de productos atractivo y permitir que los visitantes agreguen productos al carrito sin tener que recargar la página.

1. Mejora Visual:
   • El código utiliza Slick Carousel para crear un carrusel de productos que se desplaza de manera elegante. Este tipo de presentación es visualmente atractivo y puede destacar productos de una manera más dinámica.
2. Interactividad sin Recargar la Página:
   • Gracias a la tecnología AJAX, los usuarios pueden agregar productos al carrito sin tener que cargar nuevamente la página. Esto mejora la eficiencia y hace que la experiencia de compra sea más fluida.
3. Iconos Personalizados:
   • Además, se incorpora la biblioteca de iconos Font Awesome, lo que permite el uso de iconos personalizados, como el carrito de compras, para hacer que la navegación por el sitio sea más intuitiva.
4. Personalización Fácil:
   • Si eres un propietario de un sitio web de comercio electrónico que utiliza WordPress y WooCommerce, este código facilita la incorporación de un carrusel de productos con funciones interactivas. Además, la personalización del aspecto y comportamiento del carrusel es sencilla gracias a la estructura del código.
5. Caso de Uso: Tienda en Línea:
   • Imagina tener una tienda en línea donde deseas resaltar algunos productos destacados o promociones. Este código te permite hacerlo de manera llamativa y permite a los visitantes agregar productos al carrito sin interrupciones.

En resumen, este código contribuye a hacer tu sitio web más atractivo, interactivo y eficiente para los usuarios, especialmente aquellos que están explorando productos en una tienda en línea.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

function enqueue_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');

function enqueue_slick_scripts() {
    // Agrega Slick Carousel desde CDN
    wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);
    wp_enqueue_style('slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null);

    // Agrega tu script personalizado después de que se cargue Slick
    wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array('jquery', 'slick-js'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_slick_scripts');

function enqueue_fontawesome() {
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'enqueue_fontawesome');

function slider_productos_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'productos' => '', // Lista de IDs de productos separadas por comas
            'mostrar'   => 4,  // Número predeterminado de productos a mostrar
        ),
        $atts,
        'slider_productos'
    );

    // Obtén las IDs de productos proporcionadas en el shortcode
    $productos_ids = array_map('trim', explode(',', $atts['productos']));
    $productos_a_mostrar = intval($atts['mostrar']);

    ob_start(); // Inicia el almacenamiento en búfer de salida
    ?>
    <style>
        /* Estilos para el carrusel */
        .productos-carrusel {
            margin: 10px; /* Reduce el margen para reducir la altura del contenedor */
            position: relative;
            overflow: hidden; /* Oculta el contenido que sobresale del contenedor */
        }

        .producto-item {
            box-sizing: border-box;
            width: calc(<?php echo 100 / $productos_a_mostrar; ?>% - 20px);
            height: auto;
            margin: 20px 10px; /* Ajusta el margen superior e inferior */
            padding: 10px; /* Ajusta el relleno */
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
            transition: transform 0.3s ease-in-out;
        }

        .producto-item:hover {
            transform: scale(1.05);
        }

        .producto-item img {
            width: 100%; /* Ajusta el ancho al 100% del contenedor */
            height: auto; /* Ajusta la altura al 100% del contenedor */
            object-fit: cover; /* Mantiene la proporción y recorta la imagen para llenar el contenedor */
            margin: 0 auto 10px; /* Centra la imagen horizontalmente y agrega margen inferior */
            border-radius: 4px;
        }



        .add-to-cart-container {
            display: flex;
            align-items: center;
            justify-content: center; /* Añade esta línea para centrar horizontalmente */
            margin-top: 15px;
            text-align: center; /* Añade esta línea para centrar los elementos en línea */
        }



        .add-to-cart {
            cursor: pointer;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            white-space: nowrap;
            user-select: none;
            border: 1px solid ;
            color: #fff;
            background-color: #007bff;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .add-to-cart:hover {
            background-color: white;
			color: #007bff;
        }

        .quantity-selector {
            max-width: 60px;
            width: 60px;
            padding: 5px;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }

        /* Estilos personalizados para el título */
        .producto-item h3 {
            font-size: 14px; /* Tamaño del título */
            color: #333; /* Color del título */
        }

        /* Estilos personalizados para el precio */
        .producto-item p {
            font-size: 20px; /* Tamaño del precio */
            color: #007bff; /* Color del precio */
            margin-top: 5px; /* Espacio superior del precio */
        }

        /* Estilos para las estrellas de calificación */
        .product-rating {
            margin-top: 5px;
            color: #f39c12;
            display: flex;
            justify-content: center;
        }

        .product-rating .star {
            display: inline-block;
            margin-right: 2px;
        }

        /* Estilos para las flechas */
.slick-prev,
.slick-next {
    font-size: 24px;
    color: #007bff;
    z-index: 1;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-prev:before,
.slick-next:before {
    display: inline-block;
    content: '\2190' !important; /* Código Unicode para la flecha hacia la izquierda */
}

.slick-next:before {
    content: '\2192' !important; /* Código Unicode para la flecha hacia la derecha */
}

    </style>

    <div class="productos-carrusel">
        <?php
        // Realiza una solicitud AJAX para obtener la información de los productos específicos
        $query_args = array(
            'post_type' => 'product',
            'post__in' => $productos_ids,
        );
        $productos_query = new WP_Query($query_args);

        if ($productos_query->have_posts()) :
            while ($productos_query->have_posts()) : $productos_query->the_post();
                global $product;

                // Obtén la información del producto mediante la API de WooCommerce
                $product_data = wc_get_product($product->get_id());
                ?>
                <div class="producto-item">
                    <a href="<?php echo get_permalink($product->get_id()); ?>">
                        <?php echo $product_data->get_image(); ?>
                        <h3><?php the_title(); ?></h3>
                    </a>

                    <!-- Muestra las estrellas de calificación -->
                    <div class="product-rating">
                        <?php echo wc_get_rating_html($product_data->get_average_rating()); ?>
                    </div>

                    <p><?php echo $product_data->get_price_html(); ?></p>
					
					<a href="<?php echo wc_get_cart_url(); ?>" class="cart-icon" title="Ir al carrito">
                          <i class="fas fa-shopping-cart"></i>
                           </a>
					
                     <div class="add-to-cart-container">
                         <input type="number" class="quantity-selector" value="1" min="1">
						 <button data-product-id="<?php echo $product->get_id(); ?>" class="add-to-cart">Añadir al carrito</button>
                         
                      </div>


                </div>
            <?php
            endwhile;
            wp_reset_postdata();
        endif;
        ?>
    </div>

    <script>
        jQuery(document).ready(function($) {
            // Inicializa el carrusel utilizando Slick
            $('.productos-carrusel').slick({
                slidesToShow: <?php echo $productos_a_mostrar; ?>,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2000,
                arrows: true,
                prevArrow: '<button type="button" class="slick-prev"></button>',
                nextArrow: '<button type="button" class="slick-next"></button>',
                responsive: [
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                        }
                    },
                ]
            });

            // Maneja el clic en el botón "Añadir al carrito"
            $('.add-to-cart').on('click', function() {
                var productId = $(this).data('product-id');
                var quantity = $(this).siblings('.quantity-selector').val();

                // Añade el producto al carrito utilizando la API de WooCommerce
                $.ajax({
                    type: 'POST',
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    data: {
                        action: 'add_product_to_cart',
                        product_id: productId,
                        quantity: quantity,
                    },
                    success: function(response) {
                        // Crea el contenido de la alerta
                        var alertContent = 'Producto añadido al carrito\n\n';

                        // Muestra la alerta
                        alert(alertContent);
                    }
                });
            });
        });
    </script>

    <?php
    return ob_get_clean(); // Devuelve el contenido del búfer de salida
}
add_shortcode('slider_productos', 'slider_productos_shortcode');

// Función para añadir un producto al carrito mediante la API de WooCommerce
function add_product_to_cart() {
    $product_id = $_POST['product_id'];
    $quantity = $_POST['quantity'];

    WC()->cart->add_to_cart($product_id, $quantity);

    wp_die(); // Necesario para finalizar la solicitud AJAX
}
add_action('wp_ajax_add_product_to_cart', 'add_product_to_cart');
add_action('wp_ajax_nopriv_add_product_to_cart', 'add_product_to_cart');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Enqueue de jQuery:

• La función enqueue_jquery asegura que la biblioteca jQuery esté disponible para su uso en el sitio web.

Enqueue de Scripts y Estilos de Slick Carousel:

• enqueue_slick_scripts encola los scripts y estilos necesarios para implementar un carrusel de imágenes utilizando la biblioteca Slick Carousel.
• Se incluye el script principal de Slick Carousel, su hoja de estilos CSS y un script personalizado que depende de jQuery y Slick Carousel.

Enqueue de Font Awesome:

• enqueue_fontawesome carga la hoja de estilos de Font Awesome desde una CDN, permitiendo la utilización de iconos en el sitio.

Shortcode para Mostrar un Carrusel de Productos:

• La función slider_productos_shortcode define un shortcode [slider_productos] que puede ser utilizado en las páginas o entradas del sitio.
• Los atributos del shortcode incluyen:
  • productos: Una lista de IDs de productos separadas por comas que se mostrarán en el carrusel.
  • mostrar: Número predeterminado de productos a mostrar en el carrusel (por defecto, 4).
• Se utiliza un búfer de salida para almacenar el HTML y el script JavaScript necesarios para construir y controlar el carrusel de productos.

[slider_productos mostrar="5" productos="1328,1329,1330,1331,1321,1328,1320"]Lenguaje del código: JSON / JSON con comentarios (json)

Funcionalidad de AJAX para Agregar Productos al Carrito:

• La función add_product_to_cart se encarga de manejar la lógica AJAX para agregar productos al carrito de WooCommerce.
• Se configura para manejar tanto a usuarios autenticados como no autenticados.
• Se envían parámetros como product_id y quantity a través de la solicitud AJAX para agregar el producto correspondiente al carrito.

En conjunto, este código proporciona una integración efectiva de jQuery, Slick Carousel y Font Awesome, permitiendo la creación de un carrusel de productos que los usuarios pueden interactuar y también agregar al carrito sin necesidad de recargar la página.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.