Share
Lorsque j'ai initialement planifié cette série, celle-ci devait être une série de 15 articles, dans lesquels nous avions prévu de développer toutes les pages du thème, y compris le panier d'achat, les pages de paiement, les pages de connexion / inscription et les comptes d'utilisateur..
Mais après avoir écrit les 10 premiers articles, je me suis rendu compte que nous avions déjà expliqué en détail toutes les étapes nécessaires pour apporter les modifications dans vos pages de thèmes Magento. La modification des autres pages ne sera que la répétition des étapes déjà expliquées. avant.
Par conséquent, je termine la série dans cet article, où nous finaliserons la page du produit à partir de celle où nous l'avons laissée dans l'article précédent, et je vous donnerai quelques conseils sur la façon d'utiliser les techniques que vous avez apprises dans cette série. éditer vous-même le reste des pages.
Reprenons donc la personnalisation de la page de détails du produit. Voici à quoi cela ressemble actuellement:
Si nous le comparons avec le design HTML que nous avons, voici à quoi cela devrait ressembler:
Pour ressembler à notre conception HTML, nous devons apporter quelques modifications aux polices dans les sections En-tête du produit, Prix et Disponibilité. De plus, dans la section "Ajouter au panier", nous devons modifier la couleur et les bordures de l'arrière-plan. En dehors de cela, nous devons apporter quelques modifications avec les marges et le remplissage. Nous ferons cela en ajoutant ces lignes dans notre fichier theme.css:
/ ***** Page Détails du produit *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center; .more- views .product-image-thumbs a: survol color-border: # b39a64; .more-views .product-image-thumbs a float: left; rembourrage: 3px; bordure: 1px solide #cccccc; .products-details font-family: Géorgie, sans-serif; .products-description .name font-family: Georgia, sans-serif; taille de police: 30px; .availability.in-stock font-size: 11px; .products-details .products-description .price width: 50%; taille de la police: 25px; couleur: # b39a64; font-weight: 500; .products-description .product-options border: none; rembourrage à gauche: 30px; .product-view .products-description .product-options .swatch-attr label taille de la police: 11px; famille de polices: hériter; poids de police: normal; .products-description .product-options-bottom border: none; fond: aucun; rembourrage à gauche: 30px; taille de police: 12px; remplissage: 17px 0 0px 0; border-top: 1px solid #ccc; marge: 10px 30px 0 30px; .product-view .product-options-bottom. boutons d'ajout au panier .button background: # b39a64; couleur: #fff; .product-view .products-description .add-to-cart marge-bottom: 21px;
Le code devrait paraître assez explicite. Après avoir apporté ces modifications, la page devrait ressembler à ceci:
Nous sommes maintenant assez proches de nos exigences en matière de conception HTML. Cependant, si nous regardons la section des onglets de la page des produits, bien que cela semble aller, cela ne correspond pas à notre exigence de conception HTML. Voici à quoi cela ressemble actuellement:
Pour le faire correspondre à notre conception HTML, nous allons ajouter ces lignes CSS dans notre fichier theme.css:
/ ***** Section Onglets *********** / .product-view .product-collateral .toggle-tabs border: none; fond: aucun; .product-view .product-collateral .toggle-tabs li.current .product-view .product-collateral .toggle-tabs li float: left; bordure: 1px solide #ececec; .product-view .product-collateral> dl> dd remplissage: 0 15px 15px 0px; bordure: aucune; .product-view .product-collateral .toggle-tabs li.current> span background-color: #eee; couleur: # b39a64 ;;
Nous avons modifié la couleur d'arrière-plan des en-têtes d'onglets et la couleur de l'onglet actuel. Le remplissage et la bordure pour ceux-ci sont également édités. Voici à quoi cela devrait ressembler maintenant:
Il semble assez proche maintenant. La page doit avoir une belle apparence, sauf une petite chose: la marge entre la section des onglets et les produits associés est trop importante et gâche le look de la page entière..
C'est à cause de la hauteur min propriété définie pour le .tab-box classe. Nous allons le réparer avec ce code rapide:
/ ***** Correction du problème de la marge inférieure *********** / .product-view .tab-box min-height: initial;
Le problème est résolu maintenant:
Notre page de détail de produit est maintenant prête et assez proche de nos exigences en matière de conception HTML. Nous avons ainsi complété les trois pages les plus importantes du site Web de commerce électronique, à savoir: page d'accueil, page de liste de produits et page de détails du produit..
Comme je l'ai mentionné au début de cet article, je vais terminer cette série d'articles en vous donnant quelques conseils sur la façon de personnaliser d'autres pages du thème, en utilisant les compétences acquises dans cette série..
Regardons la page du panier. Cela ressemble actuellement à ceci:
Cependant, si nous examinons notre conception HTML, elle devrait ressembler à ceci:
Maintenant, pour le personnaliser, nous allons utiliser la même procédure pour activer les indicateurs de modèle et déterminer quels fichiers de modèle sont responsables du rendu de cette page, puis nous apporterons des modifications à ces fichiers:
Ici, vous pouvez voir que la disposition générale de la page provient du fichier /template/checkout/cart.phtml. Nous devons le modifier pour placer les composants dans la bonne position. Nous allons mettre le code HTML que nous avons dans notre fichier HTML et commencer à remplacer le code par le code dynamique.
De même, nous pouvons voir que les lignes du produit sont en cours de rendu à partir du fichier template / checkout / cart / item / default.phtml. Nous devrons également éditer ce fichier. En dehors de cela, je ne pense pas que nous devions apporter d'autres modifications aux fichiers phtml, car nous pouvons faire le reste facilement via CSS..
Maintenant, vérifions la page de paiement. Cela ressemble actuellement à ceci:
Selon notre code HTML, il devrait ressembler à ceci:
Répétons la même procédure et découvrons les fichiers phtml que nous devons changer ici. Vous pouvez voir que la mise en page principale provient de /template/checkout/onepage.phtml. Et la barre de progression est remplie par ce fichier: template / checkout / onepage / progress.phtml.
Nous pouvons modifier ces deux fichiers en comparant le code avec notre fichier HTML. Après avoir effectué les modifications dans ces deux fichiers, vous pouvez effectuer le reste des modifications via CSS. Je ne pense pas que vous ayez besoin de changer un autre fichier phtml pour cette page.
Permettez-moi de répéter ici que vous ne devez pas modifier le thème par défaut. Vous devriez toujours faire une copie du fichier phtml que vous voulez éditer dans votre nouveau thème, et ne l'éditez que là-bas..
En passant à la page de connexion, cela ressemble à ceci:
Ici, nous allons répéter les mêmes étapes et commencer par activer les indicateurs de modèle:
Ici, vous pouvez voir que le fichier principal que vous devez modifier est: template \ persistent / client / form / login.phtml. Vous pouvez modifier la majeure partie de la mise en page de la page à partir de ce fichier. Pour les changements de style, vous pouvez le faire via CSS.
De même, nous pouvons voir comment modifier la page d'inscription. Commençons par activer les indications de modèle:
D'après les indications sur les modèles, nous pouvons voir que la présentation générale de la section d'inscription provient de template / persistent / customer / form / register.phtml. Vous pouvez le changer en éditant ce fichier.
Si vous avez suivi jusqu'ici, vous devriez probablement connaître toutes les étapes par cœur. Vous pouvez continuer et éditer les pages des comptes utilisateurs en utilisant les mêmes procédures que celles que vous avez apprises ici..
Vous pouvez officiellement vous féliciter maintenant: vous pouvez vous appeler un développeur de thèmes Magento, car vous avez en fait développé un thème Magento et avez appris toutes les méthodes et procédures de base requises pour cela..
En écrivant cette série, j'ai fait de gros efforts pour que ce soit facile et clair à suivre. J'espère que cette série a été une bonne expérience d'apprentissage pour vous!
Fournissez vos commentaires sur cette série dans la section commentaires, et revenez sans cesse à Tuts + pour consulter d’autres articles utiles. Et n'oubliez pas de voir quelles extensions sont disponibles pour étendre votre travail avec Magento.
Bonne expérience d'apprentissage!
Accentsconagua