/ Плагины / Исчезающие сообщения woocommerce

Исчезающие сообщения woocommerce

HIT

11.12.2016

2537

4

У woocommerce есть встроенная система сообщений: при добавлении товара в корзину, при удалении товара из корзины, при различных ошибках. Но они появляются перед основным контентом, нарушая исходную верстку. Сделаем их всплывающими и исчезающими.

Данное решение в стадии разработки

Скрипт исчезновения

Так как сообщения могут возникать при различных обстоятельствах, скрипт будет в процессе дополнятся

$(document).ready(function() { 

setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').addClass("hidden");
}, 4000);
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').hide();
}, 5000);

$('.button').click(function() {
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').addClass("hidden");
}, 4000);
setTimeout(function(){
   $('.woocommerce-message, .woocommerce-error').hide();
}, 5000);
});
   
});

Таймеры нужны, чтобы сообщение некоторое время «висело», потом становилось прозрачным, а после исчезало. Исчезновение происходит за счет добавления класса .hidden {opacity: 0;} и после этого hide.

Стили сообщений

Все родные стили woocommerce я отключаю!

/* Сообщения woocommerce */

.woocommerce-info, .woocommerce-message, .woocommerce-error {
    position: fixed;
    z-index: 999;
    background-color: rgba(3,169,244,0.9);
    padding: 15px;
    top: 5%;
    right: 3%;
    width: 300px;
    text-align: center;
    margin-bottom: 15px;
    display: table;
    border-radius: 3px;
    border: 2px solid #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    -o-transition: opacity 0.9s;
    transition: opacity 0.9s ease;
    -webkit-transition: opacity 0.9s ease 0s;
}

.woocommerce-message a, .woocommerce-error a {
    color: #000;
    position: absolute;
    width: 200px;
    left: 50%;
    margin-left: -100px;
    bottom: -100%;
    padding: 7px 15px;
    border: 1px solid #fff;
    background-color: #ffeb3b;
}

.woocommerce-message a:hover, .woocommerce-error a:hover {background-color: #499800; color: #fff !important;}

.woocommerce-info a {color: #fff !important;}

.woocommerce-message {background-color: rgba(148, 225, 0, 0.9);}

.woocommerce-error {background-color: rgba(244, 67, 54, 0.9);}

.woocommerce-error li {list-style: none;}

.woocommerce-error:before, .woocommerce-info:before, .woocommerce-message:before {
    font-family: WooCommerce;
    content: "\e028";
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 25px;
    color: #fff;
}

.woocommerce-error:before {content: "\e016";}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Woocommerce основы

Woocommerce основы

Наиболее часто встречающиеся и необходимые вызовы при использовании плагина woocommerce, а так же прочие хитрости при работе с woocommerce. <?php echo $_product->get_sku( $cart_item ); ?> // Вывести артикул в корзине Читать далее »

Статусы заказов

Статусы заказов

Как и любой интернет-магазин Woocommerce присваивает заказам определенные статусы в зависимости от отплаты и формирования заказа. Существует 7 различных статусов заказа: В ожидании оплаты (Pending payment) Обработка (Processing) На удержании Читать далее »

Настраиваем woocommerce

Настраиваем woocommerce

Настраиваем различные аспекты плагина woocommerce, под текущие задачи. Ваша корзина пуста Шаблон для настроек страницы корзины (когда она пуста) находится в папке woocommerce (локализованная в теме)/cart/cart-empty.php Можно отцентрировать и добавить Читать далее »

/

Добавить комментарий

4 комментария

  1. ware

    есть ли пример работы данного скрипта ?

    1. Alexandr

      Данный функционал еще в разработке, это предварительные варианты (эксперименты) кода и стилей. Требуется доработка! Посмотреть работу в виде примера можно здесь

  2. Дмитрий

    Подскажите куда поместить код скрипта?

    1. Alexandr

      Да в принципе куда угодно: в подвал, в подключаемый файл скрипта.
      Но я пока отказался от данного решения (Исчезающие сообщения woocommerce) в целом — надо его дорабатывать.

Исчезающие сообщения woocommerce
Ротатор баннеров на PHP
Рекомендации для васРотатор баннеров на PHPOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.