Carrito desplegable en Magento
11

oct

 

Carrito desplegable en Magento

Carrito desplegable en Magento: Aumenta la experiencia de compra de tu ecommerce

Cuando nos encontramos navegando por un ecommerce, son muchas las veces que queremos visualizar de forma rápida y sin la necesidad de tener que cargar una página independiente el contenido de nuestro carrito. Por defecto, si bien es cierto que Magento dispone para ello de un bloque especifico en la columna lateral, los temas por defecto e incluso muchas plantillas de pago no implementan la funcionalidad de un carrito desplegable en la cabecera donde consultar rápidamente los productos que hemos ido añadiendo. En este nuevo tutorial del blog especialista en Magento vamos a ver como a partir del tema Modern, tema disponible en una instalación base, podemos lograr fácilmente un carrito desplegable en Magento situado en la cabecera de nuestra tienda online.

Carrito desplegable en Magento: Definición del fichero local.xml

Emplearemos el fichero local.xml para añadir nuestras actualizaciones en le layouta de Magento. El tema Modern no dispone de este fichero por lo que procederemos a su creación. La ruta del fichero es:

app/design/frontend/default/modern/layout/local.xml

El contenido del fichero local xml es el siguiente:

<?xml version="1.0" encoding="UTF-8"?>

<layout version="0.1.0">
    <default>
        <!-- Carrito desplegable en Magento: Quitamos el carrito de la columna lateral izquierda -->
        <reference name="left">
            <action method="unsetChild"><name>cart_sidebar</name></action>
        </reference>
        
    	<!-- Carrito desplegable en Magento: Empleamos el local.xml para ubicar el bloque del carrito en la cabecera. -->
    	<reference name="header">
            <!-- Carrito desplegable en Magento: Copy paste de base/default/layout/checkout.xml -->
            <block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/topcart.phtml" before="-">
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
                    <label>Shopping Cart Sidebar Extra Actions</label>
                </block>
            </block>
        </reference>
   </default> 
</layout>

Analizamos el contenido del fichero local.xml

1- Como vamos a emplear el carrito desplegable en Magento decidimos eliminar el bloque del carrito que por defecto se carga en la colunma lateral izquierda del tema. Las siguientes líneas realizan esta función:

<reference name="left">
            <action method="unsetChild"><name>cart_sidebar</name></action>
        </reference>

2- En el resto de contenido ubicamos el bloque que hemos eliminado de la columna lateral en la cabecera. Este contenido no es mas que un copy/paste del bloque cart_sidebar que podemos encontrar en: base/default/layout/checkout.xml

Carrito desplegable en Magento: Cargar el bloque topcart

El siguiente paso para lograr un carrito desplegable en Magento, mas concretamente en la cabecera de nuestra tienda online pasa por cargar este bloque que terminamos de definir en la cabecera. Aunque en este caso concreto es muy sencillo saber que fichero phtml vamos a emplear, Magento dispone de la herramienta “Template Path Hints” que nos resultará muy útil para identificarlo. La siguiente captura muestra la home cargada con la opción Template Path Hints habilitada:

Carrito desplegable en Magento template paths

Cargaremos el bloque en el fichero header.phtml del cual podemos observar la ruta desde la propia herramienta: app/design/frontend/default/modern/template/page/html/header.phtml

Para cargar el bloque únicamente debemos de añadir la siguiente línea:

<?php echo $this->getChildHtml('topcart'); ?>

El fichero header.phtml que emplearemos para crear nuestro carrito desplegable en Magento queda así:

<div class="header-container">
    <!-- Añado el carrito desplegale en Magento-->
    <?php echo $this->getChildHtml('topcart'); ?>
    <!-- Fin carrito desplegale en Magento-->
    
    <div class="header">
        <?php if ($this->getIsHomePage()):?>
        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif?>
        <p class="top-promo" title="<?php echo $this->__('Free Shipping on orders over 50$'); ?>"><?php echo $this->__('Free Shipping on orders over 50$'); ?></p>
        <?php echo $this->getChildHtml('topMenu') ?>
    </div>
    <div class="quick-access">
        <?php echo $this->getChildHtml('store_language') ?>
        <p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?></p>
        <?php echo $this->getChildHtml('topLinks') ?>
    </div>
    <?php echo $this->getChildHtml('topBar') ?>
    <?php echo $this->getChildHtml('topContainer'); ?>
</div>

Esta linea carga el bloque topcart, que como vemos en la definición del fichero local.xml carga el template ubicado en checkout/cart/topcart.phtml. El tema Modern, por defecto no tiene esta fichero. Para posibilitar su personalización unicamente en este tema crearemos los directorios y el fichero correspondiente:

Carrito desplegable en Magento topcart

El contenido de topcart.phtml es:

<?php if ($this->getIsNeedToDisplaySideBar()):?>
<div class="block block-cart block-cart-top">
  <?php $_cartQty = $this->getSummaryCount() ?>
  <div class="block-title"><span class="glyphicon glyphicon-shopping-cart"></span><strong><span><?php echo $this->__('My Cart') ?></span></strong>
    <?php if ($_cartQty>0): ?>
    <div class="summary">
      <?php if ($_cartQty==1): ?>
      <p class="amount"><?php echo $this->__('There is <a href="%s">1 item</a> in your cart.', $this->getUrl('checkout/cart')) ?> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></p>
      <?php else: ?>
      <p class="amount"><?php echo $this->__('There are <a href="%s">%s items</a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?> <?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></p>
      <?php endif ?>
    </div>
    <?php else: ?>
    <p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
    <?php endif ?>
  </div>
  <!-- // block-title -->
  <div class="block-content">
    <?php $_items = $this->getRecentItems() ?>
    <?php if(count($_items)): ?>
    <p class="block-subtitle"><?php echo $this->__('Recently added item(s)') ?></p>
    <ol id="cart-sidebar" class="mini-products-list">
      <?php foreach($_items as $_item): ?>
      <?php echo $this->getItemHtml($_item) ?>
      <?php endforeach; ?>
    </ol>
    <script type="text/javascript">decorateList('cart-sidebar', 'none-recursive')</script>
    <?php endif  ?>
    <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
    <div class="actions"> <?php echo $this->getChildHtml('extra_actions') ?>
      <button type="button" title="<?php echo $this->__('Checkout') ?>" class="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button>
    </div>
    <?php endif ?>

  </div>
</div>
<?php endif;  ?>

Tras esta actualización, el carrito, aunque todavía sin los efectos para que sea desplegable, se mostrará en la cabecera de la página:

Carrito desplegable en Magento

Carrito desplegable en Magento: Aportando estilos y efecto desplegable

Hasta aquí ya hemos conseguido incorporar el bloque del carrito a la cabecera de nuestra tienda online. Pero lo que ahora tenemos poco tiene que ver con un carrito desplegable en Magento. ¿Cómo podemos conseguir que este bloque se comporte como un carrito desplegable en Magento? Muy sencillo, añadiendo los estilos necesarios. Para ello, nos diriginos a:

skin/frontend/default/modern/css/styless.css

y añadimos las siguientes líneas de estilo al carrito

.block-cart-top {
	z-index: 1;
	border: none;
	float:right;
	width: 20%;
	margin:0 0 20px;
	height: 50px;
	background: none repeat scroll 0 0 #e5eed6;
}

.block-cart-top .block-content {
	padding:8px;  
	position:relative; 
	z-index:1;
	background:none repeat scroll 0 0 #FFF;
	/*Por defecto oculto*/
	/*y añado el efecto de transición para cuando lo muestre*/
	transition:all 1.5s;
	-moz-transition:all 1.5s;
	-webkit-transition:all 1.5s;
	opacity:0;
	visibility:hidden;
}
.block-cart-top:hover .block-content {
	/*Al situarme encima lo muestro*/
	opacity:1;
	z-index:999;
	visibility:visible;
}

El código css para obtener el carrito desplegable en Magento es muy sencillo. A grandes rasgos el código se encarga de darle un tamaño mas acorde con un carrito de la compra y ubicarlo a la derecha de la cabecera. Seguidamente hacemos que el contenido no sea visible por defecto hasta que el usuario pase el cursor por encima del mismo. Es en ese momento, cuando logramos el efecto de carrito desplegable en Magento al hacer que este aparezca automáticamente mediante la propiedad transition.

Como veis, lograr un carrito desplegable en magento es una funcionalidad muy interesante y muy sencilla de conseguir. Si vuestras plantillas o integraciones personalizadas no incluyen esta funcionalidad os animo a que incorporeís esta sencilla y útil mejora. Si te interesa conocer mas mejoras para el front de tu tienda online te invito a que visites la sección Responsive del apartado servicios:


Responsive

Incorporando un diseño responsive a tu tienda online conseguirás aumentar la experiencia de compra de tus clientes, esta mejora será un plus para tu ecommerce que ayudará a incrementar tus ventas y conversiones

Resumen
Nombre
Carrito desplegable en Magento
Autor
Descripción
Carrito desplegable en Magento: Carrito desplegable en Magento para aumentar la usabilidad y experiencia de compra de tu comercio electrónico
The following two tabs change content below.
Especialista en Magento y servicios ecommerce: Consultoría ecommerce, Optimización Magento, Desarrollo Magento, Integración Magento ERP y Posicionamiento SEO Magento.


Deja un comentario
 

Tu email no será publicado. Campos obligatorios . *