Share
En el artículo anterior sobre páginas de categoría, editamos la barra de herramientas, la cuadrícula y el diseño de la lista. En este segundo artículo sobre la personalización de la página de categorías, personalizaremos la barra lateral y haremos algunas correcciones de CSS..
En primer lugar, agregaremos algunos componentes en la barra lateral, para que podamos personalizarlos. Aquí, para fines de demostración, solo agregaremos uno o dos componentes y los modificaremos. Eso le dará una amplia comprensión de cómo puede modificar los otros componentes de la barra lateral también.
Por ahora solo agregaremos 'comparar productos' y un banner de barra lateral a la barra lateral. Lo haremos desde el código local.xml. Si recuerda los primeros artículos de la serie, puede encontrar el archivo local.xml en la carpeta de diseño de su archivo de tema..
Agregaremos una referencia a la sección de la izquierda, y luego agregaremos una pancarta y compararemos el módulo del producto en la barra lateral, usando el siguiente código:
images / banner-small-01.png Nuestro servicio al cliente está disponible 24/7. Llámenos al (555) 555-0123. pago / carrito
Úselo solo como un código de referencia; puede agregar más módulos o banners utilizando el mismo procedimiento.
Si observamos nuestro diseño HTML, notaremos que todos los componentes están bien diseñados, especialmente la parte del encabezado, que tiene múltiples colores..
Si bien nuestro diseño actual no está muy bien, podemos modificarlo mediante CSS, pero necesitamos modificar el HTML para agregar clases para diferentes colores en el encabezado.
Para modificar el HTML, primero habilitaremos sugerencias de plantilla y descubriremos que el archivo responsable es \ template \ catalog / product / compare / sidebar.phtml.
Ahora abriremos este archivo sidebar.phtml y lo compararemos con el código HTML.
Nuestro código HTML de diseño para la barra lateral se ve así:
Productos Etiquetas
- Lincoln nos
- SDress para niña
- Esquina
- Ventana
- PG
- Oscar
- Baño
- PSD
Podemos ver que el encabezado tiene la h3 etiqueta con una clase de título, y tiene el fuerte Etiqueta alrededor de las partes del encabezado, que tienen un color diferente.
Para ello, sustituiremos el título de bloque. div con este:
__ ('Comparar')?>__ ('Productos')?> getItemCount ()> 0):?> __ ('(% d)', $ _helper-> getItemCount ())?>
Actualice la página, y debería verse bastante cerca de nuestro diseño HTML ahora. Puedes agregar y diseñar otros componentes de la barra lateral de una manera similar.
Ahora que hemos terminado de editar los archivos phtml, comencemos a corregir los estilos CSS.
Empezaremos a arreglar estilos desde la parte superior. El primer componente que necesita nuestra atención es el encabezado de la página. Como podemos ver, está bastante apagado y no está cerca de nuestros requisitos de HTML.
Agregaremos estas líneas en nuestro nuevo archivo CSS para darle estilo al encabezado.
.page-title h1 font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif; flotador izquierdo; posición: relativa; ancho: 100%; margen inferior: 15px; tamaño de fuente: 24px; color: # 2f2f2f; peso de la fuente: 300; parte inferior de relleno: 5px; text-align: center; fondo: url (… /images/hadingBg.jpg) centro de no repetición; línea de altura: 3; .col-md-9 .toolbar float: none; frontera: ninguna; color de fondo: transparente; relleno-izquierda: 0;
Aquí le damos una buena fuente de texto, altura de línea, alineación de texto, imagen de fondo, etc. Además, hemos hecho transparente el fondo sin borde. Debería verse así ahora:
A continuación necesitamos modificar la sección de la barra de herramientas. Para eso agregaremos estos estilos en nuestro archivo CSS:
.barra de herramientas .sorter> .view-mode float: left; .toolbar .sorter> .view-mode .grid background-image: url (… /images/grid-icon.png); ancho: 25px; altura: 25px; posición de fondo: 0px 0px; .toolbar .sorter> .view-mode .list background-image: url (… /images/list-icon.png); ancho: 25px; altura: 25px; posición de fondo: 0px 0px; .toolbar .sorter seleccione font-size: 12px;
Aquí acabamos de especificar algunas imágenes de fondo, ancho, altura, etc., y eso hará el truco. La página debería verse así:
Ahora, comencemos a editar la sección de productos en la vista de cuadrícula. La página se ve así ahora:
Solo tendremos que hacer algunos ajustes de estilo de ancho y flotación. También el precio del color necesita cambiar. Haremos todo eso agregando estas líneas CSS:
.categoría-productos .products-grid - max-4-col> li ancho: 30%;. category-products .products-grid - max-4-col> li .view-eighth: hover .mask arriba : 170px; .item .price-box .price, .price color: negro;
Ahora la sección de cuadrícula debería verse así:
En la última parte, necesitamos arreglar la sección de productos en el modo de lista. Actualmente parece bastante desordenado, pero no te preocupes, unas pocas líneas de CSS lo arreglarán todo.
Para que se vea bien, usaremos estos estilos CSS:
.item .product-list-description .price-box .price float: left; tamaño de fuente: 28px; color: # b39a64; margen derecho: 10px; .products-list .products .thumbnail border: medium none; flotador izquierdo; margen: 0; relleno: 10px; posición: relativa; ancho: 18%; height: auto; .products-list .products min-height: 100px; .products-list .products: hover background: #fff; color de borde: # b39a64; -webkit-box-shadow: 0 0 5px 1px # d3d3d3; cuadro de sombra: 0 0 5px 1px # d3d3d3; .products-list .products border: 1px solid # e1e1e1; posición: relativa; desbordamiento: oculto; fondo: #fff; relleno: 15px; margen superior: 15px; min-height: 150px; .products .button background: # b39a64; color: #fff; .button: hover, button: hover border: 1px solid # b39a64;
Aquí hemos establecido el ancho de la imagen del producto, hemos flotado el precio a la derecha, dado a toda la sección un bonito fondo, efecto de borde y desplazamiento, y hemos modificado ligeramente el botón. La página debe verse algo como esto:
Con todo esto hecho, su página de catálogo debe verse bien y cerca de nuestros requisitos de diseño HTML. Es posible que necesite algún otro ajuste de CSS, pero aparte de eso, está todo configurado.
En el siguiente artículo de esta serie, comenzaremos a editar la página de detalles del producto..
Por favor, deje sus sugerencias y comentarios en la sección de comentarios. Lo estaremos esperando.
Accentsconagua