Блог

Главная - Вопросы по программированию - Сделайте так, чтобы сообщения магазина Woocommerce на странице корзины исчезли через 6 секунд

Сделайте так, чтобы сообщения магазина Woocommerce на странице корзины исчезли через 6 секунд

#php #wordpress #woocommerce

Вопрос:

Я ищу помощи в решении одной проблемы, которая у меня есть. У меня нет опыта в кодировании. Для моего магазина WooCommerce я хотел, чтобы сообщения о магазине (обновленная корзина и т. Д.) Исчезли через 6 секунд. Я заставил это отлично работать с кодом (используя фрагменты кода).:

 add_action( 'wp_head', function () { ?>
<script>

 setTimeout(function() {
jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow') 
    }, 6000);
</script>
<?php } );

Однако на странице корзины он работает только 1 раз после нажатия кнопки обновить корзину. Как я могу исправить это или просто отключить приведенный выше скрипт только на этой странице?

Ответ №1:

Используйте метод setInterval вместо тайм-аута, потому что он запускается только один раз.

 setInterval(function() {
    jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow') 
}, 6000);

Комментарии:

1. Спасибо вам за ваш ответ. Используя setInterval, он действительно перезагружается каждый раз. Однако тогда у меня есть еще одна проблема, и она заключается в том, что 6 секунд не являются постоянными на странице корзины. Иногда это составляет всего 1 секунду, а в других случаях-больше. Есть ли способ установить точное время в 6000 мс?

2. поместите этот код в document.ready или документ. функция загрузки, чтобы она срабатывала ровно через 6000 мс точно после готовности или загрузки страницы.

3. Спасибо, но я понятия не имею, как это сделать. Я надеялся вставить какой-нибудь дополнительный код в тот, что был в первом посте, чтобы он работал.

4. jQuery( документ ).готов(функция() { setInterval(функция() { jQuery(‘.woocommerce-сообщение, .woocommerce-ошибка’).Затухание(«медленное») }, 6000); });

5. add_action( 'wp_head', function () { ?> <script> jQuery( document ).ready(function() { setInterval(function() { jQuery('.woocommerce-message, .woocommerce-error').fadeOut('slow') }, 6000); }); </script> <?php } ); Теперь у меня есть это, но все равно это не работает

Ответ №2:

вам нужно сделать шаг к изменению, чтобы сделать это более ясным. внесите изменения CSS и добавьте следующие строки в свой .css файл:

 .woocommerce-notices-wrapper{
    -webkit-transition: opacity 0s ease-in-out;
    -moz-transition: opacity 0s ease-in-out;
    -ms-transition: opacity 0s ease-in-out;
    -o-transition: opacity 0s ease-in-out;
     opacity: 1;
    position: absolute !important;
    right: 50px !important;
    width: 25%;
    height: 100%;
    z-index: 1000;
    top: 130px;
}

а также добавьте следующую строку JS в свой header.php или в вашем файле .js:

 <script>
$(function() {
setTimeout(function() { $(".woocommerce-notices-wrapper").fadeOut(1500); }, 3000)

})
</script>

Примечание:

  1. если вы добавите второй раздел в свой файл JS, удалите <script> и </script>
  2. Этот CSS раздел является необязательным. И я думаю, что это делает панель уведомлений лучше.
  3. Вы можете изменить номер в js, чтобы изменить время.

Комментарии:

1. Спасибо также и за этот метод. Однако из-за этого перестали работать кнопки «Обновить корзину» и «Вернуться в магазин». Кроме того, уведомление пришло в странном положении. Может быть, какая-то несовместимость с некоторыми из моих плагинов?

Метки: ,