fonc: déplace l'injection de données du Produit dans un script JSON

web/app/themes/haiku-atelier-2024/single-product.php

@@ -22,7 +22,9 @@ use function add_action;
 use function assert;
 use function collect;
 use function is_array;
+use function is_string;
 use function wc_get_product;
+use function wp_create_nonce;
 use function wp_json_encode;
 
 $context = Timber::context();
@@ -66,12 +68,19 @@ $product_tags = $raw_product->get_tag_ids()
   |> (static fn(/** @var list<Option<WC_Term>> */ $tags) => Arr::map($tags, static fn($tag) => $tag->unwrap()));
 $tags = get_terms(['taxonomy' => 'product_tag', 'hide_empty' => true]);
 
-// echo '<pre>';
-// print_r($product_tags);
-// print_r($tags);
-// echo '</pre>';
-
-// exit();
+// Injecte les états initiaux des données du Produit sous forme de JSON dans le contexte.
+$page_states = [
+  'nonce' => wp_create_nonce('wc_store_api'),
+  'product' => [
+    'attributes' => $product->attributes,
+    'id' => $product->id,
+    'price' => $product->price,
+    'variations' => $product->variations,
+  ],
+]
+  |> wp_json_encode(...);
+assert(is_string($page_states));
+$context['page_states'] = $page_states;
 
 add_action('wp_enqueue_scripts', function (): void {
   Resource::enqueue_script_module_file(

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

@@ -1,23 +1,6 @@
 {% extends 'base.twig' %}
 
 {% block head %}
-  <script id="injection">
-  // 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: {{ product.id }},
-      nonce: "{{ nonce_wc }}",
-    };
-  </script>
-
   <!-- markup-fmt-ignore -->
   <script
     id="product-json"
@@ -25,6 +8,14 @@
   >
   {{ product_json }}
   </script>
+
+  <!-- markup-fmt-ignore -->
+  <script
+    id="page-states"
+    type="application/json"
+  >
+    {{ page_states }}
+  </script>
 {% endblock head %}
 
 {% block contenu %}