Incluir foto de producto en selector de color

Comunidad PrestaShop orgullosamente patrocinada por el hosting PrestaShop de FactoriaDigital con soporte y servidores en España.

Iddium

Aprendiz de Prestashop
Hola a todos , estoy haciendo una ecommerce en prestashop , y me gustaría saber si alguien sabe de código o mediante la posibilidad de un modulo , la opción de poner imagen del producto en el selector de color _

dejo una Url de demo , de lo que me gustaría conseguir .

www.tinogonzalez.com/comprar-zapatos-mujer-online/9838-sandalias-mujer-natanael.html#/color-negro/talla-35/gama-negro

Actualmente sé que tengo que modificar el codigo de product.tpl de mi tema , pero no consigo que me salga.

Espero que alguien me pueda ayudar , muchas gracias


He conseguido por código poner los productos , pero algo no hago bien deberían salir 2 colores y salen todas las combinaciones, alguien podría ayudarme ?

A continuacion les pongo el código y abajo del todo la url con el resultado obtenido :


<ul id="color_to_pick_list" class="clearfix">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{foreach from=$combination item='image' name='f_combinationImage'}
{if $previd != $image.id_image}
<li{if $group.default == $id_attribute} class="selected"{/if}>
<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background-image:url({$link->getImageLink($product->link_rewrite, $image.id_image, 'small_default')|escape:'html':'UTF-8'});width:100px;height:100px;"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"{/if}></a>
</li>
{/if}
{/foreach}
{assign var="previd" value=$image.id_image}
{/foreach}
{if ($group.default == $id_attribute)}
{$default_colorpicker = $id_attribute}
{/if}
{/foreach}
</ul>
 

Iddium

Aprendiz de Prestashop
Hola a todos , Hoy he conseguido dar un paso mas adelante, he encontrado algo por internet, y he logrado poner dos códigos diferentes , pero me siguen dando error, en uno me salen las imagenes en el selector de color , pero no las que corresponden al color pertinente;

y en el segundo código , me salen todas las fotos de los atributos , y solo tendrían que salir el blanco y el negro_

os dejo la url de ejemplo:

DEmo jakob - COLORES DE CASA


y a continuación el codigo utilizado :


<h2>PRUEBA 1</h2>
<ul id="color_to_pick_list" class="clearfix">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute name=attributes}
{assign var='id_image' value=0}
{foreach from=$combinationImages item=combinationImage name=combinations}
{if $smarty.foreach.combinations.iteration == $smarty.foreach.attributes.iteration}
{assign var='id_image' value=$combinationImage.0.id_image}
{/if}
{/foreach}
{* {assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}*}
<li{if $group.default == $id_attribute} class="selected"{/if}>
<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"
{if $id_image} style="background-image:url({$link->getImageLink($product->link_rewrite, $id_image, 'small_default')|escape:'html':'UTF-8'}); background-size:100%"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}"{* {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"{/if}*}></a>
</li>
{if ($group.default == $id_attribute)}
{$default_colorpicker = $combinationImage.0.id_image}
{/if}
{/foreach}
</ul>
<br><br><br>


<h2>PRUEBA 2</h2>
<ul id="color_to_pick_list" class="clearfix">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{foreach from=$combination item='image' name='f_combinationImage'}
{if $previd != $image.id_image}
<li{if $group.default == $id_attribute} class="selected"{/if}>
<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background-image:url({$link->getImageLink($product->link_rewrite, $image.id_image, 'small_default')|escape:'html':'UTF-8'});width:100px;height:100px;"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" {if $img_color_exists}style=""{/if}></a>
</li>
{/if}
{/foreach}
{assign var="previd" value=$image.id_image}
{/foreach}
{if ($group.default == $id_attribute)}
{$default_colorpicker = $id_attribute}
{/if}
{/foreach}
</ul>
 

Iddium

Aprendiz de Prestashop
Gracias , mi código es parte de ahí , pero llevo desde el martes esperando que me envien la confirmacion de email , para poder entrar en el foro __ y he pedido 3 veces que me reenvien la confirmacion para poder podner mi post por primera vez , 4 dias que llevo __
 

presiculebras

Aprendiz de Prestashop
Hola a todos , estoy haciendo una ecommerce en prestashop , y me gustaría saber si alguien sabe de código o mediante la posibilidad de un modulo , la opción de poner imagen del producto en el selector de color _

dejo una Url de demo , de lo que me gustaría conseguir .

www.tinogonzalez.com/comprar-zapatos-mujer-online/9838-sandalias-mujer-natanael.html#/color-negro/talla-35/gama-negro

Actualmente sé que tengo que modificar el codigo de product.tpl de mi tema , pero no consigo que me salga.

Espero que alguien me pueda ayudar , muchas gracias


He conseguido por código poner los productos , pero algo no hago bien deberían salir 2 colores y salen todas las combinaciones, alguien podría ayudarme ?

A continuacion les pongo el código y abajo del todo la url con el resultado obtenido :


<ul id="color_to_pick_list" class="clearfix">
{assign var="default_colorpicker" value=""}
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
{foreach from=$combinationImages item='combination' key='combinationId' name='f_combinationImages'}
{foreach from=$combination item='image' name='f_combinationImage'}
{if $previd != $image.id_image}
<li{if $group.default == $id_attribute} class="selected"{/if}>
<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background-image:url({$link->getImageLink($product->link_rewrite, $image.id_image, 'small_default')|escape:'html':'UTF-8'});width:100px;height:100px;"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" {if $img_color_exists}style="background: url({$img_col_dir}{$id_attribute|intval}.jpg) repeat;"{/if}></a>
</li>
{/if}
{/foreach}
{assign var="previd" value=$image.id_image}
{/foreach}
{if ($group.default == $id_attribute)}
{$default_colorpicker = $id_attribute}
{/if}
{/foreach}
</ul>
 

presiculebras

Aprendiz de Prestashop
cuando creas el color te da opción a crear texturas te preparas el archivo con la foto al mismo tamaño la subessy en vez del color te saldrá la foto que has puesto. Es así de sencillo sin tocar código.
Si lo que quieres es poner la foto de un producto en un color concreto, claro.
 
Arriba