Рубрика: Новости

В VamShop по умолчанию уже присутствует модуль оплаты для приёма Яндекс.Денег в автоматическом режиме — в Админке — Модули — Оплата — yandex_merchant. Именно о настройке этого модуля пойдёт речь в данной заметке.
Все платежи с помощью данного модуля Вы будете получать на свой расчётный счёт в банке.

Итак, Вы решили подключиться к платёжной системе Яндекс.Деньги.

С помощью данной платёжной системы можно принимать платежи от покупателей с помощью Яндекс кошельков, т.е. переводом с кошелька покупателя на Ваш счёт. Оплата приходит на Ваш расчётный счёт за вычетом комиссии яндекса, а так же с помощью данного модуля можно принимать оплату карточками (Visa, MasterCard, Maestro), привязанными к счётам пользователей яндекс-денег.

Подключение к яндекс.деньгам проходит в четыре этапа:
1. Регистрация в платёжной системе Яндекс.Деньги в качестве продавца.
2. Заполнение анкеты.
3. Получение необходимых для работы данных.
4. Настройка модуля оплаты Ядекс.Деньги в VamShop.

1. Регистрация в качестве продавца происходит на странице — https://kassa.yandex.ru/joinups/?source=vamshop . Регистрируйтесь, получаете договор, подписывайте, отправляйте в яндекс.
2. Вам пришлют документацию (Протокол обмена информацией при осуществлении переводов HTTP-транспорт) и техническую анкету, в которой нужно указать всю необходимую информацию о Вашем магзаине. Пример заполнения анкеты прицепил в конце данного сообщения. Так же прицепил к сообщению внизу документацию.

Важное замечание по пунктам paymentAvisoURL и checkURL из технической анкеты.

В обоих опциях должно быть указано: https://ваш-магазин.ру/yandex.php

Обратите внимание, что указывается безопасный HTTPS протокол, т.е. у Вашего хостинг провайдера должен быть настроен SSL. Ваш сайт должен иметь SSL сертификат, достаточно самоподписанного сертификата. Убедитесь, что у Вас в браузере открывается страница https://ваш-магазин.ру/yandex.php , а не отдаёт 404 код.

Это важно. Без SSL Вы не сможете принимать у себя в магазине Яндекс.Деньги в автоматическом режиме. В этом случае используйте другие модули оплаты-агрегаторы. Например robokassa, prochange. Информация по на стройке данных модулей уже была ранее в нашем блоге, читайте.

3. После регистрации Вам пришлют пример html-формы платежа, из этой формы возьмите свои значения опций ShopID и scid. Это будут числовые значения.
4. В Админке — Модули — Оплаты включайте модуль yandex_merchant. В настройках модуля оплаты указывайте свои значения опций ShopID, scid и указывайте свой пароль в опции Секретный ключ. Секретный ключ — это Ваш пароль, который Вы указали в анкете при подключении к Яндекс.Деньгам, в опции shopPassword. Вот значение shopPassword из своей анкеты и записывайте в опцию Секретный ключ. Укажите оплаченны статус заказа, т.е. заказы, оплаченные с помощью яндекс.денег будут автоматически менять статус на указанный.

Всё. Теперь Вы можете принимать в своём магазине платежи из Яндекс.Кошельков, а так же платежи по карточкам (Visa, MasteCard, Maesto).

Файлы:

Пример заполнения анкеты.
Протокол обмена информацией при осуществлении переводов (HTTP-транспорт).

QIWI Post

Инструкция по настройке модуля.

В VamShop по умолчанию используется адаптивный дизайн.

Что такое адаптивный дизайн по версии wikipedia.org:

Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре устройств.[1]

Почему адаптивный дизайн так важен?

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

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

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

В интернет-магазинах, созданных на платформе VamShop адаптивный шаблон написан с использованием популярных, открытых и свободных библиотек: Bootstrap, jQuery.

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

1. Ноутбук.

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

2. Планшет.

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

В случае адаптации для планшета изменения следующие:

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

3. Смартфон.

Самый маленький экран у смартфона и шаблон адаптируется под экран смартфона, а именно:

• Убирается лишняя информация, остаётся только самое важное для посетителя.
• Ссылки сворачиваются в меню.
• Информация выстраивается в одну колонку.
• Слайдер не отображается.
• Всё самое важное с точки зрения посетителя интернет-магазина: поиск, корзина, навигация, информация о товаре всегда на самом видном месте и доступна для просмотра даже на физически небольших экранах смартфона, без горизонтальной полосы прокрутки.

Таким образом работает адаптивный шаблон в интернет-магазинах, созданных на базе VamShop.

Самое главное — используется один и тот же html, css код для всех типов устройств, нет никаких отдельных версий для мобильных устройств, шаблон един для всех типов устройств, все адаптации работают через css свойства media, min-width, max-width.

Дополнительная информация:
Статья на wikipedia.org — Адаптивный дизайн
Bootstrap
jQuery

В VamShop 1.72 добавлена семантическая разметка на странице карточки товара.

Для начала, коротко, что такое семантическая разметка:

Микроданные (HTML microdata) — это международный стандарт семантической разметки HTML-страниц, с помощью атрибутов, описывающих смысл информации, содержащейся в тех или иных HTML-элементах. Такие атрибуты делают контент страниц машиночитаемым, то есть позволяют в автоматическом режиме находить и извлекать нужные данные.

Как это выглядит на практике, на примере интернет-магазина, созданного на платформе VamShop?!

В VamShop на странице карточки товара добавлена семантическая разметка на странице карточки товара: для описания товара (название, описание, цена, картинка), отзывов, рейтинга.

Для чего это нужно?

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

Посмотрите пример:

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

А вот так выводится информация о товаре в интернет-магазине, созданном на VamShop, с использованием семантической разметки:

Отличия следующие:

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

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

Полезные ссылки:

Описание семантической разметки (на английском) — http://schema.org/
Описание семантической разметки (на русском) — http://ruschema.org/
Проверка семантической разметки от google — http://www.google.com/webmasters/tools/richsnippets
Проверка семантической разметки от яндекс — http://webmaster.yandex.ru/microtest.xml