Jump to content

Modifier attribut coleur et taille

Tchupa
 Share

Recommended Posts

Tchupa Rookie

Tchupa

Posted
Posted

Bonjour,

 

voilà après quelques recherches dans le forum le peu de source que j'ai trouvé ne me satisfait pas entièrement.

 

En réalité j'aimerais pouvoir rendre ma fiche produit plus attractive pour le client, concernant les attributs couleurs et tailles.

 

J'aimerais dans un premier temps afficher les déclinaisons tailles sous forme de pico comme la couleur sans passer par un module qui ne me servira pas à grand chose.

 

Et dans un second temps je voudrais que lorsque les attributs tailles et couleurs sont utilisés mais uniquement pour ces deux là que la liste déroulante ne s'affiche pas .

 

Quelqu'un aurait -il une solution à me proposer?

 

Merci.

 

Cordialement Tchupa.

Link to comment
Share on other sites
Julien64 Newbie

Julien64

Posted
Posted

Bonjour,

 

 

Il y a toujours une solution mais la question ici serait plutôt de connaitre vos compétences en la matière ;)

Une astuce que j'ai déjà utilisé pour avoir un affichage perso des déclinaisons c'est de créer dans le product.tpl l'affichage souhaité et ensuite de rajouter un bonne couche de js/jquery pour cacher les listes déroulantes de base et faire en sorte qu'au clic sur mon nouvel affichage perso, l'action de base soit effectuée...

 

Pfffiouuuu je me rends compte que c'est pas clair du tout ce que je raconte :P

 

Si vous n'arrivez pas me decoder j'essaierai d'être plus clair ;)

Link to comment
Share on other sites
Tchupa Rookie

Tchupa

Posted
  • Author
Posted (edited)

Salut,

 

oui je comprends bien les grandes lignes, vous avez totalement ré écrit les conditions des déclinaisons personnalisé et vous les avez agrémenté de javascript afin de réaliser certaine fonction, comme caché les listes déroulantes des déclinaisons que vous avez personnalisé.

 

concernant mes compétences je sais écrire des conditions de base mais pas trop complexe et concernant le javascript je ne le maitrise pas du tout.

 

Tchupa.

Edited by Tchupa (see edit history)
Link to comment
Share on other sites
coeos.pro Collaborator

coeos.pro

Posted
Posted

Bonjour,

 

peux tu préciser la boutique concernée (et la version si ce n'est pas une des 2 boutique que tu as en signature)

 

Et dans un second temps je voudrais que lorsque les attributs tailles et couleurs sont utilisés mais uniquement pour ces deux là que la liste déroulante ne s'affiche pas .

Tu veux que la liste déroulante de quel attribut ne s'affiche pas ? couleur ? taille ? les 2 ? ou autre ?

Link to comment
Share on other sites
  • 1 month later...
stevent Newbie

stevent

Posted
Posted

Bonjour à tous,

 

Moi j'ai fait ceci pour me permettre de mettre des images à la place des couleurs etc. mais j'ai encore juste un problème d'affichage : 

 

http://tempo.printingandco.com/index.php?id_product=37&controller=product

 

Pour le problème d'affichage, voir : http://www.prestashop.com/forums/topic/277089-affichage-des-couleurs-bug-compl%C3%A8tement/

Link to comment
Share on other sites
  • 2 months later...
BIG PRINT Newbie

BIG PRINT

Posted
Posted

Bonjour à tous,

 

Moi j'ai fait ceci pour me permettre de mettre des images à la place des couleurs etc. mais j'ai encore juste un problème d'affichage : 

 

http://tempo.printingandco.com/index.php?id_product=37&controller=product

 

Pour le problème d'affichage, voir : http://www.prestashop.com/forums/topic/277089-affichage-des-couleurs-bug-compl%C3%A8tement/

Bonjour,

bravo pour votre site!

comment avez vous fait pour avoir l'info bulles sur vos combinaisons?

 

Merci,

Patrick

Link to comment
Share on other sites
stevent Newbie

stevent

Posted
Posted (edited)

Bonjour patrick,

 

Merci je suis content qu'il plaise, j'ai du pas mal m'accrocher en tant que nouvel utilisateur prestashop.

 

Pour l'infobulle, dans le product.tpl, j'ai du mettre la partie du code de l'image (<img src="{$img_col_dir}{$id_attribute}.jpg..... ) entre balises comme ceci :

<div class="infobulle" href="#">
<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="81" height="81" />
<span><img src="/img/co/infobulles/{$id_attribute}.jpg"  /></span>
</div><br/>
Edited by stevent (see edit history)
Link to comment
Share on other sites
BIG PRINT Newbie

BIG PRINT

Posted
Posted

Super,

merci !

 

J'y suis presque .... mais les infobulles apparaissent même si je n'ai pas sélectionné ma déclinaison

mon code:

<div id="attributes">
           
                {foreach from=$groups key=id_attribute_group item=group}
                    {if $group.attributes|@count}
                        <fieldset class="attribute_fieldset">
                            <label class="attribute_label" for="group_{$id_attribute_group|intval}">Choisissez le {$group.name|escape:'htmlall':'UTF-8'} :</label>
                            <br/>
                            {assign var="groupName" value="group_$id_attribute_group"}
                            <div class="attribute_list">
                            {if ($group.group_type == 'select')}
                                <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if};">
                                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                                        <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'htmlall':'UTF-8'}">{$group_attribute|escape:'htmlall':'UTF-8'}</option>
                                    {/foreach}
                                </select>
                            {elseif ($group.group_type == 'color')}
                                <ul id="color_to_pick_list" class="clearfix">
                                    {assign var="default_colorpicker" value=""}
                                    {foreach from=$group.attributes key=id_attribute item=group_attribute}
                                    <li{if $group.default == $id_attribute} class="selected"{/if}>
                                        <a id="color_{$id_attribute|intval}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}" style="background: {$colors.$id_attribute.value};" title="{$colors.$id_attribute.name}" onclick="colorPickerClick(this);getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
                                            {if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
                                              <div class="infobulle" href="#">
                                                <img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="50" height="50" /><br>
                                                <span><img src="/img/infobulles/{$id_attribute}.jpg"  /></span>
                                                </div><br/>
                                            {/if}
                                        </a>
                                    </li>
                                    {if ($group.default == $id_attribute)}
                                        {$default_colorpicker = $id_attribute}
                                    {/if}
                                    {/foreach}
                                </ul>
                                <input type="hidden" class="color_pick_hidden" name="{$groupName}" value="{$default_colorpicker}" />
                            {elseif ($group.group_type == 'radio')}
                                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                                    <input type="radio" class="attribute_radio" name="{$groupName}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} onclick="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">
                                    {$group_attribute|escape:'htmlall':'UTF-8'}<br/>
                                    
                            
                                {/foreach}
                            {/if}
                           
                            </div>
                        </fieldset>
                    {/if}
                {/foreach}
          
            {/if}
            <p id="product_reference" {if isset($groups) OR !$product->reference}style="display: none;"{/if}>
                <label for="product_reference">{l s='Reference:'} </label>
                <span class="editable">{$product->reference|escape:'htmlall':'UTF-8'}</span>
            </p>

une idée?

http://impression-drapeaux.fr/drapeaux-forme-plume/8-drapeau-publicitaire-plume-2m.html#/delai_production-_4_rush_24h/pieds_pour_drapeau-embase_croissilon

Link to comment
Share on other sites
BIG PRINT Newbie

BIG PRINT

Posted
Posted

 

Bonjour patrick,

 

Merci je suis content qu'il plaise, j'ai du pas mal m'accrocher en tant que nouvel utilisateur prestashop.

 

Pour l'infobulle, dans le product.tpl, j'ai du mettre la partie du code de l'image (<img src="{$img_col_dir}{$id_attribute}.jpg..... ) entre balises comme ceci :

<div class="infobulle" href="#">
<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$colors.$id_attribute.name}" width="81" height="81" />
<span><img src="/img/co/infobulles/{$id_attribute}.jpg"  /></span>
</div><br/>

Ok merci bcp,

j'ai aussi modifié le product.css avec 

.infobulle{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
.infobulle:hover{
z-index:25;
background-color:#FFF
}
 
.infobulle span{
display: none
}
 
.infobulle:hover span{
display:block;
position:absolute;
top:5em; left:5em; width:auto;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}

et ça fonctionne parfaitement !!!!

 

Merci encore !!

Link to comment
Share on other sites
stevent Newbie

stevent

Posted
Posted

Sans oublier le product.css excuse moi :

.infobulle{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
 
.infobulle:hover{
z-index:25;
background-color:#FFF
}
 
.infobulle span{
display: none
}
 
.infobulle:hover span{
display:block;
position:absolute;
top:5em; left:5em; width:auto;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
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...