Рубрики
vam shop Заметки Новости

Адаптивный дизайн в VamShop

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

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

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

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

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

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

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

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

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

1. Ноутбук.

vamshop-responsive-template-notebook

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

2. Планшет.

vamshop-responsive-template-tablet

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

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

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

3. Смартфон.

vamshop-responsive-template-smartphone

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

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

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

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

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

Рубрики
vam shop Заметки Новости

Микроразметка (семантическая разметка) в VamShop

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

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

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

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

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

vamshop-responsive-template

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

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

Посмотрите пример:
vamshop-schema

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

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

vamshop-schema1

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

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

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

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

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

Рубрики
vam shop Новости

Новая версия VamShop 1.72

Выпущена новая версия VamShop 1.72.
Скачать можно в своих заказах в магазине http://vamshop.ru/

Основные изменения:
1. Новый шаблон по умолчанию. http://demo.vamshop.ru
2. Шаблон адаптивный, подстраивается под любое устройство пользователя: смартфон, планшет, ноутбук.
3. Магазин доступен для пользователей любых устройств.
4. Добавлена анти-бот защита на страницы обратной связи, регистрации клиента, добавления отзыва, задать вопрос о товаре.
5. Новый модуль оплаты — КупиВкредит. Информация по настройке модуля в нашем блоге.
6. Новый модуль оплаты — WebPay. Информация по настройке модуля в нашем блоге.
7. Скрипт резервного копирования обновлён до текущей версии Sypex Dumper 2.
8. Добавлены метки в шаблоны ответов.
9. Исправлена проблема с распаданием страницы с товаром в случае вывода товара с разными по высоте картинками.
10. Добавлен Bootstrap.
11. Обновлён jQuery.
12. Обновлён jQuery UI.
13. Fancybox заменён на Lightbox.
14. Исправлена ошибка при выводе атрибутов типа TEXT в боксе корзины.

Подробное описание на форуме поддержки.

Рубрики
vam shop Новости

VamShop 2 — Новое поколение CMS для создания интернет-магазина.

Промо-сайт VamShop 2 — http://vamshop.ru/vamshop2

vamshop2

Рубрики
vam shop Заметки Новости

С новым годом!

Поздравляем с наступающим новым годом!

Успехов в новом году.

2014

Рубрики
vam shop Новости Оплата

VamShop подключён к системе КупиВкредит!

VamShop подключён к системе КупиВкредит.

kupivkreditru

Настройка модуля КупиВкредит в VamShop.

1. Подключаетесь к kupivkredit.ru, подписываете бумаги, получаете id номер магазина в системе и ключ шифрования.
2. В VamShop, в Админке — Модули — Оплата включаете модуль оплаты КупиВкредит.
3. Указываете в настройках модуля свой партнёрский id номер и ключ шифрования.

image002

Всё.

Рубрики
vam shop Новости

100.000 сообщений на форуме поддержки VamShop!

100.000 сообщений на форуме поддержки пользователей VamShop — http://vamshop.ru/forum

Рубрики
vam shop Новости Оплата

Новый модуль оплаты — WebPay.By

VamShop подключён к платёжной системе WebPay.By.

webpay_logo_2

Как настроить WebPay в VamShop:

1. Регистрируетесь в WebPay.By, получаете все необходимые данные для входа в админку webpay.by.
2. В админке webpay.by, в разделе Компания инфо — Настройки смотрите Ваш id номер в опции Биллинг ID, а так же укажите любое значение в опции Секретный ключ
3. В админке VamShop, в разделе Модули — Оплата включаете модуль webpay. Указываете свои данные в опциях ID номер магазина и Секретный ключ.

Рубрики
vam shop Новости

Новая версия VamShop 1.71

Выпущена новая версия VamShop 1.71.

Скачать можно в своих заказах в магазине http://vamshop.ru/

Основные изменения:
1. Новый модуль — Шаблоны ответов.
2. Новый модуль оплаты — PayAnyWay.
3. Исправлены ошибки в модуле быстрого оформления заказов.
4. Исправлены ошибки в ajax корзине.
5. Исправлена ошибка с кнопкой купить в сопутствующих товарах.
6. Добавлена возможность копирования значений спецификаций при копировании группы спецификаций.
7. Исправлена ошибка с подгрузкой регионов страны в модуле быстрого оформления заказов.
8. Корректировка импорта/экспорта для правильной работы с mysqli.
9. Добавлена ссылка отменить фильтр в бокс и блок фильтры.
10. Добавлена возможность указания описания для картинок товара.

Подробное описание на форуме поддержки.

Рубрики
vam shop Новости Оплата

Новый модуль оплаты — PayAnyWay.Ru

Новый модуль оплаты PayAnyWay.Ru для VamShop.

Информация по настройке модуля и закгрузка — https://code.google.com/p/payanyway/wiki/vamshop_type3