2024-08-08

dprint.json

@@ -20,7 +20,7 @@
     "https://plugins.dprint.dev/json-0.19.3.wasm",
     "https://plugins.dprint.dev/markdown-0.17.2.wasm",
     "https://plugins.dprint.dev/toml-0.6.2.wasm",
-    "https://plugins.dprint.dev/g-plane/malva-v0.6.0.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.7.1.wasm",
     "https://plugins.dprint.dev/g-plane/markup_fmt-v0.11.0.wasm",
     "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.4.0.wasm",
     "https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0"

package.json

@@ -26,6 +26,6 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-plugin-logical-css": "^1.2.1",
-    "vite": "^5.3.5"
+    "vite": "^5.4.0"
   }
 }

web/app/themes/haiku-atelier-2024/functions.php

@@ -31,7 +31,6 @@ add_action("wp_enqueue_scripts", "charge_styles_haiku_atelier_2024");
 // Initialise les fonctionnalités du thème
 new StarterSite();
 
-
 // Personnalisation du thème
 function enregistre_personnalisation_theme($wp_customize) {
   // Section « Réseaux sociaux »
@@ -74,3 +73,6 @@ function enregistre_personnalisation_theme($wp_customize) {
   ]);
 }
 add_action("customize_register", "enregistre_personnalisation_theme");
+
+// Désactive les styles WooCommerce
+add_filter("woocommerce_enqueue_styles", "__return_empty_array");

web/app/themes/haiku-atelier-2024/page-shop.php

@@ -7,9 +7,43 @@ declare(strict_types=1);
 
 use Timber\Timber;
 
-/* Contexte et modèles */
+// Contexte et modèles
 $contexte = Timber::context();
 $modeles = ["shop.twig"];
 
-/* Rendu */
+// Récupère les Produits
+$recupere_informations_produit = fn($produit) => [
+  "id" => $produit->id,
+  "illustration" => [
+    "image" => wp_get_attachment_image(get_post_thumbnail_id($produit->id), "full"),
+  ],
+  "nom" => $produit->name,
+  "prix" => $produit->price,
+  "slug" => $produit->slug,
+  "premiere_variation_image" => wp_get_attachment_image(
+    $attachment_id = $produit->get_available_variations()[0]["image_id"],
+    $size = "large",
+    $attr = ["loading" => false],
+  ),
+  "deuxieme_variation_image" => wp_get_attachment_image(
+    $attachment_id = $produit->get_available_variations()[1]["image_id"],
+    $size = "large",
+    $attr = ["loading" => false],
+  ),
+  "url" => $produit->get_permalink(),
+];
+
+$informations_produits = wc_get_products([
+  "orderby" => "date",
+  "order" => "DESC",
+]);
+$produits = array_map($callback = $recupere_informations_produit, $array = $informations_produits);
+$contexte["produits"] = $produits;
+
+echo "<pre>";
+// print_r($informations_produits);
+// print_r($produits);
+echo "</pre>";
+
+// Rendu
 Timber::render($filenames = $modeles, $data = $contexte);

web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss

@@ -10,4 +10,10 @@
   /* Polices */
   --police-lato: "Lato", sans-serif;
   --police-myriad: "Myriad", sans-serif;
+
+  /* Espacements */
+  --espace-xs: 0.25rem; // 4px;
+  --espace-s: 0.5rem; // 8px
+  --espace-m: 1rem; // 16px
+  --espace-l: 2rem; // 32px;
 }

web/app/themes/haiku-atelier-2024/src/sass/base/_base.scss

@@ -21,7 +21,9 @@ html {
  * 2. Pas de marges par défaut.
  * 3. Hérite par défaut des styles de texte et de couleur.
  */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 2 */
@@ -41,6 +43,9 @@ body {
 /**
  * Force l'héritage des styles pour ces éléments
  */
-button, input, select, textarea {
+button,
+input,
+select,
+textarea {
   font: inherit;
 }

web/app/themes/haiku-atelier-2024/src/sass/base/_typographie.scss

@@ -1,6 +1,7 @@
 // Styles typographiques de base
 
 body {
-  font: 1rem/1.4 var(--police-myriad) 0.5px;
+  font: 1rem/1.4 Myriad;
   color: var(--couleur-noir);
+  letter-spacing: 0.5px;
 }

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_images.scss

@@ -3,8 +3,14 @@
 /**
  * 1. Facilite l'usages des images.
  * 2. Empêche les images de dépasser leur conteneur.
+ * 3. Arrière-plan jaune en attendant le chargement de l'image.
  */
-img, picture {
+img,
+picture {
   display: block; /* 1 */
   max-width: 100%; /* 2 */
 }
+
+img {
+  background: var(--couleur-jaune); /* 3 */
+}

web/app/themes/haiku-atelier-2024/src/sass/base/elements/_liens.scss

@@ -25,7 +25,8 @@ a {
   text-decoration-skip: edges; /* 1 */
 
   /* Change les couleurs de l'arrière-plan et du contour pour marquer le focus. */
-  &:focus, &:focus-visible {
+  &:focus,
+  &:focus-visible {
     outline-color: var(--lien-contour-couleur-focus);
   }
 
@@ -34,16 +35,18 @@ a {
    */
   &.lien-bouton {
     /* Marges */
-    --lien-bouton-marges-internes-bloc: 0.33rem;
+    --lien-bouton-marges-internes-bloc: var(--espace-xs);
+    --lien-bouton-marges-internes-ligne: var(--espace-m);
 
     /* Couleurs */
     --lien-bouton-arriere-plan-couleur-survol: var(--couleur-jaune);
 
-    padding: var(--lien-bouton-marges-internes-bloc) 0;
+    padding: var(--lien-bouton-marges-internes-bloc) var(--lien-bouton-marges-internes-ligne);
     border: 1px solid var(--couleur-noir);
 
     /* Change la couleur de l'arrière-plan pour marquer le focus. */
-    &:focus, &:focus-visible {
+    &:focus,
+    &:focus-visible {
       background: var(--lien-bouton-arriere-plan-couleur-survol);
     }
 
@@ -59,4 +62,12 @@ a {
       }
     }
   }
+
+  &:not([class]) {
+    @media (hover: hover) {
+      &:hover {
+        text-decoration-color: var(--couleur-noir);
+      }
+    }
+  }
 }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss

@@ -2,12 +2,12 @@
 
 #en-tete {
   /* Marges */
-  --en-tete-marges-internes-ligne: 2rem;
+  --en-tete-marges-internes-ligne: var(--espace-l);
-  --en-tete-marges-internes-bloc: 1rem;
+  --en-tete-marges-internes-bloc: var(--espace-m);
 
   /* Dimensions */
   --en-tete-hauteur: 80px;
-  --en-tete-logo-longueur: 120px;
+  --en-tete-logo-longueur: 100px;
 
   display: flex;
   flex-flow: row nowrap;
@@ -16,10 +16,14 @@
   height: var(--en-tete-hauteur);
   padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne);
   background: var(--couleur-gris);
-  border: 1px solid var(--couleur-noir);
 
   .logo {
     width: var(--en-tete-logo-longueur);
+
+    picture,
+    img {
+      background: transparent;
+    }
   }
 
   /* TODO: Déplacer au sein d'un Composant ? */
@@ -34,7 +38,7 @@
       display: flex;
       grid-column: 2;
       flex-flow: row nowrap;
-      gap: max(2rem, 5vw);
+      gap: var(--espace-m);
       justify-content: space-between;
     }
 
@@ -52,9 +56,9 @@
       --nav-entree-arriere-plan-couleur: var(--couleur-jaune);
 
       /* Marges */
-      --nav-entree-marges-internes-bloc: 0.33rem;
+      --nav-entree-marges-internes-bloc: var(--espace-xs);
       --nav-entree-marges-internes-ligne: 3rem;
-      --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(1rem + 1.5ch); /* 3 */
+      --liste-puce-cercle-lien-marges-internes-ligne-debut: calc(var(--espace-m) + 1.5ch); /* 3 */
 
       /* Dispositions */
       --liste-puce-cercle-puce-position-horizontale: 3.5ch; /* 3 */
@@ -78,7 +82,7 @@
   .compte-panier {
     display: flex;
     flex-flow: row nowrap;
-    gap: max(1rem, 2vw);
+    gap: 1rem;
     place-items: center;
     text-align: center;
 
@@ -90,19 +94,7 @@
       text-transform: lowercase;
 
       &.lien-compte {
-        text-decoration: underline solid;
-        text-decoration-color: transparent;
-        text-decoration-skip-ink: auto;
         border-color: transparent;
-        text-decoration-skip: edges;
-
-        @media (hover: hover) {
-          &:hover {
-            text-decoration-color: var(--couleur-noir);
-
-            // border-bottom-color: var(--couleur-noir);
-          }
-        }
       }
 
       &[data-contient-articles="true"] {

web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss

@@ -0,0 +1,85 @@
+// Styles pour la grille de Produits du Shop
+
+/**
+ * La Grille des Produits sous forme de Cartes.
+ *
+ * Les Cartes ont une taille minimale et occupent l'espace en ligne disponible jusqu'à l'occuper
+ * entièrement.
+ * Quand il n'y a plus d'espace disponible pour une nouvelle Carte à longueur minimale, celle-ci
+ * se dispose sur une nouvelle ligne.
+ *
+ * 1. Taille minimale avec un nombre magique pour une disposition sur 3 colonnes en 1920p.
+ * 2. Un espacement inter-carte avec une ombre permet des bordures se superposant (« border
+ * collapse »).
+ */
+.grille-produits {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 1 */
+  gap: 1px; /* 2 */
+  margin-bottom: 2rem;
+
+  article {
+    box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
+
+    figure {
+      display: flex;
+      flex-flow: column nowrap;
+      row-gap: 2rem;
+      padding: 1rem;
+
+      a {
+        position: relative;
+
+        @media (hover: hover) {
+          &:hover {
+            .produit__illustration__survol {
+              visibility: visible;
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .produit__illustration__principale {
+        display: block;
+      }
+
+      .produit__illustration__survol {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        opacity: 0;
+        transition: 0.2s opacity, 0.2s visibility;
+      }
+
+      img {
+        aspect-ratio: 9 / 16;
+        width: 100%;
+        max-height: 70vh;
+        object-fit: cover;
+      }
+
+      figcaption {
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        margin-bottom: 2rem;
+
+        h3 {
+          font-style: italic;
+          letter-spacing: 1px;
+        }
+
+        p {
+          font-weight: 500;
+          letter-spacing: -0.5px;
+        }
+      }
+    }
+  }
+}

web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss

@@ -5,7 +5,7 @@
   --menu-entree-longueur-minimale: 13ch;
 
   /* Marges */
-  --menu-entree-marges-internes-ligne: 1rem;
+  --menu-entree-marges-internes-ligne: var(--espace-m);
 
   /**
    * Liste des Catégories de Produits.
@@ -49,7 +49,8 @@
         border-left: 1px solid var(--couleur-gris);
         outline: initial; /* 3 */
 
-        &:focus, &:focus-visible {
+        &:focus,
+        &:focus-visible {
           color: var(--couleur-jaune);
           outline: initial; /* 3 */
         }

web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss

@@ -1,15 +1,22 @@
 // Styles pour le pied de page du site
 
+/**
+ * Le pied de page du site.
+ */
 #pied-de-page {
+  /* Marges */
+  --pied-de-page-marges-internes-bloc: var(--espace-m);
+  --pied-de-page-marges-internes-ligne: var(--espace-l);
+
   display: grid;
   grid-template-columns: 1fr 1fr;
   place-items: center;
   align-self: end;
   min-width: 100vw;
-  padding: 1rem 2rem;
+  padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne);
   line-height: 1.5;
   background: var(--couleur-jaune);
-  border: 1px solid var(--couleur-noir);
+  border-top: 1px solid var(--couleur-noir);
 
   .zone-menu-navigation-secondaire {
     justify-self: start;
@@ -24,12 +31,4 @@
     height: 100%;
     text-align: right;
   }
-
-  a {
-    @media (hover: hover) {
-      &:hover {
-        text-decoration-color: var(--couleur-noir);
-      }
-    }
-  }
 }

web/app/themes/haiku-atelier-2024/src/sass/main.scss

@@ -14,5 +14,6 @@
 
 // 3. Régions
 @use "layouts/en-tete" as en-tete;
+@use "layouts/grille-produits" as grille-produits;
 @use "layouts/menu-categories-produits" as menu-categories-produits;
 @use "layouts/pied-de-page" as pied-de-page;

web/app/themes/haiku-atelier-2024/style.css

@@ -1 +0,0 @@
-

web/app/themes/haiku-atelier-2024/views/accueil.twig

@@ -1,4 +1,4 @@
 {% extends "base.twig" %}
 
 {% block contenu %}
-{% endblock %}
+{% endblock contenu %}

web/app/themes/haiku-atelier-2024/views/base.twig

@@ -3,8 +3,8 @@
   {% include "parts/html-head.twig" %}
 
   {% block head %}
-  {% endblock %}
+  {% endblock head %}
-{% endblock %}
+{% endblock conteneur_html_head %}
 
 <body class="{{ body_class }}" data-langue="{{ langue_courante }}">
   {# En-tête #}
@@ -12,12 +12,12 @@
 
   {# Contenu #}
   {% block contenu %}
-  {% endblock %}
+  {% endblock contenu %}
 
   {# Pied de page #}
   {% block footer %}
     {% include "parts/pied-de-page.twig" %}
 
     {{ function("wp_footer") }}
-  {% endblock %}
+  {% endblock footer %}
 </body>

web/app/themes/haiku-atelier-2024/views/parts/en-tete.twig

@@ -2,10 +2,7 @@
   <section class="logo">
     <figure>
       <picture>
-        <img
+        <img alt="Haiku Atelier's Logo" src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg" />
-          alt="Haiku Atelier's Logo"
-          src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
-        >
       </picture>
     </figure>
   </section>
@@ -13,28 +10,16 @@
   <nav class="menu-navigation" id="menu-navigation-en-tete">
     <ul class="avec-puce-cercle">
       <span class="menu-navigation__entree">
-        <li>
+        <li><a class="lien-menu" href="{{ pages.home.lien }}">{{ pages.home.nom }}</a></li>
-          <a href="{{ pages.home.lien }}">
-            {{ pages.home.nom }}</a>
-        </li>
       </span>
       <span class="menu-navigation__entree">
-        <li>
+        <li><a class="lien-menu" href="{{ pages.about.lien }}">{{ pages.about.nom }}</a></li>
-          <a href="{{ pages.about.lien }}">
-            {{ pages.about.nom }}</a>
-        </li>
       </span>
       <span class="menu-navigation__entree">
-        <li>
+        <li><a class="lien-menu" href="{{ pages.shop.lien }}">{{ pages.shop.nom }}</a></li>
-          <a href="{{ pages.shop.lien }}">
-            {{ pages.shop.nom }}</a>
-        </li>
       </span>
       <span class="menu-navigation__entree">
-        <li>
+        <li><a class="lien-menu" href="{{ pages.contact.lien }}">{{ pages.contact.nom }}</a></li>
-          <a href="{{ pages.contact.lien }}">
-            {{ pages.contact.nom }}</a>
-        </li>
       </span>
     </ul>
   </nav>

web/app/themes/haiku-atelier-2024/views/parts/html-head.twig

@@ -2,20 +2,11 @@
 <head>
   <meta charset="{{ site.charset }}" />
 
-  <meta
+  <meta name="description" content="{{ site.description }}" />
-    name="description"
-    content="{{ site.description }}"
-  />
 
-  <meta
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    http-equiv="Content-Type"
-    content="text/html; charset=UTF-8"
-  />
 
-  <meta
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
-    name="viewport"
-    content="width=device-width, initial-scale=1"
-  />
 
   {# <link
     href="{{ site.theme.link }}/static/img/favicon.svg"

web/app/themes/haiku-atelier-2024/views/parts/menu-categories-produits.twig

@@ -1,13 +1,9 @@
 <nav id="menu-categories-produits" class="menu-categories-produits">
   <ul>
-    <li>
+    <li><a href="{{ pages.shop.lien }}">All</a></li>
-      <a href="{{ pages.shop.lien }}">All</a>
-    </li>
     {% for categorie in categories_produits %}
       <li id="categorie-{{ categorie.slug|e }}">
-        <a href="/categorie-produit/{{ categorie.slug|e }}">
+        <a href="/categorie-produit/{{ categorie.slug|e }}">{{ categorie.nom|e }}</a>
-          {{ categorie.nom|e }}
-        </a>
       </li>
     {% endfor %}
   </ul>

web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig

@@ -1,158 +1,27 @@
 <div class="grille-produits">
-  <article>
+  {% for produit in produits %}
+    {# TODO: Trouver une meilleure arborescence et des noms de classe #}
+    <article class="produit">
       <figure>
-      <picture>
+        <a href="{{ produit.url }}">
-        <img
+          <picture class="produit__illustration produit__illustration__principale">
-          alt=""
+            {# {{ produit.illustration.image }} #} {{ produit.premiere_variation_image }}
-          sizes=""
-          src=""
-          srcset=""
-        >
           </picture>
 
-      <figcaption>
+          <picture class="produit__illustration produit__illustration__survol">
-        <h3>Boro Boro Ring</h3>
+            {# {{ produit.illustration.image }} #} {{ produit.deuxieme_variation_image }}
-        <p>75 €</p>
+          </picture>
+        </a>
+
+        <figcaption class="produit__textuel">
+          <h3 class="produit__textuel__titre">
+            <a href="{{ produit.url }}">{{ produit.nom }}</a>
+          </h3>
+          <p class="produit__textuel__prix">
+            {{ produit.prix }}€
+          </p>
         </figcaption>
       </figure>
     </article>
-
+  {% endfor %}
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-
-      <figcaption>
-        <h3>Boro Boro Ring</h3>
-        <p>75 €</p>
-      </figcaption>
-    </figure>
-  </article>
-
-  <article>
-    <figure>
-      <picture>
-        <img
-          alt=""
-          sizes=""
-          src=""
-          srcset=""
-        >
-      </picture>
-    </figure>
-  </article>
 </div>

web/app/themes/haiku-atelier-2024/views/shop.twig

@@ -7,4 +7,4 @@
   <main>
     {% include "parts/pages/shop/grille-produits.twig" %}
   </main>
-{% endblock %}
+{% endblock contenu %}