Share
Magento es una plataforma de comercio electrónico increíblemente poderosa. En esta miniserie, aprenderemos cómo comenzar con la plataforma, conocer las terminologías, configurar una tienda y todos los aspectos relacionados de ella y, finalmente, aprender a personalizarla para hacerla nuestra propia..
En esta sexta parte, construiremos una de las funciones más solicitadas por los lectores: obtener un control deslizante de productos destacados en la página de inicio. ¿Emocionado? Empecemos!
En la última parte, creamos la página de información del producto y observamos cómo se extraen y muestran los datos en un tema típico de Magento..
También examinamos los diversos métodos básicos que utiliza nuestro tema para obtener diversos medios y datos sobre nuestro producto. Espero que recuerden al menos un poco de esa información porque la usaremos hoy de nuevo.
Hoy, vamos a construir la página de inicio todos importantes. Como siempre, lo mantendré lo más simple posible y omitiré cualquier característica extraña. Diferentes tiendas tienen diferentes contenidos en sus páginas de inicio. Una de las funciones más populares y sin duda una de las más solicitadas es mostrar un control deslizante de contenido basado en JavaScript con productos especiales. Sé que suena interesante y tienes ganas de empezar. Empecemos!
Al igual que con nuestras otras páginas, nuestros objetivos para esta página específica son relativamente simples. Queremos un control deslizante simple que muestre productos específicos en un control deslizante limpio. Por lo tanto, he elaborado una breve lista de elementos que creo que necesita:
Eso es. Quiero que sea lo más simple posible y, por lo tanto, opté por no hacerlo en exceso. Por supuesto, tendremos que trabajar con el extremo frontal y el final para cumplir todos nuestros objetivos..
La página básicamente tiene que verse así:
Primero veremos el HTML para la parte de contenido solo. Supongo que usted es bastante fluido en HTML y CSS, así que me saltaré a las partes bastante importantes.
Zonda f
700,000.00El Pagani Zonda es un automóvil deportivo de motor medio producido por Pagani en Italia..
En este punto, todo esto es bastante básico. presentación de diapositivas es el contenedor con el que estamos envolviendo la presentación completa y se pasará al JavaScript responsable del control deslizante.
Cada diapositiva está envuelta por un div llamado diapositiva. En el interior tenemos dos contenedores flotantes: uno para la imagen y el segundo para la información sobre el producto en sí..
Eso es todo lo que hay que hacer. Podemos pasar a la parte de estilo ahora.
/ * Página de inicio * / .slide clear: both; desbordamiento: auto; relleno: 10px; ancho: 898px; borde: 1px sólido # E1E1E1; fondo: # F6F6F6; .product-image float: left; ancho: 650px; relleno: 10px; borde: 1px sólido # E1E1E1; antecedentes: #FAFAFA; .product-details float: left; ancho: 190px; margen: 0 0 0 20px; .product-details .price margen: -15px 0 0 0; color: # 7db000; .product-details p margin: 10px 0 0 0; #nav posición: absoluta; arriba: 255px; derecha: 250px; índice z: 2000; #nav a margin-right: 10px; altura: 5px; ancho: 5px; índice z: 1000; flotador izquierdo; texto-sangría: -9999px; cursor: puntero; borde: 1px sólido #fff; fondo: #eee; #nav a: hover border: 1px solid #fff; fondo: # 999; #nav a.activeSlide border: 1px solid # 444; fondo: # 333;
Nada de lujos aquí. CSS muy básico para colocar los elementos en posición..
El único punto a tener en cuenta es la declaración de la clase. activeSlide. Esta clase se asigna al ancla de navegación respectiva de la diapositiva actual.
Lo primero que debemos hacer es configurar una categoría separada a la que podamos asignar todos los productos que necesitamos que aparezcan en nuestro control deslizante. Haga clic en el catalogar menú y luego en categorías. Escoger agregar nueva categoría de raíz.
Introduzca un nombre de su elección y luego elija no para el está activo desplegable. No queremos que se muestre en otras partes del sitio..
Una vez que se haya guardado la nueva categoría, puede encontrar la ID a la que se le ha asignado. Anote esto. Lo necesitaremos para más tarde..
Usaremos un solo archivo de plantilla para extraer la información relevante, formatearla según sea necesario y mostrar todo. Tiene total libertad con respecto al nombre y la ubicación de este archivo, pero para mantenerlo simple, lo he nombrado destacado.phtml y lo puso en catálogo / producto / aparece.phtml. Recuerde, esto va a su carpeta de plantillas, no a su carpeta de diseño.
El contenido del archivo se ve así. No se preocupe por la longitud, veremos cada pieza después del código..
Accentsconagua
addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ('catalog / category') -> load ($ cat_id)); if (! $ _ productCollection-> count ()): echo $ this -> __ ('No hay productos que coincidan con la selección.'); else:?> getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ producto, 'small_image'))?> ">  -> init ($ _ product, 'small_image') -> resize (650, 250); ?> "<?php echo $this->htmlEscape ($ this-> getImageLabel ($ _ producto, 'small_image'))?>")
getName (); ?>
getFinalPrice (), 2);?> getShortDescription (); ?>
Aquí está la primera pieza:
$ cat_id = "2";
Primero, deberemos especificar el ID de la categoría de la que queremos extraer nuestros productos. En nuestro caso, será 2, el ID de la categoría que acabamos de crear..
 -> init ($ _ product, 'small_image') -> resize (650, 250); ?> "<?php echo $this->htmlEscape ($ this-> getImageLabel ($ _ producto, 'small_image'))?>")
$ _productCollection = Mage :: getResourceModel ('catalog / product_collection') -> addAttributeToSelect (array ('name', 'price', 'small_image', 'short_description'), 'inner') -> addCategoryFilter (Mage :: getModel ( 'catálogo / categoría') -> cargar ($ cat_id)); Esto parece un poco complicado pero déjame asegurarte que es muy simple. Para ponerlo en términos simples, esencialmente pasamos el ID de la categoría que necesitamos a través de la variable cat_id y pida a Magento que recupere el nombre, el precio, la imagen y una breve descripción de los productos que coinciden. En este momento, te aconsejo que no juegues con el resto a menos que estés bien versado en MVC y otros aspectos de la arquitectura de Magento..
if (! $ _ productCollection-> count ()): echo $ this -> __ ('Lo sentimos, no hay elementos que coincidan con sus criterios de selección'); else:?> Tendremos que comprobar si tenemos elementos coincidentes, ¿no es así? Eso es lo que estamos haciendo aquí. Sólo asegurándonos de que tengamos elementos que coincidan Si no, mostramos un error..
Vamos a empezar a recorrer nuestra colección de productos.!
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ producto, 'small_image'))?> ">
getName (); ?>
getFinalPrice (), 2);?>getShortDescription (); ?>
Si ha leído la parte anterior de esta serie, este código debe ser bastante familiar para usted. Utilizamos métodos horneados de Magento para recuperar medios pertenecientes a nuestro producto..
El segundo fragmento puede parecer un poco diferente porque en lugar de utilizar métodos más abstractos, utilicé métodos más cercanos al hueso para adquirir directamente los datos que necesitamos..
Si te sientes un poco confundido aquí, simplemente revisa el código anterior uno más. El nombre de los métodos son bastante explicativos. El único obstáculo debe ser cómo adquirimos la imagen en sí: le pedimos a uno de nuestros ayudantes que adquiera la imagen y la redimensione al tamaño que necesitamos. Nada mas que eso.
Tenga en cuenta que abrimos y cerramos un diapositiva div cada vez que nuestro bucle se ejecuta. Esto es para encapsular la información de cada producto con un elemento contenedor para que sea más fácil para nosotros crear un control deslizante más adelante..
Y con esto, nuestro código base de PHP está completo..
No tiene sentido reinventar completamente la rueda aquí, ya que el foco central de esta serie es Magento. Por lo tanto, usaremos un excelente complemento para crear nuestro control deslizante hoy: el complemento jQuery Cycle.
Pero primero, ve a root / js y crea una carpeta llamada cirro. Diferentes personas tienen diferentes métodos de organización aquí. Prefiero tener un JS de tema separado en lugar de organizarlos por fuente. Necesitaremos una copia de jQuery [1.4 con suerte], el último complemento del ciclo y un archivo de script personalizado, que estoy nombrando moca.
Aquí está el contenido de nuestro archivo JS.
(function ($) $ (document) .ready (function () $ ('# home-slideshow') .before ('') .cycle (fx:' fade ', velocidad: 1500, timeout: 5000, pausa: 1, delay: 5000, pager:' #nav '); ); ) (jQuery) Primero, note que estamos envolviendo todo dentro de un (función ($) // Código) (jQuery) bloquear. Esto es para asegurarse de que jQuery no entre en conflicto con ninguna otra biblioteca incluida.
El bloque de documentos listos, como siempre, es asegurarse de que nuestro código se ejecute solo después de que se hayan cargado todos los recursos de la página, ya que a Magento le gusta colocar nuestros archivos JavaScript en la parte superior.
Inicializar el plugin es bastante simple. Solo tienes que escribir el ID del contenedor principal, presentación de diapositivas En nuestro caso, ya nos vamos. Acabo de modificar algunas de las opciones para que haga nuestra oferta..
Algo a tener en cuenta es que estamos creando y posicionando dinámicamente nuestro contenedor para los elementos de navegación dentro del DOM con JavaScriptS. Este elemento solo es necesario si JavaScript está habilitado. Si no lo es, no queremos un código vacío e inútil en nuestra página.
También pasamos en el selector el contenedor de navegación al complemento deslizante..
Eso es. La parte de JavaScript de nuestro código está hecha..
Paso 6 - Configuración de nuestra página de inicio
Ahora que hemos completado todas nuestras bases, finalmente podemos configurar nuestra página de inicio ahora.
Haga clic en el menú CMS y elija la páginas opción. Haga clic en la página de inicio en la página resultante.
La primera pestaña debe ser bastante auto explicativa. Asegúrate de que nuestra página esté habilitada..
En la pestaña de contenido, asegúrese de ingresar lo siguiente después de deshabilitar el editor:
block type = "catalog / product_list" block_id = "Featured.products" template = "catalog / product / featuring.phtml"
Este es el método de Magento para incluir los bloques requeridos. Solo le damos una ID para remitirla y señalarla a nuestra plantilla personalizada.
En la pestaña de diseño, cambie la plantilla de diseño a 1 columna ya que lo estamos utilizando para todo y luego ingrese lo siguiente en xml actualización de diseño campo.
css / home.css
¿Recuerda cómo al crear la página del producto, incluimos CSS personalizado en el archivo de diseño de la página para asegurarnos de que no se cargue el código base completo para cada página? Estamos haciendo esencialmente lo mismo aquí. En lugar de crear un archivo XML solo para esto, Magento nos permite ingresar esto directamente a través de la interfaz.
Simplemente cargamos nuestro CSS personalizado, nuestras bibliotecas JS y el archivo de script que contiene todo nuestro código.
Haga clic en "guardar" para guardar todo nuestro progreso, vaciar el caché de Magento y ver cómo se desliza el hermoso control deslizante en su página de inicio en su gloriosa y tremendamente bella gloria!
Lo que vamos a construir en la siguiente parte
... es completamente de usted. Ya he cubierto casi toda la información relevante para personalizar cualquier vista y pasar por todas y cada una de las vistas es completamente intuitivo. Por lo tanto, he concluido que todo lo que queda es cómo crear un módulo personalizado y creo que para entonces esta serie seguirá su curso. Es posible que escriba unos ajustes rápidos de Magento y procedimientos de optimización si hay suficientes personas que muestran interés por este artículo..
Si siente que es necesario cubrir algo más antes de que finalice esta serie, no dude en dejar un comentario a continuación para avisarme.!
La última palabra
¡Y hemos terminado! Hoy aprendimos cómo crear una página de inicio personalizada completa con un control deslizante que muestra los productos destacados. También aprendimos a hacer todo esto sin depender de una extensión de terceros y, en su lugar, codificamos todo esto por nosotros mismos. Esperemos que esto te haya sido útil y que te haya parecido interesante. Ya que este es un tema bastante nuevo para muchos lectores, estaré observando atentamente la sección de comentarios, así que coméntense si tiene alguna duda..
Preguntas? Cosas bonitas que decir? Criticas? Pulsa la sección de comentarios y déjame una nota. Feliz codificacion!
