Jump to content
imperator

Blocklayered (product filter) valide code

Recommended Posts

Hello, I use presta 1.6.1.4 and don't know wheter i use the right thread but i wanto to try a html valide code.

I'm quite success but product filter consist of <ul> items and validator show me these results

 

Element label not allowed as child of element ul in this context. (<label for="price">)

Element span not allowed as child of element ul in this context. (<span id="layered_price_range">)

 Element div not allowed as child of element ul in this context. (<div class="layered_slider_container">)

Element select not allowed as child of element ul in this context. (<select class="select form-control" >)

The value of the for attribute of the label element must be the ID of a non-hidden form control. (<label for="price">)

 

There is quite complex code for this filter in blocklayered.tpl. Someone try to rewrite code for html validity ? 

Many thanks

 

Share this post


Link to post
Share on other sites

hello,

well from what i see, there must be a part of your code where ul is not followed by li element, so try putting li inside ul elements first.

and for this one

"The value of the for attribute of the label element must be the ID of a non-hidden form control. (<label for="price">)",

you have to replace the value of "for" attribute in this case, there must be some element like an input element that is connected to this label, so if that input element has an id, then put it in the "for" attribute, it should be like this "<label for="idOfSomeElement">"

Share this post


Link to post
Share on other sites

Hello, thanks for answer, yes i found it

it is "range" in filter in blocklayered.tpl in themes/modules

{if $filter.filter_type == 0}
                                    <label for="{$filter.type}">
                                        {l s='Range:' mod='blocklayered'}
                                    </label> 
                                    <span id="layered_{$filter.type}_range"></span>
                                    <div class="layered_slider_container">
                                        <div class="layered_slider" id="layered_{$filter.type}_slider" data-type="{$filter.type}" data-format="{$filter.format}" data-unit="{$filter.unit}"></div>
                                    </div>

 

and in "select" filter

 

{else}
                                        <select class="select form-control" {if $filter.filter_show_limit > 1}multiple="multiple" size="{$filter.filter_show_limit}"{/if}>
                                            <option value="">{l s='No filters' mod='blocklayered'}</option>
                                            {foreach from=$filter.values key=id_value item=value}
                                            {if $value.nbr || !$hide_0_values}
                                                <option {if isset($value.color)}style="color:{$value.color}"{/if} id="layered_{$filter.type_lite}{if $id_value || $filter.type == 'quantity'}_{$id_value}{/if}" value="{$id_value}_{$filter.id_key}" {if isset($value.checked) && $value.checked}selected="selected"{/if} {if !$value.nbr}disabled="disabled"{/if}>
                                                    {$value.name|escape:'html':'UTF-8'}{if $layered_show_qties} ({$value.nbr}){/if}
                                                </option>
                                            {/if}
                                            {/foreach}
                                        </select>

 

but this code is generated inside foreach where is <ul> in begining... 

Share this post


Link to post
Share on other sites

Ok I got it. 

I put a <li> before  <select class="select form-control".... in line 128

and before <label> {l s='Range:' mod='blocklayered'}.... in line 145

And now is category page with filter html valid :) 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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