Attribut couleur avec boutton radio et image aperçu

[Heisenberg21]

 Merci

lst.bmp

Edited November 22, 2015 by Heisenberg21 (see edit history)

[gladiator]

Salut, 

version de perstashop ?

[Heisenberg21]

Salut, 

version de perstashop ?

salut ,

 

c'est prestashop 1.5.3.1

[Heisenberg21]

c'est possible pour cette versions ?

[gladiator]

Bonjour,

une solution facile :

résume: 

1. Ajouter nouveau attribut couleur de type radio
2. Ajouter des tout les valeurs souhaites (rouge, bleu, ....).
3. Créer a l'aide de photoshop des icones pour les couleurs et les nommes aves les IDs des valeurs ( c a d lors de l'ajout des valeurs on a rouge => id 21, bleu => 22 , noir => 23 ... il faut créer une icone rouge et le nomme pic_21.jpg et place tous les icones dans themes/NOM_THEME/img
4. Ajouter au themes/NOM_THEME/product.tpl ligne de code suivant juste avant // PrestaShop internal settings 

   var urlPic = '{$img_dir}';
   // PrestaShop internal settings
   

5. Ajouter au themes/NOM_THEME/js/product.js ligne de code suivant en fin de fichier 

   $(document).ready(function(){
      $('input[type=radio]').each(function(){
   	   $( "<img src='"+urlPic+"/pic_"+$(this).val()+".jpg' width='20' height='20' />" ).insertAfter($(this));
   	})
   });
   

 

voila 

[Heisenberg21]

Bonjour,

une solution facile :

résume: 

1. Ajouter nouveau attribut couleur de type radio
2. Ajouter des tout les valeurs souhaites (rouge, bleu, ....).
3. Créer a l'aide de photoshop des icones pour les couleurs et les nommes aves les IDs des valeurs ( c a d lors de l'ajout des valeurs on a rouge => id 21, bleu => 22 , noir => 23 ... il faut créer une icone rouge et le nomme pic_21.jpg et place tous les icones dans themes/NOM_THEME/img
4. Ajouter au themes/NOM_THEME/product.tpl ligne de code suivant juste avant // PrestaShop internal settings 

   var urlPic = '{$img_dir}';
   // PrestaShop internal settings
   

5. Ajouter au themes/NOM_THEME/js/product.js ligne de code suivant en fin de fichier 

   $(document).ready(function(){
      $('input[type=radio]').each(function(){
   	   $( "<img src='"+urlPic+"/pic_"+$(this).val()+".jpg' width='20' height='20' />" ).insertAfter($(this));
   	})
   });
   

 

voila 

merci de ta réponse mais il n'existe pas d'attribut couleur de type radio , seulement radio ou couleur , tu veux dire que le nom est couleur et que c'est de type radio ?

Edited June 18, 2015 by Heisenberg21 (see edit history)

[Heisenberg21]

Bonjour,

une solution facile :

résume: 

1. Ajouter nouveau attribut couleur de type radio
2. Ajouter des tout les valeurs souhaites (rouge, bleu, ....).
3. Créer a l'aide de photoshop des icones pour les couleurs et les nommes aves les IDs des valeurs ( c a d lors de l'ajout des valeurs on a rouge => id 21, bleu => 22 , noir => 23 ... il faut créer une icone rouge et le nomme pic_21.jpg et place tous les icones dans themes/NOM_THEME/img
4. Ajouter au themes/NOM_THEME/product.tpl ligne de code suivant juste avant // PrestaShop internal settings 

   var urlPic = '{$img_dir}';
   // PrestaShop internal settings
   

5. Ajouter au themes/NOM_THEME/js/product.js ligne de code suivant en fin de fichier 

   $(document).ready(function(){
      $('input[type=radio]').each(function(){
   	   $( "<img src='"+urlPic+"/pic_"+$(this).val()+".jpg' width='20' height='20' />" ).insertAfter($(this));
   	})
   });
   

 

voila 

salut , je viens de tester ça donne rien ça n'affiche pas les images , tu pense que cela peut venir d'ou ?

la variable $img_dir est -elle renseigner ?

Edited June 18, 2015 by Heisenberg21 (see edit history)

[Heisenberg21]

c'est bon ça marche !!!!!

 

merci gladiator tu gère

 

ça fonctionne pour prestashop 1.6?

Edited June 18, 2015 by Heisenberg21 (see edit history)

[Heisenberg21]

Le problème c'est que les autre attribut radio qui on pas besoins d'image sa met un carrer brisé car il ne trouve pas les images , est -il possible de mettre un if pour que sa soit valable sur les attributs radio que j'aurais choisi ?

[gladiator]

Bonjour, 

oui biensure il faut testé si l'image existe ou noo, merci de modifier 

$(document).ready(function(){
   $('input[type=radio]').each(function(){
	   $( "<img src='"+urlPic+"/pic_"+$(this).val()+".jpg' width='20' height='20' />" ).insertAfter($(this));
	})
});

par 

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

$(document).ready(function(){
   $('input[type=radio]').each(function(){
	   var urlpicfile = urlPic+'/pic_'+$(this).val()+'.jpg';
	   if(fileExists(urlpicfile))
	   	$( "<img src='"+urlpicfile+"' width='20' height='20' />" ).insertAfter($(this));
	})
});

[Heisenberg21]

 

Bonjour, 

oui biensure il faut testé si l'image existe ou noo, merci de modifier 

$(document).ready(function(){
   $('input[type=radio]').each(function(){
	   $( "<img src='"+urlPic+"/pic_"+$(this).val()+".jpg' width='20' height='20' />" ).insertAfter($(this));
	})
});

par 

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

$(document).ready(function(){
   $('input[type=radio]').each(function(){
	   var urlpicfile = urlPic+'/pic_'+$(this).val()+'.jpg';
	   if(fileExists(urlpicfile))
	   	$( "<img src='"+urlpicfile+"' width='20' height='20' />" ).insertAfter($(this));
	})
});

d'accord merci =)

[Heisenberg21]

Dernière question  , tu saurais mettre les couleur sur plusieurs colonnes et lignes ? car c'est que sur une colonne sa fait trop grand

Edited June 18, 2015 by Heisenberg21 (see edit history)