Jump to content
Tchupa

Modifier attribut coleur et taille

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

alors il va falloir bosser le js et tester, tester et encore tester ;)

 

Ou si vous n'avez ni le temps ni l'envie, faites appel à un prestataire, il ne devrait pas y en avoir pour plus d'une journée de travail.

Share this post


Link to post
Share on other sites

Je suis pas sorti de l'auberge avec ça.

Sachant que le JS est le langage le plus casse *****

Share this post


Link to post
Share on other sites

Héhé, c'est pour cela que c'est un métier et qu'on ne s'improvise pas développeur web ou intégrateur ;)

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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;
}

Share this post


Link to post
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

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More