Merge pull request #3 from brutdethe/afficher-une-fiche-produit

Afficher une fiche produit

README.md

@@ -21,13 +21,22 @@ Créer une boutique simple et minimaliste pour vendre des objets ou des prestati
   - [x] Pages traduites
   - [x] Traduction de l'interface
 
+- US-03 Fiche produit
+  - [x] Reprend une fiche produit
+  - [x] Affiche les données
+  - [x] Ajout une 404 et un favicon
+  - [x] Améliore l'accessibilité Aria
+  - [x] Gère l'i18n
+  - [x] Simplifie le CSS
+
 ### À venir
 
-- US-03 Fiche produit
-- US-04 Présentation des produits
-- US-05 Gestion du panier
-- US-06 Paiement
-- US-07 Gestion des frais de transport
+- US-04 Carrousel
+- US-05 Migration des fiches
+- US-06 Présentation des produits
+- US-07 Gestion du panier
+- US-08 Paiements
+- US-09 Gestion des frais de transport
 
 ## Outils utilisés
 

eleventy.config.js

@@ -1,9 +1,11 @@
 import { EleventyI18nPlugin } from "@11ty/eleventy"
+import yaml from "js-yaml"
 
 export const config = {
   dir: {
   	input: 'src',
   	output: 'dist',
+    img_products: '_assets/products'
 	},
 
   markdownTemplateEngine: "njk",
@@ -22,6 +24,8 @@ export default function(eleventyConfig) {
     defaultLanguage: "fr",
   })
 
+  eleventyConfig.addDataExtension("yaml, yml", (contents) => yaml.load(contents));
+
   eleventyConfig.addFilter("customLocaleUrl", function(path, lang) {
 
     if (lang === config.langs.default) {

package.json

@@ -23,6 +23,7 @@
     "@11ty/eleventy": "^3.0.0"
   },
   "devDependencies": {
-    "gh-pages": "^6.2.0"
+    "gh-pages": "^6.2.0",
+    "js-yaml": "^4.1.0"
   }
 }

src/_data/i18n.yaml

@@ -0,0 +1,81 @@
+aboutTitle:
+    fr: à-propos
+    en: about
+
+aboutUrl:
+    fr: https://www.gongfucha.fr/pages/faq-boutique
+    en: https://www.gongfucha.fr/pages/faq-boutique
+
+shopTitle:
+    fr: boutique
+    en: shop
+
+cartTitle:
+    fr: panier
+    en: cart
+
+privacyTitle:
+    fr: confidentialité
+    en: privacy notice
+
+legalTitle:
+    fr: mentions légales
+    en: legal notice
+
+buttonCartTitle:
+    fr: ajouter au panier
+    en: add to cart
+
+logoAlt:
+    fr: Logo de la boutique Gong Fu Cha
+    en: Logo of Gong Fu Cha shop
+
+mainContent:
+    fr: Contenu principal
+    en: Main content
+
+meta:
+    description:
+        fr: Découvrez notre boutique Gong Fu Cha et trouvez des produits uniques pour vos dégustations de thé.
+        en: Discover our Gong Fu Cha shop and find unique products for your tea tasting experience.
+
+photoAlt:
+    fr: Image du produit
+    en: Product image
+
+aria:
+    navigationMain:
+        fr: Navigation principale
+        en: Main navigation
+
+    selectionCurrencyLanguage:
+        fr: Sélection de la devise et de la langue
+        en: Currency and language selection
+
+    changeLanguageFr:
+        fr: Changer la langue en français
+        en: Change language to French
+
+    changeLanguageEn:
+        fr: Changer la langue en anglais
+        en: Change language to English
+
+    currencyEur:
+        fr: Changer la monnaie en euros
+        en: Change currency to euros
+
+    currencyUsd:
+        fr: Changer la monnaie en dollars
+        en: Change currency to dollars
+
+    productPrice:
+        fr: Prix du produit
+        en: Product price
+
+    addToCartButton:
+        fr: Ajouter au panier
+        en: Add to cart
+
+    productImageCaption:
+        fr: '- Image du produit'
+        en: '- Product image'

src/_data/settings.yaml

@@ -0,0 +1,2 @@
+dirs:
+    img_products: /_assets/products/

src/_includes/default.njk

@@ -4,28 +4,37 @@
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+
         <link href="{{ '/_assets/favicon.ico' | url }}" rel="icon" type="image/ico">
         <link rel="stylesheet" href="{{ '/bundle.css' | url }}">
         <link rel="alternate" hreflang="fr" href="{{ page.filePathStem | customLocaleUrl("fr") | url }}">
         <link rel="alternate" hreflang="en" href="{{ page.filePathStem | customLocaleUrl("en") | url }}">
+
+        <meta name="description" content="{{ i18n.meta.description[page.lang] }}">
+
+        <meta property="og:title" content="{{ title }}">
+        <meta property="og:description" content="{{ i18n.meta.description[page.lang] }}">
+        <meta property="og:url" content="{{ page.url | url }}">
+        <meta property="og:type" content="website">
+
         <title>{{ title }}</title>
     </head>
     <body>
-        <main class="wrapper">
+        <main class="wrapper" role="main">
             {% include "header.njk" %}
-            <section>
+            <section aria-labelledby="content-title">
                 {{ content | safe }}
             </section>
-            <footer class="section section-footer">
+            <footer class="section section-footer" role="contentinfo">
                 <ul class="container grid-lg">
                     <li>
-                        <a href="{{ '/privacy' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.privacy.title[page.lang] }}</a>
+                        <a href="{{ '/privacy' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.privacyTitle[page.lang] }}</a>
                     </li>
                     <li>
-                        <a href="{{ '/legacy' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.legal.title[page.lang] }}</a>
+                        <a href="{{ '/legacy' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.legalTitle[page.lang] }}</a>
                     </li>
                 </ul>
             </footer>
         </main>
     </body>
-</html>
+</html>

src/_includes/header.njk

@@ -1,24 +1,24 @@
-<header class="header columns">
+<header class="header columns" role="banner">
     <h1 class="title column col-3 col-md-12">
-        <a href="{{ '/' | customLocaleUrl(page.lang) | url }}">
-            <img src="https://www.gongfucha.fr/assets/sceau-the.svg" alt="logo boutique" class="logo">
+        <a href="{{ '/' | customLocaleUrl(page.lang) | url }}" class="logo-link">
+            <img src="https://www.gongfucha.fr/assets/sceau-the.svg" alt="{{ i18n.logoAlt[page.lang] }}" class="logo">
         </a>
     </h1>
-    <nav class="column col-7 col-md-9 col-sm-12">
-        <ul>
-            <li><a href=" {{ '/' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.shop.title[page.lang] }}</a></li>
-            <li><a href=" {{ i18n.about.url[page.lang] }}" class="nav-link">{{ i18n.about.title[page.lang] }}</a></li>
-            <li><a href="/" class="nav-link"><span class="badge" data-badge="0" data-initial="YZ">{{ i18n.cart.title[page.lang] }}</span></a></li>
+    <nav class="column col-7 col-md-9 col-sm-12" aria-label="{{ i18n.aria.navigationMain[page.lang] }}">
+        <ul class="nav-list">
+            <li><a href="{{ '/' | customLocaleUrl(page.lang) | url }}" class="nav-link">{{ i18n.shopTitle[page.lang] }}</a></li>
+            <li><a href="{{ i18n.aboutUrl[page.lang] }}" class="nav-link">{{ i18n.aboutTitle[page.lang] }}</a></li>
+            <li><a href="/" class="nav-link"><span class="badge" data-badge="0" data-initial="YZ">{{ i18n.cartTitle[page.lang] }}</span></a></li>
         </ul>
     </nav>
-    <div class="i18n columns col-gapless column">
+    <div class="i18n columns col-gapless column col-2 col-md-3 col-sm-12" role="complementary" aria-label="{{ i18n.aria.selectionCurrencyLanguage[page.lang] }}">
         <div class="currency column col-6">
-            <button class="btn btn-sm bg-secondary" value="EUR">€</button>
-            <button class="btn btn-sm " value="USD">$</button>
+            <button class="btn btn-sm bg-secondary" value="EUR" aria-label="{{ i18n.aria.currencyEur[page.lang] }}">€</button>
+            <button class="btn btn-sm" value="USD" aria-label="{{ i18n.aria.currencyUsd[page.lang] }}">$</button>
         </div>
         <div class="language column col-6">
-            <a href="{{ page.filePathStem | customLocaleUrl("fr") | url }}" class="btn btn-sm {% if page.lang == 'fr' %}bg-secondary{% endif %}" {% if page.lang == 'fr' %} aria-current="page" {% endif %}>FR</a>
-            <a href="{{ page.url | locale_url('en') | url }}" class="btn btn-sm {% if page.lang == 'en' %}bg-secondary{% endif %}" {% if page.lang == 'en' %} aria-current="page" {% endif %}>EN</a>
+            <a href="{{ page.filePathStem | customLocaleUrl("fr") | url }}" class="btn btn-sm {% if page.lang == 'fr' %}bg-secondary{% endif %}" {% if page.lang == 'fr' %} aria-current="page" {% endif %} aria-label="{{ i18n.aria.changeLanguageFr[page.lang] }}">FR</a>
+            <a href="{{ page.url | locale_url('en') | url }}" class="btn btn-sm {% if page.lang == 'en' %}bg-secondary{% endif %}" {% if page.lang == 'en' %} aria-current="page" {% endif %} aria-label="{{ i18n.aria.changeLanguageEn[page.lang] }}">EN</a>
         </div>
     </div>
-</header>
+</header>

src/_includes/product.njk

@@ -0,0 +1,38 @@
+---
+layout: default.njk
+card:
+  en: add to basket
+  fr: ajouter au panier
+eleventyComputed:
+  title: "Fiche produit : {{ titre }}"
+  card_title: "{{ titre }}"
+---
+
+<div class="columns">
+    <article class="card column col-8 col-xs-12">
+        <figure class="card-image column col-8 col-xs-12">
+            <img class="img-responsive" src="{{ settings.dirs.img_products | url }}{{ photos[0] }}" alt="{{ i18n.photoAlt[page.lang] | default(photos[0]) }}" />
+            <figcaption class="img-caption" aria-label="{{ card_title }} - {{ i18n.aria.productImageCaption[page.lang] }}">{{ card_title }}</figcaption>
+        </figure>
+    </article>
+    <article class="card column col-4 col-xs-12">
+        <header class="card-header">
+            <h2 class="card-title">{{ card_title }}</h2>
+        </header>
+        <section class="card-body">
+            <p>{{ description }}</p>
+            <dl>
+                {% for key, value in options %}
+                    <dt role="term">{{ key }}{% if page.lang == 'fr'%}&nbsp;{% endif %}:&nbsp;</dt>
+                    <dd role="definition">{{ value }}</dd>
+                {% endfor %}
+            </dl>
+        </section>
+        <footer class="card-footer">
+            <h3 class="card-title h1 price" aria-label="{{ i18n.aria.productPrice[page.lang] }}">{{ price }}</h3>
+            <button class="btn btn-primary float-right" aria-label="{{ i18n.aria.addToCartButton[page.lang] }} - {{ card_title }}">
+                {{ i18n.buttonCartTitle[page.lang] }}
+            </button>
+        </footer>
+    </article>
+</div>

src/chabei-manon-clouzeau_A9.md

@@ -0,0 +1,17 @@
+---
+layout: product.njk
+titre: 茶杯 - CháBēi (petit bol à thé)
+description: >
+    茶杯 - CháBēi en céramique, 1250°C. Pièce unique.
+photos:
+    - manon_tasse_A29-a.jpg
+    - manon_tasse_A29-b.jpg
+price: 15.00 €
+options:
+    dimension: 7 cm x 3 cm
+    capacité: 40 ml
+    poids: 135 g
+    stock: il reste 1 article
+---
+
+