En el siguiente minitutorial de Loopeando.com aprenderemos a crear un carrito como el siguente:
Lo podéis ver en vivo en: https://elperezoso.es
Sus principales caracteristicas son:
- Marca el número de productos que hay en el carrito, en tiempo real y sin necesidad de hacer clic en él.
- Al pasar el ratón sobre el icono, se despliega la vista detalle mostrando todos los items que hemos seleccionado.
- En la lista detalle se muestra el precio total, el precio de cada item y el número de items comprados de cada tipo.
- Desde la vista detalle podemos: O bien ir al chekout o bien eliminar items directamente sin pasar por el checkout ni por la vista ampliada del carrito.
[resumen]
- Nuestro código
- Explicación del código
[titulo]Nuestro código[/titulo]
El código PHP que lo hace posible va situado en el archivo header.php de nuestro tema, y es el siguiente:
<div class="cart-box">
<ul class="d-flex justify-content-sm-between align-items-center">
<?php global $woocommerce; ?>
<li class="desplega_carrito" style="min-width: 180px;"><a href="https://elperezoso.es/carrito/"><img src="https://elperezoso.es/wp-content/uploads/2018/10/icon_cart.png" alt="cart-icon"><span class="total-pro"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></span><span class="my-cart"><span>Mis<br>Compras</span></span></a>
<ul class="ht-dropdown cart-box-width flyout">
<li>
<?php
//lista del producto del carrito
$items = $woocommerce->cart->get_cart();
foreach($items as $item => $values) {
$productDetail = wc_get_product( $values['product_id'] );
?>
<!-- Cart Box Start -->
<div class="single-cart-box">
<div class="cart-img">
<a href="#"><?php echo $productDetail->get_image(); ?></a>
<span class="pro-quantity"><?php echo $values['quantity'] ?></span>
</div>
<div class="cart-content">
<h6><a href="product.html"><?php echo $productDetail->get_title(); ?></a></h6>
<span class="cart-price"><?php echo get_post_meta($values['product_id'] , '_price', true); ?>€</span>
</div>
<a class="del-icone" href="<?php echo WC()->cart->get_remove_url( $item ); ?>"><i class="ion-close"></i></a>
</div>
<?php } ?>
<!-- Cart Box End -->
<!-- Cart Footer Inner Start -->
<div class="cart-footer">
<ul class="price-content">
<li>Total <span><?php echo WC()->cart->get_cart_total(); ?></span></li>
</ul>
<div class="cart-actions text-center">
<a class="cart-checkout" href="https://elperezoso.es/carrito/">Finalizar Compra</a>
</div>
</div>
<!-- Cart Footer Inner End -->
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Cart Box End Here -->
</div>
A continuación pasamos a explicar las partes más importantes de la programación.
[titulo]Explicación del código[/titulo]
En primer lugar hay que decirle a nuestra instalación de WordPress que vamos a comenzar a utilizar funciones de WoCommerce. Para ello realizamos la llamada:
<?php global $woocommerce; ?>
La función [codigo]get_cart_contents_count()[/codigo] nos ayudará a extraer la suma del [subraya_verde]número de items[/subraya_verde] que hay ahora mismo en el carrito.
Por lo tanto:
<?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
Imprimirá el número allá donde lo situemos.
Para [subraya_verde]extraer los productos del carrito[/subraya_verde] junto a sus precios, títulos, fotografías… debemos realizar un [codigo]foreach[/codigo] a la función [codigo]get_cart()[/codigo]:
$items = $woocommerce->cart->get_cart();
foreach($items as $item => $values) {
}
Las siguientes funciones:
[codigo]get_image()[/codigo]: Extrae el thumnail del producto [codigo]get_title()[/codigo]: Extrae el título del producto [codigo]get_remove_url()[/codigo]: Crea el enlace que borrará el producto [codigo]get_cart_total()[/codigo]: Nos aporta el sumatorio total de todos los precios de los productos del carrito [codigo]get_post_meta()[/codigo]: Extrae detalles del producto tales como precio, número de unidades de ese producto, etcPara utlilizar [codigo]get_post_meta()[/codigo] dentro del loop habrá que hacer lo siguiente:
//Extrae el precio del producto cuya id hemos facilitado <?php echo get_post_meta($values['product_id'] , '_price', true); ?>
Buenos días
Cómo hago para obtener el programa completo, y solo modificar los títulos y las imágenes?
Es gratuito o tiene algún costo?
GRACIAS!! Sos un crack en compartir tus conocimientos. Buscaba esto hace rato, y lo único que encontraba eran plugins. Me has ahorrado mucho tiempo de trabajo. Abrazo!
Hola Cristián, acabo de istalarlo y no se me ve. Que puede ser?
https://vetoriano.com/
Muchas gracias amigo de verdad te lo agradezco mucho sigue así compartiendo tus conocimientos