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

init

Browse source
This commit is contained in:
gcch 2025-06-19 16:07:29 +02:00
commit de73fc619a
3560 changed files with 747274 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,29 @@
{% extends "base.twig" %}
{% block contenu %}
<main
class="page-modele-simple"
id="page-404"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Sorry!</h2>
</header>
<div class="contenu__textuel">
<p>
The page you asked for does not exist. Please verify the address and try again.
</p>
<p>
<a
class="lien-lien"
href="/shop"
>
Go back to the Shop
</a>
</p>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,257 @@
{% extends "base.twig" %}
{% import "macros/images.twig" as images %}
{% block contenu %}
<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", "", dimensions_image[0], dimensions_image[1], "")
}}
{# Épingles #}
<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"
>
</button>
<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"
>
</button>
<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"
>
</button>
<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"
>
</button>
<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"
>
</button>
<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"
>
</button>
{# Boîtes de texte #}
<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"
>
</button>
<p>
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"
>
<img
alt="An icon in form of a cross"
height="20"
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.
</p>
<p>
Handcrafted with care in sustainable materials, each pieces has its uniqueness and is made to last.
</p>
</div>
<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"
>
</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.
</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.
</p>
</div>
<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"
>
</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.
</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"
>
<img
alt="An icon in form of a cross"
height="20"
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.
</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.
</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.
</p>
</div>
<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"
>
</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...
</p>
<p>Haiku jewelry are like a bit of poetry to wear everywhere.</p>
</div>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,160 @@
{% extends "base.twig" %}
{% import "macros/images.twig" as images %}
{% block contenu %}
<main id="page-accueil">
<div class="storytelling">
<div class="storytelling__conteneur">
<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"
>
{{
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"
>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", "", 903, 1080, "image-scroll2")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
<div
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")
}}
</div>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
{# <head> #}
{% block conteneur_html_head %}
{% include "parts/html-head.twig" %}
{% block head %}
{% endblock head %}
{% endblock conteneur_html_head %}
<body
class="{{ body_class }}"
data-langue="{{ langue_courante }}"
>
{# En-tête #}
{% include "parts/en-tete.twig" %}
{# Contenu #}
{% block contenu %}
{% endblock contenu %}
{# Bouton Revenir en haut #}
<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"
aria-hidden
>
<span class="visuellement-cache">Back to top</span>
</button>
{# Pied de page #}
{% block footer %}
{% include "parts/pied-de-page.twig" %}
{{ function("wp_footer") }}
{% endblock footer %}
</body>
</html>

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

@ -0,0 +1,33 @@
{% extends "base.twig" %}
{% block head %}
<script>
// Injection d'états pour les Scripts de la page.
const _etats = {
nonce: "{{ nonce_wc }}",
authString: "{{ auth_string }}",
};
</script>
{% endblock head %}
{% block contenu %}
{# Menu avec les catégories de produits #}
{% include "parts/menu-categories-produits.twig" %}
{# {% include "parts/bandeau.twig" %} #}
<main id="page-boutique">
{% include "parts/pages/shop/grille-produits.twig" %}
<div class="actions">
<button
{{produits|length == 12 ? "" : "hidden"}}
class="bouton-case-pleine bouton-blanc-sur-noir"
id="bouton-plus-de-produits"
type="button"
>
Show more products
</button>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,192 @@
{% extends "base.twig" %}
{% block contenu %}
<main
class="page-modele-simple"
id="page-cgv"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Terms & Conditions</h2>
</header>
<div class="contenu__textuel">
<section class="contenu__textuel__section">
<header class="contenu__textuel__section__en-tete">
<h3>Production & Delivery Time</h3>
</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.
</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>
<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.
</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).
</p>
</section>
<section class="contenu__textuel__section">
<header class="contenu__textuel__section__en-tete">
<h3>Returns & Exchange</h3>
</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.
</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.
</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.
</p>
<p>
Products returned without prior notification and original packaging will not be accepted.
</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.
</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.
</p>
</section>
<section class="contenu__textuel__section">
<header class="contenu__textuel__section__en-tete">
<h3>Damages & Issues</h3>
</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.
</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.
</p>
</section>
<section class="contenu__textuel__section">
<header class="contenu__textuel__section__en-tete">
<h3>Terms Of Service</h3>
</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").
</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.
</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.
</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.
</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.
</p>
<p>
The site uses the 3D Secure payment system to prevent fraud.<br>
Customers can pay for their purchase order:
</p>
<ul>
<li>by credit card (via Stripe): Visa, Mastercard, etc.</li>
{# <li>with a PayPal account.</li> #}
</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.
</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.
</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.
</p>
</section>
<section class="contenu__textuel__section">
<header class="contenu__textuel__section__en-tete">
<h3>Contact Information</h3>
</header>
<p>
<strong>Contact:</strong><br>
For inquiries and customer service, please refer to <a
class="lien-lien"
href="/contact"
>our Contact page</a>.
</p>
<p>
<strong>Credits:</strong><br>
Webdesign by Manon Designere.<br>
Development by Gauthier Colin--Haag.
</p>
</section>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,33 @@
{% extends "base.twig" %}
{% block contenu %}
<main
class="page-modele-simple"
id="page-contact"
>
<div class="contenu">
<header class="contenu__en-tete">
<h2>Say hi!</h2>
</header>
<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"
>
haikuatelier@gmail.com
</a> or on Instagram at <a
class="lien-lien"
href="https://www.instagram.com/haiku.atelier"
>
haiku.atelier
</a>.
</p>
<p>We will try our best to quickly respond to your demand.</p>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,23 @@
{% extends "base.twig" %}
{% block contenu %}
<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>
</div>
</div>
</main>
{% endblock contenu %}

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

@ -0,0 +1,26 @@
{% 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"
>
<img
alt="{{ alt }}"
decoding="sync"
height="{{ height }}"
loading="eager"
src="{{ rel_url }}.jpg"
width="{{ width }}"
onload="this.style.opacity=1"
>
</picture>
{% endmacro %}

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

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

6
web/app/themes/haiku-atelier-2024/views/parts/bandeau.twig Executable file
View file

@ -0,0 +1,6 @@
<aside class="bandeau">
<div class="bandeau__conteneur"> </div>
<div class="bandeau__conteneur"> </div>
<div class="bandeau__conteneur"> </div>
<div class="bandeau__conteneur"> </div>
</aside>

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

@ -0,0 +1,163 @@
<header id="en-tete">
{# Bouton (dés)activant le menu mobile #}
<section class="logo">
<button
id="bouton-menu-mobile"
type="button"
>
<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"
>
</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"
>
<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 }}"
>
{{ pages.home.nom }}
</a>
</span>
</li>
<li
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a
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" }}"
>
<span>
<a
class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
</a>
</span>
</li>
<li
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 }}"
>
{{ pages.contact.nom }}
</a>
</span>
</li>
</ul>
</nav>
{# 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"
>
cart ({{ quantite_articles }})
</a>
</section>
{# Menu mobile #}
<div
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__conteneur">
<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 }}"
>
{{ pages.home.nom }}
</a>
</span>
</li>
<li
class="{{ est_page_boutique ? 'menu-navigation__entree menu-navigation__entree--courante' : "menu-navigation__entree" }}"
>
<span>
<a
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" }}"
>
<span>
<a
class="lien-menu"
href="{{ pages.about.lien }}"
>
{{ pages.about.nom }}
</a>
</span>
</li>
<li
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 }}"
>
{{ pages.contact.nom }}
</a>
</span>
</li>
</ul>
</nav>
</div>
</div>
</header>

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

@ -0,0 +1,70 @@
<head>
<meta charset="{{ site.charset }}">
<meta
name="description"
content="{{ site.description }}"
>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
>
{# Pinterest #}
<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"
sizes="48x48"
>
<link
rel="icon"
href="{{ site.theme.link }}/assets/img/favicon.svg"
type="image/svg+xml"
>
<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"
>
<link
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"
type="font/woff2"
>
{# Plausible #}
{% if environnement == "production" %}
<script
data-domain="haikuatelier.com"
defer
src="https://greyhound.haikuatelier.com/js/script.js"
></script>
{% endif %}
{{ function("wp_head") }}
</head>

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

@ -0,0 +1,44 @@
<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"
>
<svg
height="15"
id="fleche-defilement-categories-produits-gauche"
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"
/>
</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 }}"
>
<a href="/{{ base_categorie_produit }}/{{ categorie.slug|e }}">{{ categorie.nom|e }}</a>
</li>
{% endfor %}
</ul>
<svg
height="15"
id="fleche-defilement-categories-produits-droite"
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"
/>
</svg>
</nav>

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

@ -0,0 +1,353 @@
<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
>
<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"
>
<img
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"
method="post"
>
{# Formulaires pour la livraison et facturation #}
<div class="panneau__formulaires__separation-adresses">
<input
id="separation-adresses"
name="separation-adresses"
type="checkbox"
>
<label for="separation-adresses">Use a separate billing address</label>
</div>
<div class="panneau__formulaires__livraison formulaire">
<h3 class="formulaire__titre">Delivery:</h3>
<div class="formulaire__champs">
<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"
value="{{ adresse_livraison.first_name }}"
>
</div>
<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"
value="{{ adresse_livraison.last_name }}"
>
</div>
<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 }}"
>
</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 }}"
>
</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"
value="{{ adresse_livraison.city }}"
>
</div>
<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 }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="livraison-pays">Country</label>
<select
id="livraison-pays"
name="livraison-pays"
required
>
{% for cle, pays in pays_livraison %}
<option
{{cle == adresse_livraison.country ? "selected" : ""}}
value="{{cle}}"
>
{{ pays }}
</option>
{% endfor %}
</select>
</div>
<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"
value="{{ adresse_livraison.phone }}"
>
</div>
<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"
value="{{ email }}"
>
</div>
</div>
</div>
<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 }}"
>
</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 }}"
>
</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"
value="{{ adresse_facturation.address_1 }}"
>
</div>
<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"
value="{{ adresse_facturation.postcode }}"
>
</div>
<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 }}"
>
</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"
value="{{ adresse_facturation.state }}"
>
</div>
<div class="formulaire__champs__champ">
<label for="facturation-pays">Country</label>
<select
id="facturation-pays"
name="facturation-pays"
required
>
{% for cle, pays in pays_livraison %}
<option
{{cle == adresse_livraison.country ? "selected" : ""}}
value="{{cle}}"
>
{{ pays }}
</option>
{% endfor %}
</select>
</div>
<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 }}"
>
</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 }} "
>
</div>
</div>
</div>
<div class="panneau__formulaires__message">
<p
class="message"
id="message-formulaire-adresses"
>
</p>
</div>
{# Formulaire de paiement #}
<div class="panneau__formulaires__paiement formulaire">
<h3 class="formulaire__titre">Payment:</h3>
<div class="formulaire__paiement">
<div class="formulaire__paiement__attente-renseignement-formulaires">
<p>Please fill out and submit the above form to make payment available.</p>
<p>
Payments are handled via <strong>Stripe</strong>: you will be taken to a dedicated <strong>Stripe</strong>
payment page then redirected back here after the payment.
</p>
</div>
<div
class="formulaire__paiement__choix"
hidden
>
<label for="paiement-stripe">Credit card</label>
<input
id="paiement-stripe"
name="type-paiement"
type="radio"
>
</div>
</div>
</div>
</form>
<footer class="panneau__pied-de-page">
<button
form="formulaire-commande"
type="submit"
>
Calculate shipping
</button>
</footer>
</section>

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

@ -0,0 +1,181 @@
<section
class="panneau"
id="panneau-panier"
>
<header class="panneau__en-tete">
<h2>Your cart</h2>
</header>
<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 }}"
data-quantite="{{ produit.quantite }}"
>
<div class="panneau__grille-produits__produit__illustratif">
<a href="{{ produit.url }}">
<picture>{{ produit.image }}</picture>
</a>
</div>
<div class="panneau__grille-produits__produit__textuel detail-produit">
<h3 class="detail-produit__nom-prix">
<a href="{{ produit.url }}">{{ produit.titre }}.</a>
<span>{{ produit.prix * produit.quantite }}€</span>
</h3>
<p class="detail-produit__description">
{# Affiche tous les attributs relevants pour la variation choisie #}
{% for attribut in produit.attributs %}
{% if attribut.valeur %}
{{ attribut.nom }}: <strong>{{ attribut.valeur }}</strong><br>
{% endif %}
{% endfor %}
{# Affiche le nom de la Variation #}
</p>
<div class="detail-produit__actions">
<button
class="detail-produit__actions__soustraction"
{{ produit.quantite < 1 ? "disabled" }}
type="button"
>
-
</button>
<input
min="1"
type="number"
value="{{ produit.quantite }}"
>
<button
class="detail-produit__actions__addition"
type="button"
>
+
</button>
<button
class="detail-produit__actions__suppression"
type="button"
>
Remove
</button>
</div>
</div>
</article>
{% endfor %}
</div>
<div class="panneau__instructions-code-promo">
<textarea
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"
>
<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 }}"
>
<button
class="bouton-blanc-sur-noir"
for="code-promo"
id="bouton-code-promo"
type="button"
>
{{ code_promo ? "Remove" : "Apply" }}
</button>
<p class="panneau__instructions-code-promo__code-promo__message"></p>
</form>
</div>
<div class="panneau__sous-totaux">
<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"
{{ 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"
>
<p>Shipping:</p>
{% if not adresse_renseignee %}
<p>
<strong>Enter your delivery address</strong>
</p>
{% else %}
<p>
<strong>{{ sous_total_livraison }}€</strong>
</p>
{% endif %}
</div>
<fieldset
class="panneau__sous-totaux__choix-methode-livraison"
{{ not adresse_renseignee ? "hidden" }}
id="choix-methode-livraison"
>
<label>Select your shipping method</label>
{% 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 }}"
>
<label for="methode-livraison-{{ methode_livraison.id }}">{{ methode_livraison.titre }} ({{
methode_livraison.prix
}}€)</label>
</div>
{% endfor %}
</fieldset>
<p class="panneau__sous-totaux__conditions-livraison">
Belgium and France: free shipping on orders above 50€ (Pickup Point only).<br>
Worldwide: free shipping on orders above 100€.
</p>
</div>
<footer class="panneau__pied-de-page">
<p>Total: <span>{{ total_panier }}€</span></p>
</footer>
</section>

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

@ -0,0 +1,27 @@
<div class="grille-produits-similaires">
{% for produit in produits_meme_collection %}
{# TODO: Trouver une meilleure arborescence et des noms de classe #}
<article class="produit">
<figure>
<a href="{{ produit.url }}">
<picture class="produit__illustration produit__illustration__principale">
{{ produit.photo_repos }}
</picture>
<picture class="produit__illustration produit__illustration__survol">
{{ produit.photo_survol }}
</picture>
</a>
<figcaption class="produit__textuel">
<h3 class="produit__textuel__titre">
<a href="{{ produit.url }}">{{ produit.nom }}</a>
</h3>
<p class="produit__textuel__prix">
{{ produit.prix }}€
</p>
</figcaption>
</figure>
</article>
{% endfor %}
</div>

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

@ -0,0 +1,119 @@
{# Barre flottante avec le nom du Produit, le sélectgeur de variation et de quantité pour le Panier. #}
<aside
aria-label="Product's name, price and variation selection"
class="resume-produit"
>
<section class="selecteur-produit">
<h3 class="selecteur-produit__nom">{{ produit.nom }}</h3>
{% if variations_produit|length > 1 %}
<div class="selecteur-produit__selection-variation">
<label
for="selecteur-variation"
id="label-selecteur-variation"
>
Option:
</label>
<div class="selecteur-produit__selection-variation__selecteurs">
<select
aria-labelledby="label-selecteur-variation"
id="selecteur-variation"
name="variations"
>
<option
disabled
selected
value=""
>
--
</option>
{% for variation in variations_produit %}
<option
data-prix="{{ variation.prix }}"
value="{{ variation.id }}"
>
{{ variation.titre }}
</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
<p class="selecteur-produit__prix">{{ prix_maximal ?? produit.prix }}€</p>
</section>
</aside>
<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"
type="button"
>
Details
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-details-produit"
>
{{ produit.details }}
</div>
</section>
<section class="section-textuelle">
<h3 class="section-textuelle__titre">
<button
aria-expanded="false"
aria-controls="section-conditions-livraison"
type="button"
>
Shipping
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-conditions-livraison"
>
{{ descriptions_produits.texte_conditions_livraison }}
</div>
</section>
<section class="section-textuelle">
<h3 class="section-textuelle__titre">
<button
aria-expanded="false"
aria-controls="section-entretien-produit"
type="button"
>
Care
</button>
</h3>
<div
class="section-textuelle__contenu"
id="section-entretien-produit"
>
{{ descriptions_produits.texte_entretien_produit }}
</div>
</section>
</div>
<div class="details-produit__actions">
<button
class="bouton-case-pleine"
{{ variations_produit|length > 1 ? "disabled" : "" }}
id="bouton-ajout-panier"
type="button"
>
Add to cart
</button>
</div>
</aside>

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

@ -0,0 +1,27 @@
<main class="photos-produit">
<div
aria-label="Photo of the Product alone"
class="colonne colonne-gauche"
>
{% for photo in produit.photos_colonne_gauche %}
<figure data-index="0">
<picture>
{{ photo }}
</picture>
</figure>
{% endfor %}
</div>
<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>
{{ photo }}
</picture>
</figure>
{% endfor %}
</div>
</main>

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

@ -0,0 +1,8 @@
<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" %}
</section>

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

@ -0,0 +1,37 @@
<div
class="grille-produits"
data-page="1"
{% if id_categorie_produits %}data-id-categorie-produits="{{ id_categorie_produits }}"{% endif %}
>
{% if produits|length > 0 %}
{% for produit in produits %}
{# TODO: Trouver une meilleure arborescence et des noms de classe #}
<article class="produit">
<figure>
<a href="{{ produit.url }}">
<picture class="produit__illustration produit__illustration__principale">
{{ produit.photo_repos }}
</picture>
<picture class="produit__illustration produit__illustration__survol">
{{ produit.photo_survol }}
</picture>
</a>
<figcaption class="produit__textuel">
<h3 class="produit__textuel__titre">
<a href="{{ produit.url }}">{{ produit.nom }}</a>
</h3>
<p class="produit__textuel__prix">
{{ produit.prix }}€
</p>
</figcaption>
</figure>
</article>
{% endfor %}
{% else %}
<div class="grille-produits__aucun-produit">
<p>Sorry! No products available for this category.</p>
</div>
{% endif %}
</div>

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

@ -0,0 +1,41 @@
<footer
aria-label="Footer offering navigations links"
id="pied-de-page"
>
<section class="zone-menu-navigation-secondaire">
<nav
aria-label="Navigation for special pages"
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>
{# <li><a href="">Shipping & Returns</a></li> #}
</ul>
</nav>
</section>
<section class="zone-liens-reseaux-sociaux">
<nav
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"
>
{{ lien.nom }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</nav>
</section>
</footer>

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

@ -0,0 +1,35 @@
{% extends "base.twig" %}
{% block head %}
<script>
// dprint-ignore-file
// Injection d'états pour les Scripts de la page.
/**
* @typedef {Object} Etats - États utiles pour les scripts de la page.
* @property {number} idProduit - L'ID en base de données du Produit.
* @property {string} nonce - Un nonce pour l'authentification de requêtes API.
*/
/** @type {Etats} */
const _etats = {
idProduit: {{ produit.id }},
nonce: "{{ nonce_wc }}",
};
</script>
{% endblock head %}
{% block contenu %}
{# Menu des catégories de Produits #}
{% include "parts/menu-categories-produits.twig" %}
{# Photos du Produit #}
{% include "parts/pages/produit/photos-produit.twig" %}
{# Boîte des information du Produit #}
{% include "parts/pages/produit/informations-produit.twig" %}
{# Produits de la même Collection (Produits similaires) #}
{% if produit.collection != "" %}
{% include "parts/pages/produit/produits-similaires.twig" %}
{% endif %}
{% endblock contenu %}

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

@ -0,0 +1,59 @@
{% extends "base.twig" %}
{% block contenu %}
<main id="page-succes-commande">
<div class="contenu">
<header class="contenu__en-tete">
<h2>Successful order!</h2>
</header>
<div class="contenu__textuel">
<p>
Thank you for your order!
</p>
<p>
You will receive an email with all details in a short while.
</p>
<p>
Don't hesitate to <a
class="lien-lien"
href="/contact"
>contact us</a> if you have any questions!
</p>
</div>
{# Rappel de la Commande avec ses Produits #}
<div class="contenu__rappel-commande">
{% for produit in produits %}
<article class="contenu__rappel-commande__produit">
{# Illustration cliquable du Produit #}
<div class="contenu__rappel-commande__produit__illustratif">
<a href="{{ produit.permalien }}">
<picture>{{ produit.image }}</picture>
</a>
</div>
<div class="contenu__rappel-commande__produit__textuel detail-produit">
<h3 class="detail-produit__nom-prix">
<a href="{{ produit.permalien }}">{{ produit.titre }}.</a>
<span>{{ produit.prix }}€</span>
</h3>
<p class="detail-produit__description">
{# Affiche tous les attributs relevants pour la variation choisie #}
{% if produit.attribut|length > 0 %}
{% for attribut in produit.attribut %}
{{ attribut.nom }}: <strong>{{ attribut.valeur }}</strong><br>
{% endfor %}
{% endif %}
qty: <strong>{{ produit.quantite }}</strong>
</p>
</div>
</article>
{% endfor %}
</div>
</div>
</main>
{% endblock contenu %}