**Ceci est une ancienne révision du document !**
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.
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
En bref, voici le contenu d'un thème pour OnePageBasket:
page principale : app.blade.php
C'est la structure de base qui sera utilisée pour toutes les autres pages:
- snippet.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
- snippet.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"> @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
page d'un article: product.blade.php
Liste des variables disponibles dans les différentes pages du thème: