Différences

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

--- projet_onepagebasket:creer_un_theme [2024/05/15 18:36] – créée supadmin
+++ projet_onepagebasket:creer_un_theme [2024/07/19 10:45] (Version actuelle) – supadmin
@@ Ligne 3: / Ligne 3: @@
 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.
-Contenu d'un thème:
+<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.
+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:
 [{{:projet_onepagebasket:pasted:20240515-183558.png?direct=200|Contenu d'un thème}}]
 ## page principale : app.blade.php
+C'est la structure de base qui sera utilisée pour toutes les autres pages:
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<link rel="canonical" href="{{ $canonical }}" />
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ $title }}</title>
+	<meta name="title" content="{{ $title }}">
+	<meta name="description" content="{{ $desc }}">
+	<meta name="robots" content="index, follow">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<link href="./css.php?ver={{ $csstime }}" rel="stylesheet">
+</head>
+<body>
+	@include('header')
+	@yield('content')
+	@include('footer')
+</body>
+</html>
+```
+Note:
+  * le @include permet d'inclure un autre fichier
+  * le @yield est à comprendre "dans l'autre sens" : voir plus bas par exemple pour la page index.blade.php
+Variables disponibles :
+  * `$canonical` : l'adresse de la page
+  * `$title` : le titre
+  * `$desc` : la description
+  * `$csstime` : la date de dernière modification du css (astuce pour gérer les serveurs proxy, cdn, cache etc.)
+  * `$socname` : le nom de votre société configuré dans dolibarr
+  * `$link_company` : l'adresse (URL) renseignée dans la configuration du module sous la clé "Adresse de votre site web principal"
+  * `$link_contact` : l'adresse (URL) renseignée dans la configuration du module sous la clé "Adresse de votre formulaire de contact"
+  * `$link_legal`: l'adresse (URL) renseignée dans la configuration du module sous la clé "Adresse des mentions légales obligatoires"
+  * `$link_help_center` : l'adresse (URL) renseignée dans la configuration du module sous la clé "Lien vers une page d'aide"
 ## page d'entête : header.blade.php
+Le header est utilisé pour avoir le même bandeau sur toutes les pages, le menu de navigation ...
 ## pied de page : footer.blade.php
+Le footer quand à lui est pour le pied de page du site où vous pouvez placer vos liens vers les CGV / Mentions légales etc.
 ## 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
+```html
+@extends('app')
+@section('content')
+    <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>
+                    @endforeach
+                </ul>
+            </div>
+            <h3 class="text-gray-600 text-2xl font-medium mt-6">Liste des articles proposés à la vente</h3>
+            <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-6">
+                @foreach ($articles as $article)
+                    <div class="w-full max-w-sm mx-auto rounded-md shadow-md overflow-hidden">
+                        <div class="flex items-end justify-end h-56 w-full bg-cover">
+                            <a href="{{ $article->url }}"><img class="object-cover h-56 w-full mx-auto" src="image.php?i={{ $article->imghash }}" /></a>
+                            <a href="{{ $article->url }}" class="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
+                                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
+                                </svg>
+                            </a>
+                        </div>
+                        <div class="px-5 py-3">
+                            <h3 class="text-gray-700 uppercase"><a href="{{ $article->url }}">{{ $article->label }}</a></h3>
+                            <span class="text-gray-500 mt-2">{{ $article->price }}</span>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    </section>
+@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