Jump to content

Afficher Couleurs(attributs) dans la page catégorie

EtapDesign
 Share

Recommended Posts

EtapDesign Newbie

EtapDesign

Posted
Posted

Hey les gens!

 

J'ai un gros soucis que j'essaye de régler depuis plus d'un mois en faisant le tour des forums...etc mais en vain.

 

Auriez-vous un tutoriel ou même une simple explication pour arriver à afficher les couleurs sur le listing produits de la page catégorie.

 

Cela m'est indispensable pour continuer le site car j'ai un produit avec 10 couleurs différentes...et il faut donc que l'utilisateur rentre dans la fiche produit pour découvrir toutes ces couleurs, ce qui est très contraignant.

 

J'ai essayé également de mettre directement tous les produits(avec toutes les couleurs) sur la page catégorie...mais du coup ça va faire des doublons...

 

Quelqu'un pourrait m'aiguiller s'il vous plaît?

 

Cordialement.

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted (edited)

Bonjour,

 

Quelle version tu utilise ?

 

Si tu utilise une version >1.4.4 , "Tu copies-colles" le fichier joint dans override/controllers/

et dans le fichier product-list.tpl tu rajoute ce bout de code.

 

	{if isset($product.colors) && $product.colors}
		  <!-- colors -->
		   <p class="colors">
				  {foreach from=$product.colors key='id_attribute' item='color'}
						  <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="color_pick" title="{$color.name}"  style="background: {$color.value};"></a>
				  {/foreach}
			 </p>
		  {/if}

 

Cette solution marche sur quelques une de mes réalisations : VipLook , fetebook

 

 

Si non il existe un post ou tu trouveras sûrement d'autres propositions.

 

Cordialement

CategoryController.php

Edited by OEB (see edit history)
Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted (edited)

Bonjour,

 

et merci beaucoup pour ta réponse...j'utilise la version 1.4.7.3

 

Tu penses qu'elle fonctionne avec cette version?

 

En ce qui concerne le code dans le fichier product-list.tpl :

 

{if isset($product.colors) && $product.colors}
					  <!-- colors -->
					   <p class="colors">
									  {foreach from=$product.colors key='id_attribute' item='color'}
													  <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="color_pick" title="{$color.name}"  style="background: {$color.value};"></a>
									  {/foreach}
							 </p>
					  {/if}

 

Je l'insère où exactement ce code dans le fichier?

 

Merci encore!

Edited by EtapDesign (see edit history)
Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

Merci pour ta solution mais cela ne marche pas...mais en forçant la compilation.

 

L'adresse sur lequel j'ai appliqué ton code : http://www.shilton.fr/boutique-en-ligne-shilton/11-t-shirt

 

Code que j'ai inséré dans product-list.tpl de mon thème :

 

{if isset($products)}
<!-- 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="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')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>
   <h3><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>
  {if isset($product.colors) && $product.colors}
					  <!-- colors -->
					   <p class="colors">
									  {foreach from=$product.colors key='id_attribute' item='color'}
													  <a href="{$product.link|escape:'htmlall':'UTF-8'}" class="color_pick" title="{$color.name}"  style="background: {$color.value};"></a>
									  {/foreach}
							 </p>
					  {/if}

  </div>


  <div class="right_block">
   {if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
   <div>
 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span>{/if}
   </div>
   {/if}
   <a class="button" href="{$product.link|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
   {if isset($comparator_max_item) && $comparator_max_item}
 <p class="compare"><input type="checkbox" onclick="checkForComparison({$comparator_max_item})" class="comparator" id="comparator_item_{$product.id_product}" value="{$product.id_product}" /> <label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label></p>
   {/if}   
  </div>
 </li>
{/foreach}
</ul>
<!-- /Products list -->
{/if}

 

Et j'ai bien intégré le fichier joint dans override/controllers/...je ne comprends pas pourquoi ça ne fonctionne pas!

 

Merci pour ton aide.

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

Merci, mais en fait le code permet juste de dire que ces couleurs existent, c'est cela? Ils n'affichent pas les couleurs directement sur la page catégorie?

 

Par exemple l'utilisateur clique sur "blue"; l'article s'affiche en bleu. De plus, toutes les couleurs renvoient sur la fiche produit avec la même couleur, c'est normal aussi.

 

 

Je te remercie beaucoup pour ton aide.

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

j'ai du mal m'exprimer, je voulais une fonction comme le onmouseover qui affiche le produit avec la couleur qui correspond à celle où pointe la souris de l'utilisateur et bien sûr qui redirige vers la couleur correspondante. Mais je pense pas que tu continueras à m'aiguiller d'avantage..^^

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

ah oui je vois ce que tu veux dire...je pense qu'il y a déjà une personne qui a fait la même chose ici

ce qu'il ne faut pas oublier, que si tu charge toutes les photos ça va être lourd pour le client.

 

Par contre j'ai un module mais que je n'ai pas encore finalisé quicklink qui permet d'avoir un aperçu rapide du produit, demo

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

Le module n'est pas encore finaliser.

mais le but de ce module c'est d'avoir un aperçu rapide des produits avec les même fonctionnalités de la fiche produit,

l’affichage des déclinaisons, l'image qui change selon la déclinaison sélectionné...

 

par contre si vous avez besoin d'une solution sur mesure, vous pouvez m'envoyer un MP.

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

Remplacez l'ancien code par :

{if isset($product.colors) && $product.colors}
<p class="colors">
  {foreach from=$product.colors key='id_attribute' item='color'}
<a onclick="document.getElementById('img_{$product.id_product}').src='{$img_prod_dir}{$product.id_product}-{$color.id_image}.jpg'" class="color_pick" title="{$color.name}"  style="background: {$color.value};"></a>
				  {/foreach}
			 </p>
{/if}

 

et vous ajouter

id="img_{$product.id_product}"

au debut de la balise <img....

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

Merci de me répondre, je continuais à chercher depuis la dernière fois...par contre je comprends pas lorsque vous dites d'ajouter

 

id="img_{$product.id_product}"

 

au début de la balise <img... où exactement au début de la balise image et dans quel fichier?

 

 

Merci beaucoup pour votre réponse.

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

Je l'ai inséré dans cette ligne :

 

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img id="img_{$product.id_product}" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>

 

J'ai un problème, dans le sens où l'image apparaît en "?", j'avais déjà pourtant résolu le problème il y a deux trois mois...de plus lorsque l'on passe sur les couleurs, le pointage de la souris reste en flèche...ce qui est pas commode pour l'internaute étant donné qu'il pensera qu'on puisse pas changer de couleur à part s'il clique.

 

Le lien : http://www.shilton.fr/boutique-en-ligne-shilton/11-t-shirt

 

Je me doute aussi que la fonction que vous m'avez donné ne permet pas de rediriger la couleur vers la fiche produit de la couleur correspondante..je vais continuer à chercher, merci pour toutes ces informations, vraiment.

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

désactiver la réécriture de liens pour voir

Concernant le pointage de la souris c'est du css! remplacez l'ancien code CSS par :

ul#product_list li p.colors{float:left}
ul#product_list li p.colors a{background:none;float:left;height:15px;width:15px;margin-right:2px;cursor: pointer;}

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

En effet, avec ce problème, j'en oublie les fonctionnalités principales du CSS.

 

Comment désactiver la réécriture de liens? Ca se fait dans le back Office?

 

Je crois la dernière j'ai eu le soucis avec la ficher produit, et ça venait des propriétés d'images du thème dans le back office.

 

Peut-être que dans page Catégorie, c'est de la même façon qu'il faut procéder.

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

j'aimerai bien vous aidez mais.... il y a des choses qu'on peut trouver facilement sur internet ou avec le manuel d'tulisation de prestashop..bon c'est dans preferences-> SEO & URLs-> et desactive URL simplifiée (rien avoir avec les tailles des images).

cela permet de voir si le probleme viens de la réécriture de lien

je vous invite a faire appel à un professionnel pour vous faire tout cela en 5 minutes au lieu de vous galérer des jours.

Link to comment
Share on other sites
EtapDesign Newbie

EtapDesign

Posted
  • Author
Posted

Cela fait même pas un mois que je suis sous prestashop, et je veux vraiment essayer de comprendre comment ça fonctionne pour élargir mes connaissances dans la boutique en ligne.

 

En effet, en plus de ma 5ème année d'étude, j'ai créé en parallèle mon agence de communication à Béziers http://www.etap-design.fr/

 

Donc, j'aimerais ne pas passer par des professionnels, même si je galère au début, ce ne sera que bénéfique pour moi.

 

 

Pour revenir au sujet, en désactivant les url simplifiés, cela n'affiche même plus les pages, ce que je redoutais...je ne pense pas que l'erreur vienne d'ici pour vous dire la vérité.

Link to comment
Share on other sites
  • 4 weeks later...
KantyS Newbie

KantyS

Posted
Posted

Bonjour à tous, et tout d'abord, merci à OEB pour sa participation active à un problème qui pour beaucoup d'entre nous, nous ronge!

Premièrement félicitation pour le module quick link, il est terriblement efficace!

 

D'autre part, j'ai suivi à la lettre les modifications de code que tu proposes, mais pour ma part rien ne s'affiche et firebug ne détecte même pas la présence du <p class="colors">...

Je suis sous la dernière version stable de prestashop.

 

D'autre part, petite curiosité personnelle, où indique t'on que l'on souhaite récupérer les coloris sur un hover?

Je ne comprends pas car je ne vois qu'un "onclick" et pas de "onMouseover" mais après moi et le javascript...

 

Merci grandement pour ton aide en tout cas.

 

Cordialement.

 

Vous pouvez consultez ma page : http://www.litolita.fr/shop/2-femme

Link to comment
Share on other sites
  • 2 weeks later...
  • 1 month later...
  • 3 months later...
AkrOpad Newbie

AkrOpad

Posted
Posted (edited)

Bonjour,

 

Si cela peut aider pour afficher la liste des couleurs dans la liste des produits !

 

 

Test sous Prestashop :

 

- 1.5.0.17

- 1.5.1

- 1.5.2

 

 

Dans override/classes/ éditez le fichier Product.php

Copiez ceci dans Product.php :

 

<?php
class Product extends ProductCore
{
public static function getProductProperties($id_lang, $row, Context $context = null)
{
	if (!$row['id_product'])
		return false;
	if ($context == null)
		$context = Context::getContext();
	// Product::getDefaultAttribute is only called if id_product_attribute is missing from the SQL query at the origin of it:
	// consider adding it in order to avoid unnecessary queries
	$row['allow_oosp'] = Product::isAvailableWhenOutOfStock($row['out_of_stock']);
	if (Combination::isFeatureActive() && (!isset($row['id_product_attribute']) || !$row['id_product_attribute'])
		&& ((isset($row['cache_default_attribute']) && ($ipa_default = $row['cache_default_attribute']) !== null)
			|| ($ipa_default = Product::getDefaultAttribute($row['id_product'], !$row['allow_oosp']))))
		$row['id_product_attribute'] = $ipa_default;
	if (!Combination::isFeatureActive() || !isset($row['id_product_attribute']))
		$row['id_product_attribute'] = 0;
	// Tax
	$usetax = Tax::excludeTaxeOption();
	$cache_key = $row['id_product'].'-'.$row['id_product_attribute'].'-'.$id_lang.'-'.(int)$usetax;
	if (isset($row['id_product_pack']))
		$cache_key .= '-pack'.$row['id_product_pack'];
	if (isset(self::$producPropertiesCache[$cache_key]))
		return self::$producPropertiesCache[$cache_key];
	// Datas
	$row['category'] = Category::getLinkRewrite((int)$row['id_category_default'], (int)$id_lang);
	$row['link'] = $context->link->getProductLink((int)$row['id_product'], $row['link_rewrite'], $row['category'], $row['ean13']);
	$row['attribute_price'] = 0;
	if (isset($row['id_product_attribute']) && $row['id_product_attribute'])
		$row['attribute_price'] = (float)Product::getProductAttributePrice($row['id_product_attribute']);
	$row['price_tax_exc'] = Product::getPriceStatic(
		(int)$row['id_product'],
		false,
		((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
		(self::$_taxCalculationMethod == PS_TAX_EXC ? 2 : 6)
	);
	if (self::$_taxCalculationMethod == PS_TAX_EXC)
	{
		$row['price_tax_exc'] = Tools::ps_round($row['price_tax_exc'], 2);
		$row['price'] = Product::getPriceStatic(
			(int)$row['id_product'],
			true,
			((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
			6
		);
		$row['price_without_reduction'] = Product::getPriceStatic(
			(int)$row['id_product'],
			false,
			((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
			2,
			null,
			false,
			false
		);
	}
	else
	{
		$row['price'] = Tools::ps_round(
			Product::getPriceStatic(
				(int)$row['id_product'],
				true,
				((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
				2
			),
			2
		);
		$row['price_without_reduction'] = Product::getPriceStatic(
			(int)$row['id_product'],
			true,
			((isset($row['id_product_attribute']) && !empty($row['id_product_attribute'])) ? (int)$row['id_product_attribute'] : null),
			6,
			null,
			false,
			false
		);
	}
	$row['reduction'] = Product::getPriceStatic(
		(int)$row['id_product'],
		(bool)$usetax,
		(int)$row['id_product_attribute'],
		6,
		null,
		true,
		true,
		1,
		true,
		null,
		null,
		null,
		$specific_prices
	);
	$row['specific_prices'] = $specific_prices;
	if ($row['id_product_attribute'])
	{
		$row['quantity_all_versions'] = $row['quantity'];
		$row['quantity'] = Product::getQuantity(
			(int)$row['id_product'],
			$row['id_product_attribute'],
			isset($row['cache_is_pack']) ? $row['cache_is_pack'] : null
		);
	}
	else
		$row['quantity'] = Product::getQuantity((int)$row['id_product']);
	$row['id_image'] = Product::defineProductImage($row, $id_lang);
	$row['features'] = Product::getFrontFeaturesStatic((int)$id_lang, $row['id_product']);
	$row['attachments'] = array();
	if (!isset($row['cache_has_attachments']) || $row['cache_has_attachments'])
		$row['attachments'] = Product::getAttachmentsStatic((int)$id_lang, $row['id_product']);
	$row['virtual'] = ((!isset($row['is_virtual']) || $row['is_virtual']) ? 1 : 0);
	// ajout pour les couleur dans la liste des produits
	$colors = array();
	  $groupcolor = 1;
	  /* O pour afficher aussi les produits hors stock*/
	  $prodquantity = 0;
	  $attributesGroups = Db::getInstance()->ExecuteS('
	  SELECT pai.`id_image`, ag.`id_attribute_group`, ag.`is_color_group`, agl.`name` AS group_name, agl.`public_name` AS public_group_name, a.`id_attribute`, al.`name` AS attribute_name,
	  a.`color` AS attribute_color, pa.`id_product_attribute`, pa.`quantity`, pa.`price`, pa.`ecotax`, pa.`weight`, pa.`default_on`, pa.`reference`, pa.`unit_price_impact`, pa.`minimal_quantity`
	  FROM `' . _DB_PREFIX_ . 'product_attribute` pa
	  LEFT JOIN `' . _DB_PREFIX_ . 'product_attribute_combination` pac ON pac.`id_product_attribute` = pa.`id_product_attribute`
	  LEFT JOIN `' . _DB_PREFIX_ . 'product_attribute_image` pai ON pai.`id_product_attribute` = pa.`id_product_attribute`
	  LEFT JOIN `' . _DB_PREFIX_ . 'attribute` a ON a.`id_attribute` = pac.`id_attribute`
	  LEFT JOIN `' . _DB_PREFIX_ . 'attribute_group` ag ON ag.`id_attribute_group` = a.`id_attribute_group`
	  LEFT JOIN `' . _DB_PREFIX_ . 'attribute_lang` al ON a.`id_attribute` = al.`id_attribute`
	  LEFT JOIN `' . _DB_PREFIX_ . 'attribute_group_lang` agl ON ag.`id_attribute_group` = agl.`id_attribute_group`
	  WHERE pa.`id_product` =  '.(int)$row['id_product'].'
	  AND al.`id_lang` =  '.(int)($id_lang).'
	  AND agl.`id_lang` = '.(int)($id_lang).'
	  AND ag.`is_color_group` = '.$groupcolor.'
	  AND pa.quantity >= '.$prodquantity.'
	  GROUP BY id_attribute
	  ');
	  if (Db::getInstance()->numRows())
	  {
	   foreach ($attributesGroups AS $k => $rowcolo)
	   {
			// Color management
			if (isset($rowcolo['attribute_color']) AND $rowcolo['attribute_color'] )
			{
			 $colors[$rowcolo['id_attribute']]['value'] = $rowcolo['attribute_color'];
			 $colors[$rowcolo['id_attribute']]['name']  = $rowcolo['attribute_name'];
			 $colors[$rowcolo['id_attribute']]['id_image']  =(($rowcolo['id_image'] != NULL) ? intval($rowcolo['id_image']) : -1);
			}
	   }
	  }
	$row['colors'] = $colors;
	// Pack management
	$row['pack'] = (!isset($row['cache_is_pack']) ? Pack::isPack($row['id_product']) : (int)$row['cache_is_pack']);
	$row['packItems'] = $row['pack'] ? Pack::getItemTable($row['id_product'], $id_lang) : array();
	$row['nopackprice'] = $row['pack'] ? Pack::noPackPrice($row['id_product']) : 0;
	if ($row['pack'] && !Pack::isInStock($row['id_product']))
		$row['quantity'] = 0;
	self::$producPropertiesCache[$cache_key] = $row;
	return self::$producPropertiesCache[$cache_key];
}
}
?>

 

 

Et Copiez ceci dans themes/votre_theme/product-list.tpl :

Remplacer le code de l’image par celui-ci :

 

<img id="img_{$product.id_product}" src="{$link->getImageLink($product.link_rewrite, $product.id_image)}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" height="{$homeSize.height}" width="{$homeSize.width}" />

 

 

et

 

{if isset($product.colors) && $product.colors}
			<!-- colors -->
				<p>
					{foreach from=$product.colors key='id_attribute' item='color'}
							<a id="{$product.id_product}-{$color.id_image}" class="color_pick" onclick="document.getElementById('img_{$product.id_product}').src='{$img_prod_dir}{$product.id_product}-{$color.id_image}.jpg'">
							 <img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" />
					 </a>
					{/foreach}
					</p>
			{/if}

Edited by AkrOpad (see edit history)
Link to comment
Share on other sites
Enduro Newbie

Enduro

Posted
Posted

Bonjour,

 

Akropad j'ai essayé ton code sa ne fonctionne pas (presta 1.4.6.2).

 

OEB Solutions, j'ai essayé ton code, c'est presque bon mais les images ne se change pas (j'ai le titre du produit mais pas l'image).

 

Le code que j'ai mis (ton code) voir en fin de page de ce topic ou je n'ai pas eu de réponse snif.

 

http://www.prestashop.com/forums/topic/106880-astuce-afficher-la-liste-des-couleurs-dans-la-liste-des-produits-survol/page__st__20

 

Si vous pouvez m'aider se serait sympa.

 

Merci.

Link to comment
Share on other sites
mklcohen Newbie

mklcohen

Posted
Posted

Bonjour,

je tenais juste a signaler que le module ne fonctionne pas en version 1.4.9.0

j'ai le module installé sur un site en version 1.4.6.2 et marche mais une fois la migration faite il ne fonctionne plus (test en local)

si vous avez une solution je suis preneur

 

je parle du module vendu par ether creations

 

qui est hover_pl_taille , achetez sur le site prestatoolbox.com

Link to comment
Share on other sites
  • 8 years later...

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