Jump to content

[Resolu ] Modifier Bloc Navigation À Facettes

jomcdonald
 Share

Recommended Posts

jomcdonald Rookie

jomcdonald

Posted
Posted

Bonsoir,

je souhaite modifier l'affichage du module navigation à facettes de la version 1.4.4 en adoptant un affichage horizontal avec les filtres l'un à la suite de l'autre et non l'un en dessous de l'autre.

Pour info mon thème à 1 seule colonne de 990px. Merci

Link to comment
Share on other sites
jomcdonald Rookie

jomcdonald

Posted
  • Author
Posted

Finalement je suis arrivé à mes fins.

Pour ceux qui cherchent à faire la même chose, voici le code modifié du fichier blocklayered.tpl :

<!-- Block layered navigation module -->
{if $nbr_filterBlocks != 0}
<div id="layered_block_left" class="block" style="width: 980px; float: left">
<h4 style="background: #EEEEEE; width: 984px; text-align: center;">{l s='Catalog' mod='blocklayered'}</h4>
<div class="block_content" style="width: 980px;">
{if $display_share}
	<div id="layered_url_filter_block">
		<span class="layered_subtitle" style="float: none;">{l s='Share your search:' mod='blocklayered'}</span>
		<input value="{$share_url|escape:html:'UTF-8'}">
	</div>
{/if}
	<form action="#" id="layered_form">
		<div style="width: 980px;">
			{if isset($selected_filters) && $n_filters > 0}
			<div id="enabled_filters">
				<span class="layered_subtitle" style="float: none;">{l s='Enabled filters:' mod='blocklayered'}</span>
				<ul>
				{foreach from=$selected_filters key=filter_type item=filter_values}
					{foreach from=$filter_values item=filter_value name=f_values}
						{foreach from=$filters item=filter}
							{if $filter.type == $filter_type && isset($filter.values)}
								{if isset($filter.slider) && $smarty.foreach.f_values.first}
									<li>
										- {$filter.name|escape:html:'UTF-8'}{l s=':'} 
										{$filter.values[0]|escape:html:'UTF-8'}{$filter.unit|escape:html:'UTF-8'} - 
										{$filter.values[1]|escape:html:'UTF-8'}{$filter.unit|escape:html:'UTF-8'}
									</li>
								{else}
									{foreach from=$filter.values key=id_value item=value}
										{if $id_value == $filter_value}
											<li>
												<a href="#" rel="layered_{$filter.type_lite}_{$id_value}" title="{l s='Cancel' mod='blocklayered'}">x</a>
												{$filter.name|escape:html:'UTF-8'}{l s=':'} {$value.name|escape:html:'UTF-8'}
											</li>
										{/if}
									{/foreach}
								{/if}
							{/if}
						{/foreach}
					{/foreach}
				{/foreach}
				</ul>
			</div>
			{/if}
			{foreach from=$filters item=filter}
				{if isset($filter.values)}
				<div style="float: left; margin-right: 20px; margin-bottom: 50px; width: 200px;">
					<span class="layered_subtitle">{$filter.name|escape:html:'UTF-8'}</span>
					<span class="layered_close"><a href="#" rel="layered_{$filter.type}_{$filter.id_key}">-</a></span>
					<div class="clear"></div>
					<ul id="layered_{$filter.type}_{$filter.id_key}">
					{if !isset($filter.slider)}
						{foreach from=$filter.values key=id_value item=value}
							<li class="nomargin">
							{if isset($filter.is_color_group) && $filter.is_color_group}
								<input type="button" name="layered_{$filter.type_lite}_{$id_value}" rel="{$id_value}_{$filter.id_key}" id="layered_attribute_{$id_value}" {if !$value.nbr} value="X" disabled="disabled"{/if} style="background: {if isset($value.color)}{$value.color}{else}#CCC{/if}; margin-left: 0; width: 16px; height: 16px; padding:0; border: 1px solid {if isset($value.checked) && $value.checked}red{else}#666{/if};" />
								{if isset($value.checked) && $value.checked}<input type="hidden" name="layered_{$filter.type_lite}_{$id_value}" value="{$id_value}" />{/if}
							{else}
								<input type="checkbox" class="checkbox" name="layered_{$filter.type_lite}_{$id_value}" id="layered_{$filter.type_lite}{if $id_value || $filter.type == 'quantity'}_{$id_value}{/if}" value="{$id_value}{if $filter.id_key}_{$filter.id_key}{/if}"{if isset($value.checked)} checked="checked"{/if}{if !$value.nbr} disabled="disabled"{/if} /> 
							{/if}
							<label for="layered_{$filter.type_lite}_{$id_value}"{if !$value.nbr} class="disabled"{else}{if isset($filter.is_color_group) && $filter.is_color_group} name="layered_{$filter.type_lite}_{$id_value}" class="layered_color" rel="{$id_value}_{$filter.id_key}"{/if}{/if}>{$value.name|escape:html:'UTF-8'}{if $layered_show_qties}<span> ({$value.nbr})</span>{/if}</label>
							</li>
						{/foreach}
					{else}
						<label for="{$filter.type}">{l s='Range:'}</label> <span id="layered_{$filter.type}_range"></span>
						<div style="margin: 6px 0 6px 6px; width: 93%;">
							<div style="margin-top:5px;" class="layered_slider" id="layered_{$filter.type}_slider"></div>
						</div>
						<script type="text/javascript">
						unit = '{$filter.unit}';
						{literal}
							$(document).ready(function()
							{
								$('#layered_{/literal}{$filter.type}{literal}_slider').slider({
									range: true,
									min: {/literal}{$filter.min}{literal},
									max: {/literal}{$filter.max}{literal},
									values: [ {/literal}{$filter.values[0]}{literal}, {/literal}{$filter.values[1]}{literal}],
									slide: function( event, ui ) {
										$('#layered_{/literal}{$filter.type}{literal}_range').html(ui.values[ 0 ] + unit + ' - ' + ui.values[ 1 ] + unit);
									},
									stop: function () {
										reloadContent();
									}
								});
								$('#layered_{/literal}{$filter.type}{literal}_range').html($('#layered_{/literal}{$filter.type}{literal}_slider').slider('values', 0 ) +unit+
									' - ' + $('#layered_{/literal}{$filter.type}{literal}_slider').slider('values', 1 )+unit );
							});
						{/literal}
						</script>
						<!--
						<script type="text/javascript">
						unit = '{$filter.unit}';
						type = '{$filter.type}';
						max = '{$filter.max}';
						min = '{$filter.min}';
						values = [{$filter.values[0]}, {$filter.values[1]}];
						{literal}
							$(document).ready(function()
							{
								initSlider(type, min, max, values, unit);
							});
						{/literal}
						</script>
						-->
					{/if}
					</ul>
				</div>
				{/if}
			{/foreach}
		</div>
		<input type="hidden" name="id_category_layered" value="{$id_category_layered}" />
		{foreach from=$filters item=filter}
			{if $filter.type_lite == 'id_attribute_group' && isset($filter.is_color_group) && $filter.is_color_group}
				{foreach from=$filter.values key=id_value item=value}
					{if isset($value.checked)}
						<input type="hidden" name="layered_id_attribute_group_{$id_value}" value="{$id_value}_{$filter.id_key}" />
					{/if}
				{/foreach}
			{/if}
		{/foreach}
	</form>
</div>
<div id="layered_ajax_loader" style="display: none;">
	<p style="margin: 20px 0; text-align: center;"><img src="{$img_ps_dir}loader.gif" alt="" /><br />{l s='Loading...' mod='blocklayered'}</p>
</div>
</div>
{/if}

Bien sur ce code est adapté à ma situation mais peut donner des pistes pour certain.

 

Dernier point qui m'est cher, intégrer le module en center_column entre la partie sous-catégorie et la partie produit. Une idée ?? :D

  • Like 1
Link to comment
Share on other sites
ultraxa Newbie

ultraxa

Posted
Posted

merci !!

j'ai fait la modif et ca fonctionne !

mais j'ai un hic car quand je clique dans une case (par ex une marque ) il me trie pas automatiquement

 

et autre chose si je ne m'abuse , y'a til possibilité d'afficher les choix non pas par des case a cocher mais un menu deroulant

Link to comment
Share on other sites
ultraxa Newbie

ultraxa

Posted
Posted

et ce filtre , il s'active quelques part ?

 

au niveau du menu deroulant au lieu des case a cocher , il faudrair regarder du coté de :

 

<input type="checkbox" ....

 

il faudrait pouvoir cocher dans le menu deroulant ...creer des case a cocher dans un menu deroulant ...

il manque egalement un bouton de remise a zero...

Link to comment
Share on other sites
jomcdonald Rookie

jomcdonald

Posted
  • Author
Posted

Je m'aperçois d'un soucis avec le filtre qui ne marche pas avec plus de 3 niveaux de sous-catégorie. ???? :o

Suis-je le seul.

 

EDIT: Fausse alerte j'ai modifié la config du filtre en sélectionnant toute les catégories au lieu de catégorie spécifique, bien qu'il me semblait l'avoir configuré sur all catégories. <_<

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