uCozMagazines.ru

Обзор GetSale — сервиса виджетов для увеличения конверсии интернет-магазина

Сергей — Thu, 24 Aug 2017 09:24:56 GMT

О чем здесь?

GetSale - профессиональный инструмент для создания виджетов (pop-up окон). Сервис позволяет собирать контакты, повышать лояльность пользователей и информировать посетителей о проходящих акциях и других важных событиях.

Возможности getsale.io

Возможности GetSale очень широки, попробуем вкратце описать их.

Акции, скидки, предложения
Всплывающее окно с предложением оставить email в обмен на специальное предложение	Поможет нарастить базу контактных данных лояльных посетителей. В обмен на email предложите уникальные акции, спецпредложения на почту.
Нотификация с предложением оставить email и подписаться на акции	Поможет нарастить базу контактных данных лояльных посетителей. С последующей рассылкой специальных предложений.
Растяжка со сбором email (подписка на спецпредложения, акции и скидки)	Поможет нарастить базу контактных данных лояльных посетителей. С последующей рассылкой специальных предложений.
Растяжка со ссылкой на страницу акций и спецпредложений	Повышение просмотра рекламируемых разделов. Улучшение поведенческих факторов: глубина просмотра, время на сайте.
Нотификация со ссылкой на страницу акций и спецпредложений	Повышение просмотра рекламируемых разделов. Улучшение поведенческих факторов: глубина просмотра, время на сайте.
Специальные условия доставки
Всплывающее окно бесплатной доставки в зависимости от суммы заказа	Повышение среднего чека и лояльности клиентов. Бесплатная доставка мотивирует к совершению сделки не хуже скидок.
Растяжка с условиями доставки для конкретного города или страны посетителя	Мотивация к покупке с предложением удобного и простого способа доставки товара, повышение лояльности клиента.
Корзина и оформление заказа
Всплывающее окно с промокодом при добавлении товара в корзину	Увеличение количества продаж, увеличение среднего чека продаж. Мотивация к совершению покупки.
Нотификация с промокодом на скидку при оформлении заказа	Повышение лояльности покупателя и мотивация к совершению покупки. И, как следствие, на увеличение количества продаж.
Всплывающее окно с напоминанием о забытой корзине при уходе с сайта	Мотивация к оформлению заказа. Возврат брошенной корзины, увеличение продаж и возврат посетителя на сайт.
Промо-коды
Всплывающее окно с промокодом на скидку	Улучшение лояльности, возврат покупателя на сайт, мотивация к оформлению покупки.
Нотификация со сбором контактных данных в обмен на промокод	Улучшение лояльности, рост клиентской базы контактов.

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

И чтобы далеко не бегать, в GetSale есть виджет обратного звонка с настройкой показа по расписанию.

Для работы в GetSale, вам потребуется аккаунт:

Создать аккаунт в GetSale

Установка getsale.io

Чтобы начать пользоваться GetSale, достаточно добавить JS-код на все страницы своего сайта. Когда вы только зарегистрируетесь, система предложит пройти процесс настройки:

После ввода адреса сайта вы получите код, который нужно добавить на страницы магазина. Добавьте его в шаблон «Нижняя часть сайта».

Нажмите на кнопку «Я установил код». Откроется страница, на которой нажмите на раздел, который используется в вашем магазине:

Акции, скидки, спецпредложения
Специальные условия доставки
Корзина и оформление заказа
Группы в социальных сетях (для этих целей можно использовать uSocial)
Промо-коды
Блог, новости
Новостная рассылка

Мы рассмотрим пример установки виджета «Всплывающее окно бесплатной доставки в зависимости от суммы заказа». Для этого выполните следующие простые шаги:

Выберите шаблон или создайте свой
Настройте параметры показа виджета
Сохраните виджет и нажмите на кнопку «Запустить»

Виджет начнет функционировать на вашем сайте сразу после пополнения баланса. Не нжуно размещать дополнительно еще какой-то код, все происходит автоматически. Это удобно при проверке нескольких разных виджетов.

Вывод

GetSale предлагает массу инструментов, которые пригодятся практически любому интернет-магазину: скидки, корзина, доставка, промо-коды рассылки. Достаточно выбрать два-три виджета и начать их тестировать. В личном кабинете вы сможете посмотреть статистику. Можно даже цели из Метрики и Analytics импортировать.

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

Попробовать GetSale

Обзор премиум-версии uCalc

Сергей — Wed, 09 Aug 2017 06:27:48 GMT

Что такое uCalc?

uCalc — конструктор калькуляторов для сайта любой тематики. Неважно, владелец вы интернет-магазина или развлекательного портала, uCalc всегда можно применить с пользой. Примеры использования: от «доширакометра» до калькулятора платных услуг или ипотеки.

Прелесть калькулятора в том, что его можно установить на любой сайт всего за пару минут. И выглядеть он будет, например, так:

В uCalc предусмотрены шаблоны для разных сфер: такси, доставка, автосервисы, клининг. Собирается калькулятор с помощью визуального редактора:

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

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

Зарегистрироваться в uCalc

Но у uCalc есть и премиум-версия, возможности которой рассмотрим более детально.

Преимущества премиум-версии

Вот перечень всех возможностей премиум версии:

E-mail уведомления: +300шт. в месяц (в бесплатной версии 100шт.)
SMS-уведомления
Статистика и цели (Яндекс.Метрика, Google Analytics)
Виджет «картинка»
Отсутствие рекламы и копирайта uCalc
Приоритетная техподдержка
Добавление ссылок в текст и кнопки
Вставка своего HTML-кода

Давайте посмотрим, как использовать премиум возможности.

Email и SMS оповещения

Когда вы принимаете заявки на оказание платных услуг, то использование email и SMS оповещений позволяет держать потенциального клиента «в тонусе». Напомните о себе, чтобы клиент не отказался от ваших услуг.

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

Статистика и цели

На любую кнопку можно повесить цель из Метрики или Analytics. Так вы сможете измерить эффективность работы калькулятора:

Согласитесь, полезно понимать, как работает калькулятор, особенно, если платите за него деньги.

Добавление картинок, ссылок, HTML-кода

Добавление картинок позволяет сделать калькулятор более привлекательным. Ссылка на кнопке дополнительно откроет указанный в настройках URL-адрес в новой вкладке посетителя (можно указать страницу с благодарственным сообщением или инструкцию с дальнейшими действиями).

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

Примеры использования нестандартного оформления калькуляторов:

Прием платежей

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

Данный функционал позволяет подключить прием средств через Яндекс.Деньги, Яндекс.Кассу или PayPal. Все, что нужно — установить взаимоотношения с одной из платежных систем, а далее в настройках калькулятор все настраивается за 5 минут (благо есть база знаний).

Цена премиум-версии

Обычно к вопросу стоимости отличных сервисов редко приходится подходить в ожидании чего-то «отличного». Все они стоят своих денег. Но в этот раз есть хорошая новость. Цена за калькулятор uCalc — всего $2,5 в месяц при оплате на 5 лет (обычная цена — $5).

Даже если вы не собираетесь пока пользоваться премиум-версией uCalc, зайти и попробовать создать калькулятор однозначно стоит.

Попробовать uCalc

P.S. Если у вас нет времени на создание калькулятора, то можете заказать под ключ у специалистов и получить месяц премиума в подарок.

Как открыть Яндекс.Навигатор со страницы заказа?

Сергей — Fri, 19 May 2017 11:24:04 GMT

О чем здесь?

Как быстро запустить навигатор, зная адрес покупателя? Кейс, который облегчит работу ваших курьеров.

Как это работает?

После назначения заказа, курьер в личном кабинет может перейти на страницу заказа и посмотреть данные о покупателе: телефон, адрес доставки, сумму и другое.
Курьер перед отправлением к покупателю нажимает кнопку "Поехали" на странице заказа.
В его телефоне/планшете запускается Яндекс.Навигатор с проложенным маршрутом. Маршрут берется из поля, которое заполняет покупатель при оформлении заказа.

Давайте подробнее рассмотрим, как этого добиться.

Подготовьте сайт

Откройте панель управления «Дизайн» / «Управление дизайном», шаблон «Страница заказа». Добавьте кнопку «Поехали» в произвольное место шаблона, а код перед закрывающим тегом :

Важно заменить поля заказа на свои:

$ORDER_FIELD_4$ - город
$ORDER_FIELD_5$ - улица
$ORDER_FIELD_6$ - номер дома

Если доставка в рамках одного города, то замените $ORDER_FIELD_4$ на простой текст (если есть пробелы в имени города, то замените их на «+» — «Нижний+Тагил»).

Подготовьте телефон/планшет курьера

Скачайте и установите приложения: сначала Яндекс.Навигатор, затем Яндекс.Карты.

В приложении Яндекс.Карты откройте раздел: «Настройки» / «Маршруты» и включите опцию «Маршруты в Навигаторе».

Настройка завершена! Приятного использования.

Автозаполнение формы заказа

Сергей — Wed, 21 Dec 2016 09:11:01 GMT

О чем здесь?

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

На странице пользователя (/panel/?a=tmpl;m=4;t=5) делаем разметку с помощью span. Задаем произвольные id для каждого поля, значение которого надо вставить в форму заказа.

 
$_NAME$ 
$_AOL$ 
$_MSN$
$_STATE$
$_SIGNATURE$

Соответственно, у меня это: фамилия, имя, отчество, почтовый индекс и адрес (всё для примера).

Сохраняем, идем в шаблон Страницы служебных форм (/panel/?a=tmpl;m=20;t=5).

Вставляем скрипт:

Где #order-fld-7, 24, 25, 12, 9 - это id нужных вам полей формы заказа. у каждого они будут свои, смотрите исходный код.

Удачи!

«+/-» для кнопки добавления товара

Сергей — Mon, 28 Nov 2016 12:32:33 GMT

О чем здесь?

В сегодняшней заметке я хочу поделиться кейсом, который позволяет реализовать продажу товаров по весу/количеству через кнопки «+/-».

Решение принимает значение шага (+100, -100) и единицу товара (шт., кг, упаковки).

Как это работает?

Решение скрывает форму ввода количества и размещает вместо нее кнопки «+/-», нажимая на которые пользователи меняют количество добавляемого товара в корзину. При этом есть возможность настроить решение таким образом, что добавляться будет количество кратное заданному числу.

Подключение скрипта

Скачайте weight_counter.js и загрузите его на сайт. Разместите приведенный CSS в общих стилях сайта. Затем, согласно приведенному ниже примеру подключите скрипт в необходимых шаблонах сайта.

Стоит отдельно описать параметры функции:

gid — id товара, здесь ничего менять не требуется. Всегда оставляйте $ID$;
grid — размер шага, на величину которого будет меняться значение количества (веса). Он же выводится как минимально допустимое значение. Например, число 100 позволит добавить в корзину кратные только ста числа: 100, 500, 1200, 10500 и т.д.;
unit — единица измерения товара. Может быть граммом, тонной, метром, штукой или упаковкой. Играет роль чисто информационную, показывая пользователю, сколько товара он добавляет в корзину. При этом цена у товара должна быть за 1 указанную единицу и не зависеть от размера шага (grid);
block_pref — переменная, необходимая для корректного пересчета цен при изменении количества. По умолчанию 'id', если не задано другое.

В результате должно получиться следующее:

Гибкая настройка

Важно, что подключая скрипт в шаблонах, вы можете использовать условные операторы, чтобы гибко реализовать его работу. Например, задать для категорий различный размер шага и единицы измерения. В категории "смеси" это могут быть килограммы, кратные 5, в категории "кабели" 1 метр (или погонный метр), а в остальных — не подключать скрипт, оставив обычный ввода количества.

Настройка показа способов оплаты и доставки по заданным условиям

Сергей — Wed, 12 Oct 2016 06:40:51 GMT

Как это работает?

При каждом посещении страницы оформления заказа мы будем проверять заказ по нескольким параметрам. И в зависимости от совпадения условий — скрывать способы оплаты и доставки.

Проверяться будут следующие параметры:

Список ID товаров
Сумма заказа
Количество позиций в заказе
Суммарный вес заказа

Установка скрипта

Сохраните скрипт по ссылке и загрузите его на свой сайт.

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

Исходный код

Ниже представлен исходный код скрипта ch_methods.js, который нужно скачать и загрузить на сайт, а также пример подключения решения с описанием параметров, которые нужно передать в функцию.

Итоги. Сентябрь 2016

Сергей — Wed, 05 Oct 2016 07:32:32 GMT

О чем здесь?

Мы стараемся развивать uCozMagazines, предлагая новые интересные статьи и сервисы. Эта обзорная заметка расскажет о том, что нового появилось за прошедший месяц сентябрь 2016 года на сайте и в процессе работы над интернет магазинами uCoz.

Новые статьи

В сентябре были опубликованы два кейса:

И снова не удается открыть курс по Bootstrap, там слишком мало уроков. Октябрь крайний срок.

Разработка шаблонов и скриптов

В сентябре был ряд интересных работ, вот некоторые из них:

Интеграция корзинного виджета Яндекс.Доставки

Аргегатор способов доставки включает в себя все, что нужно интернет магазину: курьерская доставка, самовывоз (BoxBerry, InPost и т.д.). После оформления заказа он дублируется в личный кабинет на Яндекс.Доставке:

Возможно, в ближайшее время напишу пост о том, как его интегрировать в свой интернет магазин uCoz.

Интеграция Сбербанк.Онлайн

Она еще не готова до конца, но уже есть представление о том, как это реализуется и будет выглядеть в итоге.

Обработчик цен и остатков на uAPI

Решение позволяет обрабатывать цены и остатки из файла CSV для всех товаров магазина независимо от конфигурации и способа добавления (вручную, импорт XLS, YML, 1C).

Валидация полей формы заказа интернет магазина

Сергей — Wed, 28 Sep 2016 08:06:44 GMT

О чем здесь?

Мы научимся проверять данные пользователя при оформлении заказа.

Решение проверит поля имя, адрес, email, телефон и выдаст пользователю рекомендации по их заполнению.

За основу взят валидатор, который работает для формы регистрации uID-пользователей. Все стили и оформление также оттуда.

Исходные данные

У нас имеется валидатор, который работает для формы регистрации uID-пользователей. Нам необходимо адаптировать его под нужды интернет магазина.

Посмотреть на работу валидатора можно на любом сайте с включенной uID авторизацией. Для этого перейдите на страницу /index/3. Например на регистрация на нашем сайте.

Что будем проверять?

Проверку проходят:

Длина имени пользователя
Длина адреса доставки
Email пользователя. На корректность по регулярному выражению, а также на существование аккаунта с таким email
Телефон пользователя на длину и содержание (допускаются только цифры, скобки, дефисы)

Если вы хотите добавить в скрипт свои способы проверки, то напишите об этом в комментариях.

Пишем код

Если взглянуть на исходный код страницы регистрации uID пользователей, то можно найти в ней объект uValidator:

var uValidator = {
 name: function(obj){
 return obj.value.length<2 ? 1 : 0;
 },
 captcha: function(obj,submit){
 var err = (obj.value.length < 5) ? 'Неправильный код безопасности' : 0;
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/', data:{a:48,seckey:'3380907071097286895',code:obj.value,v:2}});
 }
 return err;
 },
 email: function(obj,submit){
 obj.value = obj.value.replace(/^(\s+)|(\s+)$/,"");
 var err = obj.value.match(/^[a-zA-Z0-9_\.\-]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,8}$/) ? 0 : 'E-mail указан неправильно';
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/sub/', data:{a:50,email:obj.value,v:2}});
 }
 return err;
 },
 password: function(obj,submit){
 var pwds = ['zaqwsx','lollipop','zaq12wsx','qazwsx','q1w2e3r4','qwerty','photoshop','vfrcbv','pokemon','matrix','secret','adobeadobe','qwertyuiop[]','administrator','cjkysirj','123qweasdzxc','Test123','qweasdzxc','nikita','vkontakte','123abc','super','joshua','zzzzzz','aaaaaa','gfhjkm','natasha','yfnfif','qweasd','lovers','alexey','TempPassWord','1q2w3e4r5t6y','lol123','hello','123458b','nokia','spartak','qwe123','holysh!t','dragon','www.unet.com','star','admin','changeme','fktrcfylh','1q2w3e','qwertyuiop','zxcvbn','nastya','zxcvbnm','hallo','samsung','q1w2e3r4t5','ghbdtn','1q2w3e4r','adobe1','qazwsxedc','football','123qwe','q1w2e3','qwaszx','pass','easytocrack1','12qwaszx','qweqwe','12345qwert','macromedia','genius','qwert','abcd1234','password12345','monkey','qwerty12345','password1234567','letmein','asdfgh','nonhory45','andrea','asdfghjkl','123456a','knopka','fyfcnfcbz','test','password123456789','123456asdfghjkl','sergey','asdasd','qwertyu','dvp1dvp1dvp1dvp1','1q2w3e4r5t','iloveyou','qwer1234','vfhbyf','password123456','q1q1q1','sunshine','soccer','qwerty123','1qaz2wsx','fylhtq','marina','andrey','root','password','azerty','shadow','killer','abc123','stalker','password1','password1234','naruto','master','computer','guest','charlie','superman','fuckyou','admin123','andrew','password123','asdf','password12','demo','princess','password12345678','internet','marysia','hallo123','a369369','maximius','sexsexsex','vjqcfqn','ZXC321','1qazxsw2','1234qwer','asasas','12345qwe','ssssss','sasasa','zhurnal','1qaz2wsx3edc','qwerty123456','whatever','adobe123','daniel','summer','michael','pepper','liverpool','asdfasdf','jessica','asdfghj','726190','welcome','alexander','fdsa','chocolate','tigger','thomas','michelle','freedom','dreamweaver','maggie','purple','nicole','baseball','jennifer','jordan','trustno1','9ginger','buster','snoopy1','abcdef','647750','hannah','879957','064003','093817','787608'];
 var is=0;
 var err=0;
 for (var i=0;i15){err='Максимальная длина пароля 15 символов';}
 else if (obj.value.length<6){err='Минимальная длина пароля 6 символов';}
 else if (obj.value=='kDi3p9S7'){err='Пароль из примера недопустим';}
 else if (obj.value.match(/[^a-zA-Z0-9\-_]/)){err='В пароле присутствуют недопустимые символы';}
 else if (obj.value.match(/^[0-9]+$/)){err='Слишком простой пароль';}
 else if (is==1){err='Слишком простой пароль';}
 return err;
 }
 }

Он имеет методы name, captcha, email и password. Каждый из этих методов запускается для проверки соответствующего поля: имя, капча, email, пароль. Возможно, есть и другие методы, которые появятся, если поиграться с настройками полей регистрации, но нам достаточно и этих.

Пароль и капча на странице оформления заказа не используются, поэтому мы их убираем. Но у нас есть поле телефон и адрес доставки, поэтому мы их добавим:

var uValidator = {
 name: function(obj){
 return obj.value.length<2 ? 'Имя не может быть короче двух символов' : 0;
 },
 addres: function(obj){
 return obj.value.length<10 ? 'Адрес не может содержать менее 10 символов' : 0;
 },
 phone: function(obj){
 var err = obj.value.match(/^\d[\d\(\)\ -]{4,14}\d$/) ? 0 : 'Телефон указан неправильно. Телефон должен начинаться с цифры';
 return err;
 },
 email: function(obj,submit){
 obj.value = obj.value.replace(/^(\s+)|(\s+)$/,"");
 var err = obj.value.match(/^[a-zA-Z0-9_\.\-]+\@[a-zA-Z0-9\.\-]+\.[a-zA-Z0-9]{2,8}$/) ? 0 : 'E-mail указан неправильно';
 if(!err && (typeof submit == 'undefined')){
 err = -1;
 _uPostForm('',{type:'POST',url:'/index/sub/', data:{a:50,email:obj.value,v:2}});
 }
 return err;
 }
 
 }

На самом деле я немного изменил сообщение об ошибке при проверке имени. В ходе тестов выяснилось, что если оставить исходный код, то сообщение не показывается. Адрес доставки имеет схожий код, разница, лишь в минимально допустимой длине.

В случае с телефоном, используется проверка по регулярному выражению /^\d[\d\ -]{4,14}\d$/. Оно допускается ввод цифр, скобок, дефисов, но требует, чтобы первый и последний символы были цифрами.

Поскольку мы не можем менять id у полей заказа, то придется ввести карту полей. Переменная fieldsMap. Слева ID поля, а справа метод валидатора, которым нужно проверить поле:

var fieldsMap = {
 1: 'phone',
 4: 'email',
 2: 'addres',
 3: 'name'
 }

Есть функция uShowErr, которая отвечает за показ подсказок с ошибками и рекомендациями. На странице регистрации она работает с существующими подсказками, которые оформлены с помощью HTML в шаблоне. На странице оформления мало кто вручную оформляет поля, поэтому я исправил ее так, чтобы она сама создавала контейнеры с подсказками, если их еще нет.

Кстати, функция добвляет кнопке оформления заказа класс disabled при наличии непрошедших проверку полей.

Последняя строка в функции отвечает за скрытие подсказки по истечении трех секунд.

function uShowErr(name,err, fid){
 if($('#order-fld-' + fid + ' + span.uf-status-icon').length == 0){
 $('#order-fld-' + fid).after('');
 }
 var icon = $('#uf-'+name+'-status-icon');
 var hint = $('#uf-'+name+'-status');
 if (icon.length){
 if(err == 0){
 icon.removeClass('wait').addClass('pass').removeClass('fail').children('span.uf-status').fadeOut();
 uFormStatus();
 }else if(err == -1){
 icon.addClass('wait').removeClass('pass').removeClass('fail');
 }else{
 icon.removeClass('wait').removeClass('pass').addClass('fail');
 $('#order-button').addClass('disabled'); // .attr('disabled', 'disabled');
 if(err != 1 && hint.length){
 hint.html(err);
 icon.children('span.uf-status').fadeIn(300);
 setTimeout("$('#uf-"+name+"-status-icon').children('span.uf-status').fadeOut();",3000);
 }
 }
 }
 }

Функция отображения подсказок запускает другую функцию uFormStatus, в которой собственно и выполняется проверка всех полей. Эту функцию я отредактировал так, чтобы поля из карты проверялись по указанным в карте методам.

function uFormStatus(){
 var has_err = false;
 for(fid in fieldsMap){
 var err = uValidator[fieldsMap[fid]](document.getElementById('order-fld'+fid));
 has_err = err || has_err;
 }
 if( !has_err && $('.uf-status-icon.fail').length ) {
 has_err = true;
 }
 if(has_err)
 $('#order-button').addClass('disabled'); // .attr('disabled', 'disabled');
 else
 $('#order-button').removeClass('disabled'); // .removeAttr('disabled');
 }

И последний штрих. После загрузки страницы мы должны инициализировать проверку полей. Делается это так:

$(document).ready(function(){
 $("#checkout-form input[type='text'], #checkout-form textarea").bind("blur", function(event){
 fid = this.id.split("-")[2];
 if(fieldsMap[fid]) {
 uShowErr(fieldsMap[fid],uValidator[fieldsMap[fid]](this), fid);
 }
 });
 

 $('.uf-status-icon').hover(function(){
 var el = $(this);
 if(!el.is('[showed]') && el.hasClass('fail') && el.find('span.uf-status p').html()){
 el.attr('showed',1).children('span.uf-status').fadeIn(300);
 setTimeout("$('#"+this.id+"').removeAttr('showed').children('span.uf-status').fadeOut();",3000);
 }
 });

 $('#checkout-form input[type="text"], #checkout-form textarea').each(function() {
 var inputHeight = $(this).children('input').height();
 $(this).find('.uf-status').css('margin-top', 11 + inputHeight/2 +'px');
 });
 });

Скачать js файл можно здесь:

Скачать валидатор полей заказа

Добавляем стили

Конечно, пока все выглядит не так, как на странице регистрации. Давайте добавим оформление для подсказок.

Для этого достаточно скопировать стили из шаблона форма регистрации uID-пользователей:

 #checkout-form .uf-status-icon { display:none; vertical-align:middle; width:16px; height:16px; background-repeat:no-repeat; background-size:cover; position:relative;}
 #checkout-form .uf-status-icon.text-field { margin-left:-23px }
 #uf-email-status-icon.fail, #uf-password-status-icon.fail, #uf-captcha-status-icon.fail { cursor:pointer }
 #checkout-form span.fail { display:inline-block; background-image:url(/.s/img/icon/social/fail.svg) }
 #checkout-form span.pass { display:inline-block; background-image:url(/.s/img/icon/social/pass.svg) }
 #checkout-form span.wait { display:inline-block; background-image:url(/.s/img/icon/ajsml.gif) }
 #checkout-form span.uf-status{ display:none; position:absolute; right:-15px; margin:0; z-index:5 }
 #checkout-form span.uf-status p { background-color:rgba(0,0,0,0.7); color:#fff; padding:5px 10px; white-space:nowrap; font:12px/29px 'Arial'; border-radius:3px; margin:6px 0 0 0; }
 #checkout-form span.uf-status i { float:right; margin-right:18px; display:block; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid rgba(0,0,0,0.7) }

Скачать css файл можно здесь:

Скачать CSS валидатора полей заказа

Результат

Имя:

Контактный телефон:

E-mail:

Адрес доставки:

Исходный код:

...
$ORDER_FILEDS$
...
$ORDER_BUTTON$
...

...

Стили должны быть добавлены в CSS магазина или подключены отдельно.

Значки для способов оплаты и доставки интернет магазина

Сергей — Wed, 14 Sep 2016 07:12:43 GMT

О чем здесь?

Мы научимся устанавливать значки и иконки для способов оплаты и доставки на странице оформления заказа.

Графическая информация в таком случае может положительно сказаться на скорости принятия решения при выборе способов оплаты и доставки.

Рассмотрим добавление иконок FontAwesome, а также произвольных изображений.

Стандартные способы оплаты и доставки

По умолчанию в интернет магазине uCoz перечень способов оплаты или доставки выглядит следующим образом:

Выберите способ оплаты:

WebMoney Transfer
Visa/MasterCardОплата картами Visa и MasterCard (СНГ) без комиссии
Robokassa
PayPal
Qiwi платежи
SmsCoin
Оплатить с балансаОплата производится путём списывания необходимой суммы с вашего баланса в магазине
Яндекс.Деньги
2checkoutВыгодно для владельцев карт VISA, MasterCard, JCD, Diners Club

	WebMoney Transfer
	Visa/MasterCardОплата картами Visa и MasterCard (СНГ) без комиссии
	Robokassa
	PayPal
	Qiwi платежи
	SmsCoin
	Оплатить с балансаОплата производится путём списывания необходимой суммы с вашего баланса в магазине
	Яндекс.Деньги
	2checkoutВыгодно для владельцев карт VISA, MasterCard, JCD, Diners Club

FontAwesome

FontAwesome предлагает масштабируемые векторные иконки, которые можно персонализировать — менять размер, цвет, тени и все, что можно сделать силами CSS.

К сожалению, иконок со способами оплаты в FontAwesome не так много, поэтому мы можем добавить следующие: MasterCard, VISA, AmericanExpress, PayPal, оплата при получении.

Вот, как это будет выглядеть:

Выберите способ оплаты:

PayPalОнлайн платежи с помощью аккаунта PayPal или банковской карты

Visa/MasterCardОплата картами Visa и MasterCard (СНГ) без комиссии

Наличными при получении

	PayPalОнлайн платежи с помощью аккаунта PayPal или банковской карты
	Visa/MasterCardОплата картами Visa и MasterCard (СНГ) без комиссии
	Наличными при получении

Просто подключите иконочный шрифт и добавьте следующие стили:

/* Способы оплаты на FontAwesome */
label.label:before {
 display: inline-block;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 display: block;
 float: left;
 font-size: 32px;
 margin-right: 10px;
 width: 42px;
}
/* PayPal */
label.label[for="pay-type-1"]:before {
 content: "\f1ed";
}
/* Банковской картой */
label.label[for="pay-type-2"]:before {
 content: "\f283";
}
/* Наличными при получении */
label.label[for="pay-type-3"]:before {
 content: "\f0d6";
}

Обратите внимание на фрагмент for="pay-type-3" в селекторах. Здесь цифра 3 — это id способа оплаты, который можно посмотреть в панели управления.

Еще один момент, откуда взять код значка, чтобы подставить его в свойство content? Перейдите на сайт FontAwesome и выберите интересующую иконку. Затем посмотрите ее свойство CSS для псевдокласса :before:

Есть еще один способ узнать содержимое content: задать вопрос в комментариях :)

Свои иконки

В случае со своими иконками, понадобятся изображения способов оплаты и доставки. Найдите в интернете изображения, которые можно использовать в коммерческих целях или закажите у дизайнера.

Страница оформления заказа будет выглядеть следующим образом:

Выберите способ оплаты:

PayPalОнлайн платежи с помощью аккаунта PayPal или банковской карты

WebMoneyОплата с R-кошельков

Qiwi

Robokassa Агрегатор платежных систем

	PayPalОнлайн платежи с помощью аккаунта PayPal или банковской карты
	WebMoneyОплата с R-кошельков
	Qiwi
	Robokassa Агрегатор платежных систем

В CSS при этом нужно добавить следующие стили:

label.label:before {
 display: block;
 float: left;
 margin-right: 10px;
 width: 48px;
 height: 32px;
}
label.label[for="pay-type-1"]:before {
 content: '';
 background: url('http://ucozmagazines.ru/bs/img/paypal.png') no-repeat;
}
label.label[for="pay-type-2"]:before {
 content: '';
 background: url('http://ucozmagazines.ru/bs/img/webmoney.png') no-repeat;
}
label.label[for="pay-type-3"]:before {
 content: '';
 background: url('http://ucozmagazines.ru/bs/img/qiwi.png') no-repeat;
}
label.label[for="pay-type-4"]:before {
 content: '';
 background: url('http://ucozmagazines.ru/bs/img/robokassa2.png') no-repeat;
}

Подставьте свои изображения в свойства у селекторов с pay-type-*. Сколько способов оплаты — столько изображений потребуется описать.

В способах доставки стили будут выглядеть аналогично:

label.label[for="del-type-1"]:before {
 content: '';
 background: url('ваше изображение') no-repeat;
}
label.label[for="del-type-2"]:before {
 content: '';
 background: url('ваше изображение') no-repeat;
}
...

Итоги. Август 2016

Сергей — Wed, 07 Sep 2016 05:28:13 GMT

О чем здесь?

Мы стараемся развивать uCozMagazines, предлагая новые интересные статьи и сервисы. Эта обзорная заметка расскажет о том, что нового появилось за прошедший месяц август 2016 года на сайте и в процессе работы над интернет магазинами uCoz.

Новые статьи

В августе были опубликованы два кейса:

К сожалению, не удается пока открыть курс по Bootstrap, там слишком мало уроков. Поэтому открытие курса переносится на сентябрь.

Разработка шаблонов и скриптов

В августе были выполнены работы по изменению шаблона. Добавлено боковое меню:

На uScript добавлено решение SEO-анализ статьи перед добавлением, которое позволит оценить, насколько статья готова к продвижению еще до публикации:

Новости

uCoz анонсировал интеграцию интернет магазина с 1С. Обновление является первым шагом на пути интеграции модуля «Интернет-магазин» с популярными бухгалтерскими продуктами, которые выпускает компания 1С.

Сортировка товаров на странице заказа с помощью tablesorter

Сергей — Wed, 31 Aug 2016 13:13:21 GMT

О чем здесь?

Сортировка товаров на странице заказа с помощью tablesorter позволит покупателям выстраивать товары по наименованию, категории, количеству, цене, сумме и другим полям.

Мы воспользуемся плагином tablesorter.

Скачать Демо

Зачем это нужно?

Решение отлично подойдет магазинам с большим количеством позиций в заказах. В некоторых случаях удобно сортировать товары в корзине по артикулу или цене.

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

Настройка полей товаров

Зайдите в панель управления и в разделе «Интернет-магазин» найдите пункт «Управление полями заказа»:

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

Если испытываете трудности, посмотрите урок про поля заказа.

Подключение скрипта

Теперь подключим скрипт в следующих шаблонах:

Страница служебных форм. При условии $PAGE_ID$ = 'checkout'
Страница заказа

Подключать будем после $BODY$ в любом удобном месте.

Еще потребуется добавить стили, чтобы заголовки таблиц отображались корректно и давали информацию о том, по какой колонке выполнена сортировка в данный момент. Для этого можно использовать классы .headerSortUp и .headerSortDown, которые плагин добавляет автоматически:

.headerSortUp::after {
 content: "↓";
}
.headerSortDown::after {
 content: "↑";
}
th.header {
 cursor: pointer;
}

Еще для th.header мы задали смену иконки курсора. Так пользователь станет ясно, что на заголовок таблицы можно нажать.

Скачать Демо

Данные предыдущего заказа в корзине пользователя

Сергей — Wed, 24 Aug 2016 07:18:39 GMT

О чем здесь?

В статье рассмотрена работа скрипта, который загружает данные из предыдущего заказа пользователя и помещает их в поля на странице оформления заказа.

Что это дает?

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

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

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

Установка решения

Зайдите в шаблон страницы служебных форм и добавьте в него следующий скрипт:

function getUserFields(){
 $.get('/shop/invoices', function(rI){
 var url = $('.col_inv_id', rI).eq(0).children('a').attr('href');
 if(url) {
 $.get(url, function(rO){
 $('.order-field', rO).each(function(){
 var fid = $(this).data('field'), fval = $(this).text().trim();
 if(fid && fval) {
 $('#order-fld-'+fid).val(fval);
 }
 });
 });
 } else {
 // здесь можно вывести сообщение о том, что заказов не найдено
 }
 });
}

Теперь в удобном месте добавьте кнопку:

Сохраните шаблон.

Теперь нужно внести изменения в шаблон страницы заказа, чтобы наш скрипт мог получать данные с нее. Откройте шаблон и найдите переменную $ORDER_FIELDS$. Замените ее на следующий код:

 $ORDER_FNAME_1$ $ORDER_FIELD_EDIT_1$$ORDER_FIELD_1$

  $ORDER_FNAME_2$ $ORDER_FIELD_EDIT_2$$ORDER_FIELD_2$
 
  $ORDER_FNAME_3$ $ORDER_FIELD_EDIT_3$$ORDER_FIELD_3$
 
  $ORDER_FNAME_4$ $ORDER_FIELD_EDIT_4$$ORDER_FIELD_4$
 
  $ORDER_FNAME_5$ $ORDER_FIELD_EDIT_5$$ORDER_FIELD_5$
 
  $ORDER_FNAME_6$ $ORDER_FIELD_EDIT_6$$ORDER_FIELD_6$
 
  $ORDER_FNAME_7$ $ORDER_FIELD_EDIT_7$$ORDER_FIELD_7$
 
  $ORDER_FNAME_8$ $ORDER_FIELD_EDIT_8$$ORDER_FIELD_8$

Здесь нужно изменить код в соответствии с количеством полей, которые вы используете в магазине. Можно изменить внешний вид полей, главное, чтобы в контейнере с классом order-field лежало содержимое поля, а сам контейнер имел атрибут data-field="1" ("1" в данном случае id поля).

Когда закончите, сохраните шаблон и проверяйте работу скрипта. Установка завершена.

Дополнительно

Заполнение полей при открытии страницы

Чтобы заполнять поля при открытии страницы без нажатия кнопки, просто запустите функцию. Добавлять кнопку при этом не требуется и код в шаблоне страниц служебных форм будет выглядеть так:

$.get('/shop/invoices', function(rI){
 var url = $('.col_inv_id', rI).eq(0).children('a').attr('href');
 if(url) {
 $.get(url, function(rO){
 $('.order-field', rO).each(function(){
 var fid = $(this).data('field'), fval = $(this).text().trim();
 if(fid && fval) {
 $('#order-fld-'+fid).val(fval);
 }
 });
 });
 } else {
 // здесь можно вывести сообщение о том, что заказов не найдено
 }
});

Главное разместить код после полей оформления заказа.

Возможность выбора заказа, из которого нужно подставить поля

Для этого потребуется выполнить решение с помощью uAPI магазина. В качестве альтернативы есть скрипт записи адресов доставки в профиль .

Если не работает

Проверьте разметку полей на странице заказа
Убедитесь, что проверяется под аккаунтом с оформленными ранее заказами
Приготовьте тестовые данные для входа на сайт и напишите в комментариях о проблеме

Итоги. Июль 2016

Сергей — Thu, 04 Aug 2016 21:00:00 GMT

О чем здесь?

Мы стараемся развивать uCozMagazines, предлагая новые интересные статьи и сервисы. Эта обзорная заметка расскажет о том, что нового появилось за прошедший месяц июль 2016 года на сайте и в процессе работы над интернет магазинами uCoz.

Новые статьи и уроки

В данный момент готовится к публикации курс уроков по верстке шаблонов на фреймворке Bootstrap. Скорее всего в августе этот курс будет частично открыт.

В июле был опубликован один материал:

Яндекс Поиск для интернет магазина по YML

Хочется публиковать больше, но не всегда это получается: лето, жара, отпуска...

Новое на uCozMagazines

Теперь на странице материалов справа появилось меню, которое позволит быстро переходить по содержимому статей:

Обзор PRO версии сервиса социальных кнопок uSocial

Сергей — Wed, 03 Aug 2016 21:00:41 GMT

Что такое uSocial?

uSocial — это бесплатный конструктор кнопок "Поделиться" и "Мне нравится" для сайта. На сегодняшний день сервис предлагает четыре инструмента:

Кнопки «Поделиться». Позволяют посетителям вашего сайта делать репосты материалов с сайта в социальные сети
Кнопки «Like», с помощью которых пользователи смогут отмечать для себя интересные материалы на сайте
Конструктор meta-данных, который генерирует код (микроразметку), отвечающий за внешний вид репостов: текст, описание и изображение
Привлечение посетителей. Уведомление, которое приглашает посетителей присоединиться к группе в социальных сетях. Запускается по таймеру или сразу после загрузки страницы

Особо стоит отметить привлекательный внешний вид кнопок на мобильных устройствах. Разработчики уделили этому особо внимание. Кроме того, что кнопку будут на мобильных всегда под рукой и компактно скрыты, пользователи смогут поделиться материалом в Viber и WhatsApp.

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

Зарегистрироваться в uSocial

Регистрация бесплатная и не займет более 2 минут.

Все возможности тарифа PRO

Согласно данным на странице https://usocial.pro/get_pro в PRO-версии добавлены следующие возможности:

Больше стилей иконок и кнопок
Уникальные эффекты при наведении на кнопки (hover-эффекты)
Возможность передавать URL (data-url-параметр). Этот URL будет прикрепляться к анонсу в соц.сети независимо от того, с какой страницы идет репост
Eye-catcher - технология привлечения внимания пользователей к кнопкам
Установка всплывающего окна по таймеру или закрытию вкладки
Использование своего заголовка для привлечения
Премиум поддержка в онлайн чате и помощь в установке кнопок на сайт
Отсутствие копирайтов uSocial.pro
Расширенная статистика — отчеты "Поделиться" и "Мне нравится" по самым популярным страницам сайта

Статистика в uSocial

До недавнего времени огромным плюсом кнопок «Поделиться» от Яндекс было наличие статистики в Яндекс.Метрике по количеству репостов и материалам. Сейчас достаточно сервисов предлагающих собственные инструменты аналитики и uSocial один из них.

Так выглядит статистика по показам и просмотрам:

Чтобы понять, какая из социальных сетей работает наилучшим образом, смотрите статистику по репостам:

Этот отчет помогает экспериментировать с положением кнопок. Меняйте его, пока не добьетесь наибольшего показателя репостов.

Также важно понимать, какой материал вызывает наибольший интерес у читателей. Для этого в PRO версии есть отчет «ТОП по страницам»:

Соберите ТОП материалов по мнению пользователей и продолжайте писать в духе ТОПа, привлекая все больше репостов и пользователей.

Цена PRO-версии

И самое главное — цена PRO-версии. Сейчас ее можно купить на полгода и год за $5 и $10 соответственно. Для сравнения AddThis стартует от $10 в месяц, а shareaholic от $95. Также стоит держать в уме, за счет чего могут выживать бесплатные сервисы соц.кнопок.

Важно, что имея один PRO-аккаунт, можно подключить к нему до 10 сайтов. Сервис был создан не так давно, поэтому появление специальных предложений для веб-студий и фрилансеров с большим количеством сайтов — дело времени.

Зарегистрироваться в uSocial Купить PRO

На этом обзор завершен, рассказывайте в комментариях, какими сервисами соц.кнопок пользуетесь.

Яндекс Поиск для интернет магазина по YML

Сергей — Fri, 29 Jul 2016 12:13:40 GMT

Что такое YML и где его получить?

YML (Yandex Market Language) — это стандарт, разработанный Яндексом для принятия и размещения информации в базе данных Яндекс.Маркета.

Формат оказался настолько удобным, что теперь используется Яндексом повсеместно, когда речь заходит о базе данных товаров. Чтобы получить YML-файл для интернет-магазина uCoz, пройдите этот урок. Вам потребуется иметь ссылку на YML-файл. Она выглядит следующим образом: http://example.com/export.yml

Как работает поиск по YML для магазина?

Преимущество поиска по YML перед обычным поиском от Яндекса в том, что не нужно ждать полной индексации сайта. Все товары описаны в YML-файле. Кроме того, они четко структурированы, что позволяет отобразить полную информацию о товаре. Например, так:

Другие преимущества:

исправляет неправильную раскладку клавиатуры
исправляет опечатки и ошибки
распознает варианты написания

Создание поиска по каталогу товаров

Давайте создадим поиск по своему магазину. Для этого перейдите по ссылке. Выполните вход в аккаунт Яндекса, если не сделали этого ранее.

Теперь создайте новую страницу на своем сайте. Пока оставьте ее содержимое пустым. Укажите адрес страницы и ссылку на YML файл.

Нажмите на кнопку «Сохранить». Должно появится сообщения «Каталог в очереди на проверку».

Размещение поиска на сайте

Выберите из меню слева пункт «Код для вставки на сайт». Откроется страница с кодом, который нужно установить к себе на сайт:

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

Теперь нужно дождаться окончания проверки файла и поиском можно пользоваться.

Выдача в JSON

В случаях, когда представленный вид результатов поиска не подходит, используйте возможность получения выдачи в JSON. Нужно получить API ключи и изучить документацию.

Для запроса к поиску используется HTTP-метод GET. Параметры запроса передаются в его URI:

https://catalogapi.site.yandex.net/v1.0?apikey=c24a2422-ac83-4c9f-98a6-d500b7d164a2&text=сотовый%20телефон&searchid=0000000&page=0&avaliable=true&price_low=0&price_high=1000

Где:

apikey — API ключ, который вы получили ранее;
text — поисковый запрос
searchid — ID созданного поиска. Можно посмотреть в адресной строке на сайте Яндекс.Поиск для сайта;
page — номер страницы результатов поиска;
avaliable — товар в наличии
price_low и price_high — фильтры по цене

Также можно задать способ сортировки и в какой категории искать.

После отправки запроса, придет ответ, который выглядит следующим образом:

{
 "documents" : [ {
 "name" : "Крекер с кунжутом \"Lotte Fitness\", 88г Х 2шт",
 "description" : "Крекер с кунжутом \"Lotte Fitness\". Состав: Пшеничная мука, сахар, растительное масло, гидрированное растительное масло (соевое), кокосовая мука, сгущенное молоко, жареный черный кунжут, разрыхлитель (гидрокарбонат аммония), сгущенные молочные сливки, пептизированная мука (крупа), соль поваренная пищевая, масло, яйца, мука жареной черной сои, разрыхлитель (гидрокарбонат натрия), миндальная пудра, паста из черного кунжута, эмульгатор (соевый лецитин), искусственный молочный ароматизатор, энзим, пудра корицы, регулятор кислотности (бисульфат натрия). Срок годности: 12 мес.",
 "url" : "/shop/43054/desc/kreker-s-kunzhutom-lotte-fitness-88g",
 "categoryId" : 7872,
 "categoryParents" : [ 7298, 7872 ],
 "price" : 125.37,
 "currencyId" : "RUB",
 "vendor" : "\"Лотте Конфекшнери Ко.\" (респ. Корея)",
 "snippet" : "http://avatars.mds.yandex.net/get-pds-yml/121153/2a000001562a9f91990fff11e391e8590253/snippet",
 "mobileSnippet" : "http://avatars.mds.yandex.net/get-pds-yml/121153/2a000001562a9f91990fff11e391e8590253/mobile",
 "available" : true,
 "oldPrice" : null
 }, {
 "name" : "Соус салатный \"Kikkoman\" с кунжутом, 250 мл",
 "description" : "Соус салатный \"Kikkoman\" с кунжутом. Состав: вода, рисовое масло, сахар, соевый соус (вода, соевые бобы, пшеница, соль), спиртовой уксус, кунжут (6,5%), кунжутное масло (6,0%), экстракт дрожжей, соль, тростниковая сахарная меласса, специи (включительно горчица), загуститель: модифицированный кукурузный крахмал. Идеально к овощам, мясу, птице. Срок годности: 12 мес.",
 "url" : "/shop/42797/desc/sous-salatnyj-kikkoman-s-kunzhutom-250-ml",
 "categoryId" : 11738,
 "categoryParents" : [ 7301, 11738 ],
 "price" : 456,
 "currencyId" : "RUB",
 "vendor" : "\"Kikkoman Europe\" (Нидерланды)",
 "snippet" : "http://avatars.mds.yandex.net/get-pds-yml/49925/2a000001562acd520415bdc41bb0c4218bd7/snippet",
 "mobileSnippet" : "http://avatars.mds.yandex.net/get-pds-yml/49925/2a000001562acd520415bdc41bb0c4218bd7/mobile",
 "available" : true,
 "oldPrice" : null
 },
...
найденные товары
...
{
 "id" : 7299,
 "value" : "МОЛОЧНЫЕ ИЗДЕЛИЯ",
 "parentId" : 0
 }, {
 "id" : 7303,
 "value" : "ДЕТИШКАМ (ПИТАНИЕ И УХОД)",
 "parentId" : 0
 }, {
 "id" : 7301,
 "value" : "СПЕЦИИ, ПРИПРАВЫ, СОУСЫ",
 "parentId" : 0
 },
...
список категорий
...
],
 "misspell" : {
 "reask" : null,
 "misspell" : null
 },
 "page" : 0,
 "perPage" : 10,
 "docsTotal" : 35
}

Остается только разобрать и вывести ответ.

Итоги. Июнь 2016

Сергей — Wed, 29 Jun 2016 12:46:28 GMT

О чем здесь?

Мы стараемся развивать uCozMagazines, предлагая новые интересные статьи и сервисы. Эта обзорная заметка расскажет о том, что нового появилось за прошедший месяц июнь 2016 года на сайте и в процессе работы над интернет магазинами uCoz.

Новые статьи и уроки

В разделе Введение и Подготовка к работе курса по созданию интернет-магазина обновлены уроки.

Скрипты

В счет и накладную Торг-12 теперь можно добавить скан печати и подписи. Это удобно, когда документы доставляют курьеры, не нужно заезжать в офис, чтобы поставить печать и подпись.
После редизайна на главной странице стало намного меньше текста из-за отсутствия информеров материалов для кейсов и уроков. Это даже успело отразиться на позициях по некоторым запросам. Поэтому я решил быстро написать скрипт, который из нескольких модулей соберет одну ленту и выведет их в порядке добавления.
Еще одно решение удалось внедрить в интернет-магазин: когда пользователь оформляет второй и последующие заказы, то все поля для оформления автоматически забираются из последнего оформленного заказа. Это очень удобно для при безналичной оплате, когда нужно указывать реквизиты юридического лица.

Обзор онлайн консультанта для сайта RedHelper

Сергей — Wed, 22 Jun 2016 14:25:36 GMT

О чем здесь?

RedHelper — система онлайн консультирования для бизнеса. Ряд преимуществ делают данную систему особенно выгодной для интернет-магазинов. Поэтому именно с них и начнем обзор RedHelper.

Почему RedHelper?

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

Система Co-browser, которая позволяет операторам магазина наблюдать за действиями посетителя прямо из окна приложения, подсвечивать ключевые блоки и перенаправлять на другие страницы сайта.
RedConnect, позволялющий принимать звонки в той же программе оператора.
Умная система активных приглашений, которая обращается к клиенту в нужный момент, а не просто по таймеру, как у многих аналогов.
Подробная статистика о клиенте: аналогично вебвизору Яндекс.Метрики содержит местоположение, количество посещений, операционную систему, браузер и канал, по которому пришел посетитель.
Передача файлов: операторы могут отправлять пользователям прайс-листы и каталоги прямо в чате.

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

Установка и дизайн чата

Чтобы установить начать пользоваться RedHelper, достаточно пройти четыре простых шага:

Зарегистрироваться. Кнопка «Регистрация» и простая форма, где нужно указать email, логин и пароль. Логин будет присутствовать в коде чата и потенциально доступно для клиентов, поэтому задайте его более-менее приличным и релевантным.
Установить на сайт код. Этот шаг ничем не примечателен, сразу после регистрации система выдаст вам HTML-код, который нужно добавить на сайт. Зайдите в ПУ - Дизайн - Управление дизайном (шаблоны) и выберите глобальный блок, который отвечает за нижнюю часть сайта. В самый конец шаблона добавьте код, сохраните изменения и переходите к следующему шагу.
Скачать приложение оператора. В настоящий момент доступны приложения для: Windows XP, Vista, 7, 8, MacOS X 10.4 - 10.10, Android 4.2+
Настройка. Измените вид бейджика, окна чата и поля формы по своему усмотрения. Также на этом шаге подключаются активные продажи.

Дополнительно можно указать несколько сайтов и отделов организации.

Лучше один раз увидеть, что сто раз услышать. Есть и 5-дневный триал и бесплатная версия с ограниченным функционалом. Попробовать стоит, тем более установка не займет много времени.

Попробовать сейчас

6 способов извлечь пользу из страницы «Заказ оформлен»

Сергей — Wed, 15 Jun 2016 12:17:55 GMT

О чем здесь?

Нестандартное использование страницы «Заказ оформлен»: от внедрения CRM-систем до увеличения количества заказов и подписчиков в соц.сетях

О странице «Заказ оформлен»

Страница «Заказ оформлен» показывается сразу после оформления заказа. В одном из уроков мы рассматривали, как происходит этот процесс после оформления заказа.

Особенность страницы в том, что на нее можно попасть только сразу после оформления заказа. Т.е. посещение данной страницы является однозначным показателем совершения транзакции (заказа). Эту особенность нужно использовать при подключении систем аналитки (такие как Facebook, RetailRocket, Яндекс.Метрика).

Кроме того, данная страница может использоваться для создания лидов в CRM-системах, вроде Bitrix24, SalesForce, BaseCRM, Мегаплан Продажи.

Какие еще выгоды можно извлечь из этой страницы?

Уточните источник

Создайте опрос, в котором попросите ответить на вопрос «Откуда вы о нас узнали?». Это поможет оценить, какие именно источники являются наиболее эффективными. В первую очередь это касается прямых заходов, когда мы не можем узнать точно, откуда пришел покупатель.

Подпишите на рассылку

Есть решение, которое позволяет подписать пользователя на email рассылку во время оформления заказа. Но гораздо больше данные о нем можно получить, если попросить это сделать после оформления заказа. Кроме того, у нас уже будут некоторые данные, в том числе и содержимое заказа.

Таким образом мы можем сегментировать покупателей на этапе подписки и высылать им только релевантные email сообщения. Чтобы разместить форму подписки MailChimp, читайте этот урок.

Пригласите в паблик

Разместите на странице «Заказ оформлен» приглашение в паблики, которые вы ведете в социальных сетях. Используйте активный залог «Вступайте», «Присоединяйтесь», «Участвуйте». Важно указать выгоду от вступления в группу: скидки, промо-коды, конкурсы.

Привлеките друзей покупателя

Добавьте простое сообщение, вроде этого:

Оформите второй заказ для друга и мы доставим его вместе с вашим.

Воспользуйтесь решением «Повтор заказа», которое позволит дублировать оформленные заказы в один клик.

Можете пойти дальше и пообещать вернуть деньги за доставку, в случае успешной доставки второго заказа.

Побудите оплатить заказ

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

Выводы

Страница «Заказ оформлен» отличается уникальным свойством: попасть на нее можно только один раз и только после оформления заказа. Таким образом однозначно идентифицируется совершение транзакции (оформления заказа).

Пятая Вебмастерская: видеозаписи докладов

Сергей — Wed, 08 Jun 2016 07:39:46 GMT

Поисковое решение для интернет-магазинов от Яндекса

Решение использует данные о товарах из YML-файла, используя все достижения в работе поисковых машин, которых достиг Яндекс.

Поиск по YML включает в себя расширенные сниппеты: название, описание, изображение, цена, основные характеристики, категория, наличие. У такого решения доступны фильтры и сортировка.

Как правильно искать и устранять ошибки на коммерческих сайтах

Как правильно настроить аналитику коммерческого сайта и за какими параметрами при этом необходимо следить. Оценка не только эффективности рекламы, но и потребностей клиентов.

Все записи докладов можно посмотреть здесь.

Итоги. Май 2016

Сергей — Thu, 02 Jun 2016 07:43:53 GMT

О чем здесь?

Мы стараемся развивать uCozMagazines, предлагая новые интересные статьи и сервисы. Эта обзорная заметка расскажет о том, что нового появилось за прошедший месяц май 2016 года на сайте и в процессе работы над интернет магазинами uCoz.

Новые статьи и уроки

Обзор RetailRocket — платформы для мультиканальной персонализации интернет-магазина на основе big data, созданная разработчиками рекомендательных систем
Урок 73. Импорт товаров из YML — пакетная загрузка товаров и интернет магазин uCoz из YML файла при создании партнерского интернет магазина или переезде сайта

Навигация по статьям

В данный момент ведется работа с навигацией по урокам. В начале и конце каждого урока можно увидеть перечень всех материалов раздела и ссылки в смежные категории:

В разделе кейсы добавлен блок с похожими материалами:

Оба этих решения работают на uAPI Блога и Каталога статей.

Скрипты

Сортировка строк в корзине

Решение позволяет пользователям сортировать строки таблицы своего заказа. Это удобно, когда количество позиций велико.

Экспорт заказов на email

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

Шаблоны

Был завершен лендинг для заказа услуг благоустройства: