В админке VamShop, на главной странице, добавлен новый виджет — Кто в онлайне!
Посмотреть «в-живую» можно в демо версии https://demo.vamshop.ru
Как выглядит виджет?
Рубрика: Обучение
Выпущена новая версия VamShop 1.99.20
Скачать полную версию VamShop 1.99.20 можно в своих заказах в магазине https://vamshop.ru
Обновление можно скачать на форуме тех. поддержки пользователей https://forum.vamshop.ru
Что изменилось:
В VamShop по умолчанию изменён дизайн страницы оформления заказа.
Посмотреть рабочий пример можно в онлайн демо-версии https://demo.vamshop.ru
Добавьте товар в корзину и перейдите на страницу оформления.
Вот как теперь выглядит оформление заказа:
Для гостя:
Для постоянного покупателя:
Правая часть «цепляется» к верхнему краю.
Кнопка Оформить заказ всегда на самом видном месте, даже если Вып рокручиваете страницу вниз.
В 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 адрес фильтра.
В VamShop 1.99.14 добавлено выравнивание высоты колонок, плиток с информацией о товарах.
Растягивается не сама картинка, а блок, в которой сидит картинка + блок с заголовком названия товара.
В итоге получается, что вне зависимости от высоты, пропорций картинок, вне зависимости от длины названия товара, в одну строку либо в две, вне зависимости от того, есть у товара отзывы или нет, есть спец. цена или нет, в любом случае колонки с плитками товара получаются ровные.
Нет скачущих плиток, когда у одного товара название выше, у друго ниже, у одного цена выше, у другого ниже.
Сейчас всё должно быть ровно, в одну линию.
В демке это конечно не очень заметно, а на реальных магазинах, где будут разные пропорции картинок, будет видно, что всё выстраивается.
Вот наглядный пример, что я имею в виду.
т.е. если у товара очень длинное название, например на три строки.
У товара картинка отличается пропорциями, вытянута не вниз, а вбок, узкая.
Нет отзывов, нет спец. цены.
и всё равно ряды получаются ровные.
Вот чуть подкрасил линиями, что б видно было, что я имею в виду.
А вот как было до этой правки, что б наглядно было видно, о чём речь.
Попробуйте провести линию по картинкам, по названию, либо по цене.
Не получится, всё скачет вверх, вниз.
В VamShop по умолчанию добавлена CSS анимация корзины.
Смотрите пример на http://demo.vamshop.ru
Добавьте товар в корзину.
Вот как будет выглядеть анимация, когда корзина с товаром.
Довольно интересно выглядит, не сильно мешает, но и в тоже время настойчиво показывает — оформите заказ, корзина не пустая.
Идея была такая — подчеркнуть пульсирующей анимацией корзину, т.е. донести до пользователя визуальным способом, что у Вас корзина не пустая и надо что-то сделать.
Либо оформить заказ, либо удалить из корзины.
Но и не сильно надоедать при этом всякими текстами, popup окнами, подсказками и т.д.
А вот, к примеру, как можно обратить внимание посетителя на голосовой поиск.
Небольшая демонстрация реально работающего магазина на базе VamShop PWA.
Движок, CMS для создания онлайн магазинов на базе React + NodeJS + MongoDB.
PWA онлайн магазин, никакого PHP, MySQL, никаких монолитов.
Полное разделение frontend и backend.
100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).
API-центричное веб-приложение на микросервисах.
Современный дизайн на базе Figma.
Обратите внимание, как быстро работает сайт.
Например попробуйте фильтр по цене на странице — https://plasha.ru/kategoriya-3
Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.
Посмотрите в консоли разработчика в браузере хром, как всё выглядит и как работает.
В отличии от монолитов типа WordPress, OpenCart, нет лишних запросов и прорисовок.
Через API получаем «сырые» данные в JSON формате и отрисовываем их в React.
Попробуйте поиск товара.
На данный момент, семантическая разметка очень важна для любого сайта, онлайн магазина.
С помощью семантической разметки Вы сообщаете поисковым роботам гугла и яндекса, о чём именно Ваш сайт.
Где на Вашем сайте товары, где цены, где отзывы, рейтинги товара и т.д.
Помогаете понимать роботам поисковиков Ваш сайт.
Это очень важно на данный момент.
Небольшая демонстрация реально работающего магазина на базе VamShop PWA.
Движок, CMS для создания онлайн магазинов на базе React + NodeJS + MongoDB.
PWA онлайн магазин, никакого PHP, MySQL, никаких монолитов.
Полное разделение frontend и backend.
100% на JavaScript: и Frontend (React + API), и Backend (NodeJS).
API-центричное веб-приложение на микросервисах.
Современный дизайн на базе Figma.
Обратите внимание, как быстро работает сайт.
Например попробуйте фильтр по цене на странице — https://plasha.ru/kategoriya-3
Попробуйте подгрузить больше товаров кнопкой Показать ещё на странице.
Посмотрите в консоли разработчика в браузере хром, как всё выглядит и как работает.
В отличии от монолитов типа WordPress, OpenCart, нет лишних запросов и прорисовок.
Через API получаем «сырые» данные в JSON формате и отрисовываем их в React.
Попробуйте поиск товара.
В интернет магазине должно быть максимально простое, быстрое и удобное оформление заказа, управляемое из админки.
Какие задачи были решены:
VamShop по умолчанию теперь является PWA web-приложением, поддерживаются на данный момент следующие возможности:
1. Offline режим.
2. Service Worker.
3. A2HS — добавление иконки на рабочий стол.
4. Приложение в Play Market.
5. Голосовой поиск.
В данной заметке покажу как можно собирать статистику по PWA функциональности сайта, онлайн магазина с помощью Google Analytics.