Домой WordPress WordPress: Вопросы и ответы Как сделать выпадающие разделы товаров при клике на категорию?
23ответ(ов) в теме
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
1
16:59

Народ кто сталкивался с такой вот задачкой, ни как не получается её решить.
Задача состоит в том что бы на странице отображались категории, (Заголовок/под ним изображение) в ряду 3 категории, 3 колонки, сам вывод осуществляется через foreach категорий и foreach субкатегорий, функция работате отлично всё выводит, необходимо сделать так что бы при клике на категорию внизу появлялся блок с субкатегориями, на данный момент всё расползается

<?php
  $args = array(
        'taxonomy'   => 'product_cat',
        'hide_empty' => false,
        'parent'   => 0,
      );
      $product_categories = get_terms( $args );
      $count = count($product_categories);
    echo '<div id="new-vid-category">';
      if ( $count > 0 ){
        foreach ( $product_categories as $product_category ) {
            $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
      echo '<article class="new-vid-catalog">';
      echo '<div class="new-vid_title">';
      echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h2>' . $product_category->name . '</h2></a>';
      echo  '</div>';
      echo  '<div class="btn">';
            echo  '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="border:0;"/></i>';
            echo  '</div>';
        echo '<div class="new-vid-razdel">';
          echo  '<ul class="new-parent-title__overlay">';
      $args = array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => false,
                'parent'   => $product_category->term_id,
              );
              $product_categories = get_terms( $args );
              $count = count($product_categories);
              if ( $count > 0 ){
                foreach ( $product_categories as $product_category ) {
                  $thumbnail_id = get_woocommerce_term_meta( $product_category->term_id, 'thumbnail_id', true );
                 echo '<li class="new-parent-desc">';
                  echo '<i><img src="'.  wp_get_attachment_url( $thumbnail_id ) .'" style="width: 100px; height: 100px; border:0;"/></i>';
                 echo  '<a href="' . get_term_link( $product_category ) . '" title=""><h4>' . $product_category->name . '</h4></a>'; 
                 echo  '</li>';
        }}
      echo  '</ul>';
    echo  '</div>';
      echo  '</article>';
        }
      }
      
    echo  '</div>';
?>

Пример
Пример, не активный
при клике на категорию,

Редакции сообщения
09.01.2020 17:00midas34Причина: не указано
09.01.2020 17:01midas34Причина: не указано
09.01.2020 17:01midas34Причина: не указано
0
Андрей CS
не в сети 2 часа
На сайте с 30.11.-0001
Администратор
Тем 71
Сообщения 16925
2
17:24

а имеет ли смысл приводить php-код там, где речь идет о стилях? может лучше ссылку скинуть

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
3
17:38

=) верно

Вы не можете просматривать опубликованные ссылки
0
Вова (Otshelnik-Fm)
не в сети 1 неделя
На сайте с 27.01.2013
Участник
Тем 43
Сообщения 18653
4
17:42

извините - но я ничего не понял...

Наверно должен быть какой-то макет по которому верстают?
Синие блоки, красные блоки - это что?

Если вопросы про что-то скрывающееся - то должен быть js. Он где?

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
5
17:46

Замысел таков, есть Родительские категории товаров их 9,

Вы не можете просматривать опубликованные ссылки

При клике на категорию должен выезжать снизу блок/лента с подкатегориями 100х100 img + заголовок

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
6
17:48

Вы не можете просматривать опубликованные ссылки

аналог, но здесь идёт очень много целая запись, а мне нужно только подкатегории товаров, уже пробовал вариантов с 30 но у меня родительские категории разъезжаются

Редакции сообщения
09.01.2020 17:49midas34Причина: не указано
0
Вова (Otshelnik-Fm)
не в сети 1 неделя
На сайте с 27.01.2013
Участник
Тем 43
Сообщения 18653
7
17:50

Там подгружается ajax-ом.

Но сделать что-то типа аккордеона или спойлера - посмотрите на codepen - если с js у вас на "вы"

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
8
17:51

с js на вы=)

0
Андрей CS
не в сети 2 часа
На сайте с 30.11.-0001
Администратор
Тем 71
Сообщения 16925
9
19:33

как я понял, там о js еще рано говорить, с версткой беда.
Прежде чем прятать nav.new-vid-razdel в display: none; сначала надо сверстать как он будет отображаться открытый, а пока там каша.
При текущей верстке как сделать nav.new-vid-razdel выезжающим/появляющимся без position: absolute я не знаю, колонки на флексах и если пытаться разрывать шаблон дочерними элементами - все поползет, поэтому только absolute выводить и уже при нажатии на родителя добавлять нужный класс и показывать дочерние элементы правильно спозиционировав.

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
10
19:42

display: none поставил что бы отцентровать категории,
position: absolute я не пробовал, щас попробую

Редакции сообщения
09.01.2020 19:43midas34Причина: не указано
0
Андрей CS
не в сети 2 часа
На сайте с 30.11.-0001
Администратор
Тем 71
Сообщения 16925
11
19:49

я всегда верстал сначала то, что должно выводится при показе скрытых блоков, потом останется только скрыть, у вас подход обратный, но дело ваше.

1
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
12
09:37

Вы не можете просматривать опубликованные ссылки

обновил конструкцию стилей, щас думаю как доделать уже до конца

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
13
09:47

Вы не можете просматривать опубликованные ссылки

ни как не получается закончить, народ может сможете дать ссылку на пример, или подсказать где ошибка и в чём, блоки расползаются, да и js открывает только первую категорию

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
14
20:55

Народ, Help me!

Вы не можете просматривать опубликованные ссылки

, скрипт js написал, сверстал как надо, ни как не догоню две вещи:
1) Как всё таки делать разрыв между строк (надо сделать 3 колонки в 3 ряда);
2) Как сделать так, что бы при клике на другую категорию, сначала js сворачивался, а новый после открывался. (на данный момент при клике открывается и закрывается)
Почти на финишной прямой, везде уже писал, на разных форумах, ответа не получил.

Редакции сообщения
14.01.2020 20:56midas34Причина: не указано
0
Wasp
не в сети 8 месяцев
На сайте с 31.05.2019
Участник
Тем 17
Сообщения 49
15
22:08

А готовый скрипт аккордеона? проще, чем изобретать. И первый вопрос отпал бы сам собой.

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
16
22:25

хз такого не нашёл

0
Wasp
не в сети 8 месяцев
На сайте с 31.05.2019
Участник
Тем 17
Сообщения 49
17
05:04

Аккордеон есть для wp в -del- Если по каким то параметрам не подойдет, есть еще более сложный вариант.

Редакции сообщения
15.01.2020 10:02Дружаев Владимир (Otshelnik-Fm)Причина: убрал неверную ссылку
0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
18
06:24

Wasp сказал(а)
Аккордеон есть для wp в

Вы не можете просматривать опубликованные ссылки

Если по каким то параметрам не подойдет, есть еще более сложный вариант.

ссылка не правильная

0
Вова (Otshelnik-Fm)
не в сети 1 неделя
На сайте с 27.01.2013
Участник
Тем 43
Сообщения 18653
19
10:02

shortcodes ultimate

Дружаев Владимир (Otshelnik-Fm) сказал(а)
Но сделать что-то типа аккордеона или спойлера - посмотрите на codepen

- там полно готового и заготовок. Но видать вам это не надо

1
Wasp
не в сети 8 месяцев
На сайте с 31.05.2019
Участник
Тем 17
Сообщения 49
20
18:32

С утра не то скинул, вот правильная ссылка

Вы не можете просматривать опубликованные ссылки
Редакции сообщения
15.01.2020 18:39Дружаев Владимир (Otshelnik-Fm)Причина: ссылку поправил
0
Вова (Otshelnik-Fm)
не в сети 1 неделя
На сайте с 27.01.2013
Участник
Тем 43
Сообщения 18653
21
18:39

Wasp - даем ссылку на официальный репозиторий. Я ссылку вашу поправил. Не нужны тут сторонние сайты.

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
22
06:39

Да сам плагин не нужен, и знаю его, ответ подсказал земляк с habrа, щас оптимизирую код, добавлю стили, и выложу вам

0
midas34
не в сети 2 года
На сайте с 28.06.2018
Участник
Тем 23
Сообщения 105
23
10:00

Огромное спасибо автору

Вы не можете просматривать опубликованные ссылки

вот его решение

Вы не можете просматривать опубликованные ссылки

можно его доделать либо под woocommrce, либо под вывод товаров wp recall. Тема закрыта

Редакции сообщения
19.01.2020 10:01midas34Причина: не указано
19.01.2020 10:02midas34Причина: не указано
0
Тема закрыта. Публикация новых сообщений запрещена.