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

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

В 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

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

Мобильное приложение VamShop

С недавнего времени Google разрешил добавлять в свой магазин приложений Google Play так называемые PWA приложения, т.е. прогрессивные веб приложения.

Что такое PWA приложения и причём здесь VamShop?!

Цитата из wikipedia:

Прогрессивное веб-приложение (англ. — progressive web app, PWA) — технология в веб-разработке, которая добавляет сайтам возможности приложений для мобильных устройств. В частности, PWA обладают такими признаками:

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

Если совсем коротко — PWA приложение — это обычный веб-сайт, с адаптивным шаблоном, например как наш официальный сайт https://vamshop.ru

Что это значит для пользователей VamShop?!

Это значит, что Вы можете увеличить аудиторию своих интернет-магазинов, работающих на базе VamShop за счёт размещения своего интернет-магазина в виде приложения в магазине приложений Google Play.

Сразу покажу пример, как это выглядит на практике, на примере VamShop.

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

Добавляем иконку магазина на рабочий стол (смартфона, планшета, ноутбка)!

На данный момент практически у каждого есть смартфон с магазином приложений, будь то Google Play, либо iPhone App Store, либо Windows Apps Store

Что важно каждому владельцу интернет-магазина?!

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

Любой магазин на базе VamShop можно сделать в виде приложения, т.е. можно добавить иконку Вашего магазина на рабочий стол windows, либо на домашний экран смартфона, любого смартфона: android смартфона, iPhone смартфона, на домашний экран планшета, либо добавить иконку Вашего магазина на рабочий стол ноутбука, компьютера с операционной системой Windows, MacOS, Linux.

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

Новый шаблон — Часть 5

Часть пятая.

В данной заметке покажу примеры шаблонов плиток товара, которые идут с новым шаблоном vamshop4 по умолчанию.

Но сначала покажу скриншот, как выглядит главная страница VamShop с новым шаблоном vamshop4 на данный момент.

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

Добавляем невидимую каптчу от гугл (google recaptcha v3) на страницу обратной связи!

Если Вы столкнулись с прблемой спама, который приходит у Вас со страницы обратной связи, можно попробовать добавить невидимую каптчу (google recaptcha v3) от гугл.

1. На сайте https://google.com/recaptcha получаете ключи для сайта.

site key и secret key.

2. В файле /shop-content.php меняйте:

	if (isset ($_GET['action']) && ($_GET['action'] == 'send') && $spam_flag == false) {

на:

// Build POST request:     
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; $recaptcha_secret = 'ЗДЕСЬ-УКАЖИТЕ-ВАШ-СЕКРЕТНЫЙ-КЛЮЧ'; $recaptcha_response = $_POST['recaptcha_response'];
// Make and decode POST request:
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);

if (isset ($_GET['action']) && ($_GET['action'] == 'send') && $spam_flag == false && $recaptcha->score >= 0.5) {

В шаблоне страницы обратной связи /templates/ваш-шаблон/module/contact_us.html после:

{config_load file="$language/lang_$language.conf" section="contact_us"}

добавьте:

<script src="https://www.google.com/recaptcha/api.js?render=УКАЖИТЕ-ЗДЕСЬ-СВОЙ-SITE-KEY"></script>     
<script>
grecaptcha.ready(function () { grecaptcha.execute('УКАЖИТЕ-ЗДЕСЬ-СВОЙ-SITE-KEY', { action: 'contact' }).then(function (token) { var recaptchaResponse = document.getElementById('recaptchaResponse'); recaptchaResponse.value = token; }); }); </script>

и внизу, меняйте:

{$FORM_END}

на:

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">
{$FORM_END}

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