Jump to content

Cambiar icono de los productos en el botón de añadir al carro

yerayzl
 Share

Recommended Posts

yerayzl Apprentice

yerayzl

Posted
Posted

Hola buenas, me interesa cambiar el icono de añadir al carro en la lista de productos que se cargan, se me ocurrió hacerlo con jquery. Y se ve así, que es lo que me interesa:

carro1.png.96664b04f94b3af17c60755e3ee6eddf.png

Lo que ocurre es que cuando carga más productos, lo hace desde php añadiendo al enlace la variable "?page=2" y según hay más va cambiando. Entonces el jquery no lo aplica a partir de la hoja 2 en adelante porque lo carga php. Y se ve así:

carro2.png.4094db1eb43c4caa0c3b17baa146097d.png

Como se ve en la imagen cambia el icono al original de la plantilla. Entonces he supuesto que lo mejor sería cambiarlo directamente en el archivo que lo genera. Pero no sé qué archivo es. Supongo que será la ruta: Raiz/themes/eltema/templates/catalog/

 

Pero de ahí ya no sé seguir... Si me podeis echar una mano, o si se os ocurre una alternativa, gracias.

Link to comment
Share on other sites
SAKSCM Rising Star

SAKSCM

Posted
Posted

Hola,

No se exáctamente cuando se te cambia al original yo he añadido varios productos y siempre me sale el que has puesto primero.

No obstante, por que con JQuery y no con CSS, los cambios de estilo son siempre mejor hacerlos con CSS que con cualquier otra cosa y si lo haces correctamente no debería fallar.

En cuanto al archivo php que genera la lista de productos, salvo que tu plantilla lo tenga con una estructura diferente Raiz/themes/eltema/templates/catalog/listings/product-list.tpl

Un saludo.

  • Thanks 1
Link to comment
Share on other sites
yerayzl Apprentice

yerayzl

Posted
  • Author
Posted
11 hours ago, Sakura_CM said:

Hola,

No se exáctamente cuando se te cambia al original yo he añadido varios productos y siempre me sale el que has puesto primero.

No obstante, por que con JQuery y no con CSS, los cambios de estilo son siempre mejor hacerlos con CSS que con cualquier otra cosa y si lo haces correctamente no debería fallar.

En cuanto al archivo php que genera la lista de productos, salvo que tu plantilla lo tenga con una estructura diferente Raiz/themes/eltema/templates/catalog/listings/product-list.tpl

Un saludo.

Lo que hice con jquery es lo siguiente: 

$(document).ready(function () {
  //código
    carrito();
});
//Más código...
function carrito() {
    $(".shopping-cart").remove();//elimino el carrito
    $(".tema-cart-content").html("<span class='textocarrito'><i class='fas fa-cart-plus'></i></span>");//lo reemplazo con html
    $(".tema-bt-cart").html("<span class='textocarrito'><i class='fas fa-cart-plus'></i></span>");//intenté hacerlo con esta clase que es la que se genera, pero nada
}

 

Link to comment
Share on other sites
yerayzl Apprentice

yerayzl

Posted
  • Author
Posted (edited)
1 hour ago, yerayzl said:

Lo que hice con jquery es lo siguiente: 

$(document).ready(function () {
  //código
    carrito();
});
//Más código...
function carrito() {
    $(".shopping-cart").remove();//elimino el carrito
    $(".tema-cart-content").html("<span class='textocarrito'><i class='fas fa-cart-plus'></i></span>");//lo reemplazo con html
    $(".tema-bt-cart").html("<span class='textocarrito'><i class='fas fa-cart-plus'></i></span>");//intenté hacerlo con esta clase que es la que se genera, pero nada
}

 

Vale ya lo he solucionado, el problema era que lo comprobaba cuando cargaba la página, por lo tanto cuando se generaba más código, no lo cargaba. Ahora lo compruebo cuando hace scroll. Y funciona bien. 

let lastScroll = $(window).scrollTop();
$(window).scroll(function() {
   const currentScroll = $(window).scrollTop(); 
   if (currentScroll > lastScroll){
      carrito();
   } 
   lastScroll = currentScroll <= 0 ? 0 : currentScroll;
});

 

Edited by yerayzl (see edit history)
Link to comment
Share on other sites
SAKSCM Rising Star

SAKSCM

Posted
Posted (edited)

Hola, 

Estupendo que lo hayas podido solucionar :)

De todas formas sigo sin entender por qué usar jquery cuando se puede hacer más fácil con css además de no tener que preocuparse de si carga código antes o después etc además de ser más óptimo. 

Pero si te funciona y a ti te vale así, perfecto ;)

Un saludo

 

Edited by Sakura_CM (see edit history)
Link to comment
Share on other sites
yerayzl Apprentice

yerayzl

Posted
  • Author
Posted (edited)
1 hour ago, Sakura_CM said:

Hola, 

Estupendo que lo hayas podido solucionar :)

De todas formas sigo sin entender por qué usar jquery cuando se puede hacer más fácil con css además de no tener que preocuparse de si carga código antes o después etc además de ser más óptimo. 

Pero si te funciona y a ti te vale así, perfecto ;)

Un saludo

 

Porque cambiar texto, imagen, icono (en mi caso utilizo la fuente de font awesome) en ccs creo que no se puede😅, como mucho el fondo.🤷‍♀️

Supongo que se podría ocultar el icono y cambiar la imagen de fondo o algo así...

Si quieres, puedes sugerirme como lo hiciste tú, y así lo hago con css, que así será de forma más correcta.

Edited by yerayzl (see edit history)
Link to comment
Share on other sites
SAKSCM Rising Star

SAKSCM

Posted
Posted
21 hours ago, yerayzl said:

Porque cambiar texto, imagen, icono (en mi caso utilizo la fuente de font awesome) en ccs creo que no se puede😅, como mucho el fondo.🤷‍♀️

Supongo que se podría ocultar el icono y cambiar la imagen de fondo o algo así...

Si quieres, puedes sugerirme como lo hiciste tú, y así lo hago con css, que así será de forma más correcta.

Hola,

Si se puede, para cambiar el texto puedes usar la propiedad content, la imagen/icono/texto fontawesome de los iconos está puesta de hecho con css y se puede modificar usando la propiedad content para cambiar el código del font awesome, no es necesario cambiarle la clase, solo el icono, así es como lo suelo hacer yo, salvo que no haya entendido bien tu problema y quisieras otra cosa.

CSS es potente, si se sabe usar, casi cualquier cambio estético/visual, por no decir todos, de la web, incluso ciertas animaciones, se pueden hacer usando solo css. Ahora si lo que quieres es cambiar el DOM entonces si necesitas JS, pero si no es un cambio que necesites hacer de forma dinámica (interacción del usuario/navegador) como este caso y no quieres usar CSS es mejor hacer el cambio directamente en el fichero, el código php/tpl ya que a fin de cuentas añadir código js te amplia la carga de la pagina, por muy leve que sea (sumado a todas las cargas leves hace un mucho) y te da quebraderos de cabeza a veces (como te pasó) 

No es que no puedas, ya ves que si has podido, es más que nada por optimizar y hacer buenas prácticas, pero para gustos los colores :)

Un saludo.

 

image.thumb.png.16a206ffea393a85cb96f377c6569ef5.png

Link to comment
Share on other sites
yerayzl Apprentice

yerayzl

Posted
  • Author
Posted (edited)
4 hours ago, Sakura_CM said:

Hola,

Si se puede, para cambiar el texto puedes usar la propiedad content, la imagen/icono/texto fontawesome de los iconos está puesta de hecho con css y se puede modificar usando la propiedad content para cambiar el código del font awesome, no es necesario cambiarle la clase, solo el icono, así es como lo suelo hacer yo, salvo que no haya entendido bien tu problema y quisieras otra cosa.

CSS es potente, si se sabe usar, casi cualquier cambio estético/visual, por no decir todos, de la web, incluso ciertas animaciones, se pueden hacer usando solo css. Ahora si lo que quieres es cambiar el DOM entonces si necesitas JS, pero si no es un cambio que necesites hacer de forma dinámica (interacción del usuario/navegador) como este caso y no quieres usar CSS es mejor hacer el cambio directamente en el fichero, el código php/tpl ya que a fin de cuentas añadir código js te amplia la carga de la pagina, por muy leve que sea (sumado a todas las cargas leves hace un mucho) y te da quebraderos de cabeza a veces (como te pasó) 

No es que no puedas, ya ves que si has podido, es más que nada por optimizar y hacer buenas prácticas, pero para gustos los colores :)

Un saludo.

 

image.thumb.png.16a206ffea393a85cb96f377c6569ef5.png

Hola de nuevo, siento ser tan pesado, pero quiero hacerlo de la mejor forma, como me indicas. Lo intento, comenté el JQuery y probé con css, pero se queda vacio, no sé si es eso a lo que te referías. 

785829190_Capturadepantalla2022-06-01151551.jpg.8b6cc4c2c1a7f99f142848db43454eb6.jpg

Si pongo otra cosa que no sea un icono de font awesome, si que funciona, pero me interesa ese icono...

Edited by yerayzl (see edit history)
  • Like 1
Link to comment
Share on other sites
SAKSCM Rising Star

SAKSCM

Posted
Posted
33 minutes ago, yerayzl said:

Hola de nuevo, siento ser tan pesado, pero quiero hacerlo de la mejor forma, como me indicas. Lo intento, comenté el JQuery y probé con css, pero se queda vacio, no sé si es eso a lo que te referías. 

785829190_Capturadepantalla2022-06-01151551.jpg.8b6cc4c2c1a7f99f142848db43454eb6.jpg

Si pongo otra cosa que no sea un icono de font awesome, si que funciona, pero me interesa ese icono...

Hola, 

Te falta incluir el fontawesome, posiblemente esa clase tenga otro tipo de fuente puesta.

 

image.thumb.png.989115086c363a6272bb586b609720ef.png

  • Thanks 1
Link to comment
Share on other sites
yerayzl Apprentice

yerayzl

Posted
  • Author
Posted
24 minutes ago, Sakura_CM said:

Hola, 

Te falta incluir el fontawesome, posiblemente esa clase tenga otro tipo de fuente puesta.

 

image.thumb.png.989115086c363a6272bb586b609720ef.png

Vale, ya me funciona. Muchísimas gracias por tu buena aportación.

  • Like 1
Link to comment
Share on other sites

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