[Résolu] Créer des colonnes sur fichier .tpl d'un module vente privée

[nixSta]

Bonjour à tous,

 

Je m'explique: J'utilise le module Vente privée VIP proposé par la team Prestashop, et je travaille actuellement sur le code du fichier .tpl qui permet de mettre en page la page où les ventes sont affichées.

 

Malheureusement, et avec le code que j'ai, les ventes s'alignent les unes en dessous des autres, alors que j'aimerais créer 3 colonnes, une vente par colonne.

J'atteins mes limites pour la création du code, je vous sollicite donc pour me donner un coup de main, je ne voudrais pas foutre le module ou mon site en l'air.

 

Merci par avance pour votre aide sur quel élément je dois agir et comment je dois m'y prendre pour intégrer 3 colonnes à la mise en page.

 

Voici le code actuel: 

{if isset($register)}

	<center><p>

	{if $register == 1}

		<font color="GREEN">{l s='You are now registered to the sale' mod='privatesale'}.</font>

	{else}

		<font color="RED">{l s='Error while registering to the sale' mod='privatesale'}.</font>

	{/if}

	</p></center>

{/if}



<ul id="product_list" class="clear" style="margin-top:10px;">

{if isset($pvs_list) && !empty($pvs_list)}

{foreach from=$pvs_list item=temp}

	<li class="ajax_block_product clearfix">

		<div>

		<a class="product_img_link" title="{$temp.name}">

				<img width="350" height="350" alt="{$temp.name}" src="{$temp.file_exists}" />

			</a>
            <h3 style="text-align:center;">

				<a title="{$temp.name}">{$temp.name}</a>

			</h3>

			<p class="product_desc" style="text-align:center;">

				<a title="{$temp.description}">{$temp.description}</a>

			</p>

			<p style="text-align:center;">

				{l s='Start' mod='privatesale'} : {$temp.time_start|truncate:16:"":true}<br /> 

				{l s='Finish' mod='privatesale'} : {$temp.time_end|truncate:16:"":true}<br />

			</p>

		</div>

		<div class="right_block" style="text-align:center; margin-bottom:25px;">

			<div>

				{if $temp.status == 1}

					<span style="display:inline; text-align:center; color:orange; font-size:10pt;">{l s='COMING SOON' mod='privatesale'}</span><br />

				{elseif $temp.status == 2}

					<span style="display:inline; text-align:center; color:green; font-size:10pt;">{l s='OPEN' mod='privatesale'}</span><br />

				{else}

					<span style="display:inline; text-align:center; color:red; font-size:10pt;">{l s='CLOSED' mod='privatesale'}</span><br />

				{/if}

			</div>

			<div style="text-align:center;" style="margin-top:5px;">

				{if ($temp.status == 1 || $temp.status == 2) && $temp.access == 0}

					<a style="text-align:center;" class="button" title="{l s='Register' mod='privatesale'}" href="{$temp.register}" rel="ajax_id_product_1">{l s='Register' mod='privatesale'}</a>					

				{elseif $temp.access == 1}

					{if $temp.status == 2}

						<a class="button exclusive" style="text-align:center;" title="{l s='Access to the sale' mod='privatesale'}" href="{$temp.link}" rel="ajax_id_product_1">{l s='Access to the sale' mod='privatesale'}</a>

					{elseif $temp.status == 1}

						{l s='Waiting for the opening of the sale' mod='privatesale'}

					{/if}

				{/if}
			</div>

		</div>

	</li>

{/foreach}

{elseif !isset($pv_cookie->id_customer)}

	{l s='You must to be connected' mod='privatesale'}

{else}

	{l s='No private sales' mod='privatesale'}

{/if}



</ul>

Edited October 4, 2013 by nixSta (see edit history)

[Szed]

Hello,

l'idée n'est pas de créer "3 colonnes" dans l'html, mais plutôt de spécifier en CSS que l'élément <li> fasse un tiers de votre largeur.

Par exemple :

.ajax_block_product{
     width:26%;
     padding:2%;
     margin:10px 1.5%;
     float:left;
     height:300px;
}

Bon,cela peut être fait en %, ou en valeur fixe (pixel), selon votre site (responsive ou non).

La hauteur fixe permet de ne pas créer de décalage pour les lignes suivantes.

 

Par contre, .ajax_block_product c'est également la classe utilisé pour l'affichage de simple produit. Donc si vous faite cela, et si vous avez des produits en plus des ventes privés, ils passeront également en colonne.

 

Bien sur, il y aura des ajustements à faire que je ne peux prévoir la (description, affichage du prix, etc).

[nixSta]

Ok, merci, je vais travailler là-dessus.

 

Oui, je pensais bien au CSS, mais mes compétences étant limitées en ce domaine, je cherchais une piste de départ. 

 

Après pour ajax_block_product, je peux toujours créer une classe spécifique au lieu de modifier celle-ci, non? 

 

Je vais avancer sur ça dans un premier temps, merci! 

[Szed]

Tout a fait pour la classe

[nixSta]

Votre solution a très bien fonctionné. J'ai dû augmenté la taille fixe en hauteur car c'était trop petit, du coup les lignes se marchaient les unes sur les autres. 

 

Seul petit bémol: j'ai un site responsive dont les blocks se mettent les un en dessous des autres quand on passe sur mobile, et non en 33% mais cette solution me convient très bien pour le moment. 

 

Merci beaucoup!

[Szed]

Pour le responsive il suffit d'appliquer une largeur de 96% (2% de padding a droite et gauche dans mon exemple), a partir d'une certaines résolution

[nixSta]

Cela fonctionne à la perfection, merci