Share
Cuando inicialmente planeé esta serie, estaba destinada a ser una serie de 15 artículos, en la que planeamos desarrollar todas las páginas del tema, incluido el carrito de la compra, las páginas de pago, las páginas de inicio de sesión / registro y las páginas de las cuentas de usuario..
Pero después de escribir los primeros 10 artículos, me di cuenta de que ya hemos explicado, en detalle, todos los pasos necesarios para realizar los cambios en sus páginas de temas de Magento, y editar las otras páginas será solo una repetición de los pasos que ya hemos explicado. antes de.
Por lo tanto, estoy concluyendo la serie en este artículo, donde finalizaremos la página del producto de donde lo dejamos en el artículo anterior, y le daré algunos consejos sobre cómo usar las técnicas que ha aprendido en esta serie. para editar el resto de las páginas usted mismo.
Así que vamos a reanudar la página de detalles del producto de personalización. Así es como se ve actualmente:
Si lo comparamos con el diseño HTML que tenemos, así es como debería verse:
Para que se vea como nuestro diseño HTML, necesitamos hacer algunos cambios de fuente en las secciones de encabezado, precio y disponibilidad del producto. Además, en la sección 'Agregar al carrito' necesitamos cambiar el color de fondo y los bordes. Aparte de eso, necesitamos hacer algunos cambios con los márgenes y el relleno. Lo haremos agregando estas líneas en nuestro archivo theme.css:
/ ***** Página de detalles del producto *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center; .more- vistas .product-image-thumbs a: hover border-color: # b39a64; .more-views .product-image-thumbs a float: left; relleno: 3px; borde: 1px sólido #cccccc; .products-details font-family: Georgia, sans-serif; .products-description .name font-family: Georgia, sans-serif; tamaño de letra: 30px; .availability.in-stock font-size: 11px; .products-details .products-description .price width: 50%; font-size: 25px; color: # b39a64; font-weight: 500; .products-description .product-options border: none; relleno-izquierda: 30px; .product-view .products-description .product-options .swatch-attr label font-size: 11px; familia de fuentes: heredar; fuente-peso: normal; .products-description .product-options-bottom border: none; fondo: ninguno; relleno-izquierda: 30px; tamaño de fuente: 12px; relleno: 17px 0 0px 0; borde superior: 1px sólido #ccc; margen: 10px 30px 0 30px; .product-view .product-options-bottom .add-to-cart-buttons .button background: # b39a64; color: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
El código debe parecer bastante autoexplicativo. Después de hacer estos cambios, la página debería verse así:
Ahora estamos bastante cerca de nuestros requisitos de diseño de HTML. Sin embargo, si nos fijamos en la sección de pestañas de la página de productos, aunque se ve bien, no coincide con nuestro requisito de diseño de HTML. Así es como se ve actualmente:
Para que coincida con nuestro diseño HTML, agregaremos estas líneas CSS en nuestro archivo theme.css:
/ ***** Sección de pestañas *********** / .product-view .product-colateral .toggle-tabs border: none; fondo: ninguno; .product-view .product-colateral .toggle-tabs li.current .product-view .product-colateral .toggle-tabs li float: left; borde: 1px sólido #ececec; .product-view .product-colateral> dl> dd padding: 0 15px 15px 0px; frontera: ninguna; .product-view .product-colateral .toggle-tabs li.current> span background-color: #eee; color: # b39a64 ;;
Hemos cambiado el color de fondo de los encabezados de las pestañas y el color de la pestaña actual. El relleno y el borde de estos también se editan. Así es como debería verse ahora:
Se ve bastante cerca ahora. La página debe verse bien, excepto una pequeña cosa: el margen entre la sección de pestañas y los productos relacionados es demasiado y arruina el aspecto de toda la página.
Esto se debe a la min-height propiedad definida para el .caja de pestañas clase. Lo arreglaremos con este rápido código:
/ ***** Solucionar el problema del margen inferior ************ .product-view .tab-box min-height: initial;
El problema está arreglado ahora:
Ahora toda nuestra página de detalles del producto está lista y está bastante cerca de nuestros requisitos de diseño de HTML. Con esto hemos completado las tres páginas más importantes del sitio web de comercio electrónico, que son: página de inicio, página de listado de productos y página de detalles del producto.
Como mencioné al principio de este artículo, resumiré esta serie de artículos aquí, dándole algunos consejos sobre cómo puede personalizar otras páginas del tema, usando las habilidades que ha aprendido en esta serie..
Echemos un vistazo a la página del carrito. Actualmente se ve así:
Sin embargo, si nos fijamos en nuestro diseño HTML, debería verse así:
Ahora, para personalizarlo, usaremos el mismo procedimiento para activar las sugerencias de plantilla y para determinar qué archivos de plantilla son responsables de representar esta página, y luego realizaremos cambios en esos archivos:
Aquí puede ver que el diseño general de la página proviene del archivo /template/checkout/cart.phtml. Necesitamos editarlo para colocar los componentes en la posición correcta. Pondremos el código HTML que tenemos en nuestro archivo HTML y comenzaremos a reemplazar el código con el código dinámico.
De manera similar, podemos ver que las filas del producto se representan desde el archivo de plantilla / verificación / carrito / artículo / default.phtml. Tendremos que editar ese archivo también. Aparte de eso, no creo que tengamos que hacer ningún otro cambio en los archivos phtml, porque podemos hacer el resto fácilmente a través de CSS.
Ahora vamos a revisar la página de pago. Actualmente se ve así:
Según nuestro HTML, sin embargo, debería verse así:
Repitamos el mismo procedimiento nuevamente y descubramos los archivos phtml que necesitamos cambiar aquí. Allí puede ver que el diseño principal proviene de /template/checkout/onepage.phtml. Y la barra de progreso está siendo rellenada por este archivo: template / checkout / onepage / progress.phtml.
Podemos hacer cambios en estos dos archivos comparando el código con nuestro archivo HTML. Después de realizar los cambios en estos dos archivos, puede hacer el resto de los cambios a través de CSS. No creo que necesites cambiar ningún otro archivo phtml para esta página.
Permítame reiterar que no debe realizar los cambios en el tema predeterminado. Siempre debe hacer una copia del archivo phtml que desea editar en su nuevo tema, y solo editarlo allí.
Pasando a la página de inicio de sesión, actualmente se ve así:
Aquí repetiremos de nuevo todos los mismos pasos y comenzaremos habilitando las sugerencias de plantilla:
Aquí puede ver el archivo principal que deberá editar: template \ persistent / customer / form / login.phtml. Puede cambiar la mayor parte del diseño de la página desde este archivo. Para los cambios de estilo, puedes hacerlo a través de CSS.
Del mismo modo, podemos ver cómo editar la página de registro. Primero habilitaremos las sugerencias de plantilla:
Desde las sugerencias de plantillas, podemos ver que el diseño general de la sección de registro proviene de template / persistent / customer / form / register.phtml. Puedes cambiarlo editando este archivo..
Si ha estado siguiendo hasta ahora, probablemente debería saber todos los pasos de memoria. Puede continuar y editar las páginas de las cuentas de usuario utilizando los mismos procedimientos que ha aprendido aquí..
Ahora puede felicitarse formalmente: puede llamarse un desarrollador de temas de Magento, porque en realidad ha desarrollado un tema de Magento y ha aprendido todos los métodos y procedimientos básicos necesarios para ello..
Mientras escribo esta serie, he hecho un gran esfuerzo para que sea fácil y claro de seguir. Espero que esta serie haya sido una buena experiencia de aprendizaje para ti.!
Proporcione sus comentarios sobre esta serie en la sección de comentarios, y vuelva a Tuts + para ver otros artículos útiles. Y no olvide ver qué extensiones están disponibles para ampliar su trabajo con Magento.
Tener una gran experiencia de aprendizaje!
Accentsconagua