Jump to content

Affichage liste ou grille

@markito
 Share

Recommended Posts

@markito Newbie

@markito

Posted
Posted

Bonjour, j'ai sur ma boutique la possibilité d'afficher les produits soit en mode liste ou en mode grille

Cela fonctionne parfaitement

Mais

L'affichage du texte du Champs Récapitulatif  est forcement pas adapté à cause de la différence d'espace texte entre les 2 affichages !

 

Est il possible de différencié le nombre d'affichage caractéres

 

Dans le fichier product-list.tpl

il y a ce code

<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:110:'...'}</a></p> 

J'ai noté 110 pour le nombre de caractère mais ça applique sur les deux affichage

j'aimerai avoir la possibilité d'avoir plus de caractère en monde liste !

 

ou si c'est pas possible rajouter en fin un lien "lire la suite"

Merci pour toute piste

 

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

coucou

 

dans  le product-list.tpl

remplacer
<p class="product_desc">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:110:'...'}</a>
</p> 
par
<p class="product_desc">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >
{if $product.description}
   {if Tools::strlen($product.description) > 110}
<span id="product_description_short">{$product.description_short}</span>
<span id="product_description_full" class="unvisible">{$product.category->description}</span>
<span class="p_lnk_more">{l s='More'}</span>
  {else}
        <span>{$category->description}</span>
    {/if}
{/if}
</p> 
 

}

ou 110 est le max pour la description courte et a adapter suvant le rendu que tu veut entre <span> /<p>/<div>

 

dans le global.css verifié aou ajouter

.unvisible {display: none;}

dans le category.js (a créer si il n'existe pas)

$(document).ready(function(){
	$(document).on('click', '.p_lnk_more', function(e){
		e.preventDefault();
		$('#category_description_short').hide(); 
		$('#category_description_full').show(); 
		$(this).hide();
	});
});

je n'est pas tester mais seulement pris exemple sur les fichiers category.tpl et category.js  du theme par defaut de la 1.6

 

 

@++

 

Loulou66

Link to comment
Share on other sites
@markito Newbie

@markito

Posted
  • Author
Posted

Merci pour ta réponse loulou
je suis sur la version 1.5 et je ne vois pas ou ce trouve le fichier category.js

 

Et précision le script que tu me fourni c'est pour rajour le lien "more"

Il n'est pas possible de dissocier ces 2 mode

Avoir une description de 200 caractères dans le mode liste et 100 dans le mode grille ?

Link to comment
Share on other sites
@markito Newbie

@markito

Posted
  • Author
Posted

Coucouloulou

 

Je te monte le fichier entier

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if isset($products)}
{if isset($smarty.cookies.gridorlist_prestarocket) && $smarty.cookies.gridorlist_prestarocket=="grid_l"}
{assign var="ul_class" value="grid_l"}
{else}
{assign var="ul_class" value="list_l"}
{/if}
	<!-- Products list -->
	<ul id="product_list" class="clear">
	{foreach from=$products item=product name=products}
		<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
			<div class="left_block">
				{if isset($comparator_max_item) && $comparator_max_item}
					<p class="compare">
						<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} /> 
						<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
					</p>
				{/if}
			</div>
			<div class="center_block">
				<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
					<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
					{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
				</a>
				<h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</a></h3>
				<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:110:'...'}</a></p>
			</div>
			<div class="right_block">
				{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="on_sale">{l s='On sale!'}</span>
				{elseif isset($product.reduction) && $product.reduction && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}<span class="discount">{l s='Reduced price!'}</span>{/if}
				{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
				<div class="content_price">
					{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
					{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
				</div>
				{if isset($product.online_only) && $product.online_only}<span class="online_only">{l s='Online only!'}</span>{/if}
				{/if}
				{if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.minimal_quantity <= 1 && $product.customizable != 2 && !$PS_CATALOG_MODE}
					{if ($product.allow_oosp || $product.quantity > 0)}
						{if isset($static_token)}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}&token={$static_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{else}
							<a class="button ajax_add_to_cart_button exclusive" rel="ajax_id_product_{$product.id_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id_product={$product.id_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
						{/if}						
					{else}
						<span class="exclusive"><span></span>{l s='Add to cart'}</span><br />
					{/if}
				{/if}
				<a class="button lnk_view" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
			</div>
		</li>
	{/foreach}
	</ul>
	<br clear="all" />
	<!-- /Products list -->
{/if}
Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

alors tu as utiliser le tutto de prestarocket pour le listorgrid

 

dans product.tpl

remplace
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}</a></p>
par
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >
	<span class="desc_short">{$product.description|strip_tags:'UTF-8'|truncate:40:'...'}</span>
	<span class="desc_full">{$product.description|strip_tags:'UTF-8'|truncate:100:'...'}</spn>
</a></p>

dans le footer.tpl en fin de fichier la ou il y a le JS de prestasrocket

après
var ul_class=$(this).attr('id');
ajoutes
var active = '{active_l}';
if(active = 'list_active')
	{
		$('.desc_full').hide();
		$('.desc_short').show();
	 }
if(active = 'grid_active')
	{
		$('.desc_short').hide();
		$('.desc_full').show();		
	 }

et pour voir les description short en  Grid dans le product-list.css

change
#product_list.grid_l li p.product_desc {
display:none;
}
par
#product_list.grid_l li p.product_desc {
display:block;
}

tu n'as plus qu'a changer les truncate pour la description_short(en Grid) et la description_full( en List)

elles affichent toute les 2 la description longues si tu veut la courte  il faut rajouter _short au $product.description => $product.description_short

 

voila a toi de jouer ^^

vide les caches smarty et navigateur

 

@++

 

Loulou66

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

ha oui ç a bug dsl alors on va faire autrement

 dans le footer.tpl enlèves ce que je t'ai fait ajouter précédemment et

entre les 2
});
ici
});
ajoutes
$('#list_l').click(function(){
		$('.desc_short').hide();
		$('.desc_full').show();
	 });
$('#grid_l').click(function(){
		$('.desc_full').hide();
		$('.desc_short').show();
		
	 });

cette fois ça devrait fonctionner :P

 

@++

 

Loulou66

Link to comment
Share on other sites
@markito Newbie

@markito

Posted
  • Author
Posted

avant

var active = '{active_l}';
if(active = 'list_active')
	{
		$('.desc_full').hide();
		$('.desc_short').show();
	 }
if(active = 'grid_active')
	{
		$('.desc_short').hide();
		$('.desc_full').show();		
	 }
$(div_btn).removeClass('list_l_active').removeClass('grid_l_active');

et

maintenant

var ul_class=$(this).attr('id');
}
$('#list_l').click(function(){
		$('.desc_short').hide();
		$('.desc_full').show();
	 });
$('#grid_l').click(function(){
		$('.desc_full').hide();
		$('.desc_short').show();
	 }
$(div_btn).removeClass('list_l_active').removeClass('grid_l_active');

Non ca fonctionne pas ca ne fait plus la fonction liste ou grille

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

nono lit bien mon dernier post ^^ il ne faut pas placer au même endroit le nouvelle instruction JS

bon j'ai p'tet mal expliquer ^^ je te met le js complet :P du footer.tpl

<script type="text/javascript" src="{$js_dir}jquery.cookie.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function() {
if($.cookie('gridorlist_prestarocket')==null){
$.cookie('gridorlist_prestarocket', 'list_l', { expires: 365, path: '/' });
}
var ul='#product_list';
var div_btn='div.view_options';
$('.view_options a').click(function(){
var height=$(ul).height();
var width=$(ul).width();
var ul_class=$(this).attr('id');
$(div_btn).removeClass('list_l_active').removeClass('grid_l_active');
$(div_btn).addClass(ul_class+'_active');
$(ul).hide().wrap('<div class="loading_view" style="height:'+height+'px;width:'+width+'px"></div>').delay(100).removeClass().addClass(ul_class+' clear clearfix').fadeIn('fast',function(){$(this).unwrap()});
//mise à jour du cookie
$.cookie('gridorlist_prestarocket', ul_class, { expires: 365, path: '/' });
return false;
});
$('#list_l').click(function(){
		$('.desc_short').hide();
		$('.desc_full').show();
	 });
$('#grid_l').click(function(){
		$('.desc_full').hide();
		$('.desc_short').show();
		
	 });
});
</script>
{/literal} 

voilou

 

@++

 

Loulou66

Link to comment
Share on other sites
@markito Newbie

@markito

Posted
  • Author
Posted

Oh trop bien loulou !!

 

Ça fonctionne nickel !

Merci merci trop fort...

 

J'ai un ou deux réglages qui me chiffonne encore sur un autre sujet,!

Tu pourrais me dépanner encore une ou deux fois ?

:P

Bonne soirée et bonne nuit

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...