Esta nueva tienda desarrollada con Magento lleva muchas mejoras y alguna que otra extensión a medida. Integración con la pasarela de pago de La Caixa para Magento, LiveChat para atención personalizada, notificaciones, módulo de SEO para Magento, canonical urls, optimización y performance específicos en el Core de Magento para esta tienda, la integración con el sistema de envío de Magento para MRW, etc.

Como veréis hemos tenido en cuenta el publico objetivo, y por tanto, la estética. Los colores y la navegación están hechos a medida. ¡Esperamos que os guste y que compréis mucho!

Este año en Onestic vamos a montar un stand en la Feria para todos aquellos que queráis pasar a conocernos (stand 60). 5500 metros cuadrados de espacio ferial, 70 expositores, más de 4000 visitantes y 80 conferencias. También participaremos en una Mesa Redonda el día 9 de Junio cuya temática es “El software libre, una vía fácil y eficaz para tener tu negocio en Internet.” en la sala Amsterdam a las 10:00. Si alguno se quiere pasar ya sabéis…

El objetivo principal de esta mesa redonda es mostrar de manera clara las ventajas de las soluciones Open Source tanto a nivel económico como técnico. Intentaremos a través de nuestras experiencias y casos de éxito comentar lo que debemos tener en cuenta a la hora de montar un solución E-commerce.

Podéis consultar la lista de expositores aquí.

Las versiones de Magento han cambiado y la tarea de instalar una nueva tienda es algo que a las empresas que desarrollan/mos en Magento hacemos muy a menudo, os voy a poner los pasos para hacer una instalación base desde cero. Para anteriores versiones podéis ver este artículo, es prácticamente igual...

1. Lo primero de todo, acceso a la consola claro
2. Descargamos el paquete con la última versión:
   PLAIN TEXT
   CODE:
   

   1. wget http://www.magentocommerce.com/downloads/assets/1.4.0.1/magento-1.4.0.1.tar.gz
   
   
3. Descomprimimos el paquete:
   PLAIN TEXT
   CODE:
   

   1. tar -zxvf magento-1.4.0.1.tar.gz
   
   
4. Movemos el contenido de la carpeta Magento a nuestro directorio raiz (public_html. www, o el que sea):  
   PLAIN TEXT
   CODE:
   

   1. mv magento/* magento/.htaccess .
   
   
5. Cambiamos permisos a la carpeta media (donde estarán las img de nuestro catálogo):
   PLAIN TEXT
   CODE:
   

   1. chmod -R o+w media
   
   
6. Configuramos la instalación de Magento y buscamos las últimas actualizaciones:
   PLAIN TEXT
   CODE:
   

   1. ./pear mage-setup .
   
   
   PLAIN TEXT
   CODE:
   

   1. ./pear install magento-core/Mage_All_Latest-stable
   
   
7. Este último paso debería traernos e instalar bastantes paquetes, esperar a que termine.
8. Cambiamos permisos a la carpeta var (aquí es donde va la cache, logs, sesiones, etc):
   PLAIN TEXT
   CODE:
   

   1. chmod o+w var var/.htaccess app/etc
   
   
9. Borramos la cache y "basura" que ha quedado en tras la instalación:
   PLAIN TEXT
   CODE:
   

   1. rm -rf downloader/pearlib/cache/* downloader/pearlib/download/*
   
   
10. Borramos la carpeta Magento (debería estar vacia) y el paquete original que nos hemos bajado:
    PLAIN TEXT
    CODE:
    

    1. rm -rf magento/ magento-1.4.0.1.tar.gz
    
    
11. Ahora pasamos a la creación de la Base de datos.
12. Desde la consola entramos a MySQL:
    PLAIN TEXT
    CODE:
    

    1. $ mysql -u root
    
    
13. Ejecutamos:
    PLAIN TEXT
    CODE:
    

    1. mysql> create database nombre_de_la_db;
    
    
14. Creamos el usuario:
    PLAIN TEXT
    CODE:
    

    1. grant usage on *.* to nombre_usuario@localhost identified by 'aqui_la_contraseña;
    
    
15. Asignamos el usuario a la base de datos:
    PLAIN TEXT
    CODE:
    

    1. grant all privileges on nombre_de_la_db.* to nombre_usuario@localhost ;
    
    
16. Ya hemos terminado, ahora podemos empezar la instalación de nuestra nueva tienda en Magento

Y nada más...

Creación del fichero de configuración

Añadir una solapa en el administrador de Magento

indica el nombre del Tab y determina el orden de aparicion con respecto a los demás tabs en la columna de la izquierda del administrador.

Breve ayuda sobre las Helper Classes

Magento cuenta como muchos otros sistemas MVC con Helper classes, las cuales son usadas para una gran variedad de tareas que no encajan ni el Modelo, ni en la vista ni el controlador. Como desarrolladores de módulos podemos utilizar las Helper Classes del sistema o las nuestras propias (en el caso de nuestro módulo Helloworld). Lo primero será añadirlo en el fichero config.xml (ojo, no el system.xml)

PLAIN TEXT

XML:

1. Fichero: app/code/local/Alanstormdotcom/Helloworld/etc/config.xml
2. <!-- ... -->
3. <global>
4.     <!-- ... -->
5.     <helpers>
6.         <helloworld>
7.             <class>Alanstormdotcom_Helloworld_Helper</class>
8.         </helloworld>
9.     </helpers> 
10.     <!-- ... -->
11. </global>
12. <!-- ... -->

La única parte "rara" que podemos encontrar aquí es la que hace referencia al nombre de la clase. Como sabréis la notación para esto debe seguir la siguiente estructura:

PLAIN TEXT

CODE:

1. Nombredelpaquete_Nombredelmodulo_Helper

Los Helpers se cargaran en el global Mage. La siguiente llamada servirá (teniendo en cuenta la configuración que hemos ido dando)

PLAIN TEXT

CODE:

1. Mage::helper('helloworld/foo');

...cargará la siguiente clase

PLAIN TEXT

CODE:

1. app/code/local/Alanstormdorcom/Helper/Foo.php
2. class Alanstormdotcom_Helloworld_Helper_Foo

Magento también permite el concepto de "Helper por defecto" para un módulo, lo que significa que podíamos haber usado esta llamada:

PLAIN TEXT

CODE:

1. Mage::helper('helloworld');

lo que hubiera provocado que se hubiera buscado en:

PLAIN TEXT

CODE:

1. app/code/local/Alanstormdorcom/Helper/Data.php
2. class Alanstormdotcom_Helloworld_Helper_Dara

Con esto llegamos a la conclusión de que es lo mismo poner estas dos líneas:

PLAIN TEXT

CODE:

1. Mage::helper('helloworld');
2. Mage::helper('helloworld/data');

Supongo que estas líneas os habrán aclarado más de una duda (o eso espero) Por último tenemos que añadir el Helper class actual.

PLAIN TEXT

CODE:

1. Fichero: app/code/local/Alanstormdorcom/Helper/Data.php
2. class Alanstormdotcom_Helloworld_Helper_Data extends Mage_Core_Helper_Abstract
3. {
4. }

Si hemos seguido los pasos y hemos borrado la cache, ya no deberíamos tener ningún error en el administrador. Eso si, todavía no podremos ver nuestro nuevo Tab.

Añadir una Nueva Sección

El siguiente paso es saber por qué nuestra ficha no aparece todavía en el administrador. Cada Tab/ficha dispone de una serie de secciones. Por ejemplo, el Tab "Avanzado" por defecto tiene una de Administrador, Sistema, Avanzado y Desarrollador. Si creamos un Tab sin secciones no se mostrará, por eso vamos a añadir un nodo llamado :

PLAIN TEXT

XML:

1. Ubicación: app/code/local/Alanstormdotcom/Helloworld/etc/system.xml
2.  
3. <config>
4.     <tabs>
5.         <helloconfig translate="label" module="helloworld">
6.             <label>Hello Config</label>
7.             <sort_order>99999</sort_order>
8.         </helloconfig>
9.     </tabs>
10.     <sections>
11.         <helloworld_options translate="label" module="helloworld">
12.             <label>Hello World Config Options</label>
13.             <tab>helloconfig</tab>
14.             <frontend_type>text</frontend_type>
15.             <sort_order>1000</sort_order>
16.             <show_in_default>1</show_in_default>
17.             <show_in_website>1</show_in_website>
18.             <show_in_store>1</show_in_store>                   
19.         </helloworld_options>
20.     </sections>     
21. </config>

helloworld_options, como antes, un nombre arbitrario, usado para identificar nuestra nueva sección. label , define lo que se mostrará en la interfaz. Es decir, la etiqueta. tab , identifica bajo que Tab estará agrupada nuestra nueva sección. frontend_type , esta no está muy clara. Parece que no sirve para nada (corregirme si me equivoco), yo la pongo por si las moscas sort_order , determina el orden de aparición (vertical) con respecto a las otras secciones. show_in_default , , , determina el nivel la granularidad que tiene esta sección. Los valores son 0 y 1. Con todo esto claro ya deberíamos ver la nueva Ficha con su sección. Si queremos añadir nuevas secciones únicamente tenemos que introducir nuecas .

Control de Acceso

Si pulsamos en la nueva sección que acabamos de crear obtendremos una página en blanco. Esto se debe a que el Adminhtml no puede encontrar la entrarda de nuestra nueva sección en el ACL (Access Control List) - Lista de control de acceso. La gente de Magento decidió en su momento que las secciones de configuración de Sistema deberían tener porotección ACL. Los recursos son definidos mendiante URI's. Por ejemplo, la sección de configuración "web" se define de la siguiente forma:

PLAIN TEXT

CODE:

1. admin/system/config/web

en nuestro caso...

PLAIN TEXT

CODE:

1. admin/system/config/helloworld_options

La sección del administrador (conocida como Adminhtml) está desarrollada con el mismo framework que la tienda. Cada vez que un usuario accede a un recurso del admin, el adminhtml debe:

• Deducir la URI donde el usuario quiere acceder
• Comprobar la URI contra el sistema ACL y determinar si el usuario tiene permisos sobre este recurso
• Si el usuario no tiene privilegios informar

Para los que estéis interesados en esta parte el método usado es _isSectionAllowed que podemos encontrar en el siguiente controlador:

PLAIN TEXT

CODE:

1. app/code/core/Mage/Adminhtml/controllers/System/ConfigController.php

Como todos sabréis, una forma de ver los Roles asignados en el administrador es desde Sistema-> Permisos -> Roles

Añadir Roles. ACL

Para entender esta sección hay que leer la anterior. Para los despistados Editamos el fichero que controla los permisos necesarios para acceder a nuestra nueva sección:

PLAIN TEXT

XML:

1. Fichero: app/code/local/Alanstormdotcom/Helloworld/etc/config.xml
2. <config>   
3.     <!-- ... -->
4.     <adminhtml>
5.         <acl>
6.             <resources>
7.                 <admin>
8.                     <children>
9.                         <system>
10.                             <children>
11.                                 <config>
12.                                     <children>
13.                                         <helloworld_options>
14.                                             <title>Store Hello World Module Section</title>
15.                                         </helloworld_options>
16.                                     </children>
17.                                 </config>
18.                             </children>
19.                         </system>
20.                     </children>
21.                 </admin>
22.             </resources>
23.         </acl>
24.     </adminhtml>
25.     <!-- ... -->
26. </config>

Resumiendo:

PLAIN TEXT

XML:

1. <adminhtml>
2.     <acl>
3.         <resources>
4.         </resource>
5.     </acl>
6. </adminhtml>

Dentro del recurso, cada nodo hijo representa una porción de la URI. Por ejemplo:

PLAIN TEXT

XML:

1. admin/system

nos devuelve la siguiente URI

PLAIN TEXT

XML:

1. admin/system

Si has seguido todos los pasos, tenemos las siguiente configuración:

PLAIN TEXT

XML:

1. <helloworld_options>
2.     <title>Store Hello World Module Section</title>
3. </helloworld_options>

Para ver todos estos cambios desde el administrador, como siempre, borrar la cache, cerrar sesión y volver a iniciarla. Si todo ha ido bien, deberíamos ver una nueva página de llamada “Hello World Config Options”.

Añadir Grupos

Ya tenemos nuestra página de configuración (en blanco) con los permisos adecuados. Vamos a crear grupos para las secciones.

PLAIN TEXT

XML:

1. Ubicación: app/code/local/Alanstormdotcom/Helloworld/etc/system.xml
2. <config>
3.     <tabs>
4.         <helloconfig translate="label" module="helloworld">
5.             <label>Hello Config</label>
6.             <sort_order>99999</sort_order>
7.         </helloconfig>
8.     </tabs>
9.     <sections>
10.         <helloworld_options translate="label" module="helloworld">
11.             <label>Hello World Config Options</label>
12.             <tab>helloconfig</tab>
13.             <frontend_type>text</frontend_type>
14.             <sort_order>1000</sort_order>
15.             <show_in_default>1</show_in_default>
16.             <show_in_website>1</show_in_website>
17.             <show_in_store>1</show_in_store>
18.             <groups>
19.                 <messages translate="label">
20.                     <label>Demo Of Config Fields</label>
21.                     <frontend_type>text</frontend_type>
22.                     <sort_order>1</sort_order>
23.                     <show_in_default>1</show_in_default>
24.                     <show_in_website>1</show_in_website>
25.                     <show_in_store>1</show_in_store>               
26.                 </messages>
27.             </groups>
28.         </helloworld_options>
29.     </sections>     
30. </config>

Guardamos y recargamos la página. ¿Veís la caja con el título “Demo Of Config Fields”. ? (espero que si, sino mal vamos....)

Añadir campos de configuración. Config fields

Y ya por último, vamos a introducir los campos necesarios para la configuración de nuestro módulo. Esto se hace con el nodo Por ejemplo, un campo con el nombre "hello_message".

PLAIN TEXT

XML:

1. <!-- ... -->
2. <messages translate="label">
3.     <label>Demo Of Config Fields</label>
4.     <frontend_type>text</frontend_type>
5.     <sort_order>1</sort_order>
6.     <show_in_default>1</show_in_default>
7.     <show_in_website>1</show_in_website>
8.     <show_in_store>1</show_in_store>               
9.     <fields>
10.         <hello_message>
11.             <label>Message</label>
12.             <frontend_type>text</frontend_type>
13.             <sort_order>1</sort_order>
14.             <show_in_default>1</show_in_default>
15.             <show_in_website>1</show_in_website>
16.             <show_in_store>1</show_in_store>                   
17.         </hello_message>
18.     </fields>                   
19. </messages>
20. <!-- ... -->

Os acordáis que antes comentábamos la finalidad del campo frontend_type, bueno, pues aquí tenéis la explicación. En esta sección si tiene sentido. Si recargamos la página deberíamos ver un text field. Vamos ahora con otro tipo de campo, uno de tipo time.

PLAIN TEXT

XML:

1. <!-- ...-->
2. <fields>
3.     <hello_message>
4.         <label>Message</label>
5.         <frontend_type>text</frontend_type>
6.         <sort_order>1</sort_order>
7.         <show_in_default>1</show_in_default>
8.         <show_in_website>1</show_in_website>
9.         <show_in_store>1</show_in_store>                   
10.     </hello_message>
11.     <hello_time>
12.         <label>Time to Say Hello</label>
13.         <frontend_type>time</frontend_type>
14.         <sort_order>1</sort_order>
15.         <show_in_default>1</show_in_default>
16.         <show_in_website>1</show_in_website>
17.         <show_in_store>1</show_in_store>                   
18.     </hello_time>       
19. </fields>
20. <!-- ... -->

La única diferencia entre ambos nodos es el tipo. time Para ver los tipos soportados por Magento podemos ir a lib/Varien/Data/Form/Element. No están todos, pero si la mayoría... Ahora vamos a cambiar el text de hello_message por un combo.

PLAIN TEXT

XML:

1. <!-- ... -->
2. <hello_message>
3.     <label>Message</label>
4.     <frontend_type>select</frontend_type>
5.     <sort_order>1</sort_order>
6.     <show_in_default>1</show_in_default>
7.     <show_in_website>1</show_in_website>
8.     <show_in_store>1</show_in_store>                   
9. </hello_message>
10. <!-- ... -->

pero... el combo no tiene datos, no hay problema, tenemos que indicarle el origen de datos:

PLAIN TEXT

XML:

1. <hello_message>
2.     <label>Message</label>
3.     <frontend_type>select</frontend_type>
4.     <!-- adding a source model -->
5.     <source_model>helloworld/words</source_model>                           
6.     <sort_order>1</sort_order>
7.     <show_in_default>1</show_in_default>
8.     <show_in_website>1</show_in_website>
9.     <show_in_store>1</show_in_store>                   
10. </hello_message>

El elemento source_model define el URI de un Model class que usaremos para meter datos en el combo. Como siempre, este cambio lo metemos en el config.xml (dentro de la sección de models):

PLAIN TEXT

XML:

1. Ubicación: app/code/local/Alanstormdotcom/Helloworld/etc/config.xml
2. <config>   
3.     <!-- ... -->
4.     <global>
5.     <!-- ... -->
6.         <models>
7.             <!-- ... -->
8.             <helloworld>
9.                 <class>Alanstormdotcom_Helloworld_Model</class>
10.             </helloworld>   
11.             <!-- ... -->
12.         </models>
13.     </global>
14. </config>

Si recargamos la página nos dará un error, claro, no hemos definido la fuente de nuestro Model class.

PLAIN TEXT

CODE:

1. Warning: include(Alanstormdotcom/Helloworld/Model/Words.php)

Nota: si en el error vemos algo parecido a "Mage/Helloworld/..." significa que no hemos creado bien la sección de models. Revisar el config.xml Para definir la fuente del Modelo:

PLAIN TEXT

PHP:

1. File: app/code/local/Alanstormdotcom/Helloworld/Model/Words.php
2. class Alanstormdotcom_Helloworld_Model_Words
3. {
4. public function toOptionArray()
5. {
6. return array(
7. array('value'=>1, 'label'=>Mage::helper('helloworld')->__('Hello')),
8. array('value'=>2, 'label'=>Mage::helper('helloworld')->__('Goodbye')),
9. array('value'=>3, 'label'=>Mage::helper('helloworld')->__('Yes')),
10. array('value'=>4, 'label'=>Mage::helper('helloworld')->__('No')),
11. );
12. }
13.  
14. }

El método devuelve un array con los valores que usaremos posteriormente. Al recargar la página veremos el combo con nuestros datos. Fijaros que hemos usaros el método (__) para las traducciones. Ya que lo hacemos lo hacemos bien, no?

Recogiendo valores

Hemos visto cómo desarrollar formularios para crear valores de configuración. Para obtenerlos desde nuestro código y poder utilizarlos tenemos que usar un método llamado getStoreConfig. Por ejemplo:

PLAIN TEXT

PHP:

1. Mage::getStoreConfig('helloworld_options/messages/hello_message');

El método getStoreConfig acepta como parámetro la URI:

PLAIN TEXT

PHP:

1. section_name/group_name/field_name
2. Mage::getStoreConfig('helloworld_options/messages');
3. Mage::getStoreConfig('helloworld_options');

Por útlimo, si quieremos grabar un valor para una tienda en concreto, getStoreConfig acepta un segundo valor, el storeID:

PLAIN TEXT

PHP:

1. Mage::getStoreConfig('helloworld_options',1);

Y para los que no tengáis ganas de estar copiando y pegando, como siempre, os dejamos directamente el código. Descargar]]>

También dependerá del tipo de tienda y el público objetivo al que queremos llegar. Os animo a completar la lista de extensiones, nosotros usamos unas cuantas más, pero tampoco las vamos a poner todas, no tendría sentido. Con estas por lo menos cubrimos alguna de las carencias que tiene Magento por defecto.

1.- Blank Theme

2.- Actualizaciones de Magento

3.- TinyMCE para Magento

4.- Fooman Google Analytics Plus

5.- Compartir con redes sociales

6.- Diferentes estados para cada pedido

7.- Comentarios desde el CMS

8.- Borrar pedidos en Magento

9.- Listado de productos con imagenes en el administrador

10.- Categorías en vertical

1. El mercado Español está "virgen". Llevamos un retraso de 4 años con respecto a países como UK y 2 con respecto a países más cercanos (Francia). Esto significa que todavía queda mucho negocio.
2. Hay oportunidades, y si conseguimos encontrar nuestro nicho de mercado podemos sacar muy buenos rendimientos.
3. Los principales problemas que tenemos son tres: la logística (que hasta el momento no ha sabido adaptarse a los tiempos que corren), la confianza y los métodos de pago (muchos de ellos intrusivos e incómodos). MRW ha lanzado una solución (todavía no sé si muy novedoso) específico para este tipo de negocios.
4. Gracias a tiendas como vente-privee o buy-vip los usuarios están perdiendo el miedo a comprar en internet, cosa que por otra parte nos beneficia a todos. Cuanta más gente compre en internet más oportunidad de negocio tendremos.
5. El perfil del comprador está cambiando. Pasamos del típico hombre de mediana edad (25-35 años), "experto" en tecnología, a mujeres de cualquier edad que van de compras y buscan ofertas desde la web. Si el ahorro merece la pena, cualquiera está dispuesto a perder 5 minutos delante del ordenador para comprar.
6. Los métodos de captación de tráfico para tiendas como el SEO 75%, SEM (el que mejor ROI tiene, en teoría), publicidad en portales, presencia en Market places locales/nacionales,  directorios, email-marketing (los datos que ofrecieron dan que pensar), relaciones públicas con otros Blogs, notas de prensa y la utilización herramientas 2.0) son cada vez más efectivas a la hora de sectorizar nuestro público objetivo.
7. Analítica web. Imprescindible. Se estima que los ratios de conversión oscilan, en general, entre el 1% y el 3%. Con estas cifras, las datos proporcionados por herramientas como Analytics deberían bastar. Si conseguimos alcanzar un 3% deberíamos plantearnos la utilización de herramientas que completarán estos datos y nos ofrecerán nuevos puntos de vista.
8. Microsegmentación. Tener claro cuál es nuestro público objetivo y cómo podemos llegar al él de la forma más rápida.
9. Fidelización de usuarios, leads y retorno de la inversión. Planes de marketing, campañas online/offline y la famosa figura del Community Manager.

1. Estructura URL
2. Alojamiento compartido
3. Añadir una nueva tienda en Magento
4. Metodo de dominio aparcado
5. Añadir una tienda a un dominio
6. Método de subdominio
7. Tienda en subdirectorio
8. Administración de varias tiendas

Estructura URL

Alojamiento compartido.

Añadir una nueva tienda en Magento

Dominio aparcado

Añadir una tienda a un dominio. Addon domain

Método de subdominio

Administración de varias tiendas