Template bloc produit


#1

@Patrick, si ça peut t’aider, voici la structure HTML pour une fiche produit tel que présenté dans la page des commandes (http://www.extrapaul.be/repanier/commande_contrat.php).
Ce template sert aussi bien pour un produit de producteur sans contrat qu’avec contrat.
Il y a des conditions et des variables : je les mentionne entre %.

<DIV class="col-product product-like-% 'yes' ou 'no' suivant favoris ou pas % ">
	<DIV class="card card-product" style="border-color: % couleur définie pour ce rayon % ?>;">
		<DIV class="d-flex flex-row">
			<DIV class="product-img" % s'il existe une image du produit % style="background-image:url(<?= $product['img'] ?>); " % fin si % >
				<DIV class="department" style="background-color:% couleur définie pour ce rayon %; color:% couleur de texte (noir ou blanc) défini pour ce rayon % ;">
					% nom du rayon %
				</DIV>
			</DIV>
			<DIV class="product-body d-flex flex-column flex-grow-1">
				<DIV class="card-title">% nom du produit %</DIV>
				<SPAN class="product-maker">% nom du fournisseur %</SPAN>
				<DIV class="product-description">% description du produit (ça existe ?) %</DIV>
				<DIV class="product-order mt-auto d-flex flex-column">
					<DIV class="d-flex product-units">
						<div class="product-unit">
							% si mangeur connecté %<A href="#"><i class="% si favori "fas" sinon "far" % fa-heart"></i></A>% si pas connecté %<A class="disabled"><i class="far fa-heart"></i></A>% fin si %
						</div>
						% s'il existe un poids du priduit %
						<div class="product-unit flex-fill text-center">% poids du produit %</div>
						% fin si %
						% s'il existe l'unité de produit %
						<div class="product-unit flex-fill text-center">% unité du produit %</div>
						% fin si %
						<div class="product-unit flex-fill text-center">% prix du produit %</div>
					</DIV>
					% si ce n'est pas un producteur avec contrat %
					<DIV class="d-flex">
						<select % si mangeur non connecté "disabled" % ?>>
							% liste des options %
						</select>
					</DIV>
					% fin si %
				</DIV>
			</DIV>
		</DIV>
		% si producteur avec contrat, boucler sur les engagements, et pour groupe de dates : %
		<DIV class="product-date date-% "open" si date ouverte sinon "closed" % >
			<DIV class="d-flex d-row">
				<DIV class="order-date">
					% pour chaque date imprimer la date sous forme littérale suivi de <BR>
				</DIV>
				<select % si la commande est fermée "disabled" % >
					% liste des options %
				</select>
			</DIV>
		</DIV>
		% fin de boucle %
		% fin de condition contrat producteur %
	</DIV><!-- /card-product -->
</DIV><!-- /col-product -->

#2

Merci Paul,

Cela m’aide.

Il faudra aussi voir entre nous deux, comment séparer / phaser migration “purement esthétique” à BS4 et changement sur le fonctionnement de l’applicatif.

Qu’en penses-tu ?

Patrick

Le dim. 21 oct. 2018 à 12:40, Paul Barbieux noreply@ps.repanier.be a écrit :


#3

Le code n’est plus tout à fait à jour, à cause des labels et de la description en collapse, ajoutés par après. J’attends que ce design se fixe avant de poster le code actualisé.