Вопрос или проблема
Я создаю свой собственный магазин с электронной коммерцией, и я новичок в разработке, я хорошо знаю CSS/HTML, но JS не мой конек… На самом деле, я хочу отображать некоторые продукты случайным образом на странице “no_product_found” в woocommerce. Когда клиент приходит к продукту, который отсутствует в магазине, или в пустую подкатегорию, он отображает продукты случайным образом.
Я добавил этот хук в файл function.php своего дочернего шаблона.
add_action( 'woocommerce_no_products_found', 'show_products_no_products', 20 );
function show_products_no_products() {
echo '<h2 class="customnoproduct">' . __( 'Хьюстон... У нас проблема! </br>Мы не нашли никаких продуктов в этой категории 👩🚀', 'north' ) . '</h2>';
echo do_shortcode( '[products orderby="rand" per_page="8"]' );
}
Это работает правильно и отлично, но моя панель фильтров всегда отображается! Я хочу скрыть их, поэтому я создал другую функцию и вызываю ее напрямую в php.
В моем файле function.php
function hidefilter_callback() {
?>
<script>function removeElement(thb-shop-filters) {
// Удаляет элемент из документа
var element = document.getElementById(thb-shop-filters);
element.parentNode.removeChild(thb-shop-filters);
}</script>
<?php
}
add_action( 'myhelp', 'hidefilter_callback' );
И потом, тоже в function.php, создайте add_action.
add_action( 'woocommerce_no_products_found', 'myhelp', 30 );
function myhelp() {
do_action( 'wp_head','myhelp' );
}
Я не знаю, хороша ли моя JavaScript функция… Но функция отображается, но не в заголовке моей страницы, я не понимаю почему? Когда я добавляю свой do_action( 'wp_head','myhelp' ); в хук show_products_no_products, он появляется, но на моем сайте… Таким образом, функция не выполняется.
Как я могу это исправить?
Извините за мой английский, я француз и старался написать правильно! Спасибо за вашу помощь заранее!
Лучше использовать PHP, чтобы удалять вещи, когда это возможно, потому что если вы просто используете JS, они все еще технически находятся на странице. Что если посетитель находится в сети с медленной загрузкой, и JS не срабатывает долго, так что они видят фильтры достаточно долго, чтобы их использовать? Если вы сможете выяснить, какой фактический файл шаблона используется для отображения страницы, когда продуктов не найдено, вы, вероятно, сможете внести изменения там и сделать их условными – показывать фильтры только если woocommerce_no_products_found ложь.
Помимо этого, проблема, с которой вы сталкиваетесь, заключается в том, что вы добавляете свой myhelp действие к хуку woocommerce_no_products_found. Это значит, что ваша функция будет выполняться только тогда, когда срабатывает этот хук – а он не срабатывает, когда срабатывает wp_head, это происходит гораздо позже. Вот почему ваш код не вставляется в заголовок.
Ответ или решение
Вопрос, с которым вы столкнулись, связан с использованием хуков в WooCommerce для управления отображением элементов на странице. Вы хотите скрыть элементы фильтра, когда нет доступных продуктов в категории, и добавить функцию, которая будет отображать случайные продукты на странице «нет продуктов». Давайте рассмотрим это детально и по шагам.
Шаг 1: Показ случайных продуктов на странице «нет продуктов»
Ваш код для отображения заголовка и случайных продуктов выглядит корректно. Однако убедитесь, что вы правильно используете хук. Ниже приведен пример, как это можно сделать:
add_action('woocommerce_no_products_found', 'show_products_no_products', 20);
function show_products_no_products() {
echo '<h2 class="customnoproduct">' . __('Houston... У нас проблема! <br>Мы ничего не нашли в этой категории 👩🚀', 'north') . '</h2>';
// Измените параметры в шорткоде, если хотите показывать больше/меньше продуктов
echo do_shortcode('[products orderby="rand" per_page="8"]');
}Шаг 2: Скрытие элементов фильтров
Вместо использования JavaScript для скрытия элементов фильтров, что не всегда является надежным решением, рекомендуется управлять видимостями на стороне PHP. Для этого убедитесь, что вы определяете условия отображения фильтров в соответствующем шаблоне WooCommerce. Если фильтры добавляются через хук, вы можете использовать условие, чтобы исключить их отображение, если товаров нет.
Шаг 3: Условное отображение фильтров
Чтобы скрыть фильтры при отсутствии продуктов, вы можете использовать следующий код, добавленный в файл functions.php вашей темы:
// Скрыть элементы фильтра на странице "нет продуктов"
add_action('woocommerce_before_shop_loop', 'hide_filters_when_no_products');
function hide_filters_when_no_products() {
if (!woocommerce_product_subcategories() && ! have_posts()) {
remove_action('woocommerce_after_shop_loop', 'woocommerce_catalog_ordering', 30);
// Удалите другие фильтры аналогичным образом
}
}Шаг 4: Понимание хуков и их работа
Важно понимать, что ваш вызов do_action('wp_head', 'myhelp') не выполнится в контексте вашего хука woocommerce_no_products_found, так как wp_head вызывается раньше. Если вам нужно добавить JavaScript в заголовок, вы можете вставить его прямо там, где это требуется, например:
add_action('wp_head', 'insert_js_for_no_products');
function insert_js_for_no_products() {
if (is_product_category() && !have_posts()) {
?>
<script>
// JavaScript-код для скрытия фильтров, например
var filterElement = document.getElementById('thb-shop-filters');
if (filterElement) {
filterElement.style.display = 'none';
}
</script>
<?php
}
}Этот код вставит ваш JavaScript в заголовок страницы только тогда, когда пользователь находится на категории продуктов без доступных товаров.
Заключение
Проблема, с которой вы столкнулись, заключается в неправильном использовании хуков и неэффективном подходе к скрытию элементов на странице. Использование PHP для управления выводом фильтров и продуктов обеспечит более быстрое и безопасное решение, чем полагаться на JavaScript. Выше приведенные примеры помогут вам реализовать нужную функциональность без лишних сложностей.