Jump to content

Subcategories in drop down select rather than grid

cammo
 Share

Recommended Posts

cammo Newbie

cammo

Posted
Posted

As the title suggests, on the category.tpl page it shows the category banner image, then underneath a grid view of subcategories in that category.

 

Rather than showing these subcategories like this, I'd like to have them in a dropdown list alongside my 'product sort' dropdown.

 

The code is shown below that I need to modify as it is in category.tpl:

 

<h3>{l s='Subcategories'}</h3>
<ul class="inline_list">
 {foreach from=$subcategories item=subcategory}
   <li>
   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
    {if $subcategory.id_image}
      <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
    {else}
      <img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
    {/if}
   </a><br />
   <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
   </li>
 {/foreach}
</ul>

 

Anyone know how to achieve this so that when the option is selected in the dropdown it goes to the subcategory page?

 

Thanks.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Try:

 

<h3>{l s='Subcategories'}</h3>
<select onchange="if ($(this).val() != '') document.location.href = $(this).val();">
   <option value="">{l s='Choose subcategory'}</option>
   {foreach from=$subcategories item=subcategory}
   <option value="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</option>
   {/foreach}
</select>

Link to comment
Share on other sites
  • 4 months later...
  • 1 month later...
  • 1 month later...
impressed Newbie

impressed

Posted
Posted

I have found this topic while I was looking for a similar solution. So first of all thank you Rocky for this! it works great!

 

However i think it would be a nice enhancement that if one has multilevel subcategories that the value of the first selector changes and provide more specific information of what can be chosen from. The thing is if you only have one subcategorie then you would probably name the first selector to whatever can be chosen. But if you have multiple subcategories it would be great to define what can be chosen from. Do you think something like this is possible to add to this peace of code?

 

e.g.

1 Subcategory: <option value="">{l s='Choose Paint'}</option>

2 Subcategory: <option value="">{l s='Choose Material'}</option>

3 Subcategory: <option value="">{l s='Choose Color'}</option>

 

Looking at this example you would say that this could be added as attributes to paint, but consider it as just an

example.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

@impressed

 

It sounds like you'd be better off buying my AJAX Dropdown Categories module. It lets you convert the entire categories block into dropdowns and choose a different label for each level. See the module's thread here for more information. There is also a demo on my website.

Link to comment
Share on other sites
  • 8 months later...
DiegoValencia__ Newbie

DiegoValencia__

Posted
Posted

Hi guys...

I'm using the following code in my store.....

 

<h3>{l s='Subcategories'}</h3>
<select onchange="if ($(this).val() != '') document.location.href = $(this).val();">
   <option value="">{l s='Choose subcategory'}</option>
   {foreach from=$subcategories item=subcategory}
   <option value="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</option>
   {/foreach}
</select>

And now, i need some help to have a better appearance, in the next picture, i capture an idea that i want.

subcategory.jpg

Link to comment
Share on other sites
  • 2 months later...
  • 4 months later...
cjrent Newbie

cjrent

Posted
Posted (edited)

If I wanted to put this in the left column is that possible.

 

I am using HTML Box created by http://mypresta.eu/modules/front-office-features/html-box.html

 

I pasted the code in there, it's close, but needs a bit of work.

 

http://boojh.x10host.com/ps/

 

If you scroll to the very bottom you can see it on the bottom left column

 

Version 1.5.4.1

Default Template

Edited by paditur (see edit history)
Link to comment
Share on other sites
  • 7 months later...
rocky Apprentice

rocky

Posted
Posted

The code still works in PrestaShop v1.6. It just needs some extra CSS styles to make the dropdown match the other ones in the theme. Change lines 78-96 of themes/default/category.tpl from:

 

            <ul class="clearfix">
            {foreach from=$subcategories item=subcategory}
                <li>
                    <div class="subcategory-image">
                        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                        {if $subcategory.id_image}
                            <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite,
$subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {else}
                            <img class="replace-2x" src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                       {/if}
                       </a>                  
                   </div>
                   <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5>
                   {if $subcategory.description}
                       <div class="cat_desc">{$subcategory.description}</div>
                   {/if}
               </li>
           {/foreach}
           </ul>

to: 

 

           <select onchange="if ($(this).val() != '') document.location.href = $(this).val();"> 
               <option value="">{l s='Choose subcategory'}</option>            
           {foreach from=$subcategories 
item=subcategory}
               <option value="{$link->getCategoryLink($subcategory.id_category, 
$subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</option>            
           {/foreach}          
           </select>

You've now got an unstyled subcategory dropdown. To make it look like other dropdowns, change the <select> line to:

 

            <select class="form-control" onchange="if ($(this).val() != '') document.location.href = $(this).val();">   

This will add styling to the dropdown, but makes it too wide. To fix that, change lines 6224-6226 of themes/default/css/global.css from:

 

  .content_sortPagiBar .sortPagiBar #productsSortForm select {
    max-width: 192px;
    float: left; }

to:

 

  .content_sortPagiBar .sortPagiBar #productsSortForm select, #subcategories select {
     max-width: 192px;
     float: left; }

The subcategories dropdown should then look like the product sort dropdown.

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

Shaunee

Posted
Posted

Thanks so much.

 

The drop down for categories is left above the drop down for sorting. Can I put them inline. I.e subcategory, sort and view in line with each other. Have spent the best part of a morning fiddling with div and sizes and I don't understand enough yet of the layout to do it.

regards

Shaun

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Displaying them inline isn't easy, since they are in different DIVs and TPL files. The quickest solution I can think of is to position the subcategories relatively to fake them being inline. To do that, add the following to global.css:

#subcategories { position: relative; top: 41px; margin-top: -41px }
#subcategories .subcategory-heading { float: left; padding-right: 0.4em; line-height: 2em }
.content_sortPagiBar .sortPagiBar { padding-left: 300px }
@media (max-width: 1199px) { .content_sortPagiBar .display > li { display: none } }
@media (max-width: 767px) { .content_sortPagiBar .sortPagiBar { padding: 3em 0 0 0 } }
  • Like 1
Link to comment
Share on other sites
Shaunee Newbie

Shaunee

Posted
Posted

Thanks its working well and we are getting there, changed the margin-top to 15px to better align the dropdown boxes. I noticed grid and list view on right is not quite in line. Could not bring into line. Any ideas

 

.content_sortPagiBar .sortPagiBar #productsSortForm {
    float: left;
    margin-right: 100px;
 margin-right: 50%;
 margin-top: 15px;
    margin-bottom: 5px; }

Link to comment
Share on other sites
Shaunee Newbie

Shaunee

Posted
Posted

Appreciate it your assistance has taught me a lot. This is my test site before upgrading my live site. Right now http://lovefromafrica.com/testbd/tstst/3-music-ipods. If you look at the view selection on right the grid or list is slightly above line. 

 

Also noticed that I cannot sort or select grid or list when I select from the normal category block or the enhance with the product numbers. However if I search for Ipods then the grid and sort works. Do not know if this is related or another issue altogether. If another issue where would I raise it. Thanks again for looking.

Link to comment
Share on other sites
rocky Apprentice

rocky

Posted
Posted

Sorry, I don't have much time to help. Try the following code. It should move the grid options down a bit, move the "Sort By" label close to the "Choose subcategory" dropdown and keep them inline until the width drops below 480px.

#subcategories { position: relative; top: 41px; margin-top: -41px }
#subcategories .subcategory-heading { float: left; padding-right: 0.4em; line-height: 2em }
.content_sortPagiBar .sortPagiBar { padding-left: 200px }
.sortPagiBar .display > li { margin-top: 15px }
@media (max-width: 767px) { .content_sortPagiBar .sortPagiBar { padding-top: 0; padding-bottom: 12px } 
.content_sortPagiBar .display > li { display: none } }
@media (max-width: 479px) { .content_sortPagiBar .sortPagiBar { padding: 3em 0 0 0 } }
.content_sortPagiBar .sortPagiBar #productsSortForm { margin-right: 0 } }
  • Like 1
Link to comment
Share on other sites
Shaunee Newbie

Shaunee

Posted
Posted

Thank you, you are a star. Thank you also for taking the time to assist very appreciated. Very happy with the outcome. I hope this also helps any other persons who would like to go the same way. Just from your advice I am beginning to customise other areas, I learnt a lot.

 

I did copy this to the bottom of the code above to add a line. underneath.

 

content_sortPagiBar .sortPagiBar .nbrItemPage .clearfix > span {
      padding: 10px 0 0 5px;
      display: inline-block;
      float: left;
  }

 

Under what heading or area can I raise the issue about the sort and drop down not working whet clicking from the categories block?

Link to comment
Share on other sites
Shaunee Newbie

Shaunee

Posted
Posted (edited)

I have changed the code to appear more uniform on smaller hardware like a smart phones for my site, also to incorporate the sort drop down on smaller hardware

 

#subcategories { position: relative; top: 45px; margin-top: -47px;}
#subcategories .subcategory-heading { float: left; padding-right: 0.4em; line-height: 2em; padding-bottom: 0.4em }
.content_sortPagiBar .sortPagiBar { padding-left: 39%;}
.sortPagiBar .display > li { margin-top: 15px }
@media (max-width: 767px) { .content_sortPagiBar .sortPagiBar { padding-top: 0; padding-bottom: 5px }
.content_sortPagiBar .display > li { display: none } }
@media (max-width: 479px) { .content_sortPagiBar .sortPagiBar { padding: 3em 0 0 0 } }
.content_sortPagiBar .sortPagiBar #productsSortForm { margin-right: 10px } }
.content_sortPagiBar .sortPagiBar .nbrItemPage .clearfix > span {
      padding: 5px 0 0 5px;
      display: inline-block;
           }

.content_sortPagiBar .sortPagiBar {
  border-bottom: 1px solid #d6d4d4;
  clear: both; }
   .content_sortPagiBar .sortPagiBar #productsSortForm select, #subcategories select {
     max-width: 146px;
  float: left;
  padding-right: 20px;}
      @media (max-width: 991px) {
        .content_sortPagiBar .sortPagiBar #productsSortForm select {
          max-width: 146px; } }
    .content_sortPagiBar .sortPagiBar #productsSortForm .selector {
      float: left; }
  .content_sortPagiBar .sortPagiBar .nbrItemPage {
    float: left;
  padding-left: 2%;}

 

Also shortened the Sort by and show headings to Select to line-up drop down boxes. in the product-sort.tpl and the nbr-product-page.tpl

Edited by Shaunee (see edit history)
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...