Différences

Ci-dessous, les différences entre deux révisions de la page.

--- projet_onepagebasket:creer_un_theme [2024/05/15 18:49] – supadmin
+++ projet_onepagebasket:creer_un_theme [2024/07/19 10:45] (Version actuelle) – supadmin
@@ Ligne 2: / Ligne 2: @@
 Le moteur permettant de créer facilement des thème est le très classique "blade" que vous trouvez par exemple en standard dans Laravel.
+<note tip>Nous utilisons aussi l'excellent [[https://tailwindcss.com/|TailwindCSS]] ce qui peut vous donner l'impression d'avoir du code HTML très "verbeux" dans les exemples ci-dessous mais vous n'êtes pas du tout obligés de l'utiliser pour faire vos thèmes. En complément nous utilisons de plus en plus [[https://daisyui.com/|DaisyUI]] qui permet d'avoir un code html plus concis. DaisyUI étant un plugin de TailwindCSS nous vous invitons très franchement à vous attarder sur ces deux éléments si vous ne les connaissez pas.</note>
+Vous trouverez de la documentation sur internet mais nous avons identifié ces deux ressources qui donnent les éléments essentiels pour vous lancer dans ce domaine
+  * https://walkerspider.com/cours/laravel/blade/
+  * https://grafikart.fr/tutoriels/blade-template-laravel-2117
+## Généralités : les moustaches {{ }} et @instructions
 Les données issues du code php sont utilisables via des commandes "moustaches" comme par exemple `{{ $variable }}` ou avec une syntaxe très facile à comprendre qui est déjà largement documentée.
-Voir la documentation de blade https://laravel.com/docs/7.x/blade
+Toutes les traductions sont accessibles via la fonction double underscore exemple `{{ __("MotCleAtraduire") }}`
+Si vous avez besoin de faire une boucle vous pouvez utiliser `@for(...)` et `@endfor` etc.
+Pour plus de détails, voir la documentation de blade https://laravel.com/docs/7.x/blade
 En bref, voici le contenu d'un thème pour OnePageBasket:
@@ Ligne 63: / Ligne 76: @@
 ## page d'index: index.blade.php
-```
+La page d'index s'appuie sur la page app.blade.php c'est le sens de l'appel sur la 1ere ligne `@extends('app')` et tout ce qui se trouve dans `@section('content')` ira se placer dans le @yield correspondant de la page app.blade.php
-@extends('app')
+```html
+@extends('app')
 @section('content')
-    <!-- Start block -->
     <section class="bg-white dark:bg-gray-900">
         <div class="max-w-screen-xl pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:pt-28 px-6">
             <div class="mt-6">
                 <ul class="flex flex-wrap items-center justify-center text-gray-900 dark:text-white">
+                <!-- La liste des categories -->
                     @foreach ($otherCategories as $cat)
                         <li><a href="{{ $cat['url'] }}" class="me-4 hover:underline md:me-6">{{ $cat['label'] }}</a></li>
@@ Ligne 104: / Ligne 116: @@
 @endsection
 ```
+Variables disponibles:
+  * `$otherCategories` : la liste des catégories issue de la liste de choix multiples de la configuration du module, chaque élément du tableau est composé des champs suivants:
+    * `$cat['url']` = l'adresse web de la catégorie
+    * `$cat['label']` = le label (titre, intitulé) de la catégorie dolibarr
+  * `$articles` : la liste des articles dans la catégorie en cours, chaque élément du tableau est composé des champs suivants:
+    * `$article->url` = l'adresse web de l'article
+    * `$article->imghash` = le hashcode correspondant à l'image
+    * `$article->label` =  le label (titre, intitulé) de l'article
+    * `$article->price` = le prix de l'article
 ## page d'un article: product.blade.php
-Liste des variables disponibles dans les différentes pages du thème:
+```html
+@extends('app')
+@section('content')
+	<!-- Start block -->
+	<section class="bg-white dark:bg-gray-900">
+		<div class="grid max-w-screen-xl px-4 pt-20 pb-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 lg:pt-28">
+			<div class="mr-auto place-self-center lg:col-span-7">
+				<h1 class="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl dark:text-white">
+					{{ $product_title }}
+				</h1>
+				<p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">
+					{{ $product_subtitle }}
+				</p>
+				<div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
+					<div id="product_text">
+						{!! $product_text !!}
+					</div>
+				</div>
+			</div>
+			<div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
+				<div class="flex flex-col justify-between">
+					<img class="object-contain" src="{{ $product_image }}" alt="product image">
+					<div class="self-end max-w-2xl dark:text-white">
+						<span class="text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl ">
+							{{ $product_price }}
+							<span class="text-3xl font-extrabold leading-none tracking-tight"> / {{ $product_price_unit }}</span>
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	<!-- End block -->
+	<!-- Include order form on that page -->
+	@include('formorder')
+@endsection
+```
+Variables disponibles:
+  * `$product_title` = le titre de l'article
+  * `$product_subtitle` = le sous titre
+  * `$product_text` = la description de l'article
+  * `$product_image` = l'image principale
+  * `$article->price` = le prix de l'article
+  * `$product_price_unit` = l'unité de vente