Домой WordPress WordPress: Вопросы и ответы Как сделать выпадающие разделы товаров при клике на категорию?
23 ответ(ов) в теме
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
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
не в сети 9 часов
На сайте с 30.11.-0001
Администратор
Тем 71
Сообщения 14979
2
17:24

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
3
17:38

=) верно

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

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

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

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

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

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

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
6
17:48

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

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

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

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
8
17:51

с js на вы=)

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

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

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

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

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

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

1
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
12
09:37

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
13
09:47

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
14
20:55

Народ, Help me!

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

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

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
16
22:25

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

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

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

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

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

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

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

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

0
Владимир (Otshelnik-Fm)
не в сети 4 часа
На сайте с 27.01.2013
Модератор
Тем 31
Сообщения 17840
19
10:02

shortcodes ultimate

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

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

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

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

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

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

0
midas34
не в сети 5 дней
На сайте с 28.06.2018
Участник
Тем 19
Сообщения 87
22
06:39

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

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

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

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

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

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

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

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