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

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

HIT

11.12.2016

1018

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 and 1C:Enterprise

WooCommerce and 1C:Enterprise

Разбираем на элементы плагин WooCommerce and 1C:Enterprise/1С:Предприятие Data Exchange. Плагин дает функционал обмена данными между сайтом и программой 1С: Предприятие. Некоторые моменты синхронизации сайта с 1С описаны в статье Интеграция Читать далее »

«Правильные» похожие товары в woocommerce

«Правильные» похожие товары в woocommerce

Похожие товары реализованы не совсем грамотно: если добавлять товарам метки (присущие большинству товаров, например 33 класс у ламината), то похожие товары будут выводится практически одни и те же. Исправляем данный Читать далее »

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

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

  1. ware

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

    1. Alexandr
      Alexandr

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

  2. Дмитрий

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

    1. Alexandr
      Alexandr

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

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