Discussion :

[Gaiaryde]

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 :


Je souhaiterais rendre des "option" en mode accordéon. comme dans l'image suivante

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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}