Mostrar / ocultar Divs dependiendo de la combinacion

[nersolar]

Buenos dias.

 

Estoy modificando la plantilla de mi prestashop y necesito un poco de ayuda sobre un tema ya que no domino el Javascript

 

El tema es:

Quiero que me muestre un div u otro div dependiendo de la combinación del producto que elija el cliente.

 

sabemos que prestashop cambia la imagen del producto dependiendo de la combinacion, eso se puede aplicar tambien a que muestre un div u otro, supongo, el problema es que no domino javascript y no se como modificar el product.js para que cuando cambie de combinación me muestre un div u otro.

 

alguien me puede ayudar?

[nersolar]

Nadie sabe un poco de javascript?

[Diefco]

Cuando cambia de producto,en el DOM agrega alguna clase especial para ese producto o así? algo con lo que distinguir el que cambio el producto y mas... por el producto con el que quieres agregar otra cosa...

[nersolar]

Cuando cambia de producto,en el DOM agrega alguna clase especial para ese producto o así? algo con lo que distinguir el que cambio el producto y mas... por el producto con el que quieres agregar otra cosa...

 

No entiendo bien que quieres decir.

 

pero creo que quizas no me explico bien, voy a intentar explicarme mejor:

 

Cuando cambias una combinación de un producto en la pagina cambian varias cosas, la url, la imagen del producto ( en caso que tenga otra diferente ) la referencia, el precio ....

 

yo lo que quiero es que cuando apretas una combinación muestre un div cambiando el Style="display:none" de ese div. por ejemplo

 

Apretando la combinacion numero 1:

<div id="caracteristicas1" > HE ELEGIDO ESTA COMBINACIÓN </div>

<div id="caracteristicas2" style="display:none"> no he elegido esta combinacion </div>

<div id="caracteristicas3" style="display:none;"> no he elegido esta combinacion </div>

 

Apretando la combinacion numero 2:

<div id="caracteristicas1" style="display:none"> no he elegido esta combinacion </div>

<div id="caracteristicas2" > HE ELEGIDO ESTA COMBINACIÓN </div>

<div id="caracteristicas3" style="display:none;"> no he elegido esta combinacion </div>

 

Apretando la combinacion numero 3:

<div id="caracteristicas1" style="display:none"> no he elegido esta combinacion </div>

<div id="caracteristicas2" style="display:none;"> no he elegido esta combinacion </div>

<div id="caracteristicas3" > HE ELEGIDO ESTA COMBINACIÓN </div>

[ventura]

puedes hacerlo con jquery desde 

\themes\tu_tema\js\product.js

alli tienes la funcion

findCombination

desde alli puedes añadir un condicional con la id de la combinacion o la referencia para que se muestre el div al seleccionarla

$('#caracteristicas1').show()

[nersolar]

 

puedes hacerlo con jquery desde 

\themes\tu_tema\js\product.js

alli tienes la funcion

findCombination

desde alli puedes añadir un condicional con la id de la combinacion o la referencia para que se muestre el div al seleccionarla

$('#caracteristicas1').show()

Muchas gracias por la respuesta, pero sigo sin conseguir lo que quiero.

 

podrias ayudarme un poquito mas?

 

para usar la id de la combinacion he pensado en utilizar idCombination

 

pero al ponerlo dentro de una table en el product.tpl no me muestra nada

 

para mostrar las id de combinaciones he hecho esto:

 

 <table>

<thead>

     <td>Referencia</td>

      <td>id de caombinacion</td>

</thead>

<tbody>

    {foreach from=$combinations key=num item=combination}

        <tr>

             <td>{$combination.reference|escape:'html':'UTF-8'}</td>

             <td>{$combination.idCombination}</td>

       </tr>

     {/foreach}

</tbody>

</table>

 

incluso he intentado con $combination a solas, pero me devuelve String,string,string string ....

 

$combination.idCombination no me devuelve nada

$combination.idsAttributes no me devuelve nada

 

pero bueno ... pasando de eso al final he pensado en poner el $combination.reference que me devuelve la referencia de la combinacion ( cosa que es muy engorrosa porque tendria que poner un monton de codigo en el product.js )

 

he intentado poner esto en el product.js, pero no funciona, porque no tengo ni idea de javascript ....

 

function findCombination()

{

    if (combination['reference'] = BL1310)

    {

        $('#caracteristicas1').show()

    }

}

 

esto me da problemas porque nisiquiera me cambia la referencia cuando estoy dentro del producto ...

 

Siento ser tan ignorante en este tema, pero agradecería un poquitin más de ayuda por fabor.

 

muchas gracias.

[ventura]

algo asi, ho haria falta display:none en el div del .tpl

//9 ejemplo de idCombination seleccionado
selectedCombination['idCombination'] = combination['idCombination'];
if(selectedCombination['idCombination']== 9){
$('#caracteristicas1').show();
 } else {
$('#caracteristicas1').hide()
}

para ver el id de la combinacion en el div

$('#caracteristicas1').html(selectedCombination['idCombination']).show();

[nersolar]

 

algo asi, ho haria falta display:none en el div del .tpl

//9 ejemplo de idCombination seleccionado
selectedCombination['idCombination'] = combination['idCombination'];
if(selectedCombination['idCombination']== 9){
$('#caracteristicas1').show();
 } else {
$('#caracteristicas1').hide()
}

para ver el id de la combinacion en el div

$('#caracteristicas1').html(selectedCombination['idCombination']).show();

Muchissimas gracias por tu atención

 

Disculpa mi gnorancia para aplicar el codigo que me facilitas, pero no me funciona por muchas vueltas que le doy, he provado 1000 maneras distintas de aplicar el codigo pero ... no puedo ver ni el numero de combinacion seleccionado en el <div id="caracteristicas1" style="display:none;">hola</div> que tengo puesto en el product.tpl

 

he puesto $('#caracteristicas1').html(selectedCombination['idCombination']).show(); dentro de function findCombination() en el archivo product.js.

 

y tampoco me funciona esto porque dejan de funcionar las combinaciones ....

 

selectedCombination['idCombination'] = combination['idCombination'];

if(selectedCombination['idCombination']== X){

$('#caracteristicas1').show();

} else {

$('#caracteristicas1').hide()

}

 

dentro de la función function findCombination().

[ventura]

Creo que no he llegado a enterar del todo, de la finalidad de lo que quieres hacer, o de la limitacion que quieres hacer. Te pongo ejemplo, si quieres limitar un contenido de un dv u otro elemento en determinada combinacion, edita el product.js, en esta parte

//get the data of product with these attributes
quantityAvailable = combination['quantity'];

debajo añade esto para condicionar a la combinacion con id (id 1 por ejemplo) pero que te permita visualizar en las demas su id para poder adaptar el codigo

  selectedCombination['idCombination'] = combination['idCombination'];
if (selectedCombination['idCombination'] == 1){
$('#show_div_content').text('contenido del div en la combinacion ').append(selectedCombination['idCombination']).show();
 } else {
$('#show_impact_price').text('contenido del div en otra combinacion').append(selectedCombination['idCombination']).show();

el resultado si añades un div nombrado como  en el js sera el de la imagen, 

<div id="show_div_content"></div> 

hazlo asi para ir probando y hacer lo que necesitas

[nersolar]

Creo que no he llegado a enterar del todo, de la finalidad de lo que quieres hacer, o de la limitacion que quieres hacer. Te pongo ejemplo, si quieres limitar un contenido de un dv u otro elemento en determinada combinacion, edita el product.js, en esta parte

//get the data of product with these attributes
quantityAvailable = combination['quantity'];

debajo añade esto para condicionar a la combinacion con id (id 1 por ejemplo) pero que te permita visualizar en las demas su id para poder adaptar el codigo

  selectedCombination['idCombination'] = combination['idCombination'];
if (selectedCombination['idCombination'] == 1){
$('#show_div_content').text('contenido del div en la combinacion ').append(selectedCombination['idCombination']).show();
 } else {
$('#show_impact_price').text('contenido del div en otra combinacion').append(selectedCombination['idCombination']).show();

el resultado si añades un div nombrado como  en el js sera el de la imagen, 

<div id="show_div_content"></div> 

hazlo asi para ir probando y hacer lo que necesitas

muchas gracias por tu ayuda, probaré a ver que tal me va con eso.

 

La finalidad de lo que yo quiero es que cuando aprieten sobre una combinación aparezca un div, debajo en la descripción del producto con las características técnicas del producto, se que hay un apartado donde puedes poner características del producto, pero según las combinaciones de los productos que yo tengo cambian, y dentro de un producto hay diferentes potencias por ejemplo.

 

por eso te decía de cambiar un div por otro, porque yo puedo programar en un *.tpl un div con tooodas las características para cada combinación, y según la combinación que elija el cliente quiero que se vea un div u otro.

[nersolar]

FUNCIONA!!!

 

Finalmente funciona correctamente!

 

he puesto este codigo

selectedCombination['idCombination'] = combination['idCombination'];
if(selectedCombination['idCombination']== 321){
$('#caracteristicas1').show();
} else {
$('#caracteristicas1').hide()
}

para ver la ID de la combinación he utilizado:

else {
$('#show_impact_price').text('Numero de la combinacion:').append(selectedCombination['idCombination']).show();
}

Ahora a ver como me lo monto para no poner 50 mil condicionantes en el product.js ....

Edited July 18, 2016 by nersolar (see edit history)

[ventura]

No entiendo el codigo que has puesto, estas mezclando jquery con js cuando puedes hacerlo todo con jquery simple. Hazlo mejor con condicionales if/else if/ else

http://www.w3schools.com/js/js_if_else.asp

[nersolar]

No entiendo el codigo que has puesto, estas mezclando jquery con js cuando puedes hacerlo todo con jquery simple. Hazlo mejor con condicionales if/else if/ else

http://www.w3schools.com/js/js_if_else.asp

EIII

 

perdona he editado el mensaje anterior en vez de poner un nuevo mensaje .... Lo siento

 

ahora que lo he conseguido en principio podría ir haciendo algo así .... pero no se si hay alguna forma mas eficiente, ideas tengo, pero no se como ponerlo en practica, por ahora voy tirando con esto:

 

El problema esta en que tengo 50 mil condicionantes y 50 mil divs ....

if(selectedCombination['idCombination']==521|| selectedCombination['idCombination']==520){
	$('#caracteristicas2').hide();
	$('#caracteristicas3').hide();
	$('#caracteristicas4').hide();
	$('#caracteristicas5').hide();
	$('#caracteristicas6').hide();
	$('#caracteristicas7').hide();
	$('#caracteristicas8').hide();
	$('#caracteristicas9').hide();
	$('#caracteristicas10').hide();
	$('#caracteristicas1').show();
} 

else {
	$('#caracteristicas1').hide();
	$('#caracteristicas2').hide();
	$('#caracteristicas3').hide();
	$('#caracteristicas4').hide();
	$('#caracteristicas5').hide();
	$('#caracteristicas6').hide();
	$('#caracteristicas7').hide();
	$('#caracteristicas8').hide();
	$('#caracteristicas9').hide();
	$('#caracteristicas10').hide();
$('#show_impact_price').text('esto es el else').append(selectedCombination['idCombination']).show();
}

Edited July 18, 2016 by nersolar (see edit history)

[nersolar]

De hecho tendría que añadir unos 5000 condicionantes y unos 96 div diferentes, los div son el máximo de combinaciones dentro de un producto y los 5.000 son aproximadamente el numero de productos multiplicado por el numero de combinaciones que tengo ...

[ventura]

Puedes hacerlo con arrays que es mas limpio

if (in_array(selectedCombination['idCombination'], ['500','501','502','503','504','505','506']))

Para preparar (separadores) arrays  largos puedes utilizar herramientas de este tipo 

http://delim.co/#

 

O delimitar por rangos

if (selectedCombination['idCombination'] >= 100 && selectedCombination['idCombination'] <= 500)

 para IDs del 100 a 500 por ejemplo