Jump to content

[Astuce] Modifier Bloc navigation à facettes


Recommended Posts

Suite à la disparition de mon post dans la catégorie "développement" avec la mise à jour des catégories du forum, je le poste ici:

 

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

Edit:

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}

 

Et pour intégrer le module en center_column voici ce lien http://www.prestashop.com/forums/topic/122961-greffe-de-bloc/page__view__getnewpost

 

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

  • Like 1
Link to comment
Share on other sites

  • 4 months later...
  • 4 months later...

Bonjour,

J’ai installé le module navigation à facette version 1.8.3 sur prestashop 1.4.7.3 dans le top mais ce dernier et en affichage verticale. Quelle est le bout de code à insérer ou à modifier dans blocklayered.php ... etc. pour avoir un affichage en horizontal.

 

merci

 

2vkglmr.jpg

 

n5lldj.jpg

Link to comment
Share on other sites

  • 5 weeks later...
  • 9 months later...
  • 8 months later...
  • 10 months later...
  • 5 months later...

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