gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

2024-12-09

Browse source
This commit is contained in:
gcch 2024-12-09 09:26:13 +01:00
commit ace47f1701
42 changed files with 1556 additions and 691 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,14 +33,14 @@
}
:root {
/* Couleurs */
--couleur-blanc: #ffffff;
--couleur-blanc: #fff;
--couleur-blanc-fond: rgb(255 255 255 / 90%);
--couleur-gris: #eceaeb;
--couleur-gris-fonce: #808080;
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
--couleur-bordeaux: #490918;
--couleur-bordeaux-fond: rgb(73 9 24 / 80%);
--couleur-jaune: #ebffb8;
--couleur-jaune: #defdb5;
--couleur-jaune-fond: rgb(235 255 184 / 80%);
--couleur-noir: #202020;
--couleur-fond: rgb(236 234 235 / 80%);

2
web/app/themes/haiku-atelier-2024/assets/css/main.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
web/app/themes/haiku-atelier-2024/assets/img/logos/logo-text.svg
View file

@ -5,7 +5,7 @@
width="330.107px" height="330.773px" viewBox="0 0 330.107 330.773" enable-background="new 0 0 330.107 330.773"
xml:space="preserve">
<g id="logo_x2F_colors">
<ellipse display="none" fill="#EBFFB8" cx="165.872" cy="162.37" rx="164.236" ry="161.992"/>
<ellipse display="none" fill="#DEFDB5" cx="165.872" cy="162.37" rx="164.236" ry="161.992"/>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#202020" d="M256.14,137.243c0.624,1.266,0.236,5.389,0.142,5.907
c-0.165,0.873-0.366,5.486-0.339,6.494c0.03,0.981-0.037,5.803-0.067,6.871c-0.061,2.059-0.419,3.634-0.353,5.689

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

17
web/app/themes/haiku-atelier-2024/src/inc/ChampsPersonnalises.php
View file

@ -25,4 +25,21 @@ function cree_champs_personnalises_produit(): void {
]);
}
function cree_champ_personnalise_commande($order): void {
woocommerce_wp_text_input([
"id" => "tracking_number",
"label" => "Tracking Number:",
"value" => $order->get_meta("tracking_number"),
"wrapper_class" => "form-field-wide",
]);
}
function maj_champ_personnalise_commande($order_id): void {
$order = wc_get_order($order_id);
$order->update_meta_data("tracking_number", wc_clean($_POST["tracking_number"]));
$order->save();
}
add_action("carbon_fields_register_fields", "cree_champs_personnalises_produit");
add_action("woocommerce_admin_order_data_after_shipping_address", "cree_champ_personnalise_commande");
add_action("woocommerce_process_shop_order_meta", "maj_champ_personnalise_commande");

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

@ -2,14 +2,14 @@
:root {
/* Couleurs */
--couleur-blanc: #ffffff;
--couleur-blanc: #fff;
--couleur-blanc-fond: rgb(255 255 255 / 90%);
--couleur-gris: #eceaeb;
--couleur-gris-fonce: #808080;
--couleur-gris-fonce-fond: rgb(128 128 128 / 80%);
--couleur-bordeaux: #490918;
--couleur-bordeaux-fond: rgb(73 9 24 / 80%);
--couleur-jaune: #ebffb8;
--couleur-jaune: #defdb5;
--couleur-jaune-fond: rgb(235 255 184 / 80%);
--couleur-noir: #202020;
--couleur-fond: rgb(236 234 235 / 80%);

16
web/app/themes/haiku-atelier-2024/src/scripts/page-panier/scripts-page-panier-adresses.ts
View file

@ -215,14 +215,6 @@ export const initialiseBoutonCalculLivraison = (): void => {
.ifLeft(
(erreur: ErreurAdresseInvalide | FetchErrors | HttpCodeErrors | ValiError<AnySchema>): void => {
match(erreur)
.when(estErreurHttp, (e): void => {
reporteEtJournaliseErreur(e);
E.MESSAGE_ADRESSES.textContent = ERREUR_GENERIQUE_SOUMISSION_ADRESSES;
})
.when(estErreurFetch, (e): void => {
reporteEtJournaliseErreur(e);
E.MESSAGE_ADRESSES.textContent = ERREUR_GENERIQUE_RESEAU;
})
.with(P.instanceOf(ValiError), (e: ValiError<AnySchema>): void => {
reporteEtJournaliseErreur(e);
console.error(e.issues);
@ -245,6 +237,14 @@ export const initialiseBoutonCalculLivraison = (): void => {
E.MESSAGE_ADRESSES.textContent = ERREUR_GENERIQUE_SOUMISSION_ADRESSES;
});
})
.when(estErreurHttp, (e): void => {
reporteEtJournaliseErreur(e);
E.MESSAGE_ADRESSES.textContent = ERREUR_GENERIQUE_SOUMISSION_ADRESSES;
})
.when(estErreurFetch, (e): void => {
reporteEtJournaliseErreur(e);
E.MESSAGE_ADRESSES.textContent = ERREUR_GENERIQUE_RESEAU;
})
.exhaustive();
E.BOUTON_ACTIONS_FORMULAIRE.textContent = "Submit your addresses";

10
web/app/themes/haiku-atelier-2024/views/404.twig
View file

@ -1,7 +1,10 @@
{% extends "base.twig" %}
{% block contenu %}
<main class="page-modele-simple" id="page-404">
<main
class="page-modele-simple"
id="page-404"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Sorry!</h2>
@ -13,7 +16,10 @@
</p>
<p>
<a class="lien-lien" href="/shop">
<a
class="lien-lien"
href="/shop"
>
Go back to the Shop
</a>
</p>

168
web/app/themes/haiku-atelier-2024/views/a-propos.twig
View file

@ -12,71 +12,103 @@
{# Épingles #}
<button
aria-label="First pin" class="epingle"
data-id-ensemble-epingle-boite="1" type="button"
aria-label="First pin"
class="epingle"
data-id-ensemble-epingle-boite="1"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
<button
aria-label="Second pin" class="epingle"
data-id-ensemble-epingle-boite="2" type="button"
aria-label="Second pin"
class="epingle"
data-id-ensemble-epingle-boite="2"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
<button
aria-label="Third pin" class="epingle"
data-id-ensemble-epingle-boite="3" type="button"
aria-label="Third pin"
class="epingle"
data-id-ensemble-epingle-boite="3"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
<button
aria-label="Fourth pin" class="epingle"
data-id-ensemble-epingle-boite="4" type="button"
aria-label="Fourth pin"
class="epingle"
data-id-ensemble-epingle-boite="4"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
<button
aria-label="Fifth pin" class="epingle"
data-id-ensemble-epingle-boite="5" type="button"
aria-label="Fifth pin"
class="epingle"
data-id-ensemble-epingle-boite="5"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
<button
aria-label="Sixth pin" class="epingle"
data-id-ensemble-epingle-boite="6" type="button"
aria-label="Sixth pin"
class="epingle"
data-id-ensemble-epingle-boite="6"
type="button"
>
<img
alt="" height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg" width="82"
alt=""
height="56"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
width="82"
>
</button>
{# Boîtes de texte #}
<div class="boite-texte" data-id-ensemble-epingle-boite="1">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="1"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>
@ -88,11 +120,19 @@
<p>More than poetry, it’s a philosophy.</p>
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="2">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="2"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>
@ -106,11 +146,19 @@
</p>
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="3">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="3"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>
@ -125,11 +173,19 @@
</p>
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="4">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="4"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>
@ -143,11 +199,19 @@
</p>
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="5">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="5"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>
@ -165,11 +229,19 @@
</p>
</div>
<div class="boite-texte" data-id-ensemble-epingle-boite="6">
<button class="boite-texte__bouton-fermeture" type="button">
<div
class="boite-texte"
data-id-ensemble-epingle-boite="6"
>
<button
class="boite-texte__bouton-fermeture"
type="button"
>
<img
alt="An icon in form of a cross" height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg" width="20"
alt="An icon in form of a cross"
height="20"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
>
</button>

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

@ -5,21 +5,29 @@
<main id="page-accueil">
<div class="storytelling">
<div class="storytelling__conteneur">
<div class="storytelling__image" data-index="0">
<div
class="storytelling__image"
data-index="0"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll0", "", 903, 1080, "image-scroll0")
}}
</div>
<div class="storytelling__image" data-index="1">
<div
class="storytelling__image"
data-index="1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", "", 903, 1080, "image-scroll1")
}}
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="2"
aria-hidden
class="storytelling__image"
data-cache
data-index="2"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", "", 903, 1080, "image-scroll2")
@ -27,8 +35,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="3"
aria-hidden
class="storytelling__image"
data-cache
data-index="3"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", "", 903, 1080, "image-scroll3")
@ -36,8 +46,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="4"
aria-hidden
class="storytelling__image"
data-cache
data-index="4"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", "", 903, 1080, "image-scroll4")
@ -45,8 +57,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="5"
aria-hidden
class="storytelling__image"
data-cache
data-index="5"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", "", 903, 1080, "image-scroll5")
@ -54,8 +68,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="6"
aria-hidden
class="storytelling__image"
data-cache
data-index="6"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", "", 903, 1080, "image-scroll6")
@ -63,8 +79,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="7"
aria-hidden
class="storytelling__image"
data-cache
data-index="7"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", "", 903, 1080, "image-scroll7")
@ -72,8 +90,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="8"
aria-hidden
class="storytelling__image"
data-cache
data-index="8"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", "", 903, 1080, "image-scroll8")
@ -81,8 +101,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="9"
aria-hidden
class="storytelling__image"
data-cache
data-index="9"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", "", 903, 1080, "image-scroll9")
@ -90,8 +112,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="10"
aria-hidden
class="storytelling__image"
data-cache
data-index="10"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", "", 903, 1080, "image-scroll10")
@ -99,8 +123,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="11"
aria-hidden
class="storytelling__image"
data-cache
data-index="11"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", "", 903, 1080, "image-scroll11")
@ -108,8 +134,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="12"
aria-hidden
class="storytelling__image"
data-cache
data-index="12"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", "", 903, 1080, "image-scroll12")
@ -117,8 +145,10 @@
</div>
<div
aria-hidden class="storytelling__image"
data-cache data-index="13"
aria-hidden
class="storytelling__image"
data-cache
data-index="13"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", "", 903, 1080, "image-scroll13")

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

@ -8,7 +8,10 @@
{% endblock head %}
{% endblock conteneur_html_head %}
<body class="{{ body_class }}" data-langue="{{ langue_courante }}">
<body
class="{{ body_class }}"
data-langue="{{ langue_courante }}"
>
{# En-tête #}
{% include "parts/en-tete.twig" %}
@ -18,11 +21,14 @@
{# Bouton Revenir en haut #}
<button
aria-hidden class="bouton-retour-haut"
id="bouton-retour-haut" type="button"
aria-hidden
class="bouton-retour-haut"
id="bouton-retour-haut"
type="button"
>
<img
alt="An arrow pointing to the top" src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
alt="An arrow pointing to the top"
src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
aria-hidden
>
<span class="visuellement-cache">Back to top</span>

16
web/app/themes/haiku-atelier-2024/views/boutique.twig
View file

@ -2,12 +2,12 @@
{% block head %}
<script>
// Injection d'états pour les Scripts de la page.
// Injection d'états pour les Scripts de la page.
const _etats = {
nonce: "{{ nonce_wc }}",
authString: "{{ auth_string }}",
};
const _etats = {
nonce: "{{ nonce_wc }}",
authString: "{{ auth_string }}",
};
</script>
{% endblock head %}
@ -21,8 +21,10 @@ const _etats = {
<div class="actions">
<button
{{produits|length == 12 ? "" : "hidden"}} class="bouton-case-pleine bouton-blanc-sur-noir"
id="bouton-plus-de-produits" type="button"
{{produits|length == 12 ? "" : "hidden"}}
class="bouton-case-pleine bouton-blanc-sur-noir"
id="bouton-plus-de-produits"
type="button"
>
Show more products
</button>

13
web/app/themes/haiku-atelier-2024/views/cgv.twig
View file

@ -1,7 +1,10 @@
{% extends "base.twig" %}
{% block contenu %}
<main class="page-modele-simple" id="page-cgv">
<main
class="page-modele-simple"
id="page-cgv"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Terms & Conditions</h2>
@ -49,7 +52,9 @@
</p>
<p>
To start a return you can contact us at <a class="lien-lien" href="mailto:haiku.atelier@gmail.com"
To start a return you can contact us at <a
class="lien-lien"
href="mailto:haiku.atelier@gmail.com"
>haiku.atelier@gmail.com</a>. Please note that returns and exchange will need to be send back our workshop
in Brussels.
</p>
@ -169,7 +174,9 @@
<p>
<strong>Contact:</strong><br>
For inquiries and customer service, please refer to <a class="lien-lien" href="/contact"
For inquiries and customer service, please refer to <a
class="lien-lien"
href="/contact"
>our Contact page</a>.
</p>

15
web/app/themes/haiku-atelier-2024/views/contact.twig
View file

@ -1,7 +1,10 @@
{% extends "base.twig" %}
{% block contenu %}
<main class="page-modele-simple" id="page-contact">
<main
class="page-modele-simple"
id="page-contact"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Say hi!</h2>
@ -10,9 +13,15 @@
<div class="contenu__textuel">
<p>
For any inquiries, from simple information questions to problems with your products, or just to say hi, don't
hesitate to contact us at <a class="lien-lien" href="mailto:haikuatelier@gmail.com">
hesitate to contact us at <a
class="lien-lien"
href="mailto:haikuatelier@gmail.com"
>
haikuatelier@gmail.com
</a> or on Instagram at <a class="lien-lien" href="https://www.instagram.com/haiku.atelier">
</a> or on Instagram at <a
class="lien-lien"
href="https://www.instagram.com/haiku.atelier"
>
haiku.atelier
</a>.
</p>

8
web/app/themes/haiku-atelier-2024/views/echec-commande.twig
View file

@ -1,7 +1,10 @@
{% extends "base.twig" %}
{% block contenu %}
<main class="page-modele-simple" id="page-succes-commande">
<main
class="page-modele-simple"
id="page-succes-commande"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Failed order!</h2>
@ -11,7 +14,8 @@
<p>Sadly, something went wrong during your order, or you chose to cancel it. You can try again if you want: your
cart is still there.</p>
<p>If an error persists and you don't know what's going on, please don't hesitate to <a
class="lien-lien" href="/contact"
class="lien-lien"
href="/contact"
>contact us</a>!</p>
</div>
</div>

24
web/app/themes/haiku-atelier-2024/views/macros/images.twig
View file

@ -1,13 +1,25 @@
{% macro genere_source_img_multi_formats(rel_url, alt="", width, height, id="") %}
<picture id="{{ id }}">
<source srcset="{{ rel_url }}.jxl" type="image/jxl">
<source srcset="{{ rel_url }}.avif" type="image/avif">
<source srcset="{{ rel_url }}.webp" type="image/webp">
<source
srcset="{{ rel_url }}.jxl"
type="image/jxl"
>
<source
srcset="{{ rel_url }}.avif"
type="image/avif"
>
<source
srcset="{{ rel_url }}.webp"
type="image/webp"
>
<img
alt="{{ alt }}" decoding="sync"
height="{{ height }}" loading="eager"
src="{{ rel_url }}.jpg" width="{{ width }}"
alt="{{ alt }}"
decoding="sync"
height="{{ height }}"
loading="eager"
src="{{ rel_url }}.jpg"
width="{{ width }}"
onload="this.style.opacity=1"
>
</picture>

20
web/app/themes/haiku-atelier-2024/views/panier.twig
View file

@ -2,17 +2,20 @@
{% block head %}
<script>
// Injection d'états pour les Scripts de la page.
// Injection d'états pour les Scripts de la page.
const _etats = {
nonce: "{{ nonce_wc }}",
authString: "{{ auth_string }}",
};
const _etats = {
nonce: "{{ nonce_wc }}",
authString: "{{ auth_string }}",
};
</script>
{% endblock head %}
{% block contenu %}
<main id="page-panier" data-contient-articles="{{ articles_presents }}">
<main
id="page-panier"
data-contient-articles="{{ articles_presents }}"
>
{# « Your Cart » #}
{% include "parts/pages/panier/panneau-panier.twig" %}
{# Your Info #}
@ -20,7 +23,10 @@ const _etats = {
<div class="panier-vide">
<p>Sorry! Your cart is empty.</p>
<a class="lien-bouton" href="{{ pages.shop.lien }}">
<a
class="lien-bouton"
href="{{ pages.shop.lien }}"
>
Go back to the Shop
</a>
</div>

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

@ -1,24 +1,36 @@
<header id="en-tete">
{# Bouton (dés)activant le menu mobile #}
<section class="logo">
<button id="bouton-menu-mobile" type="button">
<button
id="bouton-menu-mobile"
type="button"
>
<img
alt="Haiku Atelier's Logo" decoding="async"
height="25" loading="eager"
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg" width="80"
alt="Haiku Atelier's Logo"
decoding="async"
height="25"
loading="eager"
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
width="80"
>
</button>
</section>
{# TODO: Utiliser un Menu WordPress #}
{# TODO: Utiliser des <span> À L'INTÉRIEUR de <li> #}
<nav class="menu-navigation" id="menu-navigation-en-tete">
<nav
class="menu-navigation"
id="menu-navigation-en-tete"
>
<ul>
<li
class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.home.lien }}">
<a
class="lien-menu"
href="{{ pages.home.lien }}"
>
{{ pages.home.nom }}
</a>
</span>
@ -27,7 +39,10 @@
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.shop.lien }}">
<a
class="lien-menu"
href="{{ pages.shop.lien }}"
>
{{ pages.shop.nom }}
</a>
</span>
@ -36,7 +51,10 @@
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.about.lien }}">
<a
class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
</a>
</span>
@ -46,7 +64,10 @@
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.contact.lien }}">
<a
class="lien-menu"
href="{{ pages.contact.lien }}"
>
{{ pages.contact.nom }}
</a>
</span>
@ -57,8 +78,10 @@
{# Bouton « Panier » avec l'indicateur de quantité de Produits #}
<section class="compte-panier">
<a
class="lien-bouton" data-contient-articles="{{ articles_presents }}"
href="{{ pages.cart.lien }}" rel="cart"
class="lien-bouton"
data-contient-articles="{{ articles_presents }}"
href="{{ pages.cart.lien }}"
rel="cart"
>
cart ({{ quantite_articles }})
</a>
@ -66,19 +89,30 @@
{# Menu mobile #}
<div
aria-hidden="true" aria-labelledby="menu-mobile"
class="menu-modale" id="menu-mobile"
aria-hidden="true"
aria-labelledby="menu-mobile"
class="menu-modale"
id="menu-mobile"
>
<div class="menu-modale__fond" data-a11y-dialog-hide></div>
<div
class="menu-modale__fond"
data-a11y-dialog-hide
></div>
<div class="menu-modale__conteneur">
<nav class="menu-navigation" id="menu-navigation-mobile">
<nav
class="menu-navigation"
id="menu-navigation-mobile"
>
<ul>
<li
class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.home.lien }}">
<a
class="lien-menu"
href="{{ pages.home.lien }}"
>
{{ pages.home.nom }}
</a>
</span>
@ -88,7 +122,10 @@
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.shop.lien }}">
<a
class="lien-menu"
href="{{ pages.shop.lien }}"
>
{{ pages.shop.nom }}
</a>
</span>
@ -98,7 +135,10 @@
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.about.lien }}">
<a
class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
</a>
</span>
@ -108,7 +148,10 @@
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a class="lien-menu" href="{{ pages.contact.lien }}">
<a
class="lien-menu"
href="{{ pages.contact.lien }}"
>
{{ pages.contact.nom }}
</a>
</span>

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

@ -1,43 +1,67 @@
<head>
<meta charset="{{ site.charset }}">
<meta name="description" content="{{ site.description }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta
name="description"
content="{{ site.description }}"
>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
{# Pinterest #}
<meta name="p:domain_verify" content="98fed4c924501d2f2a90c5b37e165085">
<meta
name="p:domain_verify"
content="98fed4c924501d2f2a90c5b37e165085"
>
{# Favicon #}
<link rel="apple-touch-icon" href="{{ site.theme.link }}/assets/img/apple-touch-icon.png">
<link
rel="icon" href="{{ site.theme.link }}/assets/img/favicon.ico"
rel="apple-touch-icon"
href="{{ site.theme.link }}/assets/img/apple-touch-icon.png"
>
<link
rel="icon"
href="{{ site.theme.link }}/assets/img/favicon.ico"
sizes="48x48"
>
<link
rel="icon" href="{{ site.theme.link }}/assets/img/favicon.svg"
rel="icon"
href="{{ site.theme.link }}/assets/img/favicon.svg"
type="image/svg+xml"
>
<link rel="manifest" href="{{ site.theme.link }}/assets/site.webmanifest">
<link
rel="manifest"
href="{{ site.theme.link }}/assets/site.webmanifest"
>
{# Préchargements #}
<link
as="image" href="{{ site.theme.link }}/assets/img/icons/cloud-gris.svg"
rel="preload" type="image/svg+xml"
as="image"
href="{{ site.theme.link }}/assets/img/icons/cloud-gris.svg"
rel="preload"
type="image/svg+xml"
>
<link
as="font" crossorigin
href="{{ site.theme.link }}/assets/fonts/lato/lato-variable-webfont.woff2" rel="preload"
as="font"
crossorigin
href="{{ site.theme.link }}/assets/fonts/lato/lato-variable-webfont.woff2"
rel="preload"
type="font/woff2"
>
<link
as="font" crossorigin
href="{{ site.theme.link }}/assets/fonts/lato/lato-variable-italic-webfont.woff2" rel="preload"
as="font"
crossorigin
href="{{ site.theme.link }}/assets/fonts/lato/lato-variable-italic-webfont.woff2"
rel="preload"
type="font/woff2"
>
{# Plausible #}
{% if environnement == "production" %}
<script
data-domain="haikuatelier.com" defer
data-domain="haikuatelier.com"
defer
src="https://greyhound.haikuatelier.com/js/script.js"
></script>
{% endif %}

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

@ -1,11 +1,15 @@
<nav
id="menu-categories-produits" class="menu-categories-produits"
id="menu-categories-produits"
class="menu-categories-produits"
data-entrees-presentes-fin
>
<svg
id="fleche-defilement-categories-produits-gauche" height="15"
transform="scale(-1 1)" viewBox="0 0 15 15"
width="15" xmlns="http://www.w3.org/2000/svg"
id="fleche-defilement-categories-produits-gauche"
height="15"
transform="scale(-1 1)"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.293 2.293a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L11 8.5H1.5a1 1 0 0 1 0-2H11L8.293 3.707a1 1 0 0 1 0-1.414"
@ -16,14 +20,19 @@
<li {{ est_page_tous_produits ? "class='categorie-courante'" : '' }}><a href="{{ pages.shop.lien }}">All</a></li>
{% for categorie in categories_produits %}
{# TODO: Factoriser l'injection de classe d'une manière plus propre #}
<li {{ categorie.courante ? "class='categorie-courante'" : '' }} id="categorie-{{ categorie.slug|e }}">
<li
{{ categorie.courante ? "class='categorie-courante'" : '' }}
id="categorie-{{ categorie.slug|e }}"
>
<a href="/{{ base_categorie_produit }}/{{ categorie.slug|e }}">{{ categorie.nom|e }}</a>
</li>
{% endfor %}
</ul>
<svg
id="fleche-defilement-categories-produits-droite" height="15"
viewBox="0 0 15 15" width="15"
id="fleche-defilement-categories-produits-droite"
height="15"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path

227
web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-informations-client.twig
View file

@ -1,33 +1,45 @@
<section class="panneau" id="panneau-informations-client">
<section
class="panneau"
id="panneau-informations-client"
>
<header class="panneau__en-tete">
<h2>Your info</h2>
</header>
{# « PayPal Express Checkout » #}
<div class="panneau__paypal-express" hidden>
<div
class="panneau__paypal-express"
hidden
>
<p>Express Check-out</p>
{# Bouton PayPal #}
<button type="button">
<img
alt="PayPal's Logo" height="18"
src="{{ site.theme.link }}/assets/img/paypal/logo-paypal.svg" width="13.48"
alt="PayPal's Logo"
height="18"
src="{{ site.theme.link }}/assets/img/paypal/logo-paypal.svg"
width="13.48"
>
<img
alt="PayPal" height="18"
src="{{ site.theme.link }}/assets/img/paypal/titre-paypal.svg" width="67.69"
alt="PayPal"
height="18"
src="{{ site.theme.link }}/assets/img/paypal/titre-paypal.svg"
width="67.69"
>
</button>
</div>
<form
class="panneau__formulaires" id="formulaire-commande"
class="panneau__formulaires"
id="formulaire-commande"
method="post"
>
{# Formulaires pour la livraison et facturation #}
<div class="panneau__formulaires__separation-adresses">
<input
id="separation-adresses" name="separation-adresses"
id="separation-adresses"
name="separation-adresses"
type="checkbox"
>
<label for="separation-adresses">Use a separate billing address</label>
@ -40,9 +52,12 @@
<div class="formulaire__champs__champ">
<label for="livraison-prenom">First name</label>
<input
autocomplete="given-name" id="livraison-prenom"
minlength="2" name="livraison-prenom"
required type="text"
autocomplete="given-name"
id="livraison-prenom"
minlength="2"
name="livraison-prenom"
required
type="text"
value="{{ adresse_livraison.first_name }}"
>
</div>
@ -50,9 +65,12 @@
<div class="formulaire__champs__champ">
<label for="livraison-nom">Last name</label>
<input
autocomplete="family-name" id="livraison-nom"
name="livraison-nom" minlength="2"
required type="text"
autocomplete="family-name"
id="livraison-nom"
name="livraison-nom"
minlength="2"
required
type="text"
value="{{ adresse_livraison.last_name }}"
>
</div>
@ -60,27 +78,36 @@
<div class="formulaire__champs__champ">
<label for="livraison-adresse">Address</label>
<input
autocomplete="street-address" id="livraison-adresse"
name="livraison-adresse" required
type="text" value="{{ adresse_livraison.address_1 }}"
autocomplete="street-address"
id="livraison-adresse"
name="livraison-adresse"
required
type="text"
value="{{ adresse_livraison.address_1 }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="livraison-code-postal">Postcode</label>
<input
id="livraison-code-postal" minlength="3"
name="livraison-code-postal" required
type="text" value="{{ adresse_livraison.postcode }}"
id="livraison-code-postal"
minlength="3"
name="livraison-code-postal"
required
type="text"
value="{{ adresse_livraison.postcode }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="livraison-ville">City</label>
<input
autocomplete="address-level2" id="livraison-ville"
minlength="2" name="livraison-ville"
required type="text"
autocomplete="address-level2"
id="livraison-ville"
minlength="2"
name="livraison-ville"
required
type="text"
value="{{ adresse_livraison.city }}"
>
</div>
@ -88,20 +115,27 @@
<div class="formulaire__champs__champ">
<label for="livraison-region-etat">Region/State</label>
<input
autocomplete="address-level1" id="livraison-region-etat"
name="livraison-region-etat" placeholder="If applicable"
type="text" value="{{ adresse_livraison.state }}"
autocomplete="address-level1"
id="livraison-region-etat"
name="livraison-region-etat"
placeholder="If applicable"
type="text"
value="{{ adresse_livraison.state }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="livraison-pays">Country</label>
<select
id="livraison-pays" name="livraison-pays"
id="livraison-pays"
name="livraison-pays"
required
>
{% for cle, pays in pays_livraison %}
<option {{cle == adresse_livraison.country ? "selected" : ""}} value="{{cle}}">
<option
{{cle == adresse_livraison.country ? "selected" : ""}}
value="{{cle}}"
>
{{ pays }}
</option>
{% endfor %}
@ -111,9 +145,12 @@
<div class="formulaire__champs__champ">
<label for="livraison-telephone">Phone</label>
<input
autocomplete="tel" id="livraison-telephone"
minlength="6" name="livraison-telephone"
required type="tel"
autocomplete="tel"
id="livraison-telephone"
minlength="6"
name="livraison-telephone"
required
type="tel"
value="{{ adresse_livraison.phone }}"
>
</div>
@ -121,45 +158,62 @@
<div class="formulaire__champs__champ">
<label for="livraison-email">Email Address</label>
<input
autocomplete="email" id="livraison-email"
minlength="4" name="livraison-email"
required type="email"
autocomplete="email"
id="livraison-email"
minlength="4"
name="livraison-email"
required
type="email"
value="{{ email }}"
>
</div>
</div>
</div>
<div class="panneau__formulaires__facturation formulaire" hidden>
<div
class="panneau__formulaires__facturation formulaire"
hidden
>
<h3 class="formulaire__titre">Billing:</h3>
<div class="formulaire__champs">
<div class="formulaire__champs__champ">
<label for="facturation-prenom">First name</label>
<input
autocomplete="given-name" disabled
id="facturation-prenom" name="facturation-prenom"
minlength="2" required
type="text" value="{{ adresse_facturation.first_name }}"
autocomplete="given-name"
disabled
id="facturation-prenom"
name="facturation-prenom"
minlength="2"
required
type="text"
value="{{ adresse_facturation.first_name }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="facturation-nom">Last name</label>
<input
autocomplete="family-name" disabled
id="facturation-nom" name="facturation-nom"
minlength="2" required
type="text" value="{{ adresse_facturation.last_name }}"
autocomplete="family-name"
disabled
id="facturation-nom"
name="facturation-nom"
minlength="2"
required
type="text"
value="{{ adresse_facturation.last_name }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="facturation-adresse">Address</label>
<input
autocomplete="street-address" disabled
id="facturation-adresse" name="facturation-adresse"
required type="text"
autocomplete="street-address"
disabled
id="facturation-adresse"
name="facturation-adresse"
required
type="text"
value="{{ adresse_facturation.address_1 }}"
>
</div>
@ -167,9 +221,12 @@
<div class="formulaire__champs__champ">
<label for="facturation-code-postal">Postcode</label>
<input
disabled id="facturation-code-postal"
minlength="3" name="facturation-code-postal"
required type="text"
disabled
id="facturation-code-postal"
minlength="3"
name="facturation-code-postal"
required
type="text"
value="{{ adresse_facturation.postcode }}"
>
</div>
@ -177,19 +234,26 @@
<div class="formulaire__champs__champ">
<label for="facturation-ville">City</label>
<input
autocomplete="address-level2" disabled
id="facturation-ville" minlength="2"
name="facturation-ville" required
type="text" value="{{ adresse_facturation.city }}"
autocomplete="address-level2"
disabled
id="facturation-ville"
minlength="2"
name="facturation-ville"
required
type="text"
value="{{ adresse_facturation.city }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="facturation-region-etat">Region/State</label>
<input
autocomplete="address-level1" disabled
id="facturation-region-etat" name="facturation-region-etat"
placeholder="If applicable" type="text"
autocomplete="address-level1"
disabled
id="facturation-region-etat"
name="facturation-region-etat"
placeholder="If applicable"
type="text"
value="{{ adresse_facturation.state }}"
>
</div>
@ -197,11 +261,15 @@
<div class="formulaire__champs__champ">
<label for="facturation-pays">Country</label>
<select
id="facturation-pays" name="facturation-pays"
id="facturation-pays"
name="facturation-pays"
required
>
{% for cle, pays in pays_livraison %}
<option {{cle == adresse_livraison.country ? "selected" : ""}} value="{{cle}}">
<option
{{cle == adresse_livraison.country ? "selected" : ""}}
value="{{cle}}"
>
{{ pays }}
</option>
{% endfor %}
@ -211,27 +279,39 @@
<div class="formulaire__champs__champ">
<label for="facturation-telephone">Phone</label>
<input
autocomplete="tel" disabled
id="facturation-telephone" minlength="6"
name="facturation-telephone" required
type="tel" value="{{ adresse_facturation.phone }}"
autocomplete="tel"
disabled
id="facturation-telephone"
minlength="6"
name="facturation-telephone"
required
type="tel"
value="{{ adresse_facturation.phone }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="facturation-email">Email Address</label>
<input
autocomplete="email" disabled
id="facturation-email" minlength="4"
name="facturation-email" required
type="email" value="{{ email }} "
autocomplete="email"
disabled
id="facturation-email"
minlength="4"
name="facturation-email"
required
type="email"
value="{{ email }} "
>
</div>
</div>
</div>
<div class="panneau__formulaires__message">
<p class="message" id="message-formulaire-adresses"> </p>
<p
class="message"
id="message-formulaire-adresses"
>
</p>
</div>
{# Formulaire de paiement #}
@ -247,10 +327,14 @@
</p>
</div>
<div class="formulaire__paiement__choix" hidden>
<div
class="formulaire__paiement__choix"
hidden
>
<label for="paiement-stripe">Credit card</label>
<input
id="paiement-stripe" name="type-paiement"
id="paiement-stripe"
name="type-paiement"
type="radio"
>
</div>
@ -259,7 +343,10 @@
</form>
<footer class="panneau__pied-de-page">
<button form="formulaire-commande" type="submit">
<button
form="formulaire-commande"
type="submit"
>
Calculate shipping
</button>
</footer>

73
web/app/themes/haiku-atelier-2024/views/parts/pages/panier/panneau-panier.twig
View file

@ -1,4 +1,7 @@
<section class="panneau" id="panneau-panier">
<section
class="panneau"
id="panneau-panier"
>
<header class="panneau__en-tete">
<h2>Your cart</h2>
</header>
@ -6,8 +9,10 @@
<div class="panneau__grille-produits">
{% for produit in produits_panier %}
<article
class="panneau__grille-produits__produit" data-cle-panier="{{ produit.cle }}"
data-id-produit="{{ produit.id_produit }}" data-id-variation="{{ produit.id_variation }}"
class="panneau__grille-produits__produit"
data-cle-panier="{{ produit.cle }}"
data-id-produit="{{ produit.id_produit }}"
data-id-variation="{{ produit.id_variation }}"
data-quantite="{{ produit.quantite }}"
>
<div class="panneau__grille-produits__produit__illustratif">
@ -34,20 +39,28 @@
<div class="detail-produit__actions">
<button
class="detail-produit__actions__soustraction" {{ produit.quantite > 1 ? "" : "disabled" }}
class="detail-produit__actions__soustraction"
{{ produit.quantite > 1 ? "" : "disabled" }}
type="button"
>
-
</button>
<input
min="1" type="number"
min="1"
type="number"
value="{{ produit.quantite }}"
>
<button class="detail-produit__actions__addition" type="button">
<button
class="detail-produit__actions__addition"
type="button"
>
+
</button>
<button class="detail-produit__actions__suppression" type="button">
<button
class="detail-produit__actions__suppression"
type="button"
>
Remove
</button>
</div>
@ -58,27 +71,38 @@
<div class="panneau__instructions-code-promo">
<textarea
class="panneau__instructions-code-promo__instructions" id="instructions-client"
maxlength="2000" minlength="10"
class="panneau__instructions-code-promo__instructions"
id="instructions-client"
maxlength="2000"
minlength="10"
name="instructions"
placeholder="Add special instructions for your order: specify the products you want wrapped and how (i.e. all in one bag or separated), a gift message, etc."
resizable="false" rows="3"
resizable="false"
rows="3"
spellcheck="true"
></textarea>
<form
action="" class="panneau__instructions-code-promo__code-promo"
{{ code_promo ? "data-code-promo-present" : "" }} id="ensemble-code-promo"
action=""
class="panneau__instructions-code-promo__code-promo"
{{ code_promo ? "data-code-promo-present" : "" }}
id="ensemble-code-promo"
>
<input
{{ code_promo ? "disabled" : "" }} id="champ-code-promo"
maxlength="20" minlength="3"
name="code-promo" placeholder="Discount code or gift card"
type="text" value='{{ code_promo ? code_promo : ""}}'
{{ code_promo ? "disabled" : "" }}
id="champ-code-promo"
maxlength="20"
minlength="3"
name="code-promo"
placeholder="Discount code or gift card"
type="text"
value='{{ code_promo ? code_promo : ""}}'
>
<button
class="bouton-blanc-sur-noir" for="code-promo"
id="bouton-code-promo" type="button"
class="bouton-blanc-sur-noir"
for="code-promo"
id="bouton-code-promo"
type="button"
>
{{ code_promo ? "Remove" : "Apply" }}
</button>
@ -88,20 +112,27 @@
</div>
<div class="panneau__sous-totaux">
<div class="panneau__sous-totaux__ligne" id="sous-total-produits">
<div
class="panneau__sous-totaux__ligne"
id="sous-total-produits"
>
<p>Subtotal:</p>
<p><strong>{{ sous_total_panier }}€</strong></p>
</div>
<div
class="panneau__sous-totaux__ligne" id="sous-total-reduction"
class="panneau__sous-totaux__ligne"
id="sous-total-reduction"
{{ code_promo ? "" : "hidden"}}
>
<p>Discount:</p>
<p><strong>-{{ sous_total_reduction }}€</strong></p>
</div>
<div class="panneau__sous-totaux__ligne" id="sous-total-livraison">
<div
class="panneau__sous-totaux__ligne"
id="sous-total-livraison"
>
<p>Shipping:</p>
{% if sous_total_livraison == 0 %}
<p>

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

@ -2,27 +2,36 @@
Boîte flottante contenant les informations sur le Produit, en détails, et le sélecteur de quantité/taille pour l'ajout au Panier
#}
<aside aria-label="Product's details and variation selection" class="informations-produit">
<aside
aria-label="Product's details and variation selection"
class="informations-produit"
>
<div class="informations-produit__conteneur">
<section class="onglets-details-produit">
{# Contenus #}
<section
aria-labelledby="label-details-produit" hidden
id="details-produit" role="tabpanel"
aria-labelledby="label-details-produit"
hidden
id="details-produit"
role="tabpanel"
>
{{ produit.details }}
</section>
<section
aria-labelledby="label-conditions-livraison" hidden
id="conditions-livraison" role="tabpanel"
aria-labelledby="label-conditions-livraison"
hidden
id="conditions-livraison"
role="tabpanel"
>
{{ descriptions_produits.texte_conditions_livraison }}
</section>
<section
aria-labelledby="label-entretien-produit" hidden
id="entretien-produit" role="tabpanel"
aria-labelledby="label-entretien-produit"
hidden
id="entretien-produit"
role="tabpanel"
>
{{ descriptions_produits.texte_entretien_produit }}
</section>
@ -31,8 +40,10 @@
<ul role="tablist">
<li role="presentation">
<a
aria-selected="false" href="#details-produit"
id="label-details-produit" role="tab"
aria-selected="false"
href="#details-produit"
id="label-details-produit"
role="tab"
>
Details
</a>
@ -40,8 +51,10 @@
<li role="presentation">
<a
aria-selected="false" href="#conditions-livraison"
id="label-conditions-livraison" role="tab"
aria-selected="false"
href="#conditions-livraison"
id="label-conditions-livraison"
role="tab"
>
Shipping
</a>
@ -49,8 +62,10 @@
<li role="presentation">
<a
aria-selected="false" href="#entretien-produit"
id="label-entretien-produit" role="tab"
aria-selected="false"
href="#entretien-produit"
id="label-entretien-produit"
role="tab"
>
Care
</a>
@ -63,23 +78,32 @@
{% if variations_produit|length > 1 %}
<div class="selecteur-produit__selection-variation">
<label for="selecteur-variation" id="label-selecteur-variation">
<label
for="selecteur-variation"
id="label-selecteur-variation"
>
Variation:
</label>
<div class="selecteur-produit__selection-variation__selecteurs">
<select
aria-labelledby="label-selecteur-variation" class="selecteur-natif"
id="selecteur-variation" name="variations"
aria-labelledby="label-selecteur-variation"
class="selecteur-natif"
id="selecteur-variation"
name="variations"
>
<option
disabled selected
disabled
selected
value=""
>
--
</option>
{% for variation in variations_produit %}
<option data-prix="{{ variation.prix }}" value="{{ variation.id }}">
<option
data-prix="{{ variation.prix }}"
value="{{ variation.id }}"
>
{{ variation.titre }}
</option>
{% endfor %}
@ -93,8 +117,10 @@
<section class="actions-produit">
<button
class="bouton-case-pleine" {{ variations_produit|length > 1 ? "disabled" : "" }}
id="bouton-ajout-panier" type="button"
class="bouton-case-pleine"
{{ variations_produit|length > 1 ? "disabled" : "" }}
id="bouton-ajout-panier"
type="button"
>
Add to cart
</button>

32
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/photos-produit.twig
View file

@ -1,5 +1,8 @@
<div class="fleches-defilement">
<button class="fleches-defilement__bouton bouton-fleche" type="button">
<button
class="fleches-defilement__bouton bouton-fleche"
type="button"
>
{#
<svg
height="2rem"
@ -15,8 +18,10 @@
</svg>
#}
<svg
height="1.5rem" transform="scale(-1 1)"
viewBox="94.634 56.652 88.879 79.521" width="1.5rem"
height="1.5rem"
transform="scale(-1 1)"
viewBox="94.634 56.652 88.879 79.521"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
@ -26,10 +31,15 @@
</svg>
</button>
<button class="fleches-defilement__bouton bouton-fleche" type="button">
<button
class="fleches-defilement__bouton bouton-fleche"
type="button"
>
<svg
height="1.5rem" viewBox="94.634 56.652 88.879 79.521"
width="1.5rem" xmlns="http://www.w3.org/2000/svg"
height="1.5rem"
viewBox="94.634 56.652 88.879 79.521"
width="1.5rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m94.623 136.156 88.869-36.863-88.869-42.648s21.33 20.87 21.33 39.756c0 18.891-21.33 39.755-21.33 39.755"
@ -40,7 +50,10 @@
</div>
<main class="photos-produit">
<div aria-label="Photo of the Product alone" class="colonne colonne-gauche">
<div
aria-label="Photo of the Product alone"
class="colonne colonne-gauche"
>
{% for photo in produit.photos_colonne_gauche %}
<figure data-index="0">
<picture>
@ -50,7 +63,10 @@
{% endfor %}
</div>
<div aria-label="Photos of the Product worn" class="colonne colonne-droite">
<div
aria-label="Photos of the Product worn"
class="colonne colonne-droite"
>
{% for photo in produit.photos_colonne_droite %}
<figure data-index="{{ loop.index }}">
<picture>

5
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/produits-similaires.twig
View file

@ -1,4 +1,7 @@
<section aria-label="Products in the same Collection" class="produits-similaires">
<section
aria-label="Products in the same Collection"
class="produits-similaires"
>
<header><h2>From the same Collection</h2></header>
{% include "parts/pages/produit/grille-produits-similaires.twig" %}

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

@ -1,5 +1,6 @@
<div
class="grille-produits" data-page="1"
class="grille-produits"
data-page="1"
{% if id_categorie_produits %}data-id-categorie-produits="{{ id_categorie_produits }}"{% endif %}
>
{% if produits|length > 0 %}

15
web/app/themes/haiku-atelier-2024/views/parts/pied-de-page.twig
View file

@ -1,6 +1,9 @@
<footer id="pied-de-page">
<section class="zone-menu-navigation-secondaire">
<nav class="menu-navigation" id="menu-navigation-secondaire">
<nav
class="menu-navigation"
id="menu-navigation-secondaire"
>
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/terms-and-conditions">Terms & Conditions</a></li>
@ -10,12 +13,18 @@
</section>
<section class="zone-liens-reseaux-sociaux">
<nav class="menu-navigation" id="liens-reseaux-sociaux">
<nav
class="menu-navigation"
id="liens-reseaux-sociaux"
>
<ul>
{% for lien in liens_reseaux_sociaux %}
{% if lien.url %}
<li>
<a href="{{ lien.url }}" target="_blank">
<a
href="{{ lien.url }}"
target="_blank"
>
{{ lien.nom }}
</a>
</li>

2
web/app/themes/haiku-atelier-2024/views/produit.twig
View file

@ -2,7 +2,7 @@
{% block head %}
<script>
// dprint-ignore-file
// dprint-ignore-file
// Injection d'états pour les Scripts de la page.
/**

5
web/app/themes/haiku-atelier-2024/views/succes-commande.twig
View file

@ -17,7 +17,10 @@
</p>
<p>
Don't hesitate to <a class="lien-lien" href="/contact">contact us</a> if you have any questions!
Don't hesitate to <a
class="lien-lien"
href="/contact"
>contact us</a> if you have any questions!
</p>
</div>

42
web/app/themes/haiku-atelier-2024/woocommerce/emails/customer-completed-order.php Normal file
View file

@ -0,0 +1,42 @@
<?php
/**
* Le modèle de l'email envoyé au client à la finalisation/l'envoi de la commande (« Completed Order »).
*/
use Automattic\WooCommerce\Admin\Overrides\Order;
use Carbon\Carbon;
use Timber\Timber;
use Illuminate\Support\Str;
if (!defined("ABSPATH")) {
exit();
}
// Initialise Timber
Timber::init();
// Sélectionne le répertoire contenant les modèles Twig
Timber::$dirname = ["views"];
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["email-commande-envoyee.twig"];
/** @var Order $commande La Commande issue du contexte contenu dans la variable $order. */
$commande = $order;
/** @var Carbon $date */
$date = new Carbon($commande->get_date_created());
$email = [
"commande" => [
"date" => $date->toDateString(),
"id" => $commande->get_id(),
],
"livraison" => [
"transporteur" => Str::of($commande->get_shipping_method())->replace(" (Free)", ""),
"numero_suivi" => blank($commande->get_meta("tracking_number"))
? "UNKNOWN_TRACKING_NUMBER"
: $commande->get_meta("tracking_number"),
],
];
$contexte["commande"] = $email;
// Rendu
Timber::render(filenames: $modeles, data: $contexte);

28
web/app/themes/haiku-atelier-2024/woocommerce/emails/customer-invoice.php
View file

@ -1,12 +1,13 @@
<?php
/**
* Le modèle du reçu envoyé au client.
* Le modèle du reçu envoyé au client (« Order Details »).
*/
use Automattic\WooCommerce\Admin\Overrides\Order;
use Carbon\Carbon;
use Illuminate\Support\Number;
use Illuminate\Support\Str;
use Timber\Timber;
use Carbon\Carbon;
if (!defined("ABSPATH")) {
exit();
@ -14,15 +15,12 @@ if (!defined("ABSPATH")) {
// Initialise Timber
Timber::init();
// Sélectionne le répertoire contenant les modèles Twig
Timber::$dirname = ["views"];
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["email-base.twig"];
/** @var Order $commande */
/** @var Order $commande La Commande issue du contexte contenu dans la variable $order. */
$commande = $order;
/** @var Carbon $date */
$date = new Carbon($commande->get_date_created());
@ -36,7 +34,10 @@ $email = [
"date" => $date->toDateString(),
"id" => $commande->get_id(),
],
"livraison" => $commande->get_shipping_method(),
"livraison" => [
"methode" => $commande->get_shipping_method(),
"numero_suivi" => $commande->get_meta("tracking_number"),
],
"paiement" => [
"methode" => "",
],
@ -47,12 +48,14 @@ $email = [
$produit_article = $article->get_product();
return [
// Récupère l'Attribut d'un Produit variable ou renvoie un tableau vide
"attribut" => $produit->is_type("variable")
? collect($produit->get_attributes())
->mapWithKeys(function ($atr, $cle) use ($produit_article) {
$nom_attribut = Str::lower(wc_attribute_label($cle, $produit_article));
$valeur_attribut = $produit_article->get_attribute($cle);
return ["nom" => $nom_attribut, "valeur" => $valeur_attribut];
return [
"nom" => Str::lower(wc_attribute_label($cle, $produit_article)),
"valeur" => $produit_article->get_attribute($cle),
];
})
->toArray()
: [],
@ -76,11 +79,6 @@ $email = [
$email["adresses"]["livraison"]["country"] = WC()->countries->countries[$commande->get_shipping_country()];
$email["adresses"]["facturation"]["country"] = WC()->countries->countries[$commande->get_billing_country()];
// echo "<pre>";
// print_r($commande);
// echo "</pre>";
$contexte["commande"] = $email;
// Rendu
Timber::render(filenames: $modeles, data: $contexte);

62
web/app/themes/haiku-atelier-2024/woocommerce/emails/customer-processing-order.php
View file

@ -1,10 +1,13 @@
<?php
/**
* Customer processing order email
* Le modèle de l'email envoyé au client quand la Commande a été confirmée (« Processing Order »).
*/
use Timber\Timber;
use Automattic\WooCommerce\Admin\Overrides\Order;
use Carbon\Carbon;
use Illuminate\Support\Number;
use Illuminate\Support\Str;
use Timber\Timber;
if (!defined("ABSPATH")) {
exit();
@ -12,47 +15,66 @@ if (!defined("ABSPATH")) {
// Initialise Timber
Timber::init();
// Sélectionne le répertoire contenant les modèles Twig
Timber::$dirname = ["views"];
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["email-base.twig"];
/** @var WC_Order $commande */
$modeles = ["email-commande-recue.twig"];
/** @var Order $commande La Commande issue du contexte contenu dans la variable $order. */
$commande = $order;
/** @var Carbon $date */
$date = new Carbon($commande->get_date_created());
$email = [
"adresses" => [
"facturation" => [],
"livraison" => [],
"facturation" => $commande->get_address("billing"),
"livraison" => $commande->get_address("shipping"),
],
"commande" => [
"date" => $date->toDateString(),
"id" => $commande->get_id(),
],
"livraison" => [],
"produits" => collect($commande->get_items())->map(function (WC_Order_Item $produit) {
"paiement" => [
"methode" => "",
],
"produits" => collect($commande->get_items())->map(function (WC_Order_Item_Product $article) {
/** @var WC_Product_Simple|WC_Product_Variable $produit */
$produit = wc_get_product($article["product_id"]);
/** @var WC_Product_Simple|WC_Product_Variation $produit_article */
$produit_article = $article->get_product();
return [
// Récupère l'Attribut d'un Produit variable ou renvoie un tableau vide
"attribut" => $produit->is_type("variable")
? collect($produit->get_attributes())
->mapWithKeys(function ($atr, $cle) use ($produit_article) {
return [
"nom" => Str::lower(wc_attribute_label($cle, $produit_article)),
"valeur" => $produit_article->get_attribute($cle),
];
})
->toArray()
: [],
"lien" => $produit->get_permalink(),
"nom" => $produit->get_name(),
"prix_total" => $produit->get_total(),
"quantite" => $produit->get_quantity(),
"titre_variation" => "",
"nom" => $produit->get_title(),
"prix_total" => $article->get_total(),
"quantite" => $article->get_quantity(),
];
}),
"totaux" => [
"sous_total_livraison" => $commande->get_shipping_total(),
"sous_total_produits" => $commande->get_subtotal(),
"sous_total_reduction" => $commande->get_discount_total(),
"total" => $commande->get_total(),
"sous_total_livraison" => $commande->get_shipping_total() == "0" ? "Free" : $commande->get_shipping_total() . "€",
"sous_total_produits" => $commande->get_subtotal() . "€",
"sous_total_reduction" =>
$commande->get_discount_total == "0.00"
? "0"
: Number::format($commande->get_discount_total(), maxPrecision: 2) . "€",
"total" => Number::format($commande->get_total(), maxPrecision: 2) . "€",
],
];
// Transforme les codes de pays en noms de pays
$email["adresses"]["livraison"]["country"] = WC()->countries->countries[$commande->get_shipping_country()];
$email["adresses"]["facturation"]["country"] = WC()->countries->countries[$commande->get_billing_country()];
$contexte["commande"] = $email;
// Rendu
Timber::render(filenames: $modeles, data: $contexte);

4
web/app/themes/haiku-atelier-2024/woocommerce/emails/email-footer.php
View file

@ -1,8 +1,8 @@
<?php
/**
* Le modèle du reçu envoyé au client.
* NOOP.
*/
if (!defined("ABSPATH")) {
exit(); // Exit if accessed directly
exit();
} ?>

4
web/app/themes/haiku-atelier-2024/woocommerce/emails/email-header.php
View file

@ -1,8 +1,8 @@
<?php
/**
* Le modèle du reçu envoyé au client.
* NOOP.
*/
if (!defined("ABSPATH")) {
exit(); // Exit if accessed directly
exit();
} ?>

5
web/app/themes/haiku-atelier-2024/woocommerce/emails/email-styles.php
View file

@ -1,5 +1,8 @@
<?php
/**
* NOOP.
*/
if (!defined("ABSPATH")) {
exit(); // Exit if accessed directly
exit();
} ?>

643
web/app/themes/haiku-atelier-2024/woocommerce/emails/views/email-base.twig
View file

File diff suppressed because one or more lines are too long

299
web/app/themes/haiku-atelier-2024/woocommerce/emails/views/email-commande-envoyee.twig Normal file
View file

File diff suppressed because one or more lines are too long

8
web/app/themes/haiku-atelier-2024/woocommerce/emails/views/email-commande-recue.twig Normal file
View file

@ -0,0 +1,8 @@
{% extends "email-base.twig" %}
{% block texte_supplementaire %}
<p>
Your order has been received and will be dispatched as soon as possible. You will be receive a tracking number once
it has been sent.
</p>
{% endblock %}