magento, uso, desarrollo y diseño

Magento

www.ipascual.com

Ignacio Pascual (www.ipascual.com) - @ignaciopascual

www.ipascual.com

Ignacio Pascual (www.ipascual.com) - @ignaciopascual

www.ipascual.com

Ignacio Pascual (www.ipascual.com) - @ignaciopascual

Empresas que hemos capacitado

www.ipascual.com

Introducción a Magento

¡Definitivamente lo recomendamos!, no hay en el mercado otra plataforma eCommerce tan bien estructurada y diseñada como Magento. Nos proporciona versatilidad y libertad a un precio muy competitivo a la competencia. El hecho de ser Open Source hace que muchos desarrolladores a lo largo del planeta conozcamos el código y eviten que usted pierda el soporte necesario a diferencia de otras compañías de codigo propietario.

Características Más de 90.000 tiendas online y más de 3.500 extensiones. Múltiples tiendas virtuales y compartir todo en una sóla

administración 60 idiomas, múltiples divisas e impuestos. Navegación por capas Magento tiene SEO Magento es núcleo, funcionalidad y diseño.

www.ipascual.com

Versiones de Magento

Community version No trae soporte, garantía ni indemnización. No es PCI Compliant

Professional Edition $2,995 USD / año

Enterprise Edition $10,000 USD / año

http://www.magentocommerce.com/product/compare

www.ipascual.com

Instalando Magento

Web servers soportados Apache 1.3.x / Apache 2.0.x / Apache 2.2.x

PHP 5.2.13+ PDO_MySQL simplexml mcrypt hash GD DOM iconv curl

MySQL 4.1.20 o superior

www.ipascual.com

Magento Walk-through

Ventas

Catálogo – Atributos – Productos – Categorías

Clientes – Grupo de Clientes

Vouches – Bonos – Promociones

Informes

www.ipascual.com

Ciclo de vida de una orden

Pending - orden no ha sido procesada Processing - orden ha sido enviada o facturada pero no

ambas Complete - orden está enviada y facturada Cancelled - ordenes canceladas o no pagadas Closed - ordenes con devoluciones On Hold - ordenes paralizadas a la espera de una acción

www.ipascual.com

Tipos de productos

Simple Agrupado Configurable Virtual Productos que no tienen stock. No se envían. Por

ejemplo: 1 año soporte web. Bundle Productos personalizados Downloadable Productos para descargar, Magento genera un link

encriptado, de ese modo el cliente cuando compra no conoce la situación real del archivo.

www.ipascual.com

Instalando modules / Magento Connect

¿Cuáles instalar?, ¿Qué tan fiables son?

¿Cómo instalar?

Ejemplos: TweetButton Quick Contact Enhanced Product Grid

www.ipascual.com

Actualizando Magento

Proceso automático ./pear install magento-core/Mage_All_Latest ./pear upgrade-all

Proceso manual Desactivar la cache de Magento Copia de seguridad base de datos Copia de seguridad de todos los archivos (mantenerla cerca) Copia de seguridad especial de app/etc/local.xml y media/ Descargar nueva versión y descomprimir en directorio Sobrescribir app/etc/local.xml y media/ Borrar directorios var/cache y var/session Abrir el navegador y apuntar a la tienda

www.ipascual.com

Migrando Magento

Desactivar cache

Volcar su información de la base de datos

Copiar sistema de archivos

Copiar todo al nuevo servidor

Asegurar que la tabla core_config_data tenga correctamente configurado "web/unsecure/base_url" y "web/secure/base_url"

Magento

Capacitación:

- Administración

- Diseño

- Desarrollo

www.ipascual.com

Estructura general de Magento

app code design etc Locale

js

media

skin

var

www.ipascual.com

MVC (Modelo Vista Controlador) Magento – introducción

www.ipascual.com

MVC (Modelo Vista Controlador) Magento – introducción

Programación block controller helper model

Diseño layout template

www.ipascual.com

Estructura de archivos para diseño

app/design/frontend/{$interfaz}/{$theme}/template folder.

app/design/frontend/{$interfaz}/{$theme}/layout folder. 

app/code/{core,local,com…}/{$compañía}/{$modulo}/Block

¿Qué es interfaz?

Colección themes, Ej.: iPascual, Colombia, México… ¿Qué es theme?

Grupo de layout y templates. Ej.: Navidades, día de la madre… ¿Qué es módulo?

Parte de Magento (requerida o no) Ej.: Cliente, bonos, catálogo…** Ver estructura de diseño más en profundidad **

www.ipascual.com

Diseños y tiendas

www.ipascual.com

www.ipascual.com

Jerarquía de uso

Módulo: Mage_Catalog / Layout: catalog.xml

app/design/frontend/ipascual/diamadre/layout

app/design/frontend/ipascual/default/layout

app/design/frontend/base/default/layout

¿ Templates, css, js…?

app/design/frontend/ipascual/diamadre/template/catalog/product/view.phtml

app/design/frontend/ipascual/default/template/catalog/product/view.phtml

app/design/frontend/base/default/template/catalog/product/view.phtml

www.ipascual.com

Control de diseño

www.ipascual.com

Situaciones especiales de diseño

CMS

Categorías

Productos

www.ipascual.com

Nuestra gran ayuda

www.ipascual.com

Nuestra gran ayuda

www.ipascual.com

Layout

<checkout_cart_index translate="label"> <label>Shopping Cart</label> <remove name="right"/> <remove name="left"/> <reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference> <reference name="content">

<block type="checkout/cart" name="checkout.cart"><action method="setCartTemplate"><value>checkout/cart.phtml</value></action>

</block>

<block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon" template="checkout/cart/coupon.phtml"/>

<block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping" template="checkout/cart/shipping.phtml"/>

<block type="checkout/cart_crosssell" name="checkout.cart.crosssell" as="crosssell" template="checkout/cart/crosssell.phtml"/>

<block type="checkout/cart_totals" name="checkout.cart.totals" as="totals" template="checkout/cart/totals.phtml"/>

</block> </reference>

</checkout_cart_index>

www.ipascual.com

Template / funciones comunes

<?php echo $this->_(“Carrito de compra”); ?>

$this->getChildHtml("bloque_nombre”) <?php echo $this->getChildHtml('breadcrumbs') ?> $this->getChildHtml() <?php echo $this->getChildHtml() ?> - Carga un static block CMS<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId("identificador")->toHtml() ?>

$this->getUrl('') Devuelve http://127.0.0.1/magento/

$this->getUrl('module/controller/action', array('param'=>$value))

$this->getSkinUrl("images/logo.png"); http://127.0.0.1/skin/frontend/your_theme/default/images/logo.png

Magento

Capacitación:

- Administración

- Diseño

- Desarrollo

www.ipascual.com

Frameworks en Magento

www.ipascual.com

Organización en módulos

A diferencia de un MVC común, Magento organiza el código en una clase superior llamada módulo app/code/core/Mage/Newsletter app/code/core/Mage/Checkout

Cuando creamos o modificamos secciones en Magento lo haremos en app/code/local/Paquete/Modulo

(Paquete es llamado también como Namespace o nombre compañía)

Hacemos saber al sistema de la existencia de un módulo a través de un archivo XML en app/etc/modules

Este archivo se nombrará Paquete_Modulo.xml Paquete_All.xml

www.ipascual.com

Estructura de un módulo

/app/code/local/Paquete Modulo

Block controllers etc

config.xml system.xml

Helper Model Sql

/etc/modules

www.ipascual.com

Controladores

http://tutienda.com/catalog/category/view/id/25

1. Front Name: catalog

2. Controlador: app/code/core/Mage/Catalog/controllers/CategoryController.php

3. Acción – vista: public function viewAction() { … }

4. Parámetros: id/25

Jerarquía de llamada1. Busca un controlador especificado en frontend

2. Busca un controlador especificado en admin

3. Busca en categorías / productos

4. Busca una coincidencia en Mage_Cms_IndexController

5. Devuelve el CMS especificado para 404

www.ipascual.com

Configurando un controlador para frontend

etc/config.xml

<frontend>    <routers>        <catalog>

            <use>standard</use>

            <args>                <module>Mage_Catalog</module>                <frontName>catalog</frontName>            </args>

        </catalog>    </routers></frontend>

www.ipascual.com

Creando un controlador

app/controllers/CategoryController.php

class Mage_Catalog_CategoryController extends Mage_Core_Controller_Front_Action{

    public function viewAction()    {

        // …

    }

}

www.ipascual.com

Block

config.xml

<global><blocks>

<alquiler>

<class>Ipascual_Alquiler</class>

</alquiler>

</blocks>

…

Clase PHPclass Ipascual_Alquiler_Block_Alquiler extends Mage_Core_Block_Template

{

…

}

www.ipascual.com

Configurando un Model

etc/config.xml

<global>

<models><alquiler>

<class>Ipascual_Alquiler_Model</class>

</alquiler></models>

…

www.ipascual.com

Creando un Model

app/controllers/CategoryController.php

Class Ipascual_Alquiler_Model_Novedades extends Mage_Core_Model_Abstract{

    public function getNovedades()    {

        // …

    }

}

www.ipascual.com

Creando y configurando un Helper

etc/config.xml

<global><helpers><alquiler><class>Ipascual_Alquiler_Helper</class></alquiler></helpers>…

Helper/Data.php

class Ipascual_Alquiler_Helper_Data extends Mage_Core_Helper_Abstract

{

…

}

www.ipascual.com

Usando un Helper

Desde template *.phtml

<?php $this->helper(”alquiler")->myMethod(); ?>

Desde un block / model / controller…

Mage::helper("alquiler/data")->myMethod();

www.ipascual.com

Sobreescribiendo código de Magento

<global>

<blocks>

<catalog>

<rewrite><product_view>Ipascual_Mymodule_Block_Product_View</product_view></rewrite>

<rewrite><product_list_toolbar>Ipascual_Mymodule_Block_Product_List_Toolbar</product_list_toolbar></rewrite>

</catalog>

</blocks>

</global>

www.ipascual.com

Javascript

<form action=“/customer/account/loginPost/" method="post" id="login-form">

<label for="email" class="required"><em>*</em>Dirección de correo electrónico</label>

<input type="text" name="login[username]" value="" id="email" class="input-text required-entry validate-email" title="Dirección de correo electrónico" />

…

<script type="text/javascript">

//<![CDATA[

var dataForm = new VarienForm('login-form', true);

//]]>

</script>

www.ipascual.com

Base de datos

Modelos Entidad-Relación & EAV (Entidad Atributo Valor)

www.ipascual.com

Base de datos

Modelo EAV (Entidad Atributo Valor)

www.ipascual.com

Blog personal: unexpected [ it ] www.unexpectedit.com

Twitter: @ignaciopascual

Facebook: www.facebook.com/ipascualcom