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

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

HIT

11.12.2016

2081

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

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

  • Похожие записи
  • Комментарии
  • Вложения
Отключаем стандартные метабоксы

Отключаем стандартные метабоксы

Отключая стандартные метабоксы, мы фактически избавляемся изначально от лишнего функционала. При отключении метабоксов мы также отключаем сами поля, что позволяет существенно разгрузить таблицу wp_postmeta (особенно если у сайта несколько тысяч Читать далее »

Изменение методов доставки в зависимости от условий

Изменение методов доставки в зависимости от условий

При оформлении товара мы можем задавать условия для вывода методов доставки, а также менять их стоимость. В данном примере при достижении сумм 1000 и 5000 методы доставки становятся бесплатными. Закомментирован Читать далее »

/
Купон на следующий заказ

Купон на следующий заказ

Проработаем функционал по отправке купона на следующий заказ. Дополнительные условия: Купон должен отправлять только при наличии в текущем заказе товара из определенной категории Номинал купона либо 30% если сумма следующей Читать далее »

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

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

  1. ware

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

    1. Alexandr

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

  2. Дмитрий

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

    1. Alexandr

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

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