Page 1 of 1

open list of categories

Posted: 20 Apr 2015, 21:18
by trimble
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

Re: open list of categories

Posted: 21 Apr 2015, 06:55
by aimeos
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.

Re: open list of categories

Posted: 25 Apr 2015, 10:20
by trimble
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.

Re: open list of categories

Posted: 26 Apr 2015, 11:01
by aimeos
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");
    });
};

Re: open list of categories

Posted: 27 Apr 2015, 15:46
by trimble
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

Re: open list of categories

Posted: 28 Apr 2015, 07:56
by aimeos
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.