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

Вывод результатов поиска товаров через ajax прямо в строке поиска!

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

Без перезагрузки страницы, через ajax.

Вот как это будет выглядеть, смотрите скриншоты:

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

Как это сделать?!

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

VamShop и Google Analytics Ecommerce!

В VamShop встроена аналитика Google Analytics в поддержкой Ecommerce режима, т.е. передаются данные о заказах и продажах.

Небольшая заметка, что это за Ecommerce режим в Google Analytics и почему я всем рекомендую его включать в своём магазине на базе VamShop.

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

Пример работы с Composer в VamShop!

В VamShop 2 по умолчанию интегрирована удобная работа с Composer, с любыми библиотеками с https://packagist.org/

Готовых библиотек десятки тысяч, есть готовые варианты для решения практически любых задач, не надо изобретать свой велосипед, в 99% случаях уже есть готовое решение в виде php класса на https://packagist.org/

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

Если коротко, то сделаем так, что на странице оформления заказа у покупателя уже будут автоматически заполнены поля Город, Регион, Страна на основе его IP адреса.

Для этого будет использовать библиотеку Sypex GEO API, а устанавливать эту библиотеку будем в VamShop с помощью Composer.

https://sypexgeo.net/ru/api/

Краткое содержание статьи:

1. Что такое Composer и для чего он нужен в VamShop.

2. Почему Composer — это быстро, просто, удобно.

3. Устанавливаем php библиотеку Sypex GEO API в VamShop.

4. Определяем Город, Регион, Страну покупателя и заполняем поля формы на странице оформления заказа.

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

Новый модуль — Подарок

В VamShop 2 доступен новый модуль — Подарок.

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

Как это выглядит в магазине, смотрите скриншоты:

P.S. Модуль написан с использованием так называемых событий (events) в VamShop 2, т.е. для установки и работы модуля не надо править никакие файлы движка VamShop 2, модуль никуда не исчезнет после обновления, он максимально изолирован он кода движка VamShop 2.

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

404 страница в VamShop

В VamShop 2 изменена 404 страница по умолчанию, теперь 404 страница выглядит вот так:

Что сделано:

  1. Теперь управлять 404 страницей можно прямо из Админки. В разделе Информация добавлена страница 404.
  2. Сама 404 страница изменена, дизайн 404 страницы теперь общий с магазином.
  3. В отладочном режиме работы вместо 404 страницы выводится отладочная информация, в рабочем режиме отладочная информация не выводится.
  4. На самой странице добавлен пояснительный текст.
  5. В качестве примера добавлен вывод товаров со скидкой прямо на страницу 404.

Управление 404 страницей в админке выглядит так же как и любой другой страницей:

т.е. Вы можете вставлять любой текст, любые данные (скидки, распродажи, информацию об акциях, спец. предложениях и прочее).

Всё прямо из админки, никакой правки файлов.

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

Как сделать оформление заказа прямо на странице корзины?

Всё элементарно, VamShop 2 максимально гибкий движок в плане внешнего вида, шаблонов, размещения данных.

Редактируйте страницу Корзина в Админке — Содержание — Страницы.

и просто добавляйте тэг:

{checkout}

Всё, теперь у Вас оформление заказа прямо на странице корзины.

Заметьте, что Вам даже не пришлось никакие файлы править, не пришлось подключаться на ftp и т.д. и т.п.

Всё очень просто.

Рубрики
vam shop Обучение

Как разместить товары внутри статьи?!

К примеру, Вы пишите на сайте у себя статью и хотите разместить товары внутри статьи.

Ни под статьёй, ни над статьёй, а именно в тексте статьи.

Как это сделать?!

Всё просто, в VamShop 2 можно вставлять данные в любые места, т.е. внутрь описания товара, внутрь информационных страниц, статей, новостей, в общем, куда угодно, везде происходит обработка smarty-тэгов.

К примеру, добавим слайдер с товарами прямо внутрь статьи, аналогичный слайдер, что выводится на главной странице http://demo2.vamshop.ru

Добавляете свою статью в Админке — Содержание, и прямо в тексте статьи, в поле Описание вставляем тэг:

{content_listing template="slider" parent="tablets" type="product" limit="9"}

Тем самым Вы выводим 9 товаров из категории Планшеты.

Описание всех доступных параметров тэга content_listing Вы можете прочитать в Админке — Расширения — Тэги — content_listing

Можно любой внешний вид для выводимых данных сделать. Слайдер показан лишь для примера.

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

Настраиваем SSL в VamShop 2!

Перевод магазина на базе VamShop 2 на SSL протокол состоит из двух частей:

1. Настройка на стороне сервера.

2. Настройка на стороне магазина.

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

Настройка SMS уведомлений в VamShop 2

Настройка SMS уведомлений в VamShop 2

В VamShop 2 встроена отправка SMS уведомлений покупателям, оформившим заказ в магазине.

Пример получаемых покупателем SMS (Шаблон отправляемого письма правится в Админке — Настройки — Шаблоны писем — new-order):

2015-08-04 17.11.28  2015-08-04 17.11.40

В данной заметке расскажем как настроить SMS уведомления в VamShop 2.

1. Для отправки SMS в VamShop 2 может использоваться любой Email -> SMS шлюз.

Отправка SMS покупателям была проверена на сервисах MainSMS.Ru и AvisoSMS.Ru.

Настройка SMS уведомлений состоит из двух частей:

1. Регистрация в MainSMS.Ru и получение email адреса для sms уведомлений.
2. Указание этого email адреса в Админке — Настройки — Магазин — SMS Email шлюз.

Всё легко и просто.

Нам нужно получить email адрес для отправки sms, т.е. зарегистрировать шлюз email -> sms.

1. Регистрируемся в сервисе MainSMS.Ru.

vamshop2-sms-1

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

vamshop2-sms-2

3. Переходим в личный кабинет.

vamshop2-sms-3

4. В личном кабинете переходим по ссылке API.

vamshop2-sms-4

5. Нажимаем кнопку Добавить проект.

vamshop2-sms-5

6. Заполняем поле Название проекта и нажимаем Создать API проект.

7. Мы создали проект, переходим внутрь нашего проекта, нажав на названии проекта.

8. Из поля E-Mail to SMS копируем указанный email ящик.

vamshop2-sms-6

Всё.

Осталось указать этот ящик в настройках магазина и SMS будут отправляться покупателям после оформления заказа в магазине.

Указываем наш полученный в сервисе mainsms.ru email в Админке — Настройки — Магазин — SMS Email шлюз.

vamshop2-sms-7

Теперь Ваши покупатели будут получать SMS уведомления при оформлении заказа в магазине.

Шаблон письма, которое отправляется покупателям в виде SMS и email письма правится в Админке — Настройки — Шаблоны писем — new-order.

Отчёты об отправленных SMS можно смотреть в своём личном кабинете на сайте MainSMS.Ru в разделе Личный кабинет — История сообщений.

vamshop2-sms-8

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

Максимально упрощаем оформление заказа в VamShop 2!

По умолчанию в VamShop 2 оформление заказа выглядит на смартфоне/десктопе вот так:
vamshop2-fast-checkout8   vamshop2-fast-checkout6

В данной заметке расскажу как сделать на смартфоне/десктопе вот так:
vamshop2-fast-checkout9   vamshop2-fast-checkout7

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

Что мы будем делать:
1. Уберём обязательное поле email, обязательными будут только Имя и Телефон.
2. Уберём все остальные лишние поля.
3, Из модулей доставки оставим только курьерскую доставку.
4. Из модулей оплаты оставим только оплату наличными курьеру.

Приступим:

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

Для этого в Админке — Расширения — Тэги выбираем тэг checkout.
vamshop2-fast-checkout1

Внизу страницы нажимаете кнопку — Создать микро шаблон из тэга.
vamshop2-fast-checkout2

На следующей странице создания микро шаблона в опции Псевдоним указываем название нашего нового шаблона, например my-checkout и нажимаем Продолжить.

vamshop2-fast-checkout3

Шаблон создан для страницы оформления заказа.

2. Теперь нам нужно указать, что б страница оформления заказа отрисовывалась нашим шаблоном my-checkout, а не шаблоном по умолчанию.

Для этого в Админке — Содержание — Страницы редактируем страницу Оформление и меняем {checkout} на {checkout template=’my-checkout’}

vamshop2-fast-checkout4

т.е. мы указали, что страница оформления заказа должна отрисовываться нашим шаблоном my-checkout.

Нажимаем кнопку Продолжить.

Всё, мы указали, что страница офомления заказа теперь отрисовывается нашим шаблоном my-checkout.

Осталось лишь отредактировать наш микро шаблон my-checkout и убрать всё лишнее.

3. Заходим в Админку — Оформление — Микро шаблоны и нажимаем на нашем шаблоне my-checkout, откроется страница редактирования шаблона.

vamshop2-fast-checkout5

Удаляем всё лишнее, в поле Шаблон должен остаться только вот этот код:

<script type="text/javascript">
$(function () {

  $("#contentform :input:text:visible:enabled:first").focus();

  $("form#contentform :input").change(function() {
    $("input[id='" + this.id + "']").addClass("modified");
    $("radio[id='" + this.id + "']").addClass("modified");
    $("select[id='" + this.id + "']").addClass("modified");
    $("checkbox[id='" + this.id + "']").addClass("modified");
    $("textarea[id='" + this.id + "']").addClass("modified");
  });
      	
$("label.shipping-method").click(function(){
$("label.shipping-method").parent().removeClass("selected");
$(this).parent().addClass("selected");
});

$("label.payment-method").click(function(){
$("label.payment-method").parent().removeClass("selected");
$(this).parent().addClass("selected");
});
	
  // validate form
  $("#contentform").validate({
    rules: {
      bill_name: {
        required: true,
        minlength: 2      
     },
      phone: {
        required: true,
        minlength: 10,
     },
    },
    messages: {
      bill_name: {
        required: "{lang}Required field{/lang}",
        minlength: "{lang}Required field{/lang}. {lang}Min length{/lang}: 2"
      },
      phone: {
        required: "{lang}Required field{/lang}",
        minlength: "{lang}Required field{/lang}. {lang}Min length{/lang}: 10"
      }
    }
  });

  });
</script>
<div id="checkout">
<form action="{$checkout_form_action}" method="post" id="contentform" class="form-horizontal">
  <div id="bill_information">
    <div>
      <h3>{lang}Billing Information{/lang}</h3>
    </div>
	<div class="form-group">
		<label class="col-sm-3 control-label" for="bill_name">{lang}Name{/lang}:</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" name="bill_name" id="bill_name" value="{if $customer.AddressBook.ship_name}{$customer.AddressBook.ship_name}{else}{$order.bill_name}{/if}"/>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-3 control-label" for="phone">{lang}Phone{/lang}:</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" name="phone" id="phone" value="{if $customer.AddressBook.phone}{$customer.AddressBook.phone}{else}{$order.phone}{/if}" />
		</div>
	</div>
  </div>
  <div id="shipping_method">
    <div>
      <h3>{lang}Shipping Method{/lang}</h3>
    </div>  
  <div class="clearfix">
	<ul class="shipping-methods">
    {foreach from=$ship_methods item=ship_method}
		<li class="item col-sm-6 col-md-4{if $ship_method.id == $order.shipping_method_id} selected{/if}">
      <label class="shipping-method">
      <span class="title">
        <input type="radio" name="shipping_method_id" value="{$ship_method.id}" id="ship_{$ship_method.id}" 
        {if $ship_method.id == $order.shipping_method_id}
          checked="checked"
         {/if}
        />
		<span class="name">{lang}{$ship_method.name}{/lang}</span>
		</span>
		<span class="image text-center">
				{if $ship_method.icon}<img src="{base_path}/img/icons/shipping/{$ship_method.icon}" alt="{$ship_method.name}" title="{$ship_method.name}" /> {/if}
		</span>
		{if $ship_method.cost_plain > 0}<span class="description">{$ship_method.cost}</span>{/if}
		{if $ship_method.description}<span class="description">{$ship_method.description}</span>{/if}
		</label>	
		</li>
    {/foreach}
	</ul>
	</div>
  </div>

  <div id="payment_method">
    <div>
      <h3>{lang}Payment Method{/lang}</h3>
    </div>    

  <div class="clearfix">
	<ul class="payment-methods">
    {foreach from=$payment_methods item=payment_method}
		<li class="item col-sm-6 col-md-4{if $payment_method.id == $order.payment_method_id} selected{/if}">
      <label class="payment-method">
      <span class="title">
        <input type="radio" name="payment_method_id" value="{$payment_method.id}" id="payment_{$payment_method.id}" 
        {if $payment_method.id == $order.payment_method_id}
          checked="checked"
         {/if}        
        />
		<span class="name">{lang}{$payment_method.name}{/lang}</span>
		</span>
		<span class="image text-center">
				{if $payment_method.icon}<img class="text-center" src="{base_path}/img/icons/payment/{$payment_method.icon}" alt="{$payment_method.name}" title="{$payment_method.name}" /> {/if}
		</span>
		{if $payment_method.description}<span class="description">{$payment_method.description}</span>{/if}
		</label>	
		</li>
    {/foreach}
	</ul>
  </div>
	    
  </div>

	<div class="form-group">
	  <div class="col-sm-offset-3 col-sm-9">
	    <button class="btn btn-warning" type="submit" value="{lang}Continue{/lang}"><i class="fa fa-check"></i> {lang}Continue{/lang}</button>
	  </div>
	</div>
</form>
</div>

Сохраняем наш микро шаблон my-checkout.

Теперь наше оформление заказа в магазине максимально простое.

Нужно лишь заполнить поля Имя и Телефон, больше никаких лишних данных, кучи форм, полей, кликов.

vamshop2-fast-checkout9   vamshop2-fast-checkout7

Обратите внимание, что нам не пришлось копаться в php коде, подключаться по ftp, скачивать файлы и прочее-прочее, всё делается прямо в админке, никаких лишних программ, нет лишней траты времени, всё удобно и легко.

Спасибо за внимание.