Mostrar colores en lista de productos y lista de categoría

Casandra · February 21, 2017

Hola, buen día.

Tengo semanas atorada en algo que no he podido resolver aún, espero alguien pueda ayudarme.

Quisiera que en la página principal de mi tema aparecieran la lista de colores disponibles por fuera, y en la lista de categoría. Verán, tengo esa opción para cuando ponen en "Ver estilo: Lista" Pero en cuadrícula no (adjunto foto). Quisiera que se vieran en modo cuadrícula y en inicio de tema (adjunto foto en dónde me gustaría que aparecieran). He estado leyendo varios post y nada me ha funcionado

Agradecería bastante su respuesta.

Nota: No ulitilizo tema por defecto Prestashop.

En donde está lo amarillo me gustaría que aparecieran.

Rolige · February 22, 2017

Es complicado, ya que se tendria que revisar el tpl del modulo (porque supongo que sera un modulo), y debido a que es un tema personalizado lo hace aun mas.

Casandra · February 22, 2017

¿Entonces no es posible? Qué podría hacer? :/

Casandra · March 10, 2017

¿Alguien que pueda ayudarme?

SergioE · March 10, 2017

Puedes indicar la Url de tu tienda?

Casandra · March 10, 2017

Claro, es tienda.ikarus.cool

SergioE · March 10, 2017

Vale, puedes poner aquí el código de tu archivo product-list.tpl, situado en la carpeta de tu plantilla? (Ponlo usando el editor Code de la tabla que tienes justo encima de donde escribes, sale asi: <>). O pasamelo por privado si prefieres.

Saludos

Edited March 10, 2017 by SergioE (see edit history)

Casandra · March 10, 2017

Vale, puedes poner aquí el código de tu archivo product-list.tpl, situado en la carpeta de tu plantilla? (Ponlo usando el editor Code de la tabla que tienes justo encima de donde escribes, sale asi: <>). O pasamelo por privado si prefieres.

Saludos

{*
* 2007-2015 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-2015 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) && $products}
	{*define number of products per line in other page for desktop*}
	{if $page_name !='index' && $page_name !='product'}
		{assign var='nbItemsPerLine' value=3}
		{assign var='nbItemsPerLineTablet' value=2}
		{assign var='nbItemsPerLineMobile' value=3}
	{else}
		{assign var='nbItemsPerLine' value=4}
		{assign var='nbItemsPerLineTablet' value=3}
		{assign var='nbItemsPerLineMobile' value=2}
	{/if}
	{*define numbers of product per line in other page for tablet*}
	{assign var='nbLi' value=$products|@count}
	{math equation="nbLi/nbItemsPerLine" nbLi=$nbLi nbItemsPerLine=$nbItemsPerLine assign=nbLines}
	{math equation="nbLi/nbItemsPerLineTablet" nbLi=$nbLi nbItemsPerLineTablet=$nbItemsPerLineTablet assign=nbLinesTablet}
	<!-- Products list -->
	<ul{if isset($id) && $id} id="{$id}"{/if} class="product_list lablistproducts grid row{if isset($class) && $class} {$class}{/if}">
	{foreach from=$products item=product name=products}
		{math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineTablet assign=totModuloTablet}
		{math equation="(total%perLineT)" total=$smarty.foreach.products.total perLineT=$nbItemsPerLineMobile assign=totModuloMobile}
		{if $totModulo == 0}{assign var='totModulo' value=$nbItemsPerLine}{/if}
		{if $totModuloTablet == 0}{assign var='totModuloTablet' value=$nbItemsPerLineTablet}{/if}
		{if $totModuloMobile == 0}{assign var='totModuloMobile' value=$nbItemsPerLineMobile}{/if}
		<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">
			<div class="product-container item" itemscope itemtype="https://schema.org/Product">
				<div class="left-block">
					<div class="product-image-container">
						{capture name='rotatorImg'}{hook h='rotatorImg' product=$product}{/capture}
						{if $smarty.capture.rotatorImg}
							{$smarty.capture.rotatorImg}
						{else}
							<a class = "product_image" href="{$product.link|escape:'html'}" title="{$product.name|escape:html:'UTF-8'}">
								<img class="img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'large_default')|escape:'html'}" alt="{$product.name|escape:html:'UTF-8'}" />							
							</a>
						{/if}
						
						
						{if isset($product.new) && $product.new == 1}
							<span class="new-label">{l s='New'}</span>
						{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
							<span class="sale-label">{l s='Sale!'}</span>
						{/if}
						
						<div class="actions">
							<ul class="add-to-links">	
								
								{if $lab_EnableQv == 1}
									<li class="lab-quick-view">
										<a class="quick-view" href="{$product.link|escape:'html':'UTF-8'}"
											data-id-product="{$product.id_product|intval}"
											title="{l s='Quick view'}">
											<i class="icon icon-compress"></i>
										</a>
									</li>
								{/if}
								{if $lab_EnableC == 1}
									{if isset($comparator_max_item) && $comparator_max_item}
										<li class="lab-compare">	
											<a class="add_to_compare" 
												href="{$product.link|escape:'html':'UTF-8'}" 
												data-product-name="{$product.name|escape:'htmlall':'UTF-8'}"
												data-product-cover="{$link->getImageLink($product.link_rewrite, $product.id_image, 'cart_default')|escape:'html'}"
												data-id-product="{$product.id_product}"
												title="{l s='Add to Compare'}">
												
												<i class="icon icon-sliders"></i>
											</a>
										</li>
									{/if}
								{/if}
								
								{if $lab_EnableW == 1}
								<li class="lab-Wishlist">
									<a onclick="WishlistCart('wishlist_block_list', 'add', '{$product.id_product|intval}', $('#idCombination').val(), 1,'tabproduct'); return false;" class="add-wishlist wishlist_button" href="#"
									data-id-product="{$product.id_product|intval}"
									title="{l s='Add to Wishlist'}">
									<i class="icon icon-heart-o"></i></a>
								</li>
								{/if}
							</ul>
						</div>
					</div>
					{if isset($product.is_virtual) && !$product.is_virtual}{hook h="displayProductDeliveryTime" product=$product}{/if}
					{hook h="displayProductPriceBlock" product=$product type="weight"}
				</div>
				<div class="right-block">
					<h5 itemprop="name">
						{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
							{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
						</a>
<br/>
<br/> 
                                        <p><strong> Modelo:</strong> {$product.reference} </p>
					</h5>

					{capture name='displayProductListReviews'}{hook h='displayProductListReviews' product=$product}{/capture}
					{if $smarty.capture.displayProductListReviews}
						<div class="hook-reviews">
						{hook h='displayProductListReviews' product=$product}
						</div>
					{/if}
					<p class="product-desc" itemprop="description">
						{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
					</p>
					{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)}
                            {hook h="displayProductPriceBlock" product=$product type='before_price'}
							<span class="price">
								{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}
							</span>
							{if isset($product.specific_prices) && $product.specific_prices && isset($product.specific_prices.reduction) && $product.specific_prices.reduction > 0}
								{hook h="displayProductPriceBlock" product=$product type="old_price"}
								<span class="old-price product-price">
									{displayWtPrice p=$product.price_without_reduction}
								</span>
								{hook h="displayProductPriceBlock" id_product=$product.id_product type="old_price"}
								<!-- {if $product.specific_prices.reduction_type == 'percentage'}
									<span class="price-percent-reduction">-{$product.specific_prices.reduction * 100}%</span>
								{/if} -->
							{/if}
							{hook h="displayProductPriceBlock" product=$product type="price"}
							{hook h="displayProductPriceBlock" product=$product type="unit_price"}
                            {hook h="displayProductPriceBlock" product=$product type='after_price'}
						{/if}
					</div>
					{/if}
					{if isset($product.color_list)}
						<div class="color-list-container">{$product.color_list}</div>
					{/if}
					<div class="product-flags">
						{if (!$PS_CATALOG_MODE AND ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
							{if isset($product.online_only) && $product.online_only}
								<span class="online_only">{l s='Online only'}</span>
							{/if}
						{/if}
						{if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price && !$PS_CATALOG_MODE}
							{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}
					</div>
					{if (!$PS_CATALOG_MODE && $PS_STOCK_MANAGEMENT && ((isset($product.show_price) && $product.show_price) || (isset($product.available_for_order) && $product.available_for_order)))}
						{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}
							<span class="availability">
								{if ($product.allow_oosp || $product.quantity > 0)}
									<span class="{if $product.quantity <= 0 && isset($product.allow_oosp) && !$product.allow_oosp} label-danger{elseif $product.quantity <= 0} label-warning{else} label-success{/if}">
										{if $product.quantity <= 0}{if $product.allow_oosp}{if isset($product.available_later) && $product.available_later}{$product.available_later}{else}{l s='In Stock'}{/if}{else}{l s='Out of stock'}{/if}{else}{if isset($product.available_now) && $product.available_now}{$product.available_now}{else}{l s='In Stock'}{/if}{/if}
									</span>
								{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}
									<span class="label-warning">
										{l s='Product available with different options'}
									</span>
								{else}
									<span class="label-danger">
										{l s='Out of stock'}
									</span>
								{/if}
							</span>
						{/if}
					{/if}
					<div class="lab-cart">
						{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 btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}"
									data-id-product="{$product.id_product|intval}"
									title="{l s='Add to cart' mod='labtabproductslider'}" >
										<i class="icon icon_bag_alt"></i>
										<span>{l s='Add to cart'}</span>
									</a>
								{else}
									<a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart',false, NULL, "add=1&id_product={$product.id_product|intval}&token={$static_token}", false)|escape:'html':'UTF-8'}"
									data-id-product="{$product.id_product|intval}"
									title="{l s='Add to cart' mod='labtabproductslider'}">
										<i class="icon icon_bag_alt"></i>
										<span>{l s='Add to cart'}</span>
									</a>
								{/if}						
							{else}
								<span class="button ajax_add_to_cart_button btn btn-default disabled">
									<i class="icon icon_bag_alt"></i>
									<span>{l s='Add to cart'}</span>
								</span>
							{/if}
						{/if}
					</div>
				</div>
			</div><!-- .product-container> -->
		</li>
	{/foreach}
	</ul>
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}
{/if}

Aquí tienes el código, gracias!

SergioE · March 12, 2017

Enseñame tambien el product-list-colors.tpl

Edited March 12, 2017 by SergioE (see edit history)

Casandra · March 13, 2017

Enseñame tambien el product-list-colors.tpl

{*
* 2007-2015 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-2015 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($colors_list)}
<ul class="color_to_pick_list clearfix">
	{foreach from=$colors_list item='color'}
		{if isset($col_img_dir)}
			{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$color.id_attribute|cat:'.jpg')}
			<li>
				<a href="{$link->getProductLink($color.id_product, null, null, null, null, null, $color.id_product_attribute, Configuration::get('PS_REWRITING_SETTINGS'), false, true)|escape:'html':'UTF-8'}" id="color_{$color.id_product_attribute|intval}" class="color_pick"{if !$img_color_exists && isset($color.color) && $color.color} style="background:{$color.color};"{/if}>
					{if $img_color_exists}
						<img src="{$img_col_dir}{$color.id_attribute|intval}.jpg" alt="{$color.name|escape:'html':'UTF-8'}" title="{$color.name|escape:'html':'UTF-8'}" width="20" height="20" />
					{/if}
				</a>
			</li>
		{/if}
	{/foreach}
</ul>
{/if}

Aquí tienes

SergioE · March 13, 2017

Son los .tpl de tu plantilla no? El código esta bien, quizás es tema CSS o JS.

Casandra · March 13, 2017

Son los .tpl de tu plantilla no? El código esta bien, quizás es tema CSS o JS.

Sí, son de la plantilla. Otra cosa es que tengo que vacíar caché constantemente para que aparezcan los colores en modo lista :/

SergioE · March 13, 2017

Si quieres, te lo puedo mirar con mas profundidad dándome acceso a los archivos por FTP. Si lo deseas ábreme por privado.

Saludos!

Edited March 13, 2017 by SergioE (see edit history)

Casandra · March 14, 2017

Si quieres, te lo puedo mirar con mas profundidad dándome acceso a los archivos por FTP. Si lo deseas ábreme por privado.

Saludos!

Gracias, pero creo que mejor compraré el módulo Color Picket sin tanto rodeo, y me sirve mucho más. Muchas gracias por tu ayuda!

Mostrar colores en lista de productos y lista de categoría

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in