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

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

HIT

11.12.2016

2465

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";}

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

  • Похожие записи
  • Комментарии
  • Вложения
Обзор плагинов по фильтрации товаров WC

Обзор плагинов по фильтрации товаров WC

В данном обзоре мы будем приводить сильные и слабые стороны различных плагинов по созданию фильтрации товаров WC. Причем рассмотрим как платные, так и бесплатные решения. WooCommerce Products Filter (50 000) Читать далее »

/
Настройка адресов Woocommerce

Настройка адресов Woocommerce

В woocommerce существует 2 типа адресов: billing (адрес плательщика) и shipping (адрес доставки). Поля в обоих типах адресов дублируются. Для нашей страны более характерно использовать billing для данных клиента (без Читать далее »

Шорткод вывода товаров по метке

Шорткод вывода товаров по метке

Иногда требуется быстро вывести товары с определенной меткой. Данный шорткод проверял лично — работает. В данной функции предусмотрен вывод товаров по колонкам (wc_get_loop_prop( ‘columns’ )). Шорткод выглядит так: Данный шорткод Читать далее »

/

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

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

  1. ware

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

    1. Alexandr

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

  2. Дмитрий

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

    1. Alexandr

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

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