Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Кейс №2. Всплывающее уведомление после добавления товара в корзину

krem-brule    14.08.2014    16260    4.7 из 5.0 (22)

Оцените материал:

    О чем здесь?

    В аудитах мы часто пишем о том, что после нажатия на кнопку "В корзину" ничего не происходит. Стандартные визуальные эффекты не позволяют пользователю понять, что делать дальше.

    Практика показывает, что с этой задачей хорошо справляются всплывающие окна с предложением оформить заказ или продолжить покупки.

    В заметке описан способ реализации таких окон при нажатии кнопки "В корзину".

    А для чего это? Товар ведь добавился!

    Как вы понимаете, товар просто улетевший в корзину никак не подталкивает пользователя к покупке. В большинстве случаев пользователь не совершает дополнительных действий, нажав соответствующую кнопку (так как её попросту нет), а всего лишь получает в лучшем случае визуальное уведомление в виде "парящего изображения" о том, что в его корзине появился новый товар. Ему не предлагается совершить каких-либо действий.

    Конечно, универсальное решение для всех интернет-магазинов предложить невозможно, однако можно воспользоваться уже существующим опытом, чтобы выбрать самый эффективный способ дальнейшего взаимодействия с покупателем, который положил товар в корзину.

    Предлагаю вам очень простое решение, которое поможет реализовать эту очень важную функцию всего за пару минут.

    Шаг №1. Шаблон корзины

    Нам нужно слегка изменить стандартную функцию добавления товара в корзину.

    Вот так она выглядит без изменений:

     function add2Basket(id,pref){
     if(lock_buttons) return false; else lock_buttons = 1;
     var opt = new Array();
     $('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
     $('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
     $('#'+pref+'-'+id+'-options').find('input:checked, select').each(function(){ opt.push(this.id.split('-')[3]+(parseInt(this.value) ? '-'+this.value :''));});
     _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
     return false;
     }
    

    А вот так с небольшой правкой:

     function add2Basket(id,pref){
     if(lock_buttons) return false; else lock_buttons = 1;
     var opt = new Array();
     $('#b'+pref+'-'+id+'-basket').attr('disabled','disabled');
     $('#'+pref+'-'+id+'-basket').removeClass('done').removeClass('err').removeClass('add').addClass('wait').attr('title','');
     $('#'+pref+'-'+id+'-options').find('input:checked, select').each(function(){ opt.push(this.id.split('-')[3]+(parseInt(this.value) ? '-'+this.value :''));});
     _uPostForm('',{type:'POST',url:'/shop/basket',data:{'mode':'add', 'id':id, 'pref':pref, 'opt':opt.join(':'), 'cnt':$('#q'+pref+'-'+id+'-basket').attr('value')}});
     $.fancybox('#added-to-cart-message-alert');
     return false;
     }
    

    Важно понимать, что в примере приведен код корзины, который актуален в настоящее время. Может так случиться, что его изменят разработчики. Поэтому, чтобы гарантировать работоспособность всех функций корзины, нужно добавить в соответствующее место $.fancybox('#added-to-cart-message-alert'); сразу после отправки запроса _uPostForm.

    Шаг №2. Добавление уведомления в шаблон сайта

    Откройте глобальный блок "Нижняя часть сайта", перейдите в самый низ и вставьте код:

    <!--Сообщение о добавлении товара-->
    <div id="added-to-cart-message-alert" style="display:none;">
    <h3>Добавлено!</h3>
    <a class="button cancel-button left" href="javascript:jQuery.fancybox.close();">Продолжить покупки</a> 
    <a class="button cancel-button center" href="/shop/checkout">Посмотреть корзину</a> 
    <a class="button red-button right" href="/shop/checkout">Оформить заказ</a>
    <div>Количеством товара можно управлять на <a href="/shop/checkout">странице оформления заказа.</a></div>
    </div>
    <!--//Сообщение о добавлении товара-->
    

    Стили оформления сознательно не прописываю, чтобы вы могли настроить уведомление под дизайн своего сайта.

    Обратите внимание, что скрипт из шага №1 обращается к контейнеру с id="added-to-cart-message-alert". Поэтому менять его не рекомендуется (только если вы не знаете, как менять скрипт).

    Всплывающие уведомления позволяют покупателю определиться, что же делать дальше: перейти к оформлению заказа или продолжить наполнять корзину.

    Не забывайте о том, что покупателя необходимо направлять и ненавязчиво руководить его действиями с того момента, как он зашёл в интернет-магазин, и до оплаты заказа. Для этого хорошо подходят кнопки нескольких цветов. Обычно самая яркая кнопка - действие которой продавцу более выгодно, а например, серые кнопки используются для второстепенных элементов.

    Это одно из решений. Оно простое и может быть выполнено даже без знаний HTML или CSS. Чтобы предложить свое решение или дополнить существующее, напишите об этом комментариях.

    Статьи по теме

    Обсуждение

    Всего комментариев: 32

    g
    1
    Здравствуйте, а где менять значение функции ад ту баскет? В виде товара в каталоге?
    avatar
    1
    3
    Шаг №1 называется Шаблон корзины. Меняем скрипт в шаблоне корзины
    g
    2
    И стили оформления Вы не прописываете? т.е. если мы сами ничего в css не пропишем, то и выводиться ничего не будет? 
    Расскажите, пожалуйста более простым языком?
    avatar
    0
    5
    Не прописываются стили для содержимого окна. Т.е. стили кнопок и текста. Даже если Вы ничего не пропишите в CSS, сообщение появится и будут ссылки для оформления заказа и продолжения покупок.

    Несомненно, что Вы можете использовать для кнопок стили, которые задействованы для кнопок добавления в корзину или на странице оформления заказа. Думаю, в любом интернет магазине такие имеются.
    g
    6
    Спасибо, Сергей. Как обычно- оперативно и доходчиво все объясняете=) огромное спасибо.
    g
    4
    Люблю отвечать на свои же вопросы. Ребята, у кого возник вопрос как у меня!!! Это для Вас=)
    Функция add to basket меняется во вкладке корзина!!! Если помогла ставьте плюсик=) 

    Но вот с дизайном так и не могу разобраться=)))
    g
    7
    Сергей, подскажите, как изменить размер всплывающего окна? Кнопки вставили, но они не умещаются в окошко(
    avatar
    0
    8
    Проблема в кнопках, для .cancel-button и .red-button стоит display: block, чтобы они были в ряд надо display: inline-block
    g
    9
    Получились в линию, но сами кнопочки уродинки стали 
    вот что я пишу в стиле 
    Это для центральной кнопки. Что здесь не так? 

    .button.cancel-button.center
    {margin-top:17px;
    width:140px;
    padding-right:55px;
    height:50px;
    line-height:50px;
    background:url(/images/ibuy.png) no-repeat;

    display: inline-block
    font-size:14px;
    text-align:right;
    text-shadow:0 1px 1px #469b9c;
    }
    g
    10
    НУ и сайт чтобы посмотреть в чем их кривизна http://www.mimi-shops.ru/
    g
    11
    Все-все, Сергей, еще раз спасибо. Все получилось. 
    {
    margin-top:17px;
    width:140px;
    padding-right:55px;
    height:50px;
    line-height:50px;
    background:url(/images/ibuy.png) no-repeat;
    margin-left:20px;
    display: inline-block;
    font-size:17px;
    text-align:right;
    text-shadow:0 1px 1px #469b9c;
    }
    g
    12
    Сергей, расскажите, пожалуйста. Добавили в сплывающее окно акционные товары через информер. Но они не меняются при последующем всплывании окна. Как можно изменить эту ситуацию? чтобы показывались разные товары информера? В информере порядка сотни товаров
    avatar
    0
    13
    По какому принципу они должны меняться? Дело в том, что когда страница загружена, то загружен и информер. Выход только в том, чтобы перезагружать информер при нажатии "В корзину".

    При этом, у информера должна в настройках стоять случайная сортировка.
    g
    14
    Так вот не вижу случайной сортировки. Если выводить материалы интернет магазина
    avatar
    0
    16
    Вот же он:
    g
    15
    Хотя вспомнили про предыдущий пост о "сопутствующих товарах" он, конечно по интереснее будет. Там хоть кнопка в корзину есть. Но мы с тем постом не разобрались. Я коменты под ним оставила, жду когда расскажите, что и как=)
    avatar
    0
    17
    Скрипт используется только для ulightbox. Последний подключается автоматически системой uCoz и вне папки сайта (s56.ucoz.ru, например). Если проблема действительно в нем, то скоро должны поправить.

    Проверил для s73 - работает корректно.

    Если хотите разобраться, то покажите сайт или содержимое консоли.
    C
    18
    Здравствуйте! Ссылка "Продолжить покупки" работает только на главной странице магазина. В каталоге и карточке товара при нажатии на нее окно не закрывается. Подскажите пожалуйста, что не так.
    avatar
    0
    19
    Здравствуйте! Ссылку на сайт нужно, можно на почту info@ucozmagazines.ru
    a
    20
    Здравствуйте! Можно ли в это окошко добавить содержимое заказа?
    avatar
    0
    21
    Да, можно. Посмотрите этот урок http://ucozmagazines.ru/publ....6#h2t-3
    a
    22
    Подскажите пожалуйста детальнее) Куда и что добавить. Спасибо!
    R
    23
    Большое спасибо за вашу работу! Прекрасный инструмент, которого так не хватало! :)
    avatar
    24
    Здравствуйте. Пользовался вашим решением всплывающего окна долгое время, а сегодня вдруг оно стало причиной 500 ошибки со стороны сервера(script error 500). Удаляя скрипты по одному получилось выяснить, что всплывающее окно было причиной. Не знаю что поменяли юкоз, обратился в поддержку и обещали исправить, но решил написать, здесь, вдруг у кого было такое или тоже случилось сегодня.
    avatar
    0
    25
    Цитата
    500 Internal Server Error [19] — любая внутренняя ошибка сервера, которая не входит в рамки остальных ошибок класса
    Решение в данной заметке не обращается к серверу, а лишь взаимодействует с пользователем (это даже не frontend).
    Скорее всего удаляя скрипты по одному просто так совпало, что ошибка была устранена (не Вами).

    Чтобы убедиться в этом, достаточно вернуть скрипт на место и увидеть, что ошибка не повторяется.
    avatar
    26
    Здравствуйте, Сергей. Могу точно сказать, что так не совпало т.к. я удалял скрипт и потом его возвращал и проблема проявлялась снова. Где-то через час поддержка сообщила что проблему устранили и я могу вернуть скрипт на место. Что касается ошибки, то в тайтле она обозначалась как server error 500, а в теле страницы SCRIPT error 500, что и навело меня на мысль удалять скрипты по одному, чтобы понять какой из них являлся причиной.
    avatar
    0
    27
    Удивительно получается. Не хотелось бы повторения такого, когда одна строка на JavaSript, запускающая fancybox приводит к подобным результатам. Это ведь опасно еще и тем, что fancybox используется повсеместно (даже в панели управления), так как автоматически подключается ко всем сайтам uCoz и uWeb.

    Т.е. возникни проблема на одном сервере и 99% должны были бы упасть все остальные сайты на сервере.

    Кстати, такое же решение используется для подсказок в панели управления сайтом, странно, что у Вас получилось туда зайти и отредактировать шаблон корзины. По идее, там должна была быть такая же ошибка.
    avatar
    28
    Я к сожалению не обладаю достаточными знаниями/навыками для оценки всей ситуации. Методом тыка получилось выявить причину, которая возникла ниоткуда(никак изменений на сайте не проводил как минимум неделю). Возможно было связано с какими-то работами со стороны ucoz/uweb, но факт остается фактом, убрал код всплывающего окна и на сайт смог зайти, вернул его - снова та же ошибка. А через час из тп сообщили что проблему устранили и можно вернуть код на место, все будет работать. Возможно у Вас получится узнать какие-то подробности у команды ucoz/uweb.
    avatar
    29
    А можно всё таки сюда стили выложить? Мне подходят те что на скриншоте.
    avatar
    0
    30
    К сожалению, этих стилей уже не осталось.
    p
    31
    удалось стили выставить?
    a
    32
    Все решил
    Кейс №2. Всплывающее уведомление после добавления товара в корзину
    Кейс №2. Всплывающее уведомление после добавления товара в корзину