Перейти к содержимому


Фотография
- - - - -

Accordion in subcategories


Лучший Ответ Kess , 08 July 2014 - 23:42

We need to create a separate layout for those categories that need an accordion. Go to the folder

media/zoo/applications/jbuniversal/templates/catalog/renderer/subcategory/

and make a copy of _default.php. Name it accordion.php. Then open it and find this line:

<div class="subcategory subcategory-<?php echo $subcategory->alias; ?>">

now add "accordion" class to it so it will be like this:

<div class="accordion subcategory subcategory-<?php echo $subcategory->alias; ?>">

Now go to the settings of a category that should display its subcategories as accordions an choose this new accordion template there:

 

ose_200x0.png

 

Next we need to change JS and CSS:

jQuery(document).ready(function() {
    jQuery(".subcategories .accordion .subcategory-title a").click(function(event){
        event.preventDefault();
        if(jQuery(this).closest('.accordion').find('.subcategory-items').is(':visible') == false) {
            jQuery(".subcategories .subcategory-items").slideUp(600);
        }
        jQuery(this).closest('.accordion').find('.subcategory-items').slideToggle(600);
    });
});
.accordion .subcategory-items {
    display: none;
}

That should work fine.

 

Now, to make subcategory items inline it's enough to add this CSS:

.accordion .subcategory-items > div {
    display: inline-block;
}

or

.accordion .subcategory-items > div {
    float: left;
}

But they will be to close to each other so some margin will help:

.accordion .subcategory-items > div {
    float: left;
    margin-right: 30px;
}
Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 13

#1 Steven Vandermeulen

Steven Vandermeulen

Отправлено 27 June 2014 - 08:27

Hey

 

I have the following structure:

-Products

        - Potatoes

        - Beans

-Processes

        - Cutting

        - Washing

 

My items are differtent machines

 

For instance, is it possible on the potatoes page to have an accordion with all the processes used by potatoes and under each process the machines used for it? How would I do this?

 

 

Knipsel.JPG


  • 0

#2 Kess

Kess

Отправлено 28 June 2014 - 13:38

Hello,

 

Are the machines used for washing potatoes the same that are for washing beans? I mean, will the processes with similar names ("Cutting", "Washing" etc.) contain exact same machines in every type of products?


Сообщение отредактировал Kess: 28 June 2014 - 13:39

  • 0

#3 Steven Vandermeulen

Steven Vandermeulen

Отправлено 30 June 2014 - 07:59

Some machines can be used for potatoes as well as for beans, but other machines can only be used for one product...

In each machine item I made a property so I can select which processes they are used for and a property to select which products they are used for.


Сообщение отредактировал Steven Vandermeulen: 30 June 2014 - 08:01

  • 0

#4 Steven Vandermeulen

Steven Vandermeulen

Отправлено 02 July 2014 - 09:24

Is there someone out there who can help?


  • 0

#5 Steven Vandermeulen

Steven Vandermeulen

Отправлено 02 July 2014 - 15:13

Or if someone knows a different way to maintain the overview of all the machines for each product...


  • 0

#6 Kess

Kess

Отправлено 03 July 2014 - 22:12

I'm sorry for a long reply.

 

I think you should modify your products (potatoes, beans) categories structure like this:

 

-Products
    - Potatoes
        - Cutting
        - Washing
        - Transporting
    - Beans
        - Cutting
        - Washing
        - Transporting
    - Fruits
        - Cutting
        - Washing
        - Transporting

 

And then the "parent" categories (potatoes, beans, fruits) should not contain any machines. All those machines should be distributed to these subcategories.

 

JBZoo can display subcategories with their items on a page of a parent category. There is a "Subcategory item" template layout for such tasks.

 

Try to do this on one product category and see if it organizes your machines as you need. If everything is right, it will be easy to add accordion functionality as well, but I'll need to see the result first.


  • 0

#7 Kess

Kess

Отправлено 04 July 2014 - 22:36

Here is the script that should work for you:

jQuery(document).ready(function() {
    jQuery(".subcategories .subcategory-title a").click(function(event){
        event.preventDefault();
        if(jQuery(this).parent().parent().find('.subcategory-items').is(':visible') == false) {
            jQuery(".subcategories .subcategory-items").slideUp(600);
        }
        jQuery(this).parent().parent().find('.subcategory-items').slideToggle(600);
    });
});

And this is CSS for it:

.subcategory-items {
    display: none;
}

This will work even now, but in order to achieve the layout that you want, you need to change the layout of subcategories to 1 column, not 4 like they are now.


  • 0

#8 Steven Vandermeulen

Steven Vandermeulen

Отправлено 07 July 2014 - 07:22

I don't really have any experience with custom scripts, where should I add this?


  • 0

#9 Steven Vandermeulen

Steven Vandermeulen

Отправлено 07 July 2014 - 13:41

I created the files  .../assets/css/jbzoo.herbort.css and .../assets/js/jbzoo.herbort.js 

like the documentations suggests and pasted the code there. But this doesn't seem to change anything.


Сообщение отредактировал Steven Vandermeulen: 07 July 2014 - 13:46

  • 0

#10 Kess

Kess

Отправлено 07 July 2014 - 21:04

Hello,

 

I can see the script and the CSS files so you did everything right. But there is a CSS rule in your custom.css file which prevents this accordion to work properly:

.subcategory {
   height: 200px;
}

try to disable it and you will see that everything works fine.


  • 0




Click to return to top of page in style!