[SOLVED] How to convert the nbr-product-page dropdown list to buttons?

[kingsinnersoul]

Hello,

I have been looking into converting the dropdown list that chooses how many items to show per page into a list of buttons.

I am lost about how to convert the <input><select><option> tags into buttons.

 

Any help will be appreciated.

 

Thanks

Edited June 17, 2013 by kingsinnersoul (see edit history)

[vekia]

you can use this:

{foreach from=$nArray item=nValue}
  <input name="n" type="submit" value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}class="selected"{/if} onclick="nbof.submit();"/>
 {assign var="lastnValue" value=$nValue}
   {/foreach}

 

you will get input buttons with number of pages as value, then you can stylize it with css

[kingsinnersoul]

Worked like a charm. :-)

Thanks

[vekia]

can i check it somewhere?

 

i marked this thread as [solved]

 

regards

[kingsinnersoul]

I Commented out lines 55-65 in nbr-product-page.tpl

<!--
   <select name="n" id="nb_item" onchange="this.form.submit();">
   {assign var="lastnValue" value="0"}
   {foreach from=$nArray item=nValue}
 {if $lastnValue <= $nb_products}
  <option value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}selected="selected"{/if}>{$nValue|escape:'htmlall':'UTF-8'}</option>
 {/if}
 {assign var="lastnValue" value=$nValue}
   {/foreach}
   </select>
-->
[size=4]

[/size]

And then I added your code and an All button I found here.

So my code looked like this:

{if $nb_products > $products_per_page}
 <form action="{if !is_array($requestNb)}{$requestNb}{else}{$requestNb.requestUrl}{/if}" method="get" class="nbrItemPage pagination">
  <p>
   {if isset($search_query) AND $search_query}<input type="hidden" name="search_query" value="{$search_query|escape:'htmlall':'UTF-8'}" />{/if}
   {if isset($tag) AND $tag AND !is_array($tag)}<input type="hidden" name="tag" value="{$tag|escape:'htmlall':'UTF-8'}" />{/if}
   <div id="number_of_products_show"><label for="nb_item">{l s='Show'}</label></div>
   {if is_array($requestNb)}
 {foreach from=$requestNb item=requestValue key=requestKey}
  {if $requestKey != 'requestUrl'}
   <input type="hidden" name="{$requestKey|escape:'htmlall':'UTF-8'}" value="{$requestValue|escape:'htmlall':'UTF-8'}" />
  {/if}
 {/foreach}
   {/if}
<!--
   <select name="n" id="nb_item" onchange="this.form.submit();">
   {assign var="lastnValue" value="0"}
   {foreach from=$nArray item=nValue}
 {if $lastnValue <= $nb_products}
  <option value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}selected="selected"{/if}>{$nValue|escape:'htmlall':'UTF-8'}</option>
 {/if}
 {assign var="lastnValue" value=$nValue}
   {/foreach}
   </select>
-->
   <script type="text/javascript">
   $('#number_of_products.number_of_products.selected').parent().get(0); // This would be the <a>'s parent <li>.
   </script>
   {foreach from=$nArray item=nValue}
   <div id="number_of_products" {if $n == $nValue}class="selected"{/if} onclick="nbof.submit();">
 <a class="number_of_products">
  <input name="n" type="submit" value="{$nValue|escape:'htmlall':'UTF-8'}" {if $n == $nValue}class="selected"{/if} onclick="nbof.submit();"/>
  {assign var="lastnValue" value=$nValue}
 </a>
   </div>
   {/foreach}
   <div id="number_of_products_all" {if $n == $nValue}class="selected"{/if}>
 {assign var='all' value=$link->getPaginationLink('category', $category, true, false, true, false)}
 <a class="number_of_products_all{if $n == $nValue} selected{/if}" href="{$link->goPage($all)}&n={$nb_products}">{l s='All'}</a>
   </div>
   <div id="number_of_products_products"><span>{l s='Products'}</span></div>
  </p>
 </form>
{/if}

 

Now I just got to figure how to make the buttons stay when I click on the All button.

 

can i check it somewhere?

 

i marked this thread as [solved]

 

regards

Sorry, I am still on my localhost

[vekia]

maybe move the foreach with input buttons

 

to the

<div id="number_of_products_all" {if $n == $nValue}class="selected"{/if}>

[kingsinnersoul]

It did not work.

Is the enclosing

{if $nb_products > $products_per_page}

causes the buttons to disappear? I did not test it, as I am not sure if it will break anything?

Edited June 17, 2013 by kingsinnersoul (see edit history)