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

2024-11-13

Browse source
This commit is contained in:
gcch 2024-11-13 09:08:08 +01:00
commit abd30975c4
16 changed files with 1927 additions and 558 deletions
Download patch file Download diff file Expand all files Collapse all files

111
web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css Normal file
View file

@ -0,0 +1,111 @@
#page-succes-commande {
--page-hauteur-minimale: calc(
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px
);
--page-marges-bloc-debut: var(--en-tete-hauteur);
display: flex;
flex-flow: column nowrap;
margin-top: var(--page-marges-bloc-debut);
margin-bottom: var(--espace-xl);
border-bottom: 1px solid var(--couleur-noir);
}
#page-succes-commande .contenu {
display: flex;
flex-flow: column nowrap;
place-items: center;
width: min(50rem, 100%);
min-height: var(--page-hauteur-minimale);
margin: auto;
font-weight: 500;
font-style: italic;
border: 1px solid var(--couleur-noir);
border-bottom: initial;
}
#page-succes-commande .contenu__en-tete {
width: 100%;
padding: var(--espace-m) var(--espace-xl);
color: var(--couleur-blanc);
background: var(--couleur-noir);
}
#page-succes-commande .contenu__en-tete h2 {
width: fit-content;
margin: auto;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-l);
}
#page-succes-commande .contenu__rappel-commande {
display: flex;
flex-flow: column nowrap;
}
#page-succes-commande .contenu__rappel-commande__produit {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
border-bottom: 1px solid var(--couleur-noir);
}
#page-succes-commande .contenu__rappel-commande__produit__illustratif {
padding: var(--espace-l);
border-right: 1px solid var(--couleur-noir);
}
#page-succes-commande .contenu__rappel-commande__produit__illustratif picture {
overflow: hidden;
}
#page-succes-commande .contenu__rappel-commande__produit__illustratif img {
aspect-ratio: 1;
height: auto;
transition: 0.2s scale;
}
@media (hover: hover) {
#page-succes-commande .contenu__rappel-commande__produit__illustratif img:hover {
scale: 1.1;
}
}
#page-succes-commande .contenu__rappel-commande .detail-produit {
display: flex;
flex-flow: column nowrap;
place-content: center;
width: 100%;
padding: 0 var(--espace-xl);
font-style: italic;
}
#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix {
display: flex;
flex-flow: row nowrap;
column-gap: var(--espace-xl);
justify-content: space-between;
font-size: var(--espace-l);
line-height: var(--hauteur-ligne-moitie);
margin-bottom: var(--espace-xs);
}
#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix span {
min-width: 4rem;
font-weight: 600;
text-align: right;
font-style: initial;
}
#page-succes-commande .contenu__rappel-commande .detail-produit__description {
margin-bottom: var(--espace-l);
text-transform: lowercase;
line-height: var(--hauteur-ligne-moitie);
}
#page-succes-commande .contenu__textuel {
display: flex;
flex: 1;
flex-flow: column nowrap;
place-content: center;
max-width: 34rem;
height: 100%;
padding: var(--espace-xl);
font-style: normal;
}
#page-succes-commande .contenu__textuel p + p {
margin-top: var(--espace-m);
}
@media (width <= 50rem) {
#page-succes-commande .contenu {
border-right: initial;
border-left: initial;
}
}
/*# sourceMappingURL=page-succes-commande.css.map */

1
web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-succes-commande.scss"],"names":[],"mappings":"AAEA;EAEE;AAAA;AAAA;EAKA;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAGA;EACE;IACE;;;AAQV;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAKN;EACE;IACE;IACA","file":"page-succes-commande.css"}

1
web/app/themes/haiku-atelier-2024/assets/css/pages/page-succes-commande.min.css vendored Normal file
View file

@ -0,0 +1 @@
#page-succes-commande{--page-hauteur-minimale:calc(100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px);--page-marges-bloc-debut:var(--en-tete-hauteur);margin-top:var(--page-marges-bloc-debut);margin-bottom:var(--espace-xl);border-bottom:1px solid var(--couleur-noir);flex-flow:column;display:flex}#page-succes-commande .contenu{width:min(50rem,100%);min-height:var(--page-hauteur-minimale);border:1px solid var(--couleur-noir);border-bottom:initial;flex-flow:column;place-items:center;margin:auto;font-style:italic;font-weight:500;display:flex}#page-succes-commande .contenu__en-tete{width:100%;padding:var(--espace-m)var(--espace-xl);color:var(--couleur-blanc);background:var(--couleur-noir)}#page-succes-commande .contenu__en-tete h2{text-transform:uppercase;width:fit-content;letter-spacing:var(--espacement-inter-lettres-etendu-l);margin:auto}#page-succes-commande .contenu__rappel-commande{flex-flow:column;display:flex}#page-succes-commande .contenu__rappel-commande__produit{border-bottom:1px solid var(--couleur-noir);grid-template-rows:1fr;grid-template-columns:1fr 1fr;display:grid}#page-succes-commande .contenu__rappel-commande__produit__illustratif{padding:var(--espace-l);border-right:1px solid var(--couleur-noir)}#page-succes-commande .contenu__rappel-commande__produit__illustratif picture{overflow:hidden}#page-succes-commande .contenu__rappel-commande__produit__illustratif img{aspect-ratio:1;height:auto;transition:scale .2s}@media (hover:hover){#page-succes-commande .contenu__rappel-commande__produit__illustratif img:hover{scale:1.1}}#page-succes-commande .contenu__rappel-commande .detail-produit{width:100%;padding:0 var(--espace-xl);flex-flow:column;place-content:center;font-style:italic;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix{column-gap:var(--espace-xl);font-size:var(--espace-l);line-height:var(--hauteur-ligne-moitie);margin-bottom:var(--espace-xs);flex-flow:row;justify-content:space-between;display:flex}#page-succes-commande .contenu__rappel-commande .detail-produit__nom-prix span{text-align:right;min-width:4rem;font-weight:600;font-style:initial}#page-succes-commande .contenu__rappel-commande .detail-produit__description{margin-bottom:var(--espace-l);text-transform:lowercase;line-height:var(--hauteur-ligne-moitie)}#page-succes-commande .contenu__textuel{max-width:34rem;height:100%;padding:var(--espace-xl);flex-flow:column;flex:1;place-content:center;font-style:normal;display:flex}#page-succes-commande .contenu__textuel p+p{margin-top:var(--espace-m)}@media (width<=50rem){#page-succes-commande .contenu{border-right:initial;border-left:initial}}

2
web/app/themes/haiku-atelier-2024/assets/js/exports.DtgtFHVi.js.map
View file

File diff suppressed because one or more lines are too long

17
web/app/themes/haiku-atelier-2024/functions.php
View file

@ -4,7 +4,6 @@ declare(strict_types=1);
use Carbon_Fields\Carbon_Fields;
use HaikuAtelier\StarterSite;
use Idleberg\WordPress\ViteAssets\Assets;
use Timber\Timber;
// Récupère les dépendances Composer
@ -181,19 +180,3 @@ function charge_carbon_fields(): void {
Carbon_Fields::boot();
}
add_action("after_setup_theme", "charge_carbon_fields");
/**
* Vite
*/
$baseUrl = get_stylesheet_directory_uri();
$manifest = get_template_directory() . "/assets/js/.vite/manifest.json";
$viteAssets = new Assets(manifestFile: $manifest, basePath: $baseUrl, algorithm: "sha512");
// print_r($viteAssets);
// $viteAssets->inject($entryPoint);
add_filter("woocommerce_rest_products", "custom_response", 10, 3);
function custom_response($response, $user_data, $request) {
// Customize response data
$response->data["coupon"] = 3;
return $response;
}

70
web/app/themes/haiku-atelier-2024/page-successful-order.php
View file

@ -6,12 +6,18 @@
declare(strict_types=1);
use Roots\WPConfig\Config;
use Stripe\Checkout\Session;
use Stripe\StripeClient;
use Timber\Timber;
use Illuminate\Support\Arr;
use function Crell\fp\pipe;
require_once __DIR__ . "/src/inc/TraitementInformations.php";
/** @var string */
$url_accueil = get_page_link(get_page_by_path("home")->ID);
/** @var string */
/** @var string $session_id L'ID de la Session Stripe. */
$session_id = $_GET["session_id"];
// Redirige à l'Accueil si le paramètre d'ID de Session Stripe n'est pas présent
@ -21,23 +27,73 @@ if (!$session_id) {
}
// Instancie un Client Stripe
$client_stripe = new \Stripe\StripeClient(Config::get("STRIPE_API_SECRET"));
/** @var StripeClient $client_stripe Un Client Stripe pour récupérer les informations des Commande et Transaction .*/
$client_stripe = new StripeClient(Config::get("STRIPE_API_SECRET"));
try {
/** @var Session $session La Session Stripe pour la Commande. */
$session = $client_stripe->checkout->sessions->retrieve($session_id);
/** @var string $order_id L'ID de la Commande WooCommerce passée en métadonnée à la Session Stripe. */
$order_id = $session->metadata["order_id"];
/** @var WC_Order|WC_Order_Refund|bool $commande La Commande WooCommerce liée à la Session Stripe, `false` si inexistante. */
$commande = wc_get_order("$order_id");
if ($commande == false) {
throw new Error("La commande $order_id n'existe pas.");
}
// Passe la Commande en état "Payé"
if ($commande->get_status() === "pending") {
$commande->payment_complete($session_id);
$commande->set_payment_method_title("Stripe - Carte bancaire");
$commande->set_transaction_id($session_id);
}
// Contexte et modèles
$contexte = Timber::context();
$modeles = ["succes-commande.twig"];
echo "<pre>";
print_r($session);
print_r($commande);
echo "</pre>";
/** @var WC_Order_Item[] $articles Les Articles de la Commande. */
$articles = $commande->get_items();
http_response_code(200);
$articles_formates = Arr::map(
array: $articles,
callback: function (WC_Order_Item $article) {
$donnees = $article->get_data();
$est_variation = $article["variation_id"] !== null;
$id_produit = $est_variation ? $article["variation_id"] : $article["product_id"];
$produit = wc_get_product($id_produit);
$titre_produit = $produit->get_title();
$attributs_produit = recupere_et_formate_attributs_produit($produit->get_attributes());
return [
"attributs" => $attributs_produit,
"id_produit" => $id_produit,
"image" => pipe($produit->get_image_id(), fn($id) => genere_balise_img_multiformats(id: $id, lazy: true)),
"permalien" => $produit->get_permalink(),
"prix" => $donnees["total"],
"quantite" => $article->get_quantity(),
"titre" => $titre_produit,
];
},
);
$contexte["articles"] = $articles_formates;
// echo "<pre>";
// print_r($articles_formates);
// echo "</pre>";
// Charge les scripts et styles de la page
function charge_scripts_styles_page_succes_commande(): void {
wp_enqueue_style(
handle: "haiku-atelier-2024-styles-page-succes-commande",
src: get_template_directory_uri() . "/assets/css/pages/page-succes-commande.css",
deps: [],
ver: filemtime(get_template_directory() . "/assets/css/pages/page-succes-commande.css"),
media: "all",
);
}
add_action("wp_enqueue_scripts", "charge_scripts_styles_page_succes_commande");
// Rendu
Timber::render(filenames: $modeles, data: $contexte);

1
web/app/themes/haiku-atelier-2024/src/inc/FonctionnalitesWooCommerce.php
View file

@ -6,6 +6,7 @@
declare(strict_types=1);
use function Crell\fp\pipe;
require_once "TraitementInformations.php";
/* Images du Produit */

14
web/app/themes/haiku-atelier-2024/src/inc/TraitementInformations.php
View file

@ -22,13 +22,13 @@ function genere_balise_img_multiformats($id, $lazy = false) {
}
$url = wp_get_attachment_image_url($id);
$chemin = realpath(get_attached_file($id));
$chemin = realpath(get_attached_file($id)) ? realpath(get_attached_file($id)) : "";
$alt = get_post_meta($id, "_wp_attachment_image_alt", true);
$dimensions = $chemin ? getimagesize($chemin) : [];
$dimensions = $chemin ? getimagesize($chemin) : ["", ""];
$avif = realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".avif");
$jxl = realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".jxl");
$webp = realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".webp");
$avif = $chemin ? realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".avif") : false;
$jxl = $chemin ? realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".jxl") : false;
$webp = $chemin ? realpath(pathinfo($chemin)["dirname"] . "/" . pathinfo($chemin)["filename"] . ".webp") : false;
// Génère un tableau avec les différents formats valides
$formats = pipe(
@ -49,7 +49,9 @@ function genere_balise_img_multiformats($id, $lazy = false) {
// Construis les balises <source> avec les formats valides
$sources = "";
foreach ($formats as $format) {
$sources .= "<source height='$dimensions[0]' srcset='$format[url]' type='image/$format[format]' width='$dimensions[1]' />\n";
$height = $dimensions[0] ?? "";
$width = $dimensions[1] ?? "";
$sources .= "<source height='$height' srcset='$format[url]' type='image/$format[format]' width='$width' />\n";
}
$loading = $lazy ? "lazy" : "eager";

134
web/app/themes/haiku-atelier-2024/src/sass/pages/page-succes-commande.scss Normal file
View file

@ -0,0 +1,134 @@
// Styles pour la Page affichée après une Commande réussie
#page-succes-commande {
// Dimensions
--page-hauteur-minimale: calc(
100svh - var(--en-tete-hauteur) - var(--pied-de-page-hauteur) - var(--espace-xl) - 1px
);
// Marges
--page-marges-bloc-debut: var(--en-tete-hauteur);
display: flex;
flex-flow: column nowrap;
margin-top: var(--page-marges-bloc-debut);
margin-bottom: var(--espace-xl);
border-bottom: 1px solid var(--couleur-noir);
.contenu {
display: flex;
flex-flow: column nowrap;
place-items: center;
width: min(50rem, 100%);
min-height: var(--page-hauteur-minimale);
margin: auto;
font-weight: 500;
font-style: italic;
border: 1px solid var(--couleur-noir);
border-bottom: initial;
&__en-tete {
width: 100%;
padding: var(--espace-m) var(--espace-xl);
color: var(--couleur-blanc);
background: var(--couleur-noir);
h2 {
width: fit-content;
margin: auto;
text-transform: uppercase;
letter-spacing: var(--espacement-inter-lettres-etendu-l);
}
}
&__rappel-commande {
display: flex;
flex-flow: column nowrap;
&__produit {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
border-bottom: 1px solid var(--couleur-noir);
// Illustration du Produit
&__illustratif {
padding: var(--espace-l);
border-right: 1px solid var(--couleur-noir);
picture {
overflow: hidden;
}
img {
aspect-ratio: 1;
height: auto;
transition: 0.2s scale;
// Effet de zoom au survol
@media (hover: hover) {
&:hover {
scale: 1.1;
}
}
}
}
}
// Détail d'un Produit
.detail-produit {
display: flex;
flex-flow: column nowrap;
place-content: center;
width: 100%;
padding: 0 var(--espace-xl);
font-style: italic;
&__nom-prix {
display: flex;
flex-flow: row nowrap;
column-gap: var(--espace-xl);
justify-content: space-between;
font-size: var(--espace-l);
line-height: var(--hauteur-ligne-moitie);
margin-bottom: var(--espace-xs);
span {
min-width: 4rem;
font-weight: 600;
text-align: right;
font-style: initial;
}
}
&__description {
margin-bottom: var(--espace-l);
text-transform: lowercase;
line-height: var(--hauteur-ligne-moitie);
}
}
}
&__textuel {
display: flex;
flex: 1;
flex-flow: column nowrap;
place-content: center;
max-width: 34rem;
height: 100%;
padding: var(--espace-xl);
font-style: normal;
p + p {
margin-top: var(--espace-m);
}
}
}
@media (width <= 50rem) {
.contenu {
border-right: initial;
border-left: initial;
}
}
}

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

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