diff --git a/web/app/db.php b/web/app/db.php deleted file mode 120000 index 73510b50..00000000 --- a/web/app/db.php +++ /dev/null @@ -1 +0,0 @@ -/var/www/html/web/app/plugins/query-monitor/wp-content/db.php \ No newline at end of file diff --git a/web/app/themes/haiku-atelier-2024/functions.php b/web/app/themes/haiku-atelier-2024/functions.php index 3f437c97..088b2c19 100644 --- a/web/app/themes/haiku-atelier-2024/functions.php +++ b/web/app/themes/haiku-atelier-2024/functions.php @@ -2,6 +2,9 @@ declare(strict_types=1); +use Carbon_Fields\Carbon_Fields; +use Carbon_Fields\Container\Container; +use Carbon_Fields\Field\Field; use HaikuAtelier\StarterSite; use Timber\Timber; @@ -31,6 +34,10 @@ add_action("wp_enqueue_scripts", "charge_styles_haiku_atelier_2024"); // Initialise les fonctionnalités du thème new StarterSite(); +/** + * Personnalisation du thème + */ + // Personnalisation du thème function enregistre_personnalisation_theme($wp_customize) { // Section « Réseaux sociaux » @@ -74,5 +81,50 @@ function enregistre_personnalisation_theme($wp_customize) { } add_action("customize_register", "enregistre_personnalisation_theme"); +/** + * WooCommerce + */ + +function retire_images_produit_woocommerce(): void { + remove_action("woocommerce_before_shop_loop_item_title", "woocommerce_template_loop_product_thumbnail", 10); + remove_action("woocommerce_before_single_product_summary", "woocommerce_show_product_images", 20); + remove_action("woocommerce_product_thumbnails", "woocommerce_show_product_thumbnails", 20); +} +add_action("after_setup_theme", "retire_images_produit_woocommerce"); + +function retire_champs_admin_images_produit_woocommerce(): void { + // Désactive le champ « Image Produit » + remove_meta_box("postimagediv", "product", "side"); + // Désactive le champ « Galerie d'images du Produit » + remove_meta_box("woocommerce-product-images", "product", "side"); +} +add_action("add_meta_boxes", "retire_champs_admin_images_produit_woocommerce", 40); + // Désactive les styles WooCommerce add_filter("woocommerce_enqueue_styles", "__return_empty_array"); + +/** + * Carbon Fields + */ + +function cree_galeries_photos_produit_woocommerce(): void { + Container::make("post_meta", "Photos Galleries") + ->where("post_type", "=", "product") + ->add_fields([ + Field::make("media_gallery", "photos_colonne_gauche", __("Left Column Photos")) + ->set_type(["image"]) + ->set_duplicates_allowed(false), + Field::make("media_gallery", "photos_colonne_droite", __("Right Column Photos")) + ->set_type(["image"]) + ->set_duplicates_allowed(false), + ]); +} +add_action("carbon_fields_register_fields", "cree_galeries_photos_produit_woocommerce"); + +// Charge Carbon Fields +function charge_carbon_fields(): void { + // Nécessaire pour que Carbon Fields trouve ses ressources + define("Carbon_Fields\URL", home_url("/vendor/htmlburger/carbon-fields")); + Carbon_Fields::boot(); +} +add_action("after_setup_theme", "charge_carbon_fields"); diff --git a/web/app/themes/haiku-atelier-2024/index.php b/web/app/themes/haiku-atelier-2024/index.php index 949d6c88..f388f30b 100644 --- a/web/app/themes/haiku-atelier-2024/index.php +++ b/web/app/themes/haiku-atelier-2024/index.php @@ -5,6 +5,6 @@ declare(strict_types=1); use Timber\Timber; $contexte = Timber::context(); -$modeles = ["index.twig"]; +$modeles = ["base.twig"]; Timber::render($filenames = $modeles, $data = $contexte); diff --git a/web/app/themes/haiku-atelier-2024/page-shop.php b/web/app/themes/haiku-atelier-2024/page-shop.php index 2116a8c4..c969a0b7 100644 --- a/web/app/themes/haiku-atelier-2024/page-shop.php +++ b/web/app/themes/haiku-atelier-2024/page-shop.php @@ -9,26 +9,25 @@ use Timber\Timber; // Contexte et modèles $contexte = Timber::context(); -$modeles = ["shop.twig"]; +$modeles = ["boutique.twig"]; // 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], + "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], ), - "deuxieme_variation_image" => wp_get_attachment_image( - $attachment_id = $produit->get_available_variations()[1]["image_id"], - $size = "large", - $attr = ["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(), ]; @@ -40,10 +39,10 @@ $informations_produits = wc_get_products([ $produits = array_map($callback = $recupere_informations_produit, $array = $informations_produits); $contexte["produits"] = $produits; -echo "
";
+// echo "
";
 // print_r($informations_produits);
 // print_r($produits);
-echo "
"; +// echo "
"; // Rendu Timber::render($filenames = $modeles, $data = $contexte); diff --git a/web/app/themes/haiku-atelier-2024/single-product.php b/web/app/themes/haiku-atelier-2024/single-product.php new file mode 100644 index 00000000..a615c00b --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/single-product.php @@ -0,0 +1,52 @@ + $donnees_produit->get_id(), + "nom" => $donnees_produit->get_name(), + "prix" => $donnees_produit->get_price(), + "photos_colonne_gauche" => array_map( + $callback = "genere_balise_img", + get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_gauche|||0|value"), + ), + "photos_colonne_droite" => array_map( + $callback = "genere_balise_img", + get_post_meta($post_id = $donnees_produit->get_id(), $key = "_photos_colonne_droite|||0|value"), + ), + "slug" => $donnees_produit->get_slug(), + "url" => $donnees_produit->get_permalink(), + ]; +} + +$produit = recupere_informations_produit(wc_get_product()); +$contexte["produit"] = $produit; + +// Charge les scripts de la Page +function charge_scripts_page_produit() { + wp_enqueue_script_module( + $id = "haiku-atelier-2024-scripts-page-produit", + $src = get_template_directory_uri() . "/assets/js/scripts-page-produit.js", + $deps = [], + $ver = filemtime(get_template_directory() . "/assets/js/scripts-page-produit.js"), + ); +} +add_action("wp_enqueue_scripts", "charge_scripts_page_produit"); + +// Rendu +Timber::render($filenames = $modeles, $data = $contexte); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss index e1a23cc8..c4cfd2a9 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/abstracts/_variables.scss @@ -11,6 +11,10 @@ --police-lato: "Lato", sans-serif; --police-myriad: "Myriad", sans-serif; + /* Dimensions */ + --en-tete-hauteur: 60px; + --menu-categories-produits-hauteur: 54.39px; + /* Espacements */ --espace-xs: 0.25rem; // 4px; --espace-s: 0.5rem; // 8px diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss new file mode 100644 index 00000000..4b2bc893 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_colonnes-photos.scss @@ -0,0 +1,71 @@ +// Styles pour les colonnes de photos d'une Page Produit + +.photos-produit { + /* Positions */ + --colonne-gauche-position-haut: var(--menu-categories-produits-hauteur); + + /* Dimensions */ + --colonne-gauche-photo-hauteur: calc(100vh - var(--menu-categories-produits-hauteur)); + --colonne-droite-photo-hauteur-minimale: calc( + 100vh + var(--en-tete-hauteur) + var(--menu-categories-produits-hauteur) + ); + + /* Marges */ + --section-marges-externes-bloc-fin: 1rem; + + // position: relative; + display: flex; + flex-flow: column nowrap; + align-items: center; + width: 100%; + + // margin-bottom: 1rem; + + &__conteneur { + display: flex; + flex-flow: row wrap; + justify-content: center; + + > section { + position: relative; + display: flex; + flex-flow: column nowrap; + width: 50%; + + &.colonne-gauche { + position: sticky; + top: var(--colonne-gauche-position-haut); + height: var(--colonne-gauche-photo-hauteur); + + figure { + height: 100%; + + picture { + height: 100%; + + img { + height: 100%; + } + } + } + } + + &.colonne-droite { + figure { + picture { + img { + &:only-child { + min-height: var(--colonne-droite-photo-hauteur-minimale); + } + } + } + } + } + } + } + + img { + height: 100%; + object-fit: cover; + } +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss index ff3ef673..d0408d44 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_en-tete.scss @@ -6,13 +6,18 @@ --en-tete-marges-internes-bloc: var(--espace-m); /* Dimensions */ - --en-tete-hauteur: 80px; - --en-tete-logo-longueur: 100px; + --en-tete-section-hauteur: var(--en-tete-hauteur); + --en-tete-logo-longueur: 80px; + position: fixed; + z-index: 20; + top: 0; display: flex; flex-flow: row nowrap; place-items: center; justify-content: space-between; + min-width: 100vw; + max-width: 100vw; height: var(--en-tete-hauteur); padding: var(--en-tete-marges-internes-bloc) var(--en-tete-marges-internes-ligne); background: var(--couleur-gris); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss index 8887d17d..f751e82d 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_grille-produits.scss @@ -36,6 +36,7 @@ .produit__illustration__survol { visibility: visible; opacity: 1; + transition: 0.3s opacity, 0.3s visibility; } } } @@ -54,7 +55,7 @@ height: 100%; visibility: hidden; opacity: 0; - transition: 0.2s opacity, 0.2s visibility; + transition: 0.15s opacity, 0.15s visibility; } img { diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss new file mode 100644 index 00000000..1bd1311e --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_informations-produit.scss @@ -0,0 +1,36 @@ +// Styles pour la boîte flottante des Informations sur le Produit + +.informations-produit { + position: sticky; + bottom: 0; + overflow: visible; + width: 0; + height: 0; + background-color: rgb(0 0 0 / 50%); + + &__conteneur { + transform: translate(calc(50vw - 35ch), -100%); + display: grid; + grid-auto-rows: 1fr; + width: 70ch; + max-width: 70ch; + height: 180px; + background: rgb(255 255 255 / 80%); + border: 1px solid var(--couleur-noir); + + section { + display: flex; + flex-flow: row nowrap; + padding: 1rem; + + + section { + border-top: 1px solid var(--couleur-noir); + } + } + } +} + +.produits-similaires { + position: relative; + margin-top: 80px; +} diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss index 79db2916..a9a319f8 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_menu-categories-produits.scss @@ -1,12 +1,23 @@ // Styles pour le menu des Catégories de Produits +/** + * Le menu avec les Catégories de Produits pour une navigation rapide. + * + * 1. Applique une marge supérieure égale à la hauteur de l'en-tête pour qu'elle puisse s'afficher + * correctement. + */ #menu-categories-produits { /* Dimensions */ --menu-entree-longueur-minimale: 13ch; + --menu-section-hauteur: var(--menu-categories-produits-hauteur); /* Marges */ + --menu-section-marges-bloc-debut: var(--en-tete-hauteur); /* 1 */ --menu-entree-marges-internes-ligne: var(--espace-m); + height: var(--menu-section-hauteur); + margin-top: var(--menu-section-marges-bloc-debut); /* 1 */ + /** * Liste des Catégories de Produits. * diff --git a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss index e7e2eab9..017832a7 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/layouts/_pied-de-page.scss @@ -12,7 +12,7 @@ grid-template-columns: 1fr 1fr; place-items: center; align-self: end; - min-width: 100vw; + max-width: 100vw; padding: var(--pied-de-page-marges-internes-bloc) var(--pied-de-page-marges-internes-ligne); line-height: 1.5; background: var(--couleur-jaune); diff --git a/web/app/themes/haiku-atelier-2024/src/sass/main.scss b/web/app/themes/haiku-atelier-2024/src/sass/main.scss index eb516970..3005d47c 100644 --- a/web/app/themes/haiku-atelier-2024/src/sass/main.scss +++ b/web/app/themes/haiku-atelier-2024/src/sass/main.scss @@ -14,6 +14,8 @@ // 3. Régions @use "layouts/en-tete" as en-tete; +@use "layouts/colonnes-photos" as colonnes-photos; @use "layouts/grille-produits" as grille-produits; +@use "layouts/informations-produit" as informations-produit; @use "layouts/menu-categories-produits" as menu-categories-produits; @use "layouts/pied-de-page" as pied-de-page; diff --git a/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts new file mode 100644 index 00000000..0e7af46d --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-produit.ts @@ -0,0 +1,50 @@ +// Scripts pour la Page Produit + +const CLASSE_POSITION_FIXE: string = "position-fixe"; +const CLASSE_INFORMATIONS_PRODUIT = "informations-produit"; +const CLASSE_PRODUITS_SIMILAIRES = "produits-similaires"; + +/* Fonctions utilitaires */ + +const safeQuerySelector = (parent: Document | Element) => (query: string) => { + const element: Element | null = parent.querySelector(query); + if (!element) throw new Error(`La requête "${query}" n'a débouché sur aucun Élément.`); + return element; +}; + +export const estDansLaVue = (element: Element) => { + const rect: DOMRect = element.getBoundingClientRect(); + + return ( + rect.top >= 0 + && rect.left >= 0 + && rect.top <= (window.innerHeight || document.documentElement.clientHeight) + && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + ); +}; + +// const creeObservateurIntersection = (element: Element, options: IntersectionObserverInit, classe = "anime") => { +// const observateur = new IntersectionObserver(entrees => { +// for (const entree of entrees) { +// const cible = entree.target; + +// /* Enclenchement de l'animation */ +// if (entree.isIntersecting || estDansLaVue(cible)) { +// cible.classList.add(classe); +// return; +// } + +// /* Empêche que le cycle ne se répète */ +// if (cible.classList.contains(classe)) { +// observateur.unobserve(cible); +// } +// } +// }, options || {}); + +// observateur.observe(element); +// return observateur; +// }; + +document.addEventListener("DOMContentLoaded", () => { + // gereBoiteInformationsProduit(); +}); diff --git a/web/app/themes/haiku-atelier-2024/style.css b/web/app/themes/haiku-atelier-2024/style.css index e69de29b..8b137891 100644 --- a/web/app/themes/haiku-atelier-2024/style.css +++ b/web/app/themes/haiku-atelier-2024/style.css @@ -0,0 +1 @@ + diff --git a/web/app/themes/haiku-atelier-2024/views/shop.twig b/web/app/themes/haiku-atelier-2024/views/boutique.twig similarity index 100% rename from web/app/themes/haiku-atelier-2024/views/shop.twig rename to web/app/themes/haiku-atelier-2024/views/boutique.twig diff --git a/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig new file mode 100644 index 00000000..293b4e33 --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/informations-produit.twig @@ -0,0 +1,26 @@ +{# Boîte flottante contenant les informations sur le Produit, en détails, et le sélecteur de quantité/taille pour l'ajout au Panier #} + + diff --git a/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig new file mode 100644 index 00000000..492d55fa --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig @@ -0,0 +1,20 @@ +
+
From the same Collection
+ +

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, + perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, + perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, + perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad labore quisquam nisi corporis impedit eos a. Maiores, + perspiciatis error! Tenetur incidunt repudiandae fugit beatae dicta debitis corrupti nesciunt pariatur aperiam! +

+
diff --git a/web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig b/web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig index 23ee040f..20a1e408 100644 --- a/web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig +++ b/web/app/themes/haiku-atelier-2024/views/parts/pages/shop/grille-produits.twig @@ -5,11 +5,11 @@
- {# {{ produit.illustration.image }} #} {{ produit.premiere_variation_image }} + {{ produit.premiere_photo_gauche }} - {# {{ produit.illustration.image }} #} {{ produit.deuxieme_variation_image }} + {{ produit.premiere_photo_droite }} diff --git a/web/app/themes/haiku-atelier-2024/views/produit.twig b/web/app/themes/haiku-atelier-2024/views/produit.twig new file mode 100644 index 00000000..22e5ca8a --- /dev/null +++ b/web/app/themes/haiku-atelier-2024/views/produit.twig @@ -0,0 +1,37 @@ +{% extends "base.twig" %} + +{% block contenu %} + {# Menu avec les catégories de produits #} + {% include "parts/menu-categories-produits.twig" %} + + {# Illustrations du Produit #} +
+
+
+ {% for photo in produit.photos_colonne_gauche %} +
+ + {{ photo }} + +
+ {% endfor %} +
+ +
+ {% for photo in produit.photos_colonne_droite %} +
+ + {{ photo }} + +
+ {% endfor %} +
+
+
+ + {# Boîte des Informations du Produit #} + {% include "parts/pages/produit/informations-produit.twig" %} + + {# Produits similaires, généralement ceux de la même Collection #} + {% include "parts/pages/produit/produits-similaires.twig" %} +{% endblock contenu %}