2024-08-16

This commit is contained in:
gcch 2024-08-16 20:32:28 +02:00
commit fcdf367d31
307 changed files with 534 additions and 406 deletions

View file

@ -101,7 +101,8 @@
--espace-xs: 0.25rem;
--espace-s: 0.5rem;
--espace-m: 1rem;
--espace-l: 2rem;
--espace-l: 1.25rem;
--espace-xl: 2rem;
}
/**
@ -279,7 +280,7 @@ ul.avec-puce-cercle a {
#en-tete {
/* Marges */
--en-tete-marges-internes-ligne: var(--espace-l);
--en-tete-marges-internes-ligne: var(--espace-xl);
--en-tete-marges-internes-bloc: var(--espace-m);
/* Dimensions */
--en-tete-section-hauteur: var(--en-tete-hauteur);
@ -742,15 +743,16 @@ ul.avec-puce-cercle a {
.produits-similaires {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr max-content;
grid-template-rows: 1fr auto;
grid-template-areas: "en-tete en-tete en-tete" "produits produits produits";
place-items: center;
margin-top: 1rem;
margin-top: var(--espace-m);
/* En-tête de la section */
}
.produits-similaires header {
grid-column: span 3;
grid-area: en-tete;
width: 100%;
padding: 1.25rem 0 var(--espace-m);
padding: var(--espace-l) 0 var(--espace-m);
text-align: center;
border: 1px solid var(--couleur-noir);
}
@ -763,10 +765,10 @@ ul.avec-puce-cercle a {
.produits-similaires .grille-produits-similaires {
display: grid;
grid-auto-rows: 1fr;
grid-column: span 3;
grid-row: 2;
grid-area: produits;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
width: 100%;
}
.produits-similaires .grille-produits-similaires article {
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
@ -774,8 +776,8 @@ ul.avec-puce-cercle a {
.produits-similaires .grille-produits-similaires article figure {
display: flex;
flex-flow: column nowrap;
row-gap: 2rem;
padding: 1rem;
row-gap: var(--espace-xl);
padding: var(--espace-m);
}
.produits-similaires .grille-produits-similaires article figure a {
position: relative;
@ -811,7 +813,7 @@ ul.avec-puce-cercle a {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 2rem;
margin-bottom: var(--espace-xl);
}
.produits-similaires .grille-produits-similaires article figure figcaption h3 {
font-style: italic;
@ -828,7 +830,7 @@ ul.avec-puce-cercle a {
#pied-de-page {
/* Marges */
--pied-de-page-marges-internes-bloc: var(--espace-m);
--pied-de-page-marges-internes-ligne: var(--espace-l);
--pied-de-page-marges-internes-ligne: var(--espace-xl);
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_boutons.scss","../../src/sass/base/elements/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_colonnes-photos.scss","../../src/sass/layouts/_grille-produits.scss","../../src/sass/layouts/_informations-produit.scss","../../src/sass/layouts/_produits-similaires.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;;;ACjBF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACtDF;EACE;EACA;EACA;;;ACHF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACfJ;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACbF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAMA;AAAA;AAAA;;AALA;EAEE;;AAMF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAMA;AAKA;;AAVA;EAEE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMJ;EACE;IACE;;;;AClER;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAWA;;AATA;EACE;;AAEA;AAAA;EAEE;;AAKJ;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACvGR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EACA;AAEA;EACA;EACA;AAAA;AAAA;AAIA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAMF;EACE;;;AC5CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC9EV;EACE;EACA;EACA;EACA;EACA;AAoFA;AAyGA;;AA3LA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAQV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;AAMA;AAwCA;AAqBA;;AAlEA;EACE;EACA;;AAIF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEI;IACE;IACA;;;AAKN;EAEI;IACE;IACA;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAeJ;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;IACE;;;;AAQZ;EACE;IACE;;EAGF;IACE;;;ACnOJ;EACE;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC1FZ;AAAA;AAAA;AAGA;AACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"}
{"version":3,"sourceRoot":"","sources":["../../src/sass/base/polices/_lato.scss","../../src/sass/base/polices/_myriad.scss","../../src/sass/abstracts/_variables.scss","../../src/sass/base/_base.scss","../../src/sass/base/_typographie.scss","../../src/sass/base/elements/_boutons.scss","../../src/sass/base/elements/_images.scss","../../src/sass/base/elements/_liens.scss","../../src/sass/base/elements/_listes.scss","../../src/sass/layouts/_en-tete.scss","../../src/sass/layouts/_menu-categories-produits.scss","../../src/sass/layouts/_colonnes-photos.scss","../../src/sass/layouts/_grille-produits.scss","../../src/sass/layouts/_informations-produit.scss","../../src/sass/layouts/_produits-similaires.scss","../../src/sass/layouts/_pied-de-page.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA,KACE;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,KACE;;AChBJ;AACE;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;;;AClBF;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAIA;EACE;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAGA;EACE;;;ACtDF;EACE;EACA;EACA;;;ACHF;AAAA;AAAA;AAGA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;ACfJ;AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;;;ACbF;AAAA;AAAA;AAAA;AAAA;AAKA;AACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA,YACE,kHAK4B;EAE9B;AAEA;AAMA;AAAA;AAAA;;AALA;EAEE;;AAMF;AACE;EACA;EACA;AAEA;EACA;EAEA;EACA;AAEA;AAMA;AAKA;;AAVA;EAEE;;AAIF;EACE;;AAIF;EACE;IACE;;;AAMJ;EACE;IACE;;;;AClER;AAAA;AAAA;AAAA;AAAA;AAKA;EACE;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAMA;AACE;EACA;AAEA;EACA;AAEA;EACA;;AAEA;EACE;EACA,qLAEkE;;;AC5BxE;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAWA;;AATA;EACE;;AAEA;AAAA;EAEE;;AAKJ;EACE;EACA;EACA;EACA;EACA;AAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAYF;AACE;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;IACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;;ACvGR;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;AAEA;EACA;EACA;EAEA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAOA;EACE;EACA;EACA;AAEA;AAAA;AAAA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAMA;AAAA;AAAA;AAAA;AAAA;;AAJA;EACE;;AAQF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;IACE;IACA;;;AAKN;EACE;;AAGF;EACE;;;AC/ER;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;AACE;EACA;AAEA;EACA;EACA;AAAA;AAAA;AAIA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGA;EACE;;AAMF;EACE;;;AC5CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC9EV;EACE;EACA;EACA;EACA;EACA;AAoFA;AAyGA;;AA3LA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAQV;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;AAMA;AAwCA;AAqBA;;AAlEA;EACE;EACA;;AAIF;EACE;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEI;IACE;IACA;;;AAKN;EAEI;IACE;IACA;;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;;;AAKN;EACE;;AAeJ;EACE;;AAKJ;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;IACE;;;;AAQZ;EACE;IACE;;EAGF;IACE;;;ACnOJ;EACE;EACA;EACA;EACA,qBACE;EAEF;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAEI;IACE;IACA;IACA;;;AAMR;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AC7FZ;AAAA;AAAA;AAGA;AACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA","file":"main.css"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

View file

@ -7,42 +7,20 @@ declare(strict_types=1);
use Timber\Timber;
require_once __DIR__ . "/src/inc/TraitementInformations.php";
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["boutique.twig"];
// Récupère les Produits
$recupere_informations_produit = fn($produit) => [
"id" => $produit->get_id(),
"nom" => $produit->get_name(),
"prix" => $produit->get_price(),
"slug" => $produit->get_slug(),
"premiere_photo_gauche" => wp_get_attachment_image(
get_post_meta($post_id = $produit->get_id(), $key = "_photos_colonne_gauche|||0|value")[0],
"full",
false,
["loading" => false],
),
"premiere_photo_droite" => wp_get_attachment_image(
get_post_meta($post_id = $produit->get_id(), $key = "_photos_colonne_droite|||0|value")[0],
"full",
false,
["loading" => false],
),
"url" => $produit->get_permalink(),
];
// Informations brutes des Produits
$informations_produits = wc_get_products([
"orderby" => "date",
"order" => "DESC",
]);
$produits = array_map($callback = $recupere_informations_produit, $array = $informations_produits);
// Informations nécessaires pour la grille des Produits
$produits = array_map($callback = "recupere_informations_produit_shop", $array = $informations_produits);
$contexte["produits"] = $produits;
// echo "<pre>";
// print_r($informations_produits);
// print_r($produits);
// echo "</pre>";
// Rendu
Timber::render($filenames = $modeles, $data = $contexte);

View file

@ -7,94 +7,25 @@ declare(strict_types=1);
use Timber\Timber;
require_once __DIR__ . "/src/inc/HTML.php";
require_once __DIR__ . "/src/inc/TraitementInformations.php";
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["produit.twig"];
/**
* Génère la balise `<img>` d'un Média attaché à un Produit selon son ID.
*
* @param int $id_image
* @return string
*/
function genere_balise_img($id_image) {
return wp_get_attachment_image($attachment_id = $id_image, $size = "full");
}
/**
* @param string $slug_collection
*/
function recupere_produits_meme_collection($slug_collection) {
/**
* @param int $id_produit
*/
return function ($id_produit) use ($slug_collection) {
return wc_get_products([
"exclude" => [$id_produit],
"limit" => 4,
"order" => "DESC",
"orderby" => "date",
"tax_query" => [
[
"taxonomy" => "collection",
"field" => "slug",
"terms" => $slug_collection,
],
],
]);
};
}
/**
* Retourne un tableau associatif des informations affichées sur la page Produit depuis les
* données brutes d'un Produit.
*
* @param mixed $donnees_produit
* @return mixed
*/
function recupere_informations_produit($donnees_produit): mixed {
return [
"collection" => get_the_terms($donnees_produit->get_id(), "collection")[0]->slug,
"id" => $donnees_produit->get_id(),
"nom" => $donnees_produit->get_name(),
"prix" => $donnees_produit->get_price(),
"photos_colonne_gauche" => array_map(
$callback = "genere_balise_img",
$array = get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_gauche|||0|value"),
),
"photos_colonne_droite" => array_map(
$callback = "genere_balise_img",
$array = get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_droite|||0|value"),
),
"premiere_photo_gauche" => wp_get_attachment_image(
get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_gauche|||0|value")[0],
"full",
false,
["loading" => false],
),
"premiere_photo_droite" => wp_get_attachment_image(
get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_droite|||0|value")[0],
"full",
false,
["loading" => false],
),
"slug" => $donnees_produit->get_slug(),
"url" => $donnees_produit->get_permalink(),
];
}
$produit = recupere_informations_produit(wc_get_product());
$produit = recupere_informations_produit_page_produit(wc_get_product());
$produits_collection = array_map(
"recupere_informations_produit",
"recupere_informations_produit_page_produit",
recupere_produits_meme_collection($produit["collection"])($produit["id"]),
);
// echo "<pre>";
// print_r($produits_collection);
// echo "</pre>";
$contexte["produit"] = $produit;
$contexte["produits_collection"] = $produits_collection;
// Charge les scripts de la Page
/**
* Charge les Scripts nécessaires pour la page Produit.
*/
function charge_scripts_page_produit(): void {
wp_enqueue_script_module(
$id = "haiku-atelier-2024-scripts-page-produit",

View file

@ -4,7 +4,6 @@ declare(strict_types=1);
namespace HaikuAtelier;
use stdClass;
use Timber\Site;
class StarterSite extends Site {

View file

@ -0,0 +1,16 @@
<?php
/**
* Fonctions pour la génération de HTML.
*/
declare(strict_types=1);
/**
* Génère la balise `<img>` d'un Média attaché à un Produit selon son ID.
*
* @param int $id_image
* @return string
*/
function genere_balise_img($id_image) {
return wp_get_attachment_image($attachment_id = $id_image, $size = "full");
}

View file

@ -0,0 +1,104 @@
<?php
/**
* Fonctions pour le traitement d'informations.
*/
declare(strict_types=1);
/**
* Récupère les informations utilisées pour la grille des Produits et les retourne sous forme de
* tableau associatif.
*/
function recupere_informations_produit_shop($produit) {
return [
/* Identifiant du Produit */
"id" => $produit->get_id(),
/* Nom affiché du Produit */
"nom" => $produit->get_name(),
/* Prix affiché du Produit */
"prix" => $produit->get_price(),
/* Photo du Produit affichée par défaut */
"photo_repos" => wp_get_attachment_image(
get_post_meta($post_id = $produit->get_id(), $key = "_photos_colonne_gauche|||0|value")[0],
"full",
false,
["loading" => false],
),
/* Photo du Produit affichée au survol de l'image */
"photo_survol" => wp_get_attachment_image(
get_post_meta($post_id = $produit->get_id(), $key = "_photos_colonne_droite|||0|value")[0],
"full",
false,
["loading" => false],
),
/* URL du Produit pour les liens vers celui-ci */
"url" => $produit->get_permalink(),
];
}
/**
* Retourne un tableau associatif des informations affichées sur la page Produit depuis les
* données brutes d'un Produit.
*
* @param mixed $donnees_produit
* @return mixed
*/
function recupere_informations_produit_page_produit($donnees_produit): mixed {
return [
"collection" => get_the_terms($donnees_produit->get_id(), "collection")[0]->slug,
"id" => $donnees_produit->get_id(),
"nom" => $donnees_produit->get_name(),
"prix" => $donnees_produit->get_price(),
"photos_colonne_gauche" => array_map(
$callback = "genere_balise_img",
$array = get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_gauche|||0|value"),
),
"photos_colonne_droite" => array_map(
$callback = "genere_balise_img",
$array = get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_droite|||0|value"),
),
"photo_repos" => wp_get_attachment_image(
get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_gauche|||0|value")[0],
"full",
false,
["loading" => false],
),
"photo_survol" => wp_get_attachment_image(
get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_droite|||0|value")[0],
"full",
false,
["loading" => false],
),
"slug" => $donnees_produit->get_slug(),
"url" => $donnees_produit->get_permalink(),
];
}
/**
* Récupère les informations utilisées pour la grille des Produits similaires (de la même
* collection) et les retourne sous forme de tableau associatif.
*
* Pour faciliter l'usage avec `array_map`, utiliser une fonction avec curryfication.
*
* @param string $slug_collection
*/
function recupere_produits_meme_collection($slug_collection) {
/**
* @param int $id_produit
*/
return function ($id_produit) use ($slug_collection) {
return wc_get_products([
"exclude" => [$id_produit],
"limit" => 4,
"order" => "DESC",
"orderby" => "date",
"tax_query" => [
[
"taxonomy" => "collection",
"field" => "slug",
"terms" => $slug_collection,
],
],
]);
};
}

View file

@ -19,5 +19,6 @@
--espace-xs: 0.25rem; // 4px;
--espace-s: 0.5rem; // 8px
--espace-m: 1rem; // 16px
--espace-l: 2rem; // 32px;
--espace-l: 1.25rem;
--espace-xl: 2rem; // 32px;
}

View file

@ -2,7 +2,7 @@
#en-tete {
/* Marges */
--en-tete-marges-internes-ligne: var(--espace-l);
--en-tete-marges-internes-ligne: var(--espace-xl);
--en-tete-marges-internes-bloc: var(--espace-m);
/* Dimensions */

View file

@ -6,7 +6,7 @@
#pied-de-page {
/* Marges */
--pied-de-page-marges-internes-bloc: var(--espace-m);
--pied-de-page-marges-internes-ligne: var(--espace-l);
--pied-de-page-marges-internes-ligne: var(--espace-xl);
display: grid;
grid-template-columns: 1fr 1fr;

View file

@ -3,15 +3,18 @@
.produits-similaires {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr max-content;
grid-template-rows: 1fr auto;
grid-template-areas:
"en-tete en-tete en-tete"
"produits produits produits";
place-items: center;
margin-top: 1rem;
margin-top: var(--espace-m);
/* En-tête de la section */
header {
grid-column: span 3;
grid-area: en-tete;
width: 100%;
padding: 1.25rem 0 var(--espace-m);
padding: var(--espace-l) 0 var(--espace-m);
text-align: center;
border: 1px solid var(--couleur-noir);
@ -26,10 +29,10 @@
.grille-produits-similaires {
display: grid;
grid-auto-rows: 1fr;
grid-column: span 3;
grid-row: 2;
grid-area: produits;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
width: 100%;
article {
box-shadow: 0 0 0 1px var(--couleur-noir); /* 2 */
@ -37,8 +40,8 @@
figure {
display: flex;
flex-flow: column nowrap;
row-gap: 2rem;
padding: 1rem;
row-gap: var(--espace-xl);
padding: var(--espace-m);
a {
position: relative;
@ -81,7 +84,7 @@
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
margin-bottom: 2rem;
margin-bottom: var(--espace-xl);
h3 {
font-style: italic;

View file

@ -5,11 +5,11 @@
<figure>
<a href="{{ produit.url }}">
<picture class="produit__illustration produit__illustration__principale">
{{ produit.premiere_photo_gauche }}
{{ produit.photo_repos }}
</picture>
<picture class="produit__illustration produit__illustration__survol">
{{ produit.premiere_photo_droite }}
{{ produit.photo_survol }}
</picture>
</a>

View file

@ -5,11 +5,11 @@
<figure>
<a href="{{ produit.url }}">
<picture class="produit__illustration produit__illustration__principale">
{{ produit.premiere_photo_gauche }}
{{ produit.photo_repos }}
</picture>
<picture class="produit__illustration produit__illustration__survol">
{{ produit.premiere_photo_droite }}
{{ produit.photo_survol }}
</picture>
</a>