Jump to content

[SOLUCIONADO] Añadir icono carro de la compra en productos destacados

Leppardweb

By Leppardweb
in Discusión general

 Share

Recommended Posts

Leppardweb Newbie

Leppardweb

Posted
Posted (edited)

Buenas tardes a todos,

He estado configurando/modificando la apariencia del modulo de productos destacados con la ayuda de las entradas del foro que trataban este tema (numero de filas, tamaño las imagenes, incluir el boton de añadir al carro, ...) todo perfecto siguiendo las instrucciones de los maestros.
Pero me ha surgido un problema para el que no he encontrado ayuda en las entradas ya existentes del foro, por lo que me he decidido a abrir un nuevo tema.

El caso es el siguiente:

Quiero incluir en los productos destacados el icono que aparece junto al botón de "añadir al carrito" tal cual aparece el la lista de productos.

post-451621-0-94720800-1376764609_thumb.gif

Toda ayuda será bienvenida.

La url de la tienda:http://www.manualidadeslacajita.es

Uso prestashop 1.5.2.0 con la plantilla por defecto duplicada (es decir, dupliqué la plantilla por defecto y sobre ella realizo todos los cambios/modificaciones).

Muchas gracias y un saludo a todos.

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

Leppardweb

Posted
  • Author
Posted

Sigo realizando pruebas pero mis conocimientos de css son muy muy limitados y voy dando palos de ciego.

 

He probado a copiar la parte que gestiona el icono que necesito del product_list.css:

 

#product_list li .ajax_add_to_cart_button span {
 display: block;
 position: absolute;
 top: -1px;
 left: -12px;
 height: 26px;
 width: 26px;
 background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}

 

en el homefeatured.css de esta forma:

 

#featured-products_block_center li .ajax_add_to_cart_button span {
display: block;
position: absolute;
top: -1px;
left: -12px;
height: 26px;
width: 26px;
background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}

 

pero no ha funcionado.

 

Seguramente lo que he intentado sea un sacrilegio de código y habrá que modificar algo también en el homefeatured.tpl, pero se me acaban las ideas.

 

A ver si a alguien se le ha planteado el mismo caso y comparte como lo solucionó.

 

Gracias a tod@s

Link to comment
Share on other sites
Leppardweb Newbie

Leppardweb

Posted
  • Author
Posted

Buenas emarsax,

 

Imagino que te refieres a copiar una imagen sobre otra, no? El problema es que por una parte está el botón de "añadir al carrito" que sí he conseguido incluir en el homefeatured (por defecto no aparece) pero el icono que aparece sobre ese botón se gestiona por separado, al menos así se ve en el product list.

 

Supongo que será cuestión de clases/variables (perdón por la definición si no identifican así)

.ajax_add_to_cart_button span

que si se aplica en

#product_list li

pero no en

#featured-products_block_center li

 

Sigo investigando, pero lo veo complicado.

 

Muchas gracias.

Link to comment
Share on other sites
Leppardweb Newbie

Leppardweb

Posted
  • Author
Posted

Sigo en ello... creo que el fallo puede estar al especificar la ruta de la imagen de fondo del icono

background: url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent

que copié tal cual desde el 

 product_list.css

al 

 homefeatured.css

el primero esta dentro de 

 themes/miplantilla/css

y el segundo en

modules/homefeatured

por lo que imagino que las rutas relativas no podrán ser las mismas. La pregunta es ¿cómo puedo indicar la ruta relativa desde el css de la carpeta de un modulo al directorio de imagenes de mi plantilla?

He intentado buscar información sobre la gestión de las rutas relativas en css pero no me aclaro.

¿Alguna sugerencia?

 

Muchas gracias.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted (edited)

Yo te digo como dejarlo así:

 

Te he puesto un ejemplo para Prestashop 1.5.4.1, con las 4 columnas de los productos.

 

Adjunto Imagen

 

ficheroweb.png

 

Ya usted lo adapta a sus necesidades y varia los margenes según su necesidad.

 

Este ejemplo esta basado en Prestashop 1.5.4.1

 

He accedido al fichero:

 

/themes/default/modules/homefeatured/homefeatured.tpl

 

He buscado esto:

 

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

 

Y lo he dejado asi:

 

 

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}<span></span></a>

 

Despues, he ido al fichero:

 

/modules/homefeatured/homefeatured.css

 

Y he realizado un override del fichero, es decir copiar esto:

 

/modules/homefeatured/homefeatured.css

 

Aquí:

 

/themes/default/css/modules/homefeatured/homefeatured.css (La estructura de carpetas la puedes crear sin problemas)

 

Tambien, vamos a copiar esto:

 

/modules/homefeatured/img/

 

Aquí:

 

/themes/default/css/modules/homefeatured/img/

 

Ahora abrimos el fichero:

 

/themes/default/css/modules/homefeatured/homefeatured.css

 

Esto:

 

#featured-products_block_center li .ajax_add_to_cart_button
display:none;
}

 

Lo he dejado así:

 

#featured-products_block_center li .ajax_add_to_cart_button
{
margin-top:10px;
padding-left:18px;
text-align:center;
width:88px;
}

 

Y despues en el mismo fichero, he añadido lo siguiente:

 

#featured-products_block_center li .ajax_add_to_cart_button span {
display: block;
position: absolute;
top: -1px;
left: -12px;
height: 26px;
width: 26px;
background: url('../../../img/icon/pict_add_cart.png') no-repeat 0 0 transparent;
}

Edited by nadie (see edit history)
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Yo te digo como dejarlo así:

 

Te he puesto un ejemplo para Prestashop 1.5.4.1, con las 4 columnas de los productos.

 

Adjunto Imagen

 

ficheroweb.png

 

Ya usted lo adapta a sus necesidades y varia los margenes según su necesidad.

 

Este ejemplo esta basado en Prestashop 1.5.4.1

 

He accedido al fichero:

 

/themes/default/modules/homefeatured/homefeatured.tpl

 

He buscado esto:

 

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}</a>

 

Y lo he dejado asi:

 

 

<a class="exclusive ajax_add_to_cart_button" rel="ajax_id_product_{$product.id_product}" href="{$link->getPageLink('cart')}?qty=1&id_product={$product.id_product}&token={$static_token}&add" title="{l s='Add to cart' mod='homefeatured'}">{l s='Add to cart' mod='homefeatured'}<span></span></a>

 

Despues, he ido al fichero:

 

/modules/homefeatured/homefeatured.css

 

Y he realizado un override del fichero, es decir copiar esto:

 

/modules/homefeatured/homefeatured.css

 

Aquí:

 

/themes/default/css/modules/homefeatured/homefeatured.css (La estructura de carpetas la puedes crear sin problemas)

 

Tambien, vamos a copiar esto:

 

/modules/homefeatured/img/

 

Aquí:

 

/themes/default/css/modules/homefeatured/img/

 

Ahora abrimos el fichero:

 

/themes/default/css/modules/homefeatured/homefeatured.css

 

Esto:

 

#featured-products_block_center li .ajax_add_to_cart_button
display:none;
}

 

Lo he dejado así:

 

#featured-products_block_center li .ajax_add_to_cart_button
{
margin-top:10px;
padding-left:18px;
text-align:center;
width:88px;
}

 

Y despues en el mismo fichero, he añadido lo siguiente:

 

#featured-products_block_center li .ajax_add_to_cart_button span {
display: block;
position: absolute;
top: -1px;
left: -12px;
height: 26px;
width: 26px;
background: url('../../../img/icon/pict_add_cart.png') no-repeat 0 0 transparent;
}

 

La notificación recibida por correo antes, borrala de tu mente y revisa ahora el mensaje modifcado.

 

Disculpa las molestias ocasionadas.

Link to comment
Share on other sites
Leppardweb Newbie

Leppardweb

Posted
  • Author
Posted

Buenas tardes Victor,

 

Muchísimas gracias por la respuesta tan clara, ilustrada y compartida de forma tan desinteresada.

 

Como soy "prestashopero" de fin de semana (voy modificando la página poco a poco en los ratos libres) en cuanto me ponga en marcha con tus indicaciones comentaré el resultado (que ya imagino que será más que satisfactorio).

 

Ya imaginaba que tendría que existir un "método" para no tener que modificar los ficheros originales de los módulos por aquello de las posibles incompatibilidades a la hora de actualizar: el override. Me pondré también manos a la obra con ello porque he modificado algún css de un par de módulos (pero lo hice en el original), así que ya tengo más trabajo.

 

Informaré de mis progresiones.

 

De nuevo reiterarte las gracias por el trabajo que realizas en el foro iluminándonos.

 

Un saludo.

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Buenas tardes Victor,

 

Muchísimas gracias por la respuesta tan clara, ilustrada y compartida de forma tan desinteresada.

 

Como soy "prestashopero" de fin de semana (voy modificando la página poco a poco en los ratos libres) en cuanto me ponga en marcha con tus indicaciones comentaré el resultado (que ya imagino que será más que satisfactorio).

 

Ya imaginaba que tendría que existir un "método" para no tener que modificar los ficheros originales de los módulos por aquello de las posibles incompatibilidades a la hora de actualizar: el override. Me pondré también manos a la obra con ello porque he modificado algún css de un par de módulos (pero lo hice en el original), así que ya tengo más trabajo.

 

Informaré de mis progresiones.

 

De nuevo reiterarte las gracias por el trabajo que realizas en el foro iluminándonos.

 

Un saludo.

 

Perfecto !

 

Ya me contaras como fue todo !

 

Saludos,

Link to comment
Share on other sites
  • 3 weeks later...
Leppardweb Newbie

Leppardweb

Posted
  • Author
Posted

Buenas tardes a tod@s, Después de un pequeño paréntesis he podido proseguir con el trabajo en la página. Siguiendo las instrucciones de Victor todo ha salido perfecto y he "solucionado" este pequeño problema, por lo que doy por cerrado el tema. Vuelvo a agradecerte las indicaciones Victor, y a toda la comunidad por compartir vuestras dudas y soluciones: buen trabajo!! Un saludo,

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Buenas tardes a tod@s, Después de un pequeño paréntesis he podido proseguir con el trabajo en la página. Siguiendo las instrucciones de Victor todo ha salido perfecto y he "solucionado" este pequeño problema, por lo que doy por cerrado el tema. Vuelvo a agradecerte las indicaciones Victor, y a toda la comunidad por compartir vuestras dudas y soluciones: buen trabajo!! Un saludo,

 

Un placer ayudarte y servirte!

 

Un saludo y recuerda que estaremos en el foro, para guiarte por este mundo oscuro y tenebroso.

 

PD: Cierro tema.

  • Like 1
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...