2 pièce(s) jointe(s)
Modification Css sur Prestashop
bonjour,
Je me tourne vers vous car je cherche à faire une modification de design sous Prestashop mais je galère un peu. Actuellement l'élément que je veux modifier ressemble à ceci :
Pièce jointe 582067
Je souhaiterais rendre des "option" en mode accordéon. comme dans l'image suivante
Pièce jointe 582066
Les modifications sont sur un module qui se nomme "Configurateur Visuel" cependant quoi que je fasse cela ne fais rien et je ne sais pas quel élément par exemple javascript rajouter.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
| <!-- OPTIONS PANEL -->
{assign var=skipOptions value=false}
{if $data.attributes.groups|@count == 1}
{assign var=skipOptions value=true}
{/if}
{if $data.attributes.groups|@count > 1}
{if $data.attributes.groups|@count == 2}
{foreach from=$data.attributes.groups key=id_attribute_group item=group}
{if $group.group_type == 'color' || $id_attribute_group == $ftl_idattrgroup}
{assign var=skipOptions value=true}
{/if}
{/foreach}
{/if}
{if !$skipOptions}
<div id="cv-optionsPanel" {if isset($featuresAr.toolsDisplay) && $featuresAr.toolsDisplay == 'tabs'} class="cv-hidden-off"{/if}>
<ul {if isset($featuresAr.toolsDisplay) && $featuresAr.toolsDisplay == 'tabs'}class="cv-hidden"{/if}>
<li><a href="#cv-options">{l s='Options' mod='cvjqueryext'}</a></li>
</ul>
<div id="cv-options">
<fieldset class="attribute_fieldset attribute_fieldset ui-accordion ui-widget ui-helper-reset" role="tablist">
<div class="option-content">
<label class="cv-quantitySelector attribute_label ui-accordion-header
ui-state-default ui-accordion-icons ui-corner-all" for="cv-quantityContainer" role="tab" id="ui-id-10" aria-controls="cv-quantityContainer" aria-selected="false"
aria-expanded="true" tabindex="0">{l s='Quantity: ' mod='cvjqueryext'}</label>
<div id="cv-quantityContainer" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"
aria-labelledby="ui-id-10" role="tabpanel" aria-hidden="false" style="display: block; overflow:hidden; height:54px;">
<input id="cv-quantitySelector" value="1">
</div>
</div>
{foreach from=$data.attributes.groups key=id_attribute_group item=group}
{if $group.attributes|@count AND $id_attribute_group != $data.conf.dynValues.surface_group.id AND $group.group_type == 'select' AND $id_attribute_group != $ftl_idattrgroup}
<div class="option-content">
<label class="attribute_label" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} </label>
{assign var='groupName' value='group_'|cat:$id_attribute_group}
<select
name="{$groupName}"
id="group_{$id_attribute_group|intval}"
class="optionSelector"
>
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option
value="{$id_attribute|intval}" {if $group.default == $id_attribute} SELECTED="selected"{/if}
>
{$group_attribute|escape:'htmlall':'UTF-8'}
</option>
{/foreach}
</select>
</div>
{elseif $group.attributes|@count AND $id_attribute_group != $data.conf.dynValues.surface_group.id AND $group.group_type == 'radio' AND $id_attribute_group != $ftl_idattrgroup}
<div class="option-content">
<label class="attribute_label attribute_label ui-accordion-header
ui-state-default ui-accordion-icons ui-corner-all" for="group_{$id_attribute_group|intval}" role="tab" id="ui-id-11"
aria-controls="ui-id-12" aria-selected="false" aria-expanded="false" tabindex="-1">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var='groupName' value='group_'|cat:$id_attribute_group}
<ul>
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li>
<label for="cv_radio_{$id_attribute}">
{assign var=customImage value="`$_PS_ROOT_DIR_`\modules\cvjqueryext\lib\jquery-configurateurvisuel\css\img\custom\\`$id_attribute`.png"}
{if file_exists($customImage)}
<img src="{$_PS_BASE_URL_}{$__PS_BASE_URI__}modules/cvjqueryext/lib/jquery-configurateurvisuel/css/img/custom/{$id_attribute}.png" class="attribute_image" />
{/if}
<div>
<input type="radio" id="cv_radio_{$id_attribute}" class="cv_attribute_radio optionSelectorRadio" name="cv_{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
<span>{$group_attribute|escape:'html':'UTF-8'}</span>
</div>
</label>
</li>
{/foreach}
</ul>
</div>
{elseif $group.group_type == 'color'}
<label id="cv-colorSelectLabel" for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
{assign var='groupName' value='group_'|cat:$id_attribute_group}
<select
name="{$groupName}"
id="group_{$id_attribute_group|intval}"
class="optionSelector colorOptionSelector"
>
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<option value="{$id_attribute|intval}" hex="{$data.attributes.colors.$id_attribute.value}" {if $group.default == $id_attribute} SELECTED="selected"{/if}>{$group_attribute|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
</p>
{/if}
{/foreach}
</fieldset>
</div>
</div>
{/if}
{/if} |