[Solucionado] Imagen del product.tpl (Establecer imagen de producto predeterminada)

ck-iridium · April 21, 2014

Hola, en el diseño de mi tienda he modificado el product.tpl.

Bien, lo que quiero conseguir es que dentro de la ficha de producto únicamente aparezca como foto principal la imagen que queda como portada, y he eliminado las miniaturas, vamos que solo quiero que se muestre la que indica portada y no las demás.

Mi caso es, que uso un módulo el cual muestra en una tabla todas las combinaciones con su propio botón de comprar con sus respectivas imágenes.

Me gustaría que la imagen de portada aparezca en grande y las demás únicamente en la fila de cada combinación.

Este es el código que muestra la imagen en grande:

<img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'producto')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>

El problema es que si el producto predeterminado tiene una imagen asignada, en vez de mostrarse la de portada, se muestra la de este mismo.

He notado que en el product_list.tpl, o bien mirando la lista de productos, siempre muestra la de portada, y claro he copiado el código que muestra la imagen y la he puesto en el product.tpl sustituyendo el código anterior expuesto, para así solo mostrar la imagen de portada tal y como lo hace en el product_list.tlp, pero no funciona.

Como podría hacer eso?

P.D: Uso una versión fresca de Prestashop 1.6

Gracias y saludos

Edited April 21, 2014 by ck-iridium (see edit history)

ck-iridium · May 7, 2014

bump

ck-iridium · June 16, 2014

Hola a todos, espero poder encontrar una solución a mi problema.

En el product.tpl intento modificar el código que hace aparecer la imagen, y dejar únicamente que muestre la predeterminada e ignorando las demás.

Como bien me he fijado, cuando miras una categoría y se muestran los productos (product_list.tpl), siempre muestra la de portada (predeterminada).

De ahí copio el código que muestra dicha imagen pero no funciona:

<img class="replace-2x img-responsive" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" title="{if !empty($product.legend)}{$product.legend|escape:'html':'UTF-8'}{else}{$product.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} itemprop="image" />

Alguien sabría por que no muestra la imagen predeterminada únicamente?

Saludos!

ck-iridium · June 22, 2014

bump

ck-iridium · June 22, 2014

Oye en serio que pasa con el foro?

Incluso con topics repetidos nadie hace nada?

Estoy muy decepcionado... sinceramente.

ck-iridium · December 2, 2014

Hola, quisiera eliminar las imagenes en miniatura de la pagina de producto.

Actualemte aparece la imagen predeterminada (portada) y abajo sus miniaturas.

Como e sposible hacer que unicamente muestre la predeterminada ignorando las demas?

He eliminado manualmente las miniaturas, todo ok, pero el problema viene cuando hago clic a la imagen de una combinacion, asi pues la imagen predeterminada cambia a la que hago clic.

Alguien puede ayudarme?

Saludos!

ck-iridium · December 2, 2014

Nadie es capaz de decir nada?

ck-iridium · December 2, 2014

Decepcionante...

galindogadea · December 2, 2014

No entiendo...

Pero si quieres que no se muestre el bloque de miniaturas debajo de la imagen grande, prueba en tu fichero:

/themes/plantilla/product.tpl

Comentar esto:

{*

	{if isset($images) && count($images) > 0}
				<!-- thumbnails -->
				<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
					{if isset($images) && count($images) > 2}
						<span class="view_scroll_spacer">
							<a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
								{l s='Previous'}
							</a>
						</span>
					{/if}
					<div id="thumbs_list">
						<ul id="thumbs_list_frame">
						{if isset($images)}
							{foreach from=$images item=image name=thumbnails}
								{assign var=imageIds value="`$product->id`-`$image.id_image`"}
								{if !empty($image.legend)}
									{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
								{else}
									{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
								{/if}
								<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
									<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
										<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
									</a>
								</li>
							{/foreach}
						{/if}
						</ul>
					</div> <!-- end thumbs_list -->
					{if isset($images) && count($images) > 2}
						<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
							{l s='Next'}
						</a>
					{/if}
				</div> <!-- end views-block -->
				<!-- end thumbnails -->
			{/if}
			{if isset($images) && count($images) > 1}
				<p class="resetimg clear no-print">
					<span id="wrapResetImages" style="display: none;">
						<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" data-id="resetImages">
							<i class="icon-repeat"></i>
							{l s='Display all pictures'}
						</a>
					</span>
				</p>
			{/if} *}

O en el product.css, ponerle un:

display:none

al

#thumbs_list

ck-iridium · December 11, 2014

No entiendo...

Pero si quieres que no se muestre el bloque de miniaturas debajo de la imagen grande, prueba en tu fichero:

/themes/plantilla/product.tpl

Comentar esto:

{*

	{if isset($images) && count($images) > 0}
				<!-- thumbnails -->
				<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
					{if isset($images) && count($images) > 2}
						<span class="view_scroll_spacer">
							<a id="view_scroll_left" class="" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
								{l s='Previous'}
							</a>
						</span>
					{/if}
					<div id="thumbs_list">
						<ul id="thumbs_list_frame">
						{if isset($images)}
							{foreach from=$images item=image name=thumbnails}
								{assign var=imageIds value="`$product->id`-`$image.id_image`"}
								{if !empty($image.legend)}
									{assign var=imageTitle value=$image.legend|escape:'html':'UTF-8'}
								{else}
									{assign var=imageTitle value=$product->name|escape:'html':'UTF-8'}
								{/if}
								<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
									<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}"{else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"	data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"{/if} title="{$imageTitle}">
										<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
									</a>
								</li>
							{/foreach}
						{/if}
						</ul>
					</div> <!-- end thumbs_list -->
					{if isset($images) && count($images) > 2}
						<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">
							{l s='Next'}
						</a>
					{/if}
				</div> <!-- end views-block -->
				<!-- end thumbnails -->
			{/if}
			{if isset($images) && count($images) > 1}
				<p class="resetimg clear no-print">
					<span id="wrapResetImages" style="display: none;">
						<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" data-id="resetImages">
							<i class="icon-repeat"></i>
							{l s='Display all pictures'}
						</a>
					</span>
				</p>
			{/if} *}

O en el product.css, ponerle un:

display:none

al

#thumbs_list

Te voy a dar las gracias solo por contestar.

Pero vamos que no es lo que busco.

Me refiero a que en la foto del producto, aparece la foto predeterminada del producto, y en caso de haber mas, pues muestra las miniaturas.

Pues bien, oculto las miniaturas... perfecto, pero salen las imagenes siguientes en caso de haber mas.

Quiero que unicamente muestre la imagen por defecto ( la de PORTADA ).

He logrado conseguirlo, pero el problema es que no consigo eliminar que sea linkeable.

Uso el siguiente codigo:

 <!-- Default image modification -->
{assign var='defaultImage' value=Product::getCover($product->id)}
{foreach from=$images item=productImage}
	{if $productImage.id_image == $defaultImage.id_image}
		{assign var='defaultImage_legend' value=$productImage.legend}
	{/if}
{/foreach}
<img id="defaultImage" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $defaultImage.id_image|intval, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($defaultImage_legend)}{$defaultImage_legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($defaultImage_legend)}{$defaultImage_legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" width="{$largeSize.width}" height="{$largeSize.height}"/>
<!-- /Default image modification -->

Necesito lograr que dicha imagen no sea limqueable.

He intentado poner una DIV encima, pero no funciona.

Solucion?

ventura · December 11, 2014

No sé como la imagen puede ser enlazable tal y como la tienes, a malas desenlazala con css

pointer-events: none;
cursor: default;

Edited December 11, 2014 by ventura (see edit history)

ck-iridium · January 5, 2015

No sé como la imagen puede ser enlazable tal y como la tienes, a malas desenlazala con css
pointer-events: none;
cursor: default;

Thanks! its solved!

[Solucionado] Imagen del product.tpl (Establecer imagen de producto predeterminada)

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