2024-11-15

web/app/themes/haiku-atelier-2024/archive-product.php

@@ -24,10 +24,6 @@ $informations_produits = wc_get_products([
 $produits = array_map(callback: "recupere_informations_produit_shop", array: $informations_produits);
 $contexte["produits"] = $produits;
 
-// echo "<pre>";
-// print_r($informations_produits);
-// echo "</pre>";
-
 /**
  * Charge les Scripts nécessaires pour la page Boutique.
  */

web/app/themes/haiku-atelier-2024/assets/css/main.css

@@ -203,12 +203,12 @@ button.bouton-case-pleine {
   width: 100%;
   height: 100%;
 }
-button.bouton-case-pleine--blanc-sur-noir {
+button.bouton-case-pleine.bouton-blanc-sur-noir {
   font-style: italic;
   text-transform: uppercase;
   letter-spacing: var(--espacement-inter-lettres-etendu-m);
 }
-button.bouton-case-pleine--blanc-sur-noir:focus-visible {
+button.bouton-case-pleine.bouton-blanc-sur-noir:focus-visible {
   color: var(--couleur-noir);
   background: var(--couleur-jaune);
 }
@@ -812,6 +812,7 @@ body:has(#menu-mobile:not([aria-hidden=true])) {
   height: 100%;
 }
 .photos-produit .colonne.colonne-droite img {
+  width: 100%;
   max-height: var(--colonne-droite-photo-hauteur-minimale);
 }
 .photos-produit .colonne.colonne-droite figure picture img:only-child {

web/app/themes/haiku-atelier-2024/assets/js/.vite/manifest.json

@@ -476,7 +476,7 @@
       "web/app/themes/haiku-atelier-2024/src/scripts/constantes/products.ts",
       "_belt_Option-91f3b350.BKMoZFhU.js"
     ],
-    "integrity": "sha512-auB29T3SZpasyR61fK363JAMfgU0xakNPRG/UyMGT9HLNADOBcQLVZrhvj7BJrs6T3pE5Qeq0C5vVecIhB7xtQ=="
+    "integrity": "sha512-J4XtTd9tWX0+Dl6sIWBRvaIZ24RWU8wtAQQ/S/gPPACz3XO3i8EroaoQIluKX9nnPYEqK8LcTE0mASPzah1vcw=="
   },
   "web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-panier.ts": {
     "file": "scripts-page-panier.js",

web/app/themes/haiku-atelier-2024/assets/js/scripts-page-boutique.js

@@ -62,16 +62,16 @@ const initialisePageBoutique = () => {
                 html`
                     <article class="produit">
                       <figure>
-                        <a href="https://haikuatelier.fr.ddev.site/product/${produit.slug}">
+                        <a href="/product/${produit.slug}">
                           <picture class="produit__illustration produit__illustration__principale">
                             ${produit.image_repos ?? ""}
                           </picture>
-  
+
                           <picture class="produit__illustration produit__illustration__survol">
                             ${produit.image_survol ?? ""}
                           </picture>
                         </a>
-  
+
                         <figcaption class="produit__textuel">
                           <h3 class="produit__textuel__titre">
                             <a href="${produit.permalink}">${produit.name}</a>

web/app/themes/haiku-atelier-2024/single-product.php

@@ -17,26 +17,37 @@ $modeles = ["produit.twig"];
 
 /** @var WC_Product $produit */
 $produit = wc_get_product();
+/** @var mixed $donnes_produit */
 $donnees_produit = recupere_informations_produit_page_produit(wc_get_product());
 
-$est_variation = $produit->get_type() == "variable";
-$attributs = pipe(
-  match ($est_variation) {
-    $produit->get_attribute("pa_side") !== "" => $produit->get_attribute("pa_side"),
-    $produit->get_attribute("pa_stone") !== "" => $produit->get_attribute("pa_stone"),
-    $produit->get_attribute("pa_size") !== "" => $produit->get_attribute("pa_size"),
-    default => "",
-  },
-  fn($chaine) => explode(", ", $chaine),
-);
-$prix_variations = pipe(
-  // Récupère les Variations
+/** @var bool $est_variation Le Produit est-il Variable (possède-t-il des variations ?) */
+$est_produit_variable = $produit->get_type() == "variable";
+/** @var InformationsVariation[] $variations_produit Un tableau des informations d'affichage de chaque Variation du Produit */
+$variations_produit = pipe(
+  // Récupère les IDs des Enfants (Variations)
   wc_get_product()->get_children(),
-  // Récupère les informations de chaque Variation
+  // Récupère les Variations
   fn($enfants) => array_map(callback: fn($id) => wc_get_product($id), array: $enfants),
-  // Récupère les Prix
-  fn($variations) => array_map(callback: fn($variation) => $variation->get_price(), array: $variations),
+  // Ne conserve que les Informations souhaitées
+  fn($variations) => array_map(
+    callback: function ($variation) {
+      return [
+        "id" => $variation->get_variation_id(),
+        // Ne récupère que le titre de l'Attribut unique de la Variation
+        "titre" => match (true) {
+          $variation->get_attribute("pa_side") !== "" => $variation->get_attribute("pa_side"),
+          $variation->get_attribute("pa_stone") !== "" => $variation->get_attribute("pa_stone"),
+          $variation->get_attribute("pa_size") !== "" => $variation->get_attribute("pa_size"),
+          default => "",
+        },
+        "prix" => $variation->get_price(),
+      ];
+    },
+    array: $variations,
+  ),
 );
+/** @var int $prix_maximal Le prix de la Variation la plus chère */
+$prix_maximal = collect($variations_produit)->max("prix");
 
 $produits_meme_collection = array_map(
   callback: "recupere_informations_produit_page_produit",
@@ -44,10 +55,9 @@ $produits_meme_collection = array_map(
 );
 
 $contexte["produit"] = $donnees_produit;
+$contexte["prix_maximal"] = $prix_maximal;
+$contexte["variations_produit"] = $variations_produit;
 $contexte["produits_meme_collection"] = $produits_meme_collection;
-$contexte["est_variation"] = $est_variation;
-$contexte["attributs"] = $attributs;
-$contexte["prix_variations"] = $prix_variations;
 
 /**
  * Charge les Scripts nécessaires pour la page Produit.

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

@@ -43,7 +43,7 @@ button {
     width: 100%;
     height: 100%;
 
-    &--blanc-sur-noir {
+    &.bouton-blanc-sur-noir {
       font-style: italic;
       text-transform: uppercase;
       letter-spacing: var(--espacement-inter-lettres-etendu-m);

web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss

@@ -102,6 +102,7 @@
 
     &.colonne-droite {
       img {
+        width: 100%;
         max-height: var(--colonne-droite-photo-hauteur-minimale);
       }
 

web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts

@@ -109,16 +109,16 @@ const initialisePageBoutique = (): void => {
                     html`
                     <article class="produit">
                       <figure>
-                        <a href="https://haikuatelier.fr.ddev.site/product/${produit.slug}">
+                        <a href="/product/${produit.slug}">
                           <picture class="produit__illustration produit__illustration__principale">
                             ${produit.image_repos ?? ""}
                           </picture>
-  
+
                           <picture class="produit__illustration produit__illustration__survol">
                             ${produit.image_survol ?? ""}
                           </picture>
                         </a>
-  
+
                         <figcaption class="produit__textuel">
                           <h3 class="produit__textuel__titre">
                             <a href="${produit.permalink}">${produit.name}</a>

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

@@ -80,7 +80,10 @@
   </nav>
 
   {# Bouton « Panier » avec l'indicateur de quantité de Produits #}
-  <section class="compte-panier">
+  <section
+    class="compte-panier"
+    hidden
+  >
     <a
       class="lien-bouton"
       data-contient-articles="{{ articles_presents }}"

web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig

@@ -76,7 +76,7 @@
     <section class="selecteur-produit">
       <h3 class="selecteur-produit__nom">{{ produit.nom }}</h3>
 
-      {% if attributs|length > 1 %}
+      {% if variations_produit|length > 1 %}
         <div class="selecteur-produit__selection-variation">
           <label
             for="selecteur-variation"
@@ -99,12 +99,12 @@
               >
                 --
               </option>
-              {% for attribut in attributs %}
+              {% for variation in variations_produit %}
                 <option
-                  data-prix="{{ prix_variations[loop.index0] }}"
-                  value="{{ produit.variations_ids[loop.index0] }}"
+                  data-prix="{{ variation.prix }}"
+                  value="{{ variation.valeur }}"
                 >
-                  {{ attribut }}
+                  {{ variation.titre }}
                 </option>
               {% endfor %}
             </select>
@@ -112,15 +112,16 @@
         </div>
       {% endif %}
 
-      <p class="selecteur-produit__prix">{{ produit.prix }}€</p>
+      <p class="selecteur-produit__prix">{{ prix_maximal ?? produit.prix }}€</p>
     </section>
 
     <section class="actions-produit">
       <button
         class="bouton-case-pleine"
-        {{ attributs|length > 1 ? "disabled" : "" }}
+        {{ variations_produit|length > 1 ? "disabled" : "" }}
         id="bouton-ajout-panier"
         type="button"
+        hidden
       >
         Add to cart
       </button>