Créer un thème pour OnePageBasket

**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.

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") }}

Voir la documentation de blade https://laravel.com/docs/7.x/blade

En bref, voici le contenu d'un thème pour OnePageBasket:

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:

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')
    <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

snippet.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
projet_onepagebasket/creer_un_theme.1715794089.txt.gz · Dernière modification : 2024/05/15 19:28 de supadmin
CC Attribution-Share Alike 4.0 International Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Share Alike 4.0 International