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

2026-04-08

Browse source
This commit is contained in:
gcch 2026-04-08 10:46:43 +02:00
commit 00f87fedcd
52 changed files with 8262 additions and 1491 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,7 @@
{% 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>
@ -16,10 +13,7 @@
</p>
<p>
<a
class="lien-lien"
href="/shop"
>
<a class="lien-lien" href="/shop">
Go back to the Shop
</a>
</p>

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

@ -6,147 +6,103 @@
<main id="page-a-propos">
<div class="storytelling">
<div class="storytelling__conteneur">
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", 'A montage of many different pictures/drawings of jewelry and of someone working.', image_dimensions[0], image_dimensions[1], 'storytelling-montage')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/haikuabout", 'A montage of many different pictures/drawings of jewelry and of someone working.', image_dimensions[0], image_dimensions[1], 'storytelling-montage') }}
{# É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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/aboutlclick-black.svg"
alt="" height="56"
role="presentation" 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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the
everyday life.
Haïkus are short japanese poems written in three lines to capture the beauty of small details in the everyday life.
</p>
<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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry
through those small objects.
Haiku Atelier creates minimalist and subtil jewelry with an edgy twist, trying to distillate some poetry through those small objects.
</p>
<p>
@ -154,112 +110,73 @@
</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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku,
gleaning into the Japanese minimalist aesthetic.
After learning the art of jewelry making for two years in Paris, Manon Designere launched the brand Haiku, gleaning into the Japanese minimalist aesthetic.
</p>
<p>
Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her
vision of the world.
Now based in Brussels, she still makes everything by hand, pouring her soul into her work to share her vision of the world.
</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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>Here you can see some of the tools used at the studio.</p>
<p>
From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it
so unique.
From sketches to models, from soldering to polishing, the numerous steps behind each piece are what makes it so unique.
</p>
<p>
A touch of animism to value handcrafted objects, restrain mass production and lead toward slow life.
</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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled
sterling silver.
We pay a lot of attention choosing the materials we work on: all of the pieces are made in 80% recycled sterling silver.
</p>
<p>
We also choose to propose many designs in a mix of sterling silver and silver gilded parts to avoid relying
too much on the gold plating process, which can be pollutant.
We also choose to propose many designs in a mix of sterling silver and silver gilded parts to avoid relying too much on the gold plating process, which can be pollutant.
</p>
<p>
The packagings are also carefully selected, produced nearby, made in eco-friendly coton or paper. Our gift
bags are even handmade in dead-stock fabrics.
The packagings are also carefully selected, produced nearby, made in eco-friendly coton or paper. Our gift bags are even handmade in dead-stock fabrics.
</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"
role="presentation"
src="{{ site.theme.link }}/assets/img/icons/cross.svg"
alt="An icon in form of a cross" height="20"
role="presentation" src="{{ site.theme.link }}/assets/img/icons/cross.svg"
width="20"
/>
</button>
<p>
We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of
sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn...
We hope that those small objects will move you, as we are moved by the beauty hidden behind a ray of sunshine, a leaf falling from a branch, the smell of an old book, the song of birds before dawn...
</p>
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
</div>

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

@ -2,122 +2,75 @@
{% import 'macros/images.twig' as images %}
{% block contenu %}
<main
id="page-accueil"
aria-label="Scroll down to navigate through the pictures"
>
<main id="page-accueil" aria-label="Scroll down to navigate through the pictures">
<div class="storytelling">
<div
aria-hidden="true"
class="storytelling__conteneur"
aria-hidden="true" class="storytelling__conteneur"
inert
>
{# Animation #}
<div class="storytelling__animation no-js">
<svg
alt=""
class="animation-conteneur"
height="90px"
preserveAspectRatio="xMidYMin"
viewBox="0 0 1200 90"
width="100%"
alt="" class="animation-conteneur"
height="90px" preserveAspectRatio="xMidYMin"
viewBox="0 0 1200 90" width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<svg
alt="Scroll down"
class="animation-texte"
height="100%"
width="100%"
alt="Scroll down" class="animation-texte"
height="100%" width="100%"
y="50%"
>
<path
d="m0 0c600-90 600 90 1200 0"
fill="transparent"
id="curve-1"
transform="translate3d(0,0,0)"
d="m0 0c600-90 600 90 1200 0" fill="transparent"
id="curve-1" transform="translate3d(0,0,0)"
/>
{# TODO: Créer une fonction pour générer les images #}
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-1"
xlink:href="#curve-1"
>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-1" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset"
dur="5s"
fill="remove"
from="-50%"
to="0%"
repeatCount="indefinite"
attributeName="startOffset" dur="5s"
fill="remove" from="-50%"
to="0%" repeatCount="indefinite"
xlink:href="#text-path-1"
/>
</text>
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-2"
xlink:href="#curve-1"
>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-2" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset"
dur="5s"
fill="remove"
from="0%"
to="50%"
repeatCount="indefinite"
attributeName="startOffset" dur="5s"
fill="remove" from="0%"
to="50%" repeatCount="indefinite"
xlink:href="#text-path-2"
/>
</text>
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-3"
xlink:href="#curve-1"
>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-3" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset"
dur="5s"
fill="remove"
from="50%"
to="100%"
repeatCount="indefinite"
attributeName="startOffset" dur="5s"
fill="remove" from="50%"
to="100%" repeatCount="indefinite"
xlink:href="#text-path-3"
/>
</text>
<text
dominant-baseline="middle"
transform="translate3d(0,0,0)"
>
<textPath
id="text-path-4"
xlink:href="#curve-1"
>
<text dominant-baseline="middle" transform="translate3d(0,0,0)">
<textPath id="text-path-4" xlink:href="#curve-1">
Scroll down
</textPath>
<animate
attributeName="startOffset"
dur="5s"
fill="remove"
from="100%"
to="150%"
repeatCount="indefinite"
attributeName="startOffset" dur="5s"
fill="remove" from="100%"
to="150%" repeatCount="indefinite"
xlink:href="#text-path-4"
/>
</text>
@ -127,145 +80,94 @@
{# Images #}
<div
class="storytelling__image"
data-index="1"
class="storytelling__image" data-index="1"
tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", '', 903, 1080, 'image-scroll1') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="2"
tabindex="-1"
class="storytelling__image" data-caché
data-index="2" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", '', 903, 1080, 'image-scroll2') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="3"
tabindex="-1"
class="storytelling__image" data-caché
data-index="3" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", '', 903, 1080, 'image-scroll3') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="4"
tabindex="-1"
class="storytelling__image" data-caché
data-index="4" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", '', 903, 1080, 'image-scroll4') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="5"
tabindex="-1"
class="storytelling__image" data-caché
data-index="5" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", '', 903, 1080, 'image-scroll5') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="6"
tabindex="-1"
class="storytelling__image" data-caché
data-index="6" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", '', 903, 1080, 'image-scroll6') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="7"
tabindex="-1"
class="storytelling__image" data-caché
data-index="7" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", '', 903, 1080, 'image-scroll7') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="8"
tabindex="-1"
class="storytelling__image" data-caché
data-index="8" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", '', 903, 1080, 'image-scroll8') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="9"
tabindex="-1"
class="storytelling__image" data-caché
data-index="9" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", '', 903, 1080, 'image-scroll9') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="10"
tabindex="-1"
class="storytelling__image" data-caché
data-index="10" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", '', 903, 1080, 'image-scroll10') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="11"
tabindex="-1"
class="storytelling__image" data-caché
data-index="11" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", '', 903, 1080, 'image-scroll11') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="12"
tabindex="-1"
class="storytelling__image" data-caché
data-index="12" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", '', 903, 1080, 'image-scroll12') }}
</div>
<div
class="storytelling__image"
data-caché
data-index="13"
tabindex="-1"
class="storytelling__image" data-caché
data-index="13" tabindex="-1"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13')
}}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", '', 903, 1080, 'image-scroll13') }}
</div>
</div>
</div>

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

@ -8,10 +8,7 @@
{% 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') }}
@ -21,21 +18,15 @@
{# Bouton Revenir en haut #}
<button
aria-hidden="true"
aria-labelled-by="bouton-retour-haut-label"
class="bouton-retour-haut"
id="bouton-retour-haut"
aria-hidden="true" aria-labelled-by="bouton-retour-haut-label"
class="bouton-retour-haut" id="bouton-retour-haut"
type="button"
>
<img
alt="An arrow pointing to the top"
aria-hidden="true"
alt="An arrow pointing to the top" aria-hidden="true"
src="{{ site.theme.link }}/assets/img/icons/arrow.svg"
/>
<span
class="visuellement-cache"
id="bouton-retour-haut-label"
>Back to top</span>
<span class="visuellement-cache" id="bouton-retour-haut-label">Back to top</span>
</button>
{# Pied de page #}

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

@ -24,10 +24,8 @@ const _etats = {
<div class="actions">
<button
{{ products|length == 12 ? '' : 'hidden' }}
class="bouton-case-pleine bouton-blanc-sur-noir"
id="bouton-plus-de-produits"
type="button"
{{ products|length == 12 ? '' : 'hidden' }} class="bouton-case-pleine bouton-blanc-sur-noir"
id="bouton-plus-de-produits" type="button"
>
Show more
</button>

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

@ -1,10 +1,7 @@
{% 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>
@ -17,22 +14,15 @@
</header>
<p>
Each piece, made in sterling silver and 18k gold plated silver, is made to order. As soon as we receive your
order, depending on its complexity, production in our workshop will take between 2 to 7 working days. It
will then be send to you, at the latest, within 14 days of your order.
Each piece, made in sterling silver and 18k gold plated silver, is made to order. As soon as we receive your order, depending on its complexity, production in our workshop will take between 2 to 7 working days. It will then be send to you, at the latest, within 14 days of your order.
</p>
<p>
The products are delivered by Mondial Relay or UPS. Products are delivered in France, Europe, and any
country included by those two delivery companies.</p>
The products are delivered by Mondial Relay or UPS. Products are delivered in France, Europe, and any country included by those two delivery companies.</p>
<p>
The details of delivery costs and times are specified in during the payment process. The delivery times are
mentioned for information only. When the order is sent, the customers will receive an e-mail from the
carrier allowing them to track their package.
The details of delivery costs and times are specified in during the payment process. The delivery times are mentioned for information only. When the order is sent, the customers will receive an e-mail from the carrier allowing them to track their package.
</p>
<p>
Haiku Atelier cannot be held responsible for delays in delivery due to errors or disruptions attributable to
carriers (including in the event of a total or partial strike in particular of the postal services and means
of transport and/or communications).
Haiku Atelier cannot be held responsible for delays in delivery due to errors or disruptions attributable to carriers (including in the event of a total or partial strike in particular of the postal services and means of transport and/or communications).
</p>
</section>
@ -42,21 +32,14 @@
</header>
<p>
If for any reason you are not satisfied with your purchase, we will refund or exchange it within 14 days of
receipt. If more than 30 days have past since your purchase, unfortunately, we cannot offer a refund or an
exchange.
If for any reason you are not satisfied with your purchase, we will refund or exchange it within 14 days of receipt. If more than 30 days have past since your purchase, unfortunately, we cannot offer a refund or an exchange.
</p>
<p>
To be eligible for a return or an exchange, your item must be in the same condition as received, unworn and
unused, in its original packaging. You will also need the receipt or proof of purchase.
To be eligible for a return or an exchange, your item must be in the same condition as received, unworn and unused, in its original packaging. You will also need the receipt or proof of purchase.
</p>
<p>
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.
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>
<p>
@ -64,15 +47,11 @@
</p>
<p>
The site does not provide any return labels. Return costs are the responsibility of the customer. Taxes or
duties on international deliveries are non-refundable. Haiku Atelier undertakes to reimburse the price of
the product and the initial shipping costs, upon receipt of the product.
The site does not provide any return labels. Return costs are the responsibility of the customer. Taxes or duties on international deliveries are non-refundable. Haiku Atelier undertakes to reimburse the price of the product and the initial shipping costs, upon receipt of the product.
</p>
<p>
Once the returned product has been quality checked and approved, the refund will be made via the original
method of payment used for the returned order and a confirmation email will be sent to the customer. Haiku
Atelier is not responsible for items purchased from other retailers.
Once the returned product has been quality checked and approved, the refund will be made via the original method of payment used for the returned order and a confirmation email will be sent to the customer. Haiku Atelier is not responsible for items purchased from other retailers.
</p>
</section>
@ -82,17 +61,11 @@
</header>
<p>
Please inspect your order upon receipt and contact us immediately if the item is defective, damaged, or if
you received the wrong item. Make written observations at the latest within three (3) days following the
delivery, to Haiku Atelier, by sending a photograph of the product. Unfortunately we cannot accept returns
on sale items and gift cards.
Please inspect your order upon receipt and contact us immediately if the item is defective, damaged, or if you received the wrong item. Make written observations at the latest within three (3) days following the delivery, to Haiku Atelier, by sending a photograph of the product. Unfortunately we cannot accept returns on sale items and gift cards.
</p>
<p>
Haiku Atelier jewelry are guarantee for a year. If your piece unexpectedly broke or loses its gold color
within a year, you can send it back to us and we will repair it for free, you will just have to organize
your own shipping label (our workshop is located in Brussels).<br /> We still provide after sale services
past the guarantee year, the price of those services will be determined depending on each case.
Haiku Atelier jewelry are guarantee for a year. If your piece unexpectedly broke or loses its gold color within a year, you can send it back to us and we will repair it for free, you will just have to organize your own shipping label (our workshop is located in Brussels).<br /> We still provide after sale services past the guarantee year, the price of those services will be determined depending on each case.
</p>
</section>
@ -102,37 +75,23 @@
</header>
<p>
This website is operated by Manon Designere - créatrice de bijoux, whose registered office is located at 45
rue de Franceville, 93220 Gagny, France. These general terms and conditions of use and sale (the "GTCU")
govern the use of the site by any user wishing to access the site and make a purchase on the site (the
"User" or the "Customer").
This website is operated by Manon Designere - créatrice de bijoux, whose registered office is located at 45 rue de Franceville, 93220 Gagny, France. These general terms and conditions of use and sale (the "GTCU") govern the use of the site by any user wishing to access the site and make a purchase on the site (the "User" or the "Customer").
</p>
<p>
By accessing the site, the user acknowledges having read and fully and unreservedly accepts the GTCU. Haiku
Atelier reserves the right to modify the GTCU at any time. The change will take effect immediately upon
posting the GTCU.
By accessing the site, the user acknowledges having read and fully and unreservedly accepts the GTCU. Haiku Atelier reserves the right to modify the GTCU at any time. The change will take effect immediately upon posting the GTCU.
</p>
<p>
The products governed by these GTCUs are those which appear on the site (the “Products”). The products are
offered for sale within the limits of available stocks. The site does not guarantee that the products will
be in stock. The site reserves the right to remove a product at any time for any reason.
The products governed by these GTCUs are those which appear on the site (the “Products”). The products are offered for sale within the limits of available stocks. The site does not guarantee that the products will be in stock. The site reserves the right to remove a product at any time for any reason.
</p>
<p>
The colors, features, specifications, and details of the products are described and presented with the
greatest possible accuracy. However, the site does not warrant that the colors, features, specifications,
and details of the products will be accurate, complete, reliable, current, or free from other errors, and
users' digital display may not accurately reflect the actual colors and details of the products.
The colors, features, specifications, and details of the products are described and presented with the greatest possible accuracy. However, the site does not warrant that the colors, features, specifications, and details of the products will be accurate, complete, reliable, current, or free from other errors, and users' digital display may not accurately reflect the actual colors and details of the products.
</p>
<p>
The prices of the products are indicated in Euros all taxes included, including the applicable French VAT
(20%). The prices of the products are exclusive of delivery costs (shipping, packaging, and making up the
package according to the applicable amounts). The amount of the delivery costs will be specified before the
validation of the order. The prices of the products may be modified at any time. However, a price cannot be
modified once the purchase order has been validated.
The prices of the products are indicated in Euros all taxes included, including the applicable French VAT (20%). The prices of the products are exclusive of delivery costs (shipping, packaging, and making up the package according to the applicable amounts). The amount of the delivery costs will be specified before the validation of the order. The prices of the products may be modified at any time. However, a price cannot be modified once the purchase order has been validated.
</p>
<p>
@ -146,24 +105,15 @@
</ul>
<p>
Haiku Atelier will not be held responsible for the failure to deliver a package due to an incorrect or
incomplete delivery address. Once the undelivered products have been collected by Haiku Atelier, a new
delivery will be possible and incur a reshipping fee invoiced to the customer.
Haiku Atelier will not be held responsible for the failure to deliver a package due to an incorrect or incomplete delivery address. Once the undelivered products have been collected by Haiku Atelier, a new delivery will be possible and incur a reshipping fee invoiced to the customer.
</p>
<p>
International deliveries are subject to import charges, duties, taxes, or fees of the destination country.
These funds are set by the government of that country, in accordance with import/export regulations, and
billed by the courier. Haiku Atelier is not responsible for these duties, taxes, or other charges.<br /> If
a package is returned because a customer has refused to pay any import taxes or customs duties owed, the
package refund will not include shipping and return costs.
International deliveries are subject to import charges, duties, taxes, or fees of the destination country. These funds are set by the government of that country, in accordance with import/export regulations, and billed by the courier. Haiku Atelier is not responsible for these duties, taxes, or other charges.<br /> If a package is returned because a customer has refused to pay any import taxes or customs duties owed, the package refund will not include shipping and return costs.
</p>
<p>
Haiku Atelier is the exclusive owner of all intellectual property rights or holds the rights of use relating
to both the structure and the content of the site. The GTCU are subject to French law, regardless of the
country of residence of the user and the place of placing the purchase order.<br />In the absence of an
amicable agreement, any dispute will be submitted to the competent French courts.
Haiku Atelier is the exclusive owner of all intellectual property rights or holds the rights of use relating to both the structure and the content of the site. The GTCU are subject to French law, regardless of the country of residence of the user and the place of placing the purchase order.<br />In the absence of an amicable agreement, any dispute will be submitted to the competent French courts.
</p>
</section>
@ -174,10 +124,7 @@
<p>
<strong>Contact:</strong><br />
For inquiries and customer service, please refer to <a
class="lien-lien"
href="/contact"
>our Contact page</a>.
For inquiries and customer service, please refer to <a class="lien-lien" href="/contact">our Contact page</a>.
</p>
<p>

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

@ -1,10 +1,7 @@
{% 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>
@ -12,16 +9,9 @@
<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"
>
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">
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>

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

@ -1,22 +1,15 @@
{% 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>
</header>
<div class="contenu__textuel">
<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"
>contact us</a>!</p>
<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">contact us</a>!</p>
</div>
</div>
</main>

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

@ -1,25 +1,13 @@
{% 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 }}.png"
type="image/png"
/>
<source srcset="{{ rel_url }}.jxl" type="image/jxl" />
<source srcset="{{ rel_url }}.avif" type="image/avif" />
<source srcset="{{ rel_url }}.png" type="image/png" />
<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>

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

@ -12,10 +12,7 @@ const _etats = {
{% 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 #}
@ -23,10 +20,7 @@ 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>

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

@ -1,54 +1,39 @@
<header id="en-tete">
<div class="logo">
<img
alt="Haiku Atelier's Logo"
decoding="async"
height="77"
loading="eager"
src="{{ site.theme.link }}/assets/img/logos/logo-v2-text.svg"
width="307"
alt="Haiku Atelier's Logo" decoding="async"
height="77" loading="eager"
src="{{ site.theme.link }}/assets/img/logos/logo-v2-text.svg" width="307"
/>
</div>
{# TODO: Utiliser un Menu WordPress ? #}
<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' }}"
>
<li class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.home.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.home.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.home.lien }}"
>
{{ pages.home.nom }}
</a>
</span>
</li>
<li
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ est_page_boutique ? 'aria-current=page' : '' }}
class="lien-menu"
{{ est_page_boutique ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.shop.lien }}"
>
{{ pages.shop.nom }}
</a>
</span>
</li>
<li
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.about.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.about.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
@ -56,13 +41,10 @@
</span>
</li>
<li
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.contact.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.contact.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.contact.lien }}"
>
{{ pages.contact.nom }}
@ -76,10 +58,8 @@
{# Bouton « Panier » avec l'indicateur de quantité de Produits #}
<div 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>
@ -87,45 +67,30 @@
{# Bouton (dés)activant le menu mobile #}
<button
aria-label="Button to toggle the mobile navigation menu for small screen sizes"
class="bouton-menu-mobile"
id="bouton-menu-mobile"
type="button"
aria-label="Button to toggle the mobile navigation menu for small screen sizes" class="bouton-menu-mobile"
id="bouton-menu-mobile" type="button"
>
<img
alt="An icon representing an « Hamburger » menu"
decoding="async"
loading="eager"
src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
alt="An icon representing an « Hamburger » menu" decoding="async"
loading="eager" src="{{ site.theme.link }}/assets/img/logos/logo-lines.svg"
/>
</button>
</div>
{# 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' }}"
>
<li class="{{ page_courante == pages.home.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.home.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.home.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.home.lien }}"
>
{{ pages.home.nom }}
@ -133,13 +98,10 @@
</span>
</li>
<li
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ est_page_boutique ? 'aria-current=page' : '' }}
class="lien-menu"
{{ est_page_boutique ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.shop.lien }}"
>
{{ pages.shop.nom }}
@ -147,13 +109,10 @@
</span>
</li>
<li
class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ page_courante == pages.about.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.about.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.about.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
@ -161,13 +120,10 @@
</span>
</li>
<li
class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}"
>
<li class="{{ page_courante == pages.contact.lien ? 'menu-navigation__entree menu-navigation__entree--courante' : 'menu-navigation__entree' }}">
<span>
<a
{{ page_courante == pages.contact.lien ? 'aria-current=page' : '' }}
class="lien-menu"
{{ page_courante == pages.contact.lien ? 'aria-current=page' : '' }} class="lien-menu"
href="{{ pages.contact.lien }}"
>
{{ pages.contact.nom }}

5
web/app/themes/haiku-atelier-2024/views/parts/en-tetes-backend.twig
View file

@ -1,6 +1,3 @@
<script
id="injection-v2"
type="application/json"
>
<script id="injection-v2" type="application/json">
{ "authString": "{{ auth_string }}", "nonce": "{{ nonce_wc }}" }
</script>

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

@ -1,67 +1,43 @@
<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="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="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 %}

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

@ -1,48 +1,30 @@
<nav
aria-label="Navigation for the dedicated pages of the main Categories of Products"
class="menu-categories-produits"
data-entrees-presentes-fin
id="menu-categories-produits"
aria-label="Navigation for the dedicated pages of the main Categories of Products" class="menu-categories-produits"
data-entrees-presentes-fin id="menu-categories-produits"
>
<svg
alt=""
height="15"
id="fleche-defilement-categories-produits-gauche"
role="presentation"
transform="scale(-1 1)"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
alt="" height="15"
id="fleche-defilement-categories-produits-gauche" role="presentation"
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"
fill="#fff"
/>
<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" fill="#fff" />
</svg>
<ul>
<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
alt=""
height="15"
id="fleche-defilement-categories-produits-droite"
role="presentation"
viewBox="0 0 15 15"
width="15"
alt="" height="15"
id="fleche-defilement-categories-produits-droite" role="presentation"
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"
fill="#fff"
/>
<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" fill="#fff" />
</svg>
</nav>

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

@ -1,45 +1,33 @@
<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>
@ -52,12 +40,9 @@
<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>
@ -65,12 +50,9 @@
<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>
@ -78,36 +60,27 @@
<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>
@ -115,27 +88,20 @@
<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 %}
@ -145,12 +111,9 @@
<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>
@ -158,62 +121,45 @@
<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>
@ -221,12 +167,9 @@
<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>
@ -234,26 +177,19 @@
<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>
@ -261,15 +197,11 @@
<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 %}
@ -279,39 +211,27 @@
<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 #}
@ -327,14 +247,10 @@
</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>
@ -343,10 +259,7 @@
</form>
<footer class="panneau__pied-de-page">
<button
form="formulaire-commande"
type="submit"
>
<button form="formulaire-commande" type="submit">
Calculate shipping
</button>
</footer>

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

@ -1,7 +1,4 @@
<section
class="panneau"
id="panneau-panier"
>
<section class="panneau" id="panneau-panier">
<header class="panneau__en-tete">
<h2>Your cart</h2>
</header>
@ -9,10 +6,8 @@
<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">
@ -39,29 +34,20 @@
<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
aria-label="Quantity selector"
min="1"
type="number"
value="{{ produit.quantite }}"
aria-label="Quantity selector" 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>
@ -72,40 +58,27 @@
<div class="panneau__instructions-code-promo">
<textarea
aria-label="Special instructions for your order"
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"
spellcheck="true"
aria-label="Special instructions for your order" 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" 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' }}
aria-label="DIscount code or gift card"
id="champ-code-promo"
maxlength="20"
minlength="3"
name="code-promo"
placeholder="Discount code or gift card"
type="text"
{{ code_promo ? 'disabled' }} aria-label="DIscount code or gift card"
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>
@ -115,27 +88,20 @@
</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"
{{ not 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 not adresse_renseignee %}
<p>
@ -149,8 +115,7 @@
</div>
<fieldset
class="panneau__sous-totaux__choix-methode-livraison"
{{ not adresse_renseignee ? 'hidden' }}
class="panneau__sous-totaux__choix-methode-livraison" {{ not adresse_renseignee ? 'hidden' }}
id="choix-methode-livraison"
>
<label>Select your shipping method</label>
@ -158,16 +123,11 @@
{% for methode_livraison in methodes_livraison %}
<div data-methode-initiale>
<input
{{ methode_livraison.selectionnee ? 'checked' }}
data-prix="{{ methode_livraison.prix }}"
id="methode-livraison-{{ methode_livraison.id }}"
name="choix-methode-livraison"
type="radio"
value="{{ methode_livraison.id }}"
{{ methode_livraison.selectionnee ? 'checked' }} data-prix="{{ methode_livraison.prix }}"
id="methode-livraison-{{ methode_livraison.id }}" name="choix-methode-livraison"
type="radio" value="{{ methode_livraison.id }}"
/>
<label for="methode-livraison-{{ methode_livraison.id }}">{{ methode_livraison.titre }} ({{
methode_livraison.prix
}}€)</label>
<label for="methode-livraison-{{ methode_livraison.id }}">{{ methode_livraison.titre }} ({{ methode_livraison.prix }}€)</label>
</div>
{% endfor %}
</fieldset>

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

@ -1,12 +1,8 @@
{# Barre flottante avec le nom du Produit, le sélecteur de variation et de quantité pour le Panier. #}
<aside
aria-label="Product's name, price and variation selection"
class="resume-produit"
>
<aside aria-label="Product's name, price and variation selection" class="resume-produit">
<form
class="selecteur-produit"
id="variation-choice"
class="selecteur-produit" id="variation-choice"
name="variation-choice"
>
<h3 class="selecteur-produit__nom">{{ product.name }}</h3>
@ -25,25 +21,18 @@
</form>
</aside>
<aside
aria-label="Product's details, shipping conditions and care tips"
class="details-produit"
>
<aside aria-label="Product's details, shipping conditions and care tips" class="details-produit">
<div class="details-produit__textes">
<section class="section-textuelle">
<h3 class="section-textuelle__titre">
<button
aria-expanded="true"
aria-controls="section-details-produit"
aria-expanded="true" aria-controls="section-details-produit"
type="button"
>
Details
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-details-produit"
>
<div class="section-textuelle__contenu" id="section-details-produit">
{{ product.details }}
</div>
</section>
@ -51,17 +40,13 @@
<section class="section-textuelle">
<h3 class="section-textuelle__titre">
<button
aria-expanded="false"
aria-controls="section-conditions-livraison"
aria-expanded="false" aria-controls="section-conditions-livraison"
type="button"
>
Shipping
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-conditions-livraison"
>
<div class="section-textuelle__contenu" id="section-conditions-livraison">
{{ descriptions_produits.texte_conditions_livraison }}
</div>
</section>
@ -69,17 +54,13 @@
<section class="section-textuelle">
<h3 class="section-textuelle__titre">
<button
aria-expanded="false"
aria-controls="section-entretien-produit"
aria-expanded="false" aria-controls="section-entretien-produit"
type="button"
>
Care
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-entretien-produit"
>
<div class="section-textuelle__contenu" id="section-entretien-produit">
{{ descriptions_produits.texte_entretien_produit }}
</div>
</section>
@ -89,21 +70,16 @@
{# Désactive le bouton d'ajout au panier en cas d'absence de stock. #}
{% if product.stock > 0 %}
<button
class="bouton-case-pleine"
disabled
data-in-stock
for="variation-choice"
id="bouton-ajout-panier"
type="submit"
class="bouton-case-pleine" disabled
data-in-stock for="variation-choice"
id="bouton-ajout-panier" type="submit"
>
Add to cart
</button>
{% else %}
<button
class="bouton-case-pleine"
disabled
for="variation-choice"
id="bouton-ajout-panier"
class="bouton-case-pleine" disabled
for="variation-choice" id="bouton-ajout-panier"
type="button"
>
Out of stock

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

@ -1,13 +1,7 @@
<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 product.left_column_photos %}
<figure
data-index="0"
role="figure"
>
<figure data-index="0" role="figure">
<picture>
{{ photo }}
</picture>
@ -15,15 +9,9 @@
{% 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 product.right_column_photos %}
<figure
data-index="{{ loop.index }}"
role="figure"
>
<figure data-index="{{ loop.index }}" role="figure">
<picture>
{{ photo }}
</picture>

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

@ -1,7 +1,4 @@
<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') }}

14
web/app/themes/haiku-atelier-2024/views/parts/pages/produit/selecteur-attributs-produit.twig
View file

@ -1,20 +1,14 @@
<div class="selecteur-produit__attribut-variation__selecteurs">
<label
for="{{ attribut.slug }}"
id="label-{{ attribut.slug }}"
>
<label for="{{ attribut.slug }}" id="label-{{ attribut.slug }}">
{{ attribut.name }}:
</label>
<select
aria-labelledby="label-{{ atribut.slug }}"
id="{{ attribut.slug }}"
name="{{ attribut.slug }}"
required
aria-labelledby="label-{{ atribut.slug }}" id="{{ attribut.slug }}"
name="{{ attribut.slug }}" required
>
<option
disabled
selected
disabled selected
value=""
>
--

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

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

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

@ -1,11 +1,7 @@
<footer
aria-label="Footer offering navigations links"
id="pied-de-page"
>
<footer aria-label="Footer offering navigations links" id="pied-de-page">
<div class="zone-menu-navigation-secondaire">
<nav
aria-label="Navigation for special pages"
class="menu-navigation"
aria-label="Navigation for special pages" class="menu-navigation"
id="menu-navigation-secondaire"
>
<ul>
@ -18,18 +14,14 @@
<div class="zone-liens-reseaux-sociaux">
<nav
aria-label="Navigation for Haiku Atelier's social links"
class="menu-navigation"
aria-label="Navigation for Haiku Atelier's social links" 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>

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

@ -17,10 +17,7 @@
</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>