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)
#1562 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
#1563 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/Themes/Adapt_existing_themes). For the category slider it's the CSS code for the ".catalog-filter-tree" selector and the "setupCategoryToggle()" method in the JS file.
#1564 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.
#1565 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 allAimeosCatalogDetail.setupAdditionalContentSlider: function() {
       $(".catalog-detail-additional .additional-box").on("click", ".header", function(ev) {
        $(".content", ev.delegateTarget).slideToggle();
       $(".header", ev.delegateTarget).toggleClass("toggle-js");
    });
};
#1571 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
#1573 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.