Success page de Magento: Personalización y mejoras.
22

dic

 

Success page de Magento: Personalización y mejoras.

Personalizando el success page de Magento

Una de las páginas mas deseadas para un cliente que está realizando una compra en nuestra tienda online es la página de confirmación de compra o success page. Esta página, es la encargada de informar a nuestro cliente que todo ha ido bien y que su pedido se ha procesado correctamente en nuestra plataforma de comercio electrónico y por lo tanto la que informa a nuestro cliente de que todo ha ido bien y que próximamente recibirá su pedido. A mi modo de parecer, esta página tiene multitud de posibilidades que podemos explotar y que por defecto Magento no aprovecha en su success page por defecto:

Página de succes estándar de Magento

Como se observa en la imagen, la success page de Magento nos informa de que el pedido se ha procesado correctamente y nos da la posibilidad de ver la información de pedido incluso de imprimir toda la información del mismo. Todo esto está muy bien, sin embargo, podríamos aprovecharla todavía si la empleáramos también para fidelizar a nuestros clientes y aprovecharla para fomentar la presencia de nuestros productos en la redes sociales

Mejoras a implementar en el succes page de Magento

Como hemos comentado en le punto anterior la success page estándar de Magento cumple con su cometido, sin embargo, vamos a llevar a cabo una serie de mejoras para fomentar la compartición de nuestros productos en las redes sociales e intentar fidelizar la máxima cantidad de clientes. Para este ejemplo formativo, mantendremos la misma estructura de nuestra success page y añadiremos mediante el uso de bloques un nuevo template con información extra destinado a ampliar la información de esta página y fomentar tanto la fidelización de nuestros clientes como la presencia en las redes sociales de nuestra empresa. Las mejoras que llevaremos a cabo sobre nuestra success page de Magento serán:

  • Resaltar nuestros tiempos de entrega: Nuestra empresa tiene unos tiempos de entrega máximos de 48h. Estos tiempos de entrega son buenos, así que deseamos resaltar esta información a nuestro cliente nuevamente una vez finalice su compra.
  • Fidelizar a nuestros clientes: Premiaremos a los clientes que realicen una compra con un cupón descuento. Si el pedido llega rápido a nuestros clientes y estos disponen de un cupón descuento para su próxima compra aumentaremos las posibilidades de que nuestra empresa sea la seleccionada cuando nuestro cliente necesite otro de los diversos productos que comercializamos.
  • Presencia en las redes sociales: Mostraremos un listado de los productos adquiridos en el pedido. Cada uno de los productos contendrá un enlace para que nuestro cliente pueda publicarlo en su twitter y en su facebook. De esta forma, nuestros clientes fomentarán al visualización de nuestro ecommerce en las diversas redes sociales y un nuevo flujo de clientes potenciales será redirigido a nuestra tienda online.

En este video, podéis ver la nueva información que mostramos en la success page de nuestra tienda online. Destacar, que hemos decido mantener la información estándar del success page de Magento, ya que en este tutorial una de las cosas que me gustaría mostrar es el uso de los bloques de Magento y como podemos añadir la información a una página existente -en este caso el success page de Magento-. No obstante, una opción mucho mas interesante -ya que lograríamos una integración mucho mas profesional- pasaría también por personalizar completamente la propia página estándar de finalización de compra para aumentar la integración de la misma con la nueva información que decidimos incorporar. Este tutorial, no se centra en conseguir lo que podríamos definir como un success page de Magento totalmente distinto. En la entrada de hoy, nos centraremos en como podemos añadir nueva información al ya existente, para mostrar las diversas posibilidades de adaptación y personalización que podemos incorporar a esta página tan importante.

Implementación de las mejoras al success page de Magento

En esta nueva entrada, vamos a crear un nuevo módulo llamado Compartirpedido, haremos especial incapié en el uso de los bloques de Magento y las actualizaciones de layouts, dejando mas de lado otras configuraciones del módulo, para permitir profundizar en como los bloques de Magento pueden sernos de utilidad. Una vez destacada esta parte…¡Empecemos con la creación de nuestro nuevo módulo para pesnonalizar el success page de Magento!

Creación del fichero Eem_Compartirpedido.xml

Con este fichero como ya comentamos en entradas anteriores activamos el módulo y lo ubicamos en el codepool local.

La ubicación del nuevo xml es: “app/etc/modules/Eem_Compartirpedido.xml” y su contenido es el siguiente:

<?xml version="1.0"?>
<config>
    <modules>
        <Eem_Compartirpedido>
            <active>true</active>
            <codePool>local</codePool>
        </Eem_Compartirpedido>
    </modules>
</config>

Contenido de la carpeta del módulo compartir pedido

La siguiente imagen muestra al ubicación del directorio de nuestro nuevo módulo así como su estructura y contenidos:

Success page magento modulo compartirpedido

Procedemos ahora a comentar y profundizar en el contenido y funcionalidad de cada uno de los ficheros

Contenido de nuestro config.xml

El contenido de nuestro config.xml es el siguiente

<?xml version="1.0"?>
<config>
    <modules>
        <Eem_Compartirpedido>
            <version>1.0.0.0</version>
        </Eem_Compartirpedido>
    </modules>
    <global>
        <models>
            <compartirpedido>
                <class>Eem_Compartirpedido_Model</class>
            </compartirpedido>
        </models>
        <blocks>
            <compartirpedido>
                <class>Eem_Compartirpedido_Block</class>
            </compartirpedido>
        </blocks>
        <helpers>
            <compartirpedido>
                <class>Eem_Compartirpedido_Helper</class>
            </compartirpedido>
        </helpers>
    </global>
    <frontend>
	<layout>
            <updates>
                <compartirpedido>
                    <file>eem/compartirpedido/compartirpedido.xml</file>
                </compartirpedido>
            </updates>
        </layout>          
    </frontend>
</config>

La estructura base de este fichero ya la hemos analizado en entradas anteriores del blog, pero hay dos partes que me gustaría resaltar:

  • Creación del bloque: definido mediante la etiqueta ““. Emplearemos este bloque para hacer uso de las funciones, que posteriormente usamos en el template y que añadiremos mediante el layout a nuestra success page de Magento.
  • Actualizaciones de layout: Mediante la etiqueta “” informamos que la actualización del layout será efectiva únicamente en el frontend de Magento -recordemos que actualizaremos la página de confirmación de la compra-. Posteriormente definimos la ubicación del fichero xml que contendrá la definición de estas actualizaciones
  • <frontend>
    	<layout>
                <updates>
                    <compartirpedido>
                        <file>eem/compartirpedido/compartirpedido.xml</file>
                    </compartirpedido>
                </updates>
            </layout>          
        </frontend>
    

    Con esta definición el sistema espera encontrar el fichero para actualizar el layout en la siguiente ubicación (Posteriormente entraremos en detalle en el contenido del mismo)

    actualizacion_layout_succes_page

Magento Block

Los bloques en Magento nos sirven para definir la lógica que posteriormente podemos emplear en nuestros templates. El fichero del template asigando al objeto bloque podrá ejecutar el código asigando al bloque como si este fuese local a este objeto. Es decir, empleando $this->”nombre_función_bloque” directamente en el template, ejecutaremos la función definida en nuestro bloque. Para nuestro caso dentro de la carpeta Block ubicaremos el fichero Compartir.php cuyo contenido es el siguiente:

<?php

class Eem_Compartirpedido_Block_Compartir extends Mage_Core_Block_Template {

    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('eem/compartirpedido/compartir.phtml');
    }
    
    public function getFacebookImg($_product) 
    {
		$share = '<a name="fb_share" type="button_count" share_url="' . $_product->getProductUrl() .'"></a>';
		return $share;		
    }

    public function getTwitterImg($_product) 
    {
		$msg = 'Adquirido en la tienda online especialista en Magento!!';
		$via = '@mitiendaonline';
		$share = '<a href="http://twitter.com/share" 
					class="twitter-share-button" 
					data-lang="en"
					data-url="' . $_product->getProductUrl() .'"                        
					data-text="' . $msg . '"
					' . $via . '
					data-count="twitter-share-button">
					Tweet</a>';
		return $share;
    }
     
}

Helper

En nuestro ejemplo no haremos uso del helper. Su contenido es el siguiente

<?php
class Magmodules_Shareorder_Helper_Data extends Mage_Core_Helper_Abstract {
}

Con esta definición el sistema espera encontrar el fichero para actualizar el layout en la siguiente ubicación (Posteriormente entraremos en detalle en el contenido del mismo)

Actualizando el layout

El siguiente de los pasos a realizar es actualizar nuestro layout. Dentro del punto donde hablamos de la estructura del config.xml ya vimos como definíamos la llamada al fichero compartirpedido.xml donde el sistema esperaba encontrar las actualizaciones del layout. Procedemos ahora si a comentar le contenido del mismo:

<?xml version="1.0"?>
<layout version="0.1.0">
    <checkout_onepage_success>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="compartirpedido/compartir" name="compartirpedido.compartir" template="eem/compartirpedido/compartir.phtml" after="-"/>
        </reference>
    </checkout_onepage_success>
    <checkout_multishipping_success>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="content">
            <block type="compartirpedido/compartir" name="compartirpedido.compartir" template="eem/compartirpedido/compartir.phtml" after="-"/>
        </reference>
    </checkout_multishipping_success>    
</layout>

Como puede observarse estamos actualizando el layuot de nuestra success page de Magento tanto si llegamos o no a él con la opción de multishipping. El código es similar en ambos casos y lo que conseguimos es lo siguiente:

Definimos que la estructura de nuestra success page de Magento sea de una columna:

<reference name="root">
     <action method="setTemplate"><template>page/1column.phtml</template></action>
</reference>

Insertamos el contenido de nuestro template. Con la etiqueta after=”-”, simlemente nos aseguramos de que el contenido de la plantilla aparezca en último lugar.

<reference name="content">
            <block type="compartirpedido/compartir" name="compartirpedido.compartir" template="eem/compartirpedido/compartir.phtml" after="-"/>
</reference>

Creación de nuestro template

Nuestro template, contendrá toda la información a mostrar en el success page de Magento: el aviso destacando la entrega en 48 horas, el cupón descuento que ofrecemos y la posibilidad de compartir nuestros productos en las redes sociales. Para ello necesitamos crear la siguiente estructura de directorios:

Success page magento template

La ubicación de la plantilla, viene definida en la actualización del layout, donde para nuestro bloque definimos el template en template=”eem/compartirpedido/compartir.phtml”. El contenido de nuestro template es el siguiente:


	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<div id="shipping_address">
	<h2><?php echo $this->__('Recibirá su pedido en las próximas 48 horas en la siguiente dirección'); ?></h2>
	<?php
		// Cargamos el pedido y obtenemos datos del envío
		$order_id = Mage::getSingleton('checkout/session')->getLastRealOrderId();
		$order = Mage::getModel('sales/order')->loadByIncrementId($order_id);
		$shippingId = $order->getShippingAddress()->getId();
		$address = Mage::getModel('sales/order_address')->load($shippingId);
		$custName = $address->getName();
		$custAddr = $address->getStreetFull();
		$region = $address->getRegion();
		$country = $address->getCountry();
		echo '<h3>'.$custAddr.'</h3>'; 
		echo '<h3>'.$region .'</h3>'; 
		echo '<h3>'.$country .'</h3>'; 
		Mage:log($address);
	?>
	</div>	
	<!-- Mostramos un código de cupón que tendremos activado en le back de Magento -->
	<div id="cupon">
	<h2><?php echo $this->__('You can use this FREE SHIPPING cuppon in your next order: FREE_SHIPPING_15'); ?></h2>
	</div>
	<!-- Compartimos productos -->
	<div id="msg_compartir">
	<h2><?php echo $this->__('Now You can share your items on social media!'); ?></h2>
	</div>
	
	<?php
		// Cargamos el pedido y sus items para mostrarlos
		$order_id = Mage::getSingleton('checkout/session')->getLastRealOrderId();
		$order = Mage::getModel('sales/order')->loadByIncrementId($order_id);
		$items = $order->getAllVisibleItems();
		// recorremos cada uno de los items y mostramos opciones de compartir
		foreach ($items as $item):	
			// Cargamos producto/imagen
			$_product = Mage::getModel('catalog/product')->load($item->getProductId());
			$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(150).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; 
	
			// Mostramos productos
			echo '<div class="item">';
			echo '<div class="compartir"><h3>' . $_product->getName() . '</h3>'; 
			echo $_img;
			echo '<div class="buttons">';
			// Hacemos uso de las funciones del bloque $this->funcion_del_bloque
			echo $this->getTwitterImg($_product); 
			echo $this->getFacebookImg($_product); 
			echo '</div></div></div>';
			
		endforeach; 
	?>	
	
	<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
	<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Como se puede observar hemos introducido todos los mensajes directamente en el template sin la posibilidad de ningún tipo de configuración. Es decir si por ejemplo quisiéramos actualizar nuestro cupón descuento, cambiar el tiempo de entrega o actualizar alguna de las redes sociales donde quisiéramos que el cliente publicara sus productos debería tal y como se ha desarrollado el módulo modificar en el mejor de los casos el mensaje del template. este no el el mejor de los escenarios, sobretodo, si el desarrollo fuera para un cliente final que no tiene porque tener nociones de desarrollo en Magento. En este tutorial me he centrado en el uso de bloques y layouts. Sin embargo, tal y como vimos en tutoriales anteriores podríamos parametrizar ciertos parámetros de nuestro módulo desde el propio panel de Magento. Algunas parámetros interesantes para la configuración del mismo podrían ser el tiempo de entrega, el código de cupón a mostrar, el mensaje del cupón descuento y la activación desactivación de las redes sociales así como los textos que incluiríamos en sus mensajes cuando un usuario hiciera uso de las mismas. Os recomiendo que visitéis esta entrada del blog de Magento si queréis profundizar en este tipo de configuración para nuestro módulo.

Añadiendo los nuevos estilos

El último punto que nos queda es el de añadir un mínimo de estilos a nuestro módulo. En mi caso he añadido directamente los estilos al fichero style.css del tema Modern que es donde voy a mostrar mi ejemplo. Los estilos añadidos son:

.compartir {
	border: 2px solid #ccc;
    -moz-border-radius: 30px;
 	-webkit-border-radius: 30px;
 	border-radius: 30px;
    float: left;
    font-size: 10px;
    margin: 10px 10px 5px 0;
    padding: 5px;
    text-align: center;
    height: 300px;
    width: 180px;
}

.compartir .buttons{
	margin-top: 10px;
}
#msg_compartir h2{
	font-size: 20px;
	height: 50px;
	overflow: hidden;
	text-align: center;
}
.compartir h3 {
	font-size: 13px;
	margin-top: 10px;
	height: 50px;
	overflow: hidden;
	text-align: center;
}

.twitter-share-button {
	margin-top: 10px;
	margin-left: 30px;
}

#shipping_address {
    background: none repeat scroll 0 0 #dddddd;
    -moz-border-radius: 30px;
 	-webkit-border-radius: 30px;
    border-radius: 30px;
    height: 122px;
    margin-top: 30px;
    padding-top: 30px;
    text-align: center;
}

#cupon{
	background: none repeat scroll 0 0 #e95d4f;
    border-radius: 10px;
    height: 36px;
    margin-top: 30px;
    padding-top: 16px;
    text-align: center;
    margin-bottom: 30px;
}

En este caso el css del módulo lo hemos introducido directamente en el fichero style.css del tema Modern que es el que empleo. Si quisiéramos emplear un hoja de estilos totalmente independiente de la cual hiciera uso nuestro módulo también sería posible añadiendo estas líneas a nuestro fichero de layout

<reference name="head">
            <action method="addItem"><type>skin_css</type><file>css/css_de_nuestro_modulo.css</file></action>
</reference>

Finalizando una compra y observando nuestro nuevo succes page de Magento

Tras todas estas modificaciones ya estamos en condiciones de finalizar un proceso de compra en nuestra tienda online y ver como queda nuestro nueva succes page de Magento. Aquí tenéis un captura donde se puede observar la nueva información y funcionalidades extra que le ofrecemos a nuestros clientes:

Magento success page tutorial

Conclusiones de la personalización del succes page de Magento

Como hemos visto en esta nueva entrada del blog de Magento, mediante el uso de los bloques, templates y layouts hemos podido añadir de forma sencilla información y funcionalidad extra al success page de Magento. Personalmente, considero que esta es una página bastante olvidada en muchas tiendas online – realmente, he visto muy pocos Magentos que tengan alguna optimización de la misma- y que puede ser de gran utilidad tanto para la fidelización de nuestros clientes, pues a quien no le gusta descubrir que tras la finalización de su compra la tienda online tiene un detalle con él y le ofrece un cupón de descuento para su próximo pedido. Independientemente que este cupón pueda ser enviado en el mismo correo del pedido o en cualquier otro, recordemos que el success page de Magento será el primer contacto con nuestro comercio electrónico tras la finalización del pedido por parte de nuestros clientes, como para promocinar nuestro canal de ventas online en las redes sociales fomentando la compartición de nuestros productos por nuestros propios usuarios. Espero que esta nueva entrada del blog de Magento os sirva como fuente de ideas para mejorar y optimizar vuestro canal de ventas online.

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 . *