Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Task:6563 | Вывод активных фильтров через GET парметры

Browse Source
dev_10_refactoring
Максим Максимов 2 months ago
parent 09bfba2c6c
commit 175ecfd93c
6 changed files with 179 additions and 229 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
  2. 3
      wp-content/themes/cosmopet/static/front-page/css/style.css
  3. 45
      wp-content/themes/cosmopet/woocommerce/archive-product.php
  4. 221
      wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig
  5. 104
      wp-content/themes/cosmopet/woocommerce/archive-product/archive-product.twig
  6. 33
      wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css

2
wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
Unescape View File

@ -541,4 +541,4 @@ document.addEventListener('DOMContentLoaded', function() {
modalAside.style.width = ''; modalAside.style.width = '';
modalAside.style.right = '-30vw'; modalAside.style.right = '-30vw';
} }
}); });

3
wp-content/themes/cosmopet/static/front-page/css/style.css
Unescape View File

@ -4557,4 +4557,5 @@ color: #f4f1f0;
.modal__aside.active { .modal__aside.active {
right: 0; right: 0;
} }

45
wp-content/themes/cosmopet/woocommerce/archive-product.php
Unescape View File

@ -8,6 +8,49 @@
wp_enqueue_style( 'shop_styles_order', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-order.css'); wp_enqueue_style( 'shop_styles_order', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-order.css');
wp_enqueue_style( 'shop_styles_ultra', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-ultra.css'); wp_enqueue_style( 'shop_styles_ultra', get_template_directory_uri() . '/woocommerce/assets/css/gp-style-ultra.css');
function get_active_woobewoo_filters_for_twig() {
$filters = [];
error_log('=== WooBeWoo: фильтры проверяются ===');
foreach ($_GET as $key => $value) {
error_log("Ключ: $key => " . print_r($value, true));
if (strpos($key, 'wpf_filter_') === 0) {
$raw_taxonomy = str_replace('wpf_filter_', '', $key);
error_log("→ Обнаружен фильтр: $raw_taxonomy");
$slugs = is_array($value) ? $value : explode(',', $value);
error_log("→ Slugs: " . implode(', ', $slugs));
// Попробуем с pa_ и без, в зависимости от существования таксономии
$taxonomy = taxonomy_exists('pa_' . $raw_taxonomy) ? 'pa_' . $raw_taxonomy : $raw_taxonomy;
foreach ($slugs as $slug) {
$term = get_term_by('slug', $slug, $taxonomy);
if ($term) {
error_log("✔ Найден термин: {$term->name} (ID: {$term->term_id}) в таксономии: $taxonomy");
$filters[] = [
'id' => $term->term_id,
'name' => $term->name,
'slug' => $term->slug,
'taxonomy' => $taxonomy,
];
} else {
error_log("✖ Термин не найден: $slug в таксономии: $taxonomy");
}
}
}
}
if (empty($filters)) {
error_log('‼️ Ни один активный фильтр не найден.');
}
return $filters;
}
$context = Timber::context(); $context = Timber::context();
//$context['posts'] = Timber::get_posts(); //$context['posts'] = Timber::get_posts();
$context['criteria_for_new_product'] = date('Y-m-d', strtotime('-30 days')); $context['criteria_for_new_product'] = date('Y-m-d', strtotime('-30 days'));
@ -68,6 +111,8 @@
$count_args = array_merge($count_args, $categories); $count_args = array_merge($count_args, $categories);
} }
$context['active_filters'] = get_active_woobewoo_filters_for_twig();
$context['posts'] = Timber::get_posts($args); $context['posts'] = Timber::get_posts($args);
$context['count'] = count(Timber::get_posts($count_args)); $context['count'] = count(Timber::get_posts($count_args));
$context['sidebar_filters'] = Timber::get_widgets('sidebar_filters'); $context['sidebar_filters'] = Timber::get_widgets('sidebar_filters');

221
wp-content/themes/cosmopet/woocommerce/archive-product/archive-product-modal.twig
Unescape View File

@ -1,221 +0,0 @@
{# <div class="modal">
<aside class="modal__aside">
<div class="modal__item modal__filter">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__title">Фильтры</p>
{{sidebar_filters}}
</div>
</div>
<div class="modal__item modal__basket">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__title">Корзина</p>
<div class="modal__content">
<div class="modal-basket__item modal-basket__item--return">
<p class="modal-basket-item__title">
Удаление товра из корзины: 5с
</p>
<button class="modal-basket-item__return">
Восстановить
</button>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
<div class="modal-basket__item">
<div class="modal-basket-item__block-image">
<img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
</div>
<div class="modal-basket-item__content">
<p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control">
<div class="counter counter--small">
<button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt="">
</button>
<input type="text" class="counter__input" value="1">
<button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt="">
</button>
</div>
<p class="modal-basket-item__price">1280</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal__footer">
<div class="modal__block-price">
<p class="modal-block-price__title">Общая стоимость</p>
<p class="modal-block-price__price">
8960
</p>
</div>
<div class="modal__block-button">
<div class="modal__button">
<button class="button button--gradient button--high button--100-perc">
Перейти к оформлению
</button>
</div>
<div class="modal__button">
<button class="to-know button--100-perc to-know--background-none">
<p>Продолжить покупку</p>
</button>
</div>
</div>
</div>
</div>
<div class="modal__item modal__to-know modal__item--no-title">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__small-title">Узнать о поступлении</p>
<p class="modal__text">
Оставьте свой e-mail, и мы оповестим вас, когда продукт появится
</p>
<form action="" class="modal__form-sub">
<div class="label">
<label for="mail" class="label__title">
mail
</label>
<div class="label__question">
text <br>
re
</div>
</div>
<input type="text" class="form__input" id="mail" placeholder="Email">
<div class="checkbox checkbox--small">
<div class="checkbox__state"></div>
<input type="checkbox" name="" id="" class="checkbox__input">
<label for="" class="checkbox__label">
Я ознакомился с <a href="#">политикой обработки персональных данных</a> и <a href="#">пользовательским соглашением</a>
</label>
</div>
<input type="submit" value="Оставить почту" class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
</form>
</div>
</div>
<div class="modal__item modal__to-know-submit modal__item--no-title">
<button class="modal__close">
<img src="assets/img/svg/main/black-x.svg" alt="">
</button>
<div class="modal__header">
<p class="modal__small-title">Подписка на товар оформлена</p>
<p class="modal__text">
На ваш e-mail ivan.ivanov@gmail.com придет письмо, как только продукт появится в наличии.
</p>
<button class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
Продолжить покупки
</button>
</div>
</div>
</aside>
</div> #}

104
wp-content/themes/cosmopet/woocommerce/archive-product/archive-product.twig
Unescape View File

@ -36,16 +36,28 @@
{% endif %} {% endif %}
</h1> </h1>
<div class="active-filters" style="display: none;">
<div class="active-filters__list"></div>
<button class="active-filters__clear button button--white" style="display: none;">
{{ function('pll_e', 'Очистить все') }}
</button>
</div>
<button class="button button--gradient button--high button--icon button--filter"> <button class="button button--gradient button--high button--icon button--filter">
{{ function('pll_e', 'Фильтры') }} {{ function('pll_e', 'Фильтры') }}
</button> </button>
</div> </div>
{% if active_filters|length > 0 %}
<div class="active-filters">
{% if active_filters is not empty %}
<div class="active-filters">
{% for filter in active_filters %}
<span class="active-filter-tag" data-filter-id="{{ filter.id }}" data-filter-slug="{{ filter.slug }}" data-filter-taxonomy="{{ filter.taxonomy }}">
{{ filter.name }} ×
</span>
{% endfor %}
</div>
{% endif %}
<button class="active-filters__clear button button--white">
{{ function('pll_e', 'Очистить все') }}
</button>
</div>
{% endif %}
<div class="product__main"> <div class="product__main">
{% for post in posts %} {% for post in posts %}
@ -61,5 +73,85 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const filterButtons = document.querySelectorAll('.product-tagitem');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const slug = button.dataset.slug;
const taxonomy = button.dataset.taxonomy;
const param = 'wpf_filter_' + taxonomy;
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.has(param)) {
let values = params.get(param).split(',');
values = values.filter(v => v !== slug);
if (values.length > 0) {
params.set(param, values.join(','));
} else {
params.delete(param);
}
url.search = params.toString();
window.location.href = url.toString();
}
});
});
// Обработка клика на отдельные теги активных фильтров
const activeFilterTags = document.querySelectorAll('.active-filter-tag');
activeFilterTags.forEach(tag => {
tag.addEventListener('click', () => {
const slug = tag.dataset.filterSlug;
const taxonomy = tag.dataset.filterTaxonomy;
// Убираем префикс pa_ если есть для формирования параметра URL
const rawTaxonomy = taxonomy.replace('pa_', '');
const param = 'wpf_filter_' + rawTaxonomy;
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.has(param)) {
let values = params.get(param).split(',');
values = values.filter(v => v !== slug);
if (values.length > 0) {
params.set(param, values.join(','));
} else {
params.delete(param);
}
}
url.search = params.toString();
window.location.href = url.toString();
});
});
// Обработка кнопки "Очистить все"
const clearAllBtn = document.querySelector('.active-filters__clear');
if (clearAllBtn) {
clearAllBtn.addEventListener('click', () => {
const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
for (const key of Array.from(params.keys())) {
if (key.startsWith('wpf_')) {
params.delete(key);
}
}
url.search = params.toString();
window.location.href = url.toString();
});
}
});
</script>
{% endblock %} {% endblock %}

33
wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css
Unescape View File

@ -1947,6 +1947,39 @@ main{
} }
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.active-filter-tag {
padding: 6px 12px;
border: 1px solid #3EC2A6;
border-radius: 16px;
color: #3EC2A6;
font-weight: 400;
font-size: 20px;
line-height: 120%;
white-space: nowrap;
cursor: default;
transition: all 0.2s;
text-transform: uppercase;
}
.active-filter-tag:hover {
background-color: #e8f8f5;
cursor: pointer;
}
.active-filters__clear.button--white {
padding: 6px 12px;
height: 38px;
margin-top: 20px;
}

Write Preview
Loading…
Cancel
Save