# Créer un thème pour OnePageBasket 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. 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. 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 {{ $title }} @include('header') @yield('content') @include('footer') ``` 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')

Liste des articles proposés à la vente

@foreach ($articles as $article)

{{ $article->label }}

{{ $article->price }}
@endforeach
@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 ```html @extends('app') @section('content')

{{ $product_title }}

{{ $product_subtitle }}

{!! $product_text !!}
@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