open list of categories

How to configure and adapt Aimeos based shops as developer
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
trimble
Posts: 0
Joined: 01 Jan 1970, 00:00

open list of categories

Post by trimble » 20 Apr 2015, 21:18

Thanks for the great shop. The documentation is very helpful.
Now I'm wondering whether it's possible to configure for example the list of categories that they are open when I open the list view.

trimble

User avatar
aimeos
Administrator
Posts: 3097
Joined: 01 Jan 1970, 00:00

Re: open list of categories

Post by aimeos » 21 Apr 2015, 06:55

trimble wrote:Thanks for the great shop.
Thanks, that's nice to hear :-)
trimble wrote:The documentation is very helpful.
Now I'm wondering whether it's possible to configure for example the list of categories that they are open when I open the list view.
It's purely a theme thing and in the classic theme (http://typo3.demo.aimeos.org/classic/) you can see a "standard" navigation. In the elegance theme it's done via CSS/Javascript and the easiest thing is to create a custom theme where you only overwrite the code you want to replace (http://aimeos.org/docs/Developers/Theme ... ing_themes). For the category slider it's the CSS code for the ".catalog-filter-tree" selector and the "setupCategoryToggle()" method in the JS file.

trimble
Posts: 0
Joined: 01 Jan 1970, 00:00

Re: open list of categories

Post by trimble » 25 Apr 2015, 10:20

Thanks a lot for the quick reply. It's really a simple solution for starting the list of categories open. I just removed the css 'display: none'.

.catalog-filter-tree {
> ul {
padding: 0.5em 0;
// display: none;
}
}
So I can still open and close the catalog-filter-tree. :D

It would be nice to have the same simple possibility to change the behaviour with all the other opening and closing boxes (i.e. catalog-detail-additional).
<div class="additional-box">
<h2 class="header description"></h2>
<div style="display:none" class="content description"> </div>
</div>

I can overwrite it with css easily
.content.description {
display: block !important;
}
but then it's impossible to close the content later.

trimble

PS: Sorry, I have nearly no experience with javascript.

User avatar
aimeos
Administrator
Posts: 3097
Joined: 01 Jan 1970, 00:00

Re: open list of categories

Post by aimeos » 26 Apr 2015, 11:01

trimble wrote: It would be nice to have the same simple possibility to change the behaviour with all the other opening and closing boxes (i.e. catalog-detail-additional).
<div class="additional-box">
<h2 class="header description"></h2>
<div style="display:none" class="content description"> </div>
</div>

I can overwrite it with css easily
.content.description {
display: block !important;
}
but then it's impossible to close the content later.
That's a little bit more difficult if it should also work with Javascript disabled. The current way would be to copy the setupAdditionalContentSlider() JS method in the aimeos-detail.js to your own yourtheme/aimeos.js and remove the

Code: Select all

$(".catalog-detail-additional .content").hide();
line in the code to get it working as you prefer so you would have:

Code: Select all

AimeosCatalogDetail.setupAdditionalContentSlider: function() {
    	$(".catalog-detail-additional .additional-box").on("click", ".header", function(ev) {
        $(".content", ev.delegateTarget).slideToggle();
    	$(".header", ev.delegateTarget).toggleClass("toggle-js");
    });
};

trimble
Posts: 0
Joined: 01 Jan 1970, 00:00

Re: open list of categories

Post by trimble » 27 Apr 2015, 15:46

Thanks for the code snippet. With your perfect explanation it was easy to use.

But I think that it's still a little bit nicer to have a css solution. With css I could use media queries to keep the lists closed on mobile devices and keep it open for bigger screens :D

trimble

User avatar
aimeos
Administrator
Posts: 3097
Joined: 01 Jan 1970, 00:00

Re: open list of categories

Post by aimeos » 28 Apr 2015, 07:56

trimble wrote: But I think that it's still a little bit nicer to have a css solution. With css I could use media queries to keep the lists closed on mobile devices and keep it open for bigger screens :D
This is already possible too with Javascript if you check for the view port size in the method. Nevertheless, it would be easier if you could do this with CSS as well.

Do you have an idea how this could be implemented? If Javascript is disabled, the content must be shown, otherwise users should be able to toggle the content and depending on the screen size it should be possible to hide or show the content by default.

Post Reply