≪ View Page

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
projet_onepagebasket:creer_un_theme [2024/05/15 18:48] – supadminprojet_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. 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. 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: En bref, voici le contenu d'un thème pour OnePageBasket:
Ligne 15: Ligne 28:
 C'est la structure de base qui sera utilisée pour toutes les autres pages: C'est la structure de base qui sera utilisée pour toutes les autres pages:
  
-<code>+```html
 <!DOCTYPE html> <!DOCTYPE html>
 <html lang="en"> <html lang="en">
Ligne 36: Ligne 49:
 </body> </body>
 </html> </html>
-</code>+```
  
 Note:  Note: 
Ligne 62: Ligne 75:
  
 ## page d'index: index.blade.php ## 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 ## 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 
 +