[Solucionado] Mostrar nombre color de los atributos en la ficha del producto

[Oncle]

Hola de nuevo, estoy buscando como colocar el nombre del color seleccionado del producto al lado de donde dice "Color". He visto algunas respuestas, y las que parece que funcionan ya están cerrados los temas sin poder ver la solución.

Alguno de vosotros me podéis ayudar? de momento he llegado hasta product.tpl y el código a insertar es:

{$colors.$id_attribute.name}

Pero no lo hago bien.

Gracias.

[Wartin]

Hola! No traigo la respuesta, pero tal vez ayude.

Al apretar un botón de color ejecuta una función en javascript (en niara/js/product.js), usando el depurador de firefox (f12, pero con control-shift-c podés marcar un color y ves qué se ejecutaría de apretarse, donde dice 'event') veo esto:

function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
}

Si querés escribir el color vas a tener que buscar qué botón se apreta y reescribir el

<label class="attribute_label">Color&nbsp;</label>

para que diga el color al lado.

Ojalá sirva. Saludos!

[Oncle]

Hola Wartin, gracias por tu respuesta, pero no me funciona. Estoy haciendo la modificación directamente desde el depurador y no va. Además estoy usando la plantilla por defecto y no encuentro en el archivo products.js la parte a modificar, cosa que si veo en el depurador. Es raro.

[Wartin]

Es que necesitás hacer un par de cosas. Primero agregar en la función esa algo que modifique la línea del Label.

Acá hice una prueba, en el template del productos (themes/niara/products.tpl) agregué un ID para la etiqueta, para que muestre:

<label id="tin" class="attribute_label">color!</label>

Y después la parte de JS, en el archivo themes/niara/js/product.js  línea 355, puse esto

 

$(document).on('click', '.color_pick', function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
  document.getElementById('tin').innerHTML = 'color!';
});

 

La última línea hace q al apretar el color cambie la etiqueta. Te falta nomás que, en vez de "color!" escriba el color que apretaste, que creo q es el dato que tenías en el comienzo.

Saludos

[Oncle]

Hola Wartin, he realizado esto:

product.tpl 

  <label id="tin" class="attribute_label">{$colors.$id_attribute.name}</label>

product.js

$(document).on('click', '.color_pick', function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
  document.getElementById('tin').innerHTML = $('colors.$id_attribute.name!');
});

Pero no va. Perdona el abuso.

[Oncle]

Por cierto, estoy usando la plantilla community-theme-default y me dirijo a los archivos .tpl y .js de esta plantilla

[Wartin]

Je, tuvimos suerte, me salió.

 

En el products.js andá a la función que estábamos editando y:

$(document).on('click', '.color_pick', function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
  document.getElementById('colorlabel').innerHTML = 'Color: ' + decodeURIComponent(tabValues[0][2]);
});

 

Y en el .tpl de tu tema agregá el id="colorlabel" donde querés escribir.

 

No era tan simple, el decodeURI lee la dirección, que si te fijás cuando cambia de color aparece otra. En mi caso agrega: #/30-color-azul cuando apreto azul.

 

lo descubrí mirando un poco más abajo, en la función checkUrl()

Saludos

 

PD: tené en cuenta que estamos agregando a los atributos ese ID. Si tuvieses más de un atributo (talle, por ejemplo) tal vez no deberíamos usar el ID ahi mismo, sino buscar quién está sobre el "color_to_pick_list".

PD2: probé cambiar los archivos en mi tienda y funciona al segundo clic. Supongo que tendrás que seguir buscando cuándo escribir bien el label. Pero lo bueno es que ya tenés el string del color.

Edited June 8, 2020 by Wartin
agregar PD

[Oncle]

Bueno, parece que me voy acercando (pero hago algo mal). te adjunto imagen tal y como queda ahora.El color seleccionado no es realmente el que elijo, sale el de al lado :))

He hecho esto:

product.tpl

<label id="colorlabel" class="attribute_label"></label>

product.js

$(document).on('click', '.color_pick', function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
  document.getElementById('colorlabel').innerHTML = 'Color: ' + decodeURIComponent(tabValues[0][2]);

[Oncle]

Hola Wartin, me he dado cuenta que no sale el nombre del color de al lado, sale el anterior que se ha seleccionado. Primera vez, seleccionas amarillo y no sale nada, después seleccionas rojo y sale amarillo, seleccionas verde y sale rojo. Raro, no?

gracias por tu tiempo.

[Wartin]

Exacto, eso es lo que agregué en la segunda Post Data. Toma el color de la dirección del producto. por eso anda cuando hacés clic dos veces, porque lo toma de ahi. Fijate que en tu Tema no tenés que poner "Color:", sino solo

  document.getElementById('colorlabel').innerHTML = decodeURIComponent(tabValues[0][2]);

 

Entonces vas a tener que seguir buscando, quién es la función que actualiza el URL del producto. Esa función es la que tiene q ejecutar esa línea de acá arriba.

 

[Oncle]

Hola Wartin, he encontrado esto en foro prestashop:

Hi, i think that i solved with this solution for 1.6.0.14:

 

1) add in product.tpl this code where you want to display color label

{if $group.group_type == 'color'}<span id="selectedCmb"></span>{/if} 

2) Add js code for an additional action in yourtheme/js/product.js , only the line with comment ([HACK])

$(document).on('click', '.color_pick', function(e){
		e.preventDefault();
		colorPickerClick($(this));
		getProductAttribute();
                $("#selectedCmb").text($(this).attr('name'));// display color label [HACK]
	}); 

Work very well in my site 

Es prácticamente igual que la solución que me diste, pero ademas hay este comentario:

hm ok, probably the selected class is being changed after the text of "selectedCmb" is set. Try putting the line i posted above in 

$(window).load(function() {
  $("#selectedCmb").text($('.color_pick.selected').attr('name'));
});

All the $(window).load function does is execute whatever is in it AFTER everything lese in the page has been loaded. So what this does in your case is wait until everything else on the page has been loaded (for instance adding "selected" class to the default color) and then get that color's name to place into your text element.

A pesar de estos comentarios, tampoco logro que funcione. Buff.

[Wartin]

3 hours ago, Oncle said:

$(window).load(function() {
  $("#selectedCmb").text($('.color_pick.selected').attr('name'));
});

A pesar de estos comentarios, tampoco logro que funcione. Buff.

Bueno, no veníamos mal entonces. Agregaste esas tres líneas de código en vez de una sola, entonces?

Es por ahi la cuestión, ya vas a llegar...

Suerte!

[Oncle]

Lo he hecho todo tal como comentan, pero sin resultados positivos.

Con lo que tú me comentaste, al menos salía el nombre del color, y con este no.

tengo que hacer más pruebas.

Gracias Wartin.

[Wartin]

Lo tengo!

Volvé a poner el id="colorlabel" como hicimos antes en el template.

En el JS la función queda:

$(document).on('click', '.color_pick', function(e) {
  e.preventDefault();
  colorPickerClick($(this));
  findCombination();
  getProductAttribute();
  document.getElementById('colorlabel').innerHTML = $(this).attr('title');
});

 

Ahi agarramos el 'title' de donde hacemos el clic, así no hay q esperar que cambie el URI.

Contame qué tal :)

[Oncle]

Fantástico Wartin, funciona!

no lo habría conseguido sin tu ayuda.

mil gracias compañero.