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

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

HIT

11.12.2016

1613

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. Общий вес заказа Чтобы выводить общий вес заказа, нужно в шаблонах cart-totals.php (в корзине) и/или review-order.php (в заказе) добавить следующий код (перед закрывающим тегом Читать далее »

/ /
Массовое редактирование свойств товаров

Массовое редактирование свойств товаров

Быстрое изменение товаров Для того чтобы массово отредактировать товары woocommerce нужно установить плагин Woocommerce advanced bulk edit. В репозитории плагинов WordPress его нет, он платный. Если поискать на просторах интернета Читать далее »

/ /

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

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

  1. Аватар
    ware

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

    1. Alexandr
      Alexandr

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

  2. Аватар
    Дмитрий

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

    1. Alexandr
      Alexandr

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

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