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

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

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

Скачать полную версию VamShop 1.99.20 можно в своих заказах в магазине https://vamshop.ru
Обновление можно скачать на форуме тех. поддержки пользователей https://forum.vamshop.ru

Что изменилось:

Рубрики
Заметки Новости Обучение Юзабилити

Новый дизайн страницы оформления заказа в VamShop!

В VamShop по умолчанию изменён дизайн страницы оформления заказа.

Посмотреть рабочий пример можно в онлайн демо-версии https://demo.vamshop.ru

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

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

Для гостя:

Для постоянного покупателя:

Правая часть «цепляется» к верхнему краю.

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

Рубрики
Заметки Новости Обучение Юзабилити

SEO Фильтры в VamShop

В VamShop по умолчанию добавлен новый модуль — SEO Фильтры

В онлайн демке http://demo.vamshop.ru уже работает, можно попробовать.

В разделе Планшеты — http://demo.vamshop.ru/tablets.html

Вместо вот такого адреса — /products_filter.php/cPath/2/f9/16 ГБ

будет вот такой адрес — http://demo.vamshop.ru/tablets/pamyat-16-gb.html

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

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

В этом случае все фильтры строятся с SEO URL адресом по умолчанию, ничего вручную заполнять не надо.

Берётся название спецификации и значение спецификации и получается SEO URL адрес вида http://ваш.магазин.ру/категория/фильтр-значение.html

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

Для этого есть опция — Задать уникальное SEO название спецификации: в настройках группы спецификаций.

Если задали своё значение — будет выводиться Ваше значение, если не задали значение, SEO URL адрес будет построен на основе названия спецификации и значения спецификации.

Примеры доступны в онлайн-демке http://demo.vamshop.ru/tablets.html

Учитывая все остальные возможности VamShop, SEO фильтры позволят Вашему магазину выглядеть лучше конкутентов в поисковых системах. Лучше представлять свой товар, делать удобную навигацию внутри категории.

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

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

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

2. Уникальные meta тэги (meta title, meta description. meta keywords) для страницы фильтра.

3. Cononical URL для страницы фильтра.

4. SEO адрес фильтра с ключевыми словами. В URL адресе выводится и название категории и название фильтра и значение фильтра, т.е. есть все возможности что б вставить ключевые слова в URL адрес фильтра.

Рубрики
vam shop Заметки Обучение Шаблоны Юзабилити

Автоматическое выравнивание высоты колонок!

В VamShop 1.99.14 добавлено выравнивание высоты колонок, плиток с информацией о товарах.

Растягивается не сама картинка, а блок, в которой сидит картинка + блок с заголовком названия товара.

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

Нет скачущих плиток, когда у одного товара название выше, у друго ниже, у одного цена выше, у другого ниже.

Сейчас всё должно быть ровно, в одну линию.

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

Вот наглядный пример, что я имею в виду.

Screenshot from 2020-03-02 10-49-23.png

т.е. если у товара очень длинное название, например на три строки.

У товара картинка отличается пропорциями, вытянута не вниз, а вбок, узкая.

Нет отзывов, нет спец. цены.

и всё равно ряды получаются ровные.

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

Screenshot from 2020-03-02 10-49-23.png

А вот как было до этой правки, что б наглядно было видно, о чём речь.

Screenshot from 2020-03-02 10-57-48.png

Попробуйте провести линию по картинкам, по названию, либо по цене.

Не получится, всё скачет вверх, вниз.

Рубрики
Заметки Новости Обучение

Анимация корзины!

В VamShop по умолчанию добавлена CSS анимация корзины.

Смотрите пример на http://demo.vamshop.ru

Добавьте товар в корзину.

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

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

Идея была такая — подчеркнуть пульсирующей анимацией корзину, т.е. донести до пользователя визуальным способом, что у Вас корзина не пустая и надо что-то сделать.

Либо оформить заказ, либо удалить из корзины.

Но и не сильно надоедать при этом всякими текстами, popup окнами, подсказками и т.д.

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

Рубрики
vam shop Заметки Новости Обучение Продажи

Реактивный интернет магазин VamShop PWA!

Небольшая демонстрация реально работающего магазина на базе VamShop PWA.

Движок, CMS для создания онлайн магазинов на базе React + NodeJS + MongoDB.

https://plasha.ru

PWA онлайн магазин, никакого PHP, MySQL, никаких монолитов.

Полное разделение frontend и backend.

100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).

API-центричное веб-приложение на микросервисах.

Современный дизайн на базе Figma.

Обратите внимание, как быстро работает сайт.

Например попробуйте фильтр по цене на странице — https://plasha.ru/kategoriya-3

Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.

Посмотрите в консоли разработчика в браузере хром, как всё выглядит и как работает. 

В отличии от монолитов типа WordPress, OpenCart, нет лишних запросов и прорисовок.

Через API получаем «сырые» данные в JSON формате и отрисовываем их в React.

Попробуйте поиск товара.

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

Семантическая разметка

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

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

Где на Вашем сайте товары, где цены, где отзывы, рейтинги товара и т.д.

Помогаете понимать роботам поисковиков Ваш сайт.

Это очень важно на данный момент.

Рубрики
vam shop Заметки Новости Обучение Продажи

Про простое, быстрое и удобное оформление заказа в онлайн магазине!

Небольшая демонстрация реально работающего магазина на базе VamShop PWA.

Движок, CMS для создания онлайн магазинов на базе React + NodeJS + MongoDB.

https://plasha.ru

PWA онлайн магазин, никакого PHP, MySQL, никаких монолитов.

Полное разделение frontend и backend.

100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).

API-центричное веб-приложение на микросервисах.

Современный дизайн на базе Figma.

Обратите внимание, как быстро работает сайт.

Например попробуйте фильтр по цене на странице — https://plasha.ru/kategoriya-3

Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.

Посмотрите в консоли разработчика в браузере хром, как всё выглядит и как работает. 

В отличии от монолитов типа WordPress, OpenCart, нет лишних запросов и прорисовок.

Через API получаем «сырые» данные в JSON формате и отрисовываем их в React.

Попробуйте поиск товара.

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

Какие задачи были решены:

Рубрики
vam shop Заметки Новости Обучение Продажи

Оцениваем эффективность PWA функциональности VamShop!

VamShop по умолчанию теперь является PWA web-приложением, поддерживаются на данный момент следующие возможности:

1. Offline режим.

2. Service Worker.

3. A2HS — добавление иконки на рабочий стол.

4. Приложение в Play Market.

5. Голосовой поиск.

В данной заметке покажу как можно собирать статистику по PWA функциональности сайта, онлайн магазина с помощью Google Analytics.

Рубрики
vam shop Заметки Новости Обучение Продажи

Голосовой поиск в VamShop!

В VamShop по умолчанию добавлен новый интересный модуль — Голосовой поиск.

Проверить как работает поиск голосом можно на https://vamshop.ru