Magento pour les concepteurs Partie 5

Magento est une plate-forme de commerce électronique incroyablement puissante. Dans cette mini-série, nous allons apprendre à utiliser la plate-forme, à connaître les terminologies, à créer un magasin et tous les aspects connexes, et enfin à le personnaliser pour l'adapter à votre image..

Dans cette cinquième partie, nous allons construire l'une des vues principales de notre magasin: la page d'informations sur le produit. Excité? Commençons!

La série complète

Partie 1: Installation et configuration
Partie 2: Produits, taxes, catégories, passerelles de paiement, etc..
Partie 3: Theming
Partie 4: Construire le thème
Partie 5: Création de la page d'informations sur le produit

Une récapitulation rapide

Dans la dernière partie, nous avons défini le cadre du thème en construisant les parties répétitives du thème et en définissant essentiellement la présentation générale du thème..

Nous avons également examiné de manière pratique le fonctionnement de la thématisation dans Magento en analysant la structure du tracé, le fonctionnement des blocs et la manière dont les différentes pièces du puzzle s’intègrent..

Que construisons-nous aujourd'hui??

Aujourd'hui, nous allons créer la page de vue individuelle du produit. Comme auparavant, les fichiers source, à la fois front-end et back-end, sont inclus. Vous pouvez l'utiliser pour voir à quoi ressemble la page, mais en dehors de cela, le thème devrait sembler brisé car, vous savez, nous n'avons pas encore touché le reste des vues. Donc, jusqu'à ce que nous construisions le reste, essayez de ne pas sortir de notre bac à sable.

Buts pour la page

Notre objectif pour cette page spécifique est relativement simple. Nous voulons une page sans fioritures qui ne traite que de l'essentiel. J'ai donc établi une courte liste d'éléments dont je pense avoir besoin:

Titre du produit: Assez évident
Possibilité d'afficher une image du produit
Un aperçu rapide et complet
Disponibilité et prix du produit et enfin
Un bouton Ajouter au panier pour le placer dans le panier

C'est tout. Je veux que ce soit aussi simple que possible et j'ai donc choisi de ne pas le faire. Une fois que vous avez appris les principes généraux, n'hésitez pas à ajouter autant de fonctionnalités whizbang que possible.

Le look de base

La page doit fondamentalement ressembler à ceci:

Étape 1 - Le HTML

Nous allons d'abord regarder le code HTML pour la partie contenu seulement. Je suppose que vous maîtrisez assez bien le langage HTML et CSS, je vais donc passer aux parties assez importantes..

  
  Disponibilité En stock
 Prix 29,00 $
 Ajouter au panier 
 Photoshop en HTML
 Rapide vue d'ensemble
  Description du produit

Tout d'abord, remarquez que j'ai enveloppé l'image du produit avec une div pour faciliter l'ajout de fonctionnalités à l'avenir. Supposons que vous souhaitiez ajouter une légende rapide à l’image affichée à l’avenir. Ainsi, nous pourrons l’ajouter beaucoup plus rapidement..

Nous avons un autre élément div contenant les informations de disponibilité et de prix ainsi que le ajouter au panier bouton. Nous allons la parfaire avec un peu de CSS3 dans un peu.

Le reste du HTML est très simple. Le titre réside dans une section h1 tandis que les en-têtes de section individuels occupent h2. La synthèse rapide est imbriquée dans un paragraphe tandis que la synthèse complète occupe une.

Nous pouvons passer à la partie style maintenant.

Étape 2 - Le CSS

 / * Page produit * / # image-produit-principale marge: 0 20px 10px 0; rembourrage: 10px; float: gauche; bordure: 1px solide # E1E1E1; arrière-plan: # F3F3F3;  # product-details width: 180px; rembourrage: 10px; Flotter à droite; bordure: 1px solide # E1E1E1; arrière-plan: # F3F3F3; marge: 0 0 0 20px;  # product-availability span.available, # produit-price span color: # 7db000; Flotter à droite;  .button margin: 10px auto; bloc de visualisation; largeur: 140px; rembourrage: 5px 10px; text-align: center; texte-décoration: aucun; couleur: # 555; bordure: 1px solide #ccc; taille de police: 18px; arrière-plan: #ddd; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; box-shadow: 1px 1px 2px rgba (0,0,0, .5); -webkit-box-shadow: 1px 1px 2px rgba (0,0,0, .5); -moz-box-shadow: 1px 1px 2px rgba (0,0,0, .5); text-shadow: #fff 0px 1px 1px; arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (#eeeeee), à (#cccccc)); arrière-plan: -moz-linear-gradient (top, #eeeeee, #cccccc);  .button: survoler background: # 014464; arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (#cccccc) à (# 999999)); arrière-plan: -moz-linear-gradient (haut, #cccccc, # 999999); couleur: # 000;  .button: active -moz-box-shadow: 0 2 pixels 6 pixels noir; -webkit-box-shadow: 0 2px 6px noir;

Rien d'extraordinaire ici. CSS très basique pour placer les éléments en position.

J'ai également utilisé un peu de CSS3 pour améliorer l'apparence des boutons..

Étape 3 - Création de notre fichier catalog.xml

Comme je l'ai mentionné dans la partie précédente, chaque module reçoit son propre fichier XML pour dicter les éléments à inclure et la présentation générale de la page. La page que nous construisons aujourd’hui repose sur un fichier appelé catalogue.xml définir son contenu et sa structure.

Ce fichier doit être présent dans le disposition dossier alors créons un fichier XML et nommez-le catalogue.

Le fichier complet d'aujourd'hui ressemble beaucoup. Je vais expliquer chaque bit partie par partie ci-dessous.

    Vue produit du catalogue (toute)      css / product.css

Ignorez les déclarations initiales de XML et de version de présentation. Ils sont sans importance pour nous maintenant.

Tout d'abord, nous informons le système que nous avons l'intention de modifier la partie vue système du système. Ceci est dû au fait catalogue.xml héberge la mise en page pour un certain nombre d'autres vues et il est donc impératif de spécifier quelle vue nous avons l'intention de modifier.

Maintenant, nous demandons à Magento de charger le 1column.phtml fichier en tant que modèle principal principal pour cette vue. En effet, chaque vue individuelle peut utiliser n'importe quelle structure prédéfinie. Par exemple, votre page d'accueil peut utiliser une structure personnalisée très complexe, votre page produit une double colonne et votre page de recherche une disposition en une seule colonne..

Si rien n’est spécifié, le modèle par défaut mentionné dans page.xml. Comme nous l'utilisons pour tout le reste, cette partie est redondante, mais lorsque vous modifiez ce modèle pour votre usage personnel, il est beaucoup plus facile de modifier le nom du fichier que d'ajouter des morceaux de code XML au fichier de présentation..

  css / product.css

Et maintenant, nous rencontrons l'une des parties les plus riches de Magento. Oui, nous pouvons regrouper tous nos CSS spécifiques dans un fichier CSS géant, mais nous ne sommes pas des hommes des cavernes, n'est-ce pas? Mis à part les pleurs de plusieurs requêtes HTTP, cette méthode nous permet de rationaliser notre CSS davantage.

Nous acquérons d’abord une référence à la section head du fichier, puis nous y insérons le contenu spécifique à la page. Ici, j'insère un fichier appelé product.css qui contient toutes les pages CSS spécifiques que nous avons examinées ci-dessus.

Notez que vous n'êtes pas limité aux CSS. Inclure JS et d'autres actifs est également possible.

Nous demandons maintenant à Magento d'utiliser un modèle spécifique pour la portion de contenu de la page.

Ce bloc définit tous les blocs individuels à l'intérieur du bloc de contenu principal. Nous utilisons essentiellement des modèles individuels pour afficher l'image, la vue d'ensemble et la description du produit, sa disponibilité / prix et enfin la fonctionnalité d'ajout au panier..

Et avec ça, notre base catalogue.xml le fichier est complet.

Étape 4 - Création de notre modèle principal

Ok, maintenant que nous avons spécifié notre mise en page, nous pouvons passer à la création du catalogue / produit / view.phtml fichier que nous avons spécifié comme modèle principal pour la section de contenu dans XML plus tôt.

Ce fichier est légèrement différent du modèle de squelette que nous avons créé dans la dernière partie car nous allons ajouter directement de petites choses au lieu de suivre le chemin du modèle pour éviter le fardeau avec un petit nombre d'appels d'API pour nous aider..

 assistant ('catalogue / sortie'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ('Aperçu rapide')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('description')?>

Si vous jetez un coup d'oeil, vous remarquerez que nous faisons un certain nombre de getChildHtml appels à acquérir ce contenu de blocs. Celles-ci fonctionnent comme prévu et le contenu de ces contenus sera couvert un peu plus tard ci-dessous.

 assistant ('catalogue / sortie'); $ _product = $ this-> getProduct (); ?>

Pour le moment, nous n'avons pas besoin de savoir ce que cela signifie. En termes simples, cependant, nous demandons essentiellement à Magento les informations de magasin de ce produit spécifique afin que nous puissions les traiter et les afficher ensuite sur la page..

 getOptions ()):?> enctype = "multipart / form-data">

Ici, nous utilisons l’une des méthodes API de Magento pour générer de façon dynamique l’URL à laquelle le formulaire doit envoyer des messages..

 productAttribute ($ _ product, $ _product-> getName (), 'name')?>

Nous utilisons une autre méthode de Magento pour acquérir directement le titre du produit.

 getShortDescription ()):?> __ ('Aperçu rapide')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Et encore une fois, comme l'aperçu rapide ne doit comporter qu'une phrase ou deux, j'opte de l'importer directement au lieu d'utiliser un modèle. Nous utilisons la même fonction que nous avons utilisée pour acquérir le titre.

Étape 5 - Création des modèles pour nos blocs

Avec toutes les principales parties terminées, nous pouvons maintenant nous concentrer sur les blocs individuels. Maintenant que nous avons déjà résolu ce problème lors de la construction du modèle principal, cela devrait être beaucoup plus facile maintenant..

Nous aborderons chacun dans l'ordre d'apparition dans notre code:

Image du produit

getChildHtml ('media') cartes directement à catalogue / produit / vue / media.phtml. Notre fichier ressemble à ceci:

 getProduct (); $ _helper = $ this-> helper ('catalogue / sortie'); ?> helper ('catalogue / image') -> init ($ _ product, 'image'). '"alt ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"title ="'. $ this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ product, $ _img, 'image');?>

Un code PHP simple. Nous utilisons les méthodes d'assistance pour acquérir l'image du produit puis la restituer à l'écran..

Disponibilité / Prix

getChildHtml ('product_type_data') cartes directement à catalogue / produit / vue / type / simple.phtml. Notre fichier ressemble à ceci:

 getProduct ()?> Disponibilité isSaleable ()):?> __ ('en stock')?>  __ (en rupture de stock)?>  
 Prix getPriceHtml ($ _ product)?>

Nous vérifions d'abord si l'élément est disponible ou non, puis générons le code HTML requis. L'acquisition du prix du produit est une méthode simple, appelez-la!

Ajouter au panier

getChildHtml ('addtocart') cartes directement à catalogue / produit / vue / addtocart.phtml. Notre fichier ressemble à ceci:

 getProduct ()?> isSaleable ()):?>

Comme il est logique, nous vérifions si un article est à vendre avant de générer le code HTML requis. C'est un simple bouton comme on le voit.

Description du produit

getChildHtml ('description') cartes directement à catalogue / produit / vue / description.phtml. Notre fichier ressemble à ceci:

 getProduct () -> getDescription (); ?>  Description du produit
 helper ('catalogue / output') -> productAttribute ($ this-> getProduct (), nl2br ($ _ description), 'description')?>

Semblable à la façon dont nous avons inclus la synthèse rapide, nous utilisons les méthodes intégrées de Magento pour acquérir les informations nécessaires. Nous vérifions l'existence de la description avant de la rendre..

Si vous êtes curieux, j'ai généralement tendance à inclure la description séparément via des modèles, principalement parce que, dans les modèles de production, la description est presque toujours post-procession. Dans ces scénarios, il est plus facile de scinder cette logique sur son propre modèle. Par contre, un aperçu rapide est généralement assez petit et est donc directement inclus.

Ce que nous allons construire dans la prochaine partie

… Est complètement à vous. Vous pouvez concevoir un assez grand nombre de vues, mais il est plutôt présomptueux de ma part d'en choisir une. Ainsi, je vous demande, lecteur, de suggérer une vue à couvrir dans la partie suivante à travers un commentaire dans la section commentaires ci-dessous. N'oubliez pas de me dire lequel couvrir!

Le dernier mot

Et nous avons fini! Aujourd'hui, nous avons créé la première vue de notre thème personnalisé Magento, la vue produit et la façon dont Magento nous permet d'ajouter des ressources et du contenu spécifiques à une page. J'espère que cela vous a été utile et que vous l'avez trouvé intéressant. Comme il s’agit d’un sujet assez nouveau pour un grand nombre de lecteurs, je suivrai de près la section commentaires de manière à ce que vous ayez des doutes..

Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!

Code