magento, uso, desarrollo y diseño
DESCRIPTION
Presentación de iPascual en BogoDevTRANSCRIPT
![Page 1: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/1.jpg)
Magento
![Page 4: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/4.jpg)
www.ipascual.com
Ignacio Pascual (www.ipascual.com) - @ignaciopascual
Empresas que hemos capacitado
![Page 5: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/5.jpg)
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.
![Page 6: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/6.jpg)
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
![Page 7: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/7.jpg)
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
![Page 8: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/8.jpg)
www.ipascual.com
Magento Walk-through
Ventas
Catálogo – Atributos – Productos – Categorías
Clientes – Grupo de Clientes
Vouches – Bonos – Promociones
Informes
![Page 9: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/9.jpg)
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
![Page 10: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/10.jpg)
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.
![Page 11: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/11.jpg)
www.ipascual.com
Instalando modules / Magento Connect
¿Cuáles instalar?, ¿Qué tan fiables son?
¿Cómo instalar?
Ejemplos: TweetButton Quick Contact Enhanced Product Grid
![Page 12: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/12.jpg)
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
![Page 13: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/13.jpg)
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"
![Page 14: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/14.jpg)
Magento
Capacitación:
- Administración
- Diseño
- Desarrollo
![Page 15: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/15.jpg)
www.ipascual.com
Estructura general de Magento
app code design etc Locale
js
media
skin
var
![Page 16: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/16.jpg)
www.ipascual.com
MVC (Modelo Vista Controlador) Magento – introducción
![Page 17: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/17.jpg)
www.ipascual.com
MVC (Modelo Vista Controlador) Magento – introducción
Programación block controller helper model
Diseño layout template
![Page 18: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/18.jpg)
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 **
![Page 19: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/19.jpg)
www.ipascual.com
Diseños y tiendas
![Page 20: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/20.jpg)
www.ipascual.com
![Page 21: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/21.jpg)
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
![Page 22: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/22.jpg)
www.ipascual.com
Control de diseño
![Page 23: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/23.jpg)
www.ipascual.com
Situaciones especiales de diseño
CMS
Categorías
Productos
![Page 24: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/24.jpg)
www.ipascual.com
Nuestra gran ayuda
![Page 25: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/25.jpg)
www.ipascual.com
Nuestra gran ayuda
![Page 26: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/26.jpg)
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>
![Page 27: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/27.jpg)
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
![Page 28: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/28.jpg)
Magento
Capacitación:
- Administración
- Diseño
- Desarrollo
![Page 29: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/29.jpg)
www.ipascual.com
Frameworks en Magento
![Page 30: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/30.jpg)
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
![Page 31: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/31.jpg)
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
![Page 32: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/32.jpg)
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
![Page 33: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/33.jpg)
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>
![Page 34: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/34.jpg)
www.ipascual.com
Creando un controlador
app/controllers/CategoryController.php
class Mage_Catalog_CategoryController extends Mage_Core_Controller_Front_Action{
public function viewAction() {
// …
}
}
![Page 35: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/35.jpg)
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
{
…
}
![Page 36: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/36.jpg)
www.ipascual.com
Configurando un Model
etc/config.xml
<global>
<models><alquiler>
<class>Ipascual_Alquiler_Model</class>
</alquiler></models>
…
![Page 37: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/37.jpg)
www.ipascual.com
Creando un Model
app/controllers/CategoryController.php
Class Ipascual_Alquiler_Model_Novedades extends Mage_Core_Model_Abstract{
public function getNovedades() {
// …
}
}
![Page 38: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/38.jpg)
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
{
…
}
![Page 39: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/39.jpg)
www.ipascual.com
Usando un Helper
Desde template *.phtml
<?php $this->helper(”alquiler")->myMethod(); ?>
Desde un block / model / controller…
Mage::helper("alquiler/data")->myMethod();
![Page 40: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/40.jpg)
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>
![Page 41: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/41.jpg)
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>
![Page 42: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/42.jpg)
www.ipascual.com
Base de datos
Modelos Entidad-Relación & EAV (Entidad Atributo Valor)
![Page 43: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/43.jpg)
www.ipascual.com
Base de datos
Modelo EAV (Entidad Atributo Valor)
![Page 44: Magento, uso, desarrollo y diseño](https://reader035.vdocuments.pub/reader035/viewer/2022062308/558b4fefd8b42ab1078b45d4/html5/thumbnails/44.jpg)
www.ipascual.com
Blog personal: unexpected [ it ] www.unexpectedit.com
Twitter: @ignaciopascual
Facebook: www.facebook.com/ipascualcom