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

Найти меня в:

Корзина Virtiuemart

Если вы установили модули для магазина, о которых рассказывалось в уроке Установка компонента интернет-магазин, в списке вашего менеджера модулей должен отображаться VM - Shopping cart.

cart1

Нажмите на модуль и выберете позицию отображения.

cart2

Понять в какое именно место разместить модуль можно, введя в адресную строку браузера …адрес сайта?tp=1. Если позиции не отобразились необходимо зайти в настройки вашего шаблона (в менеджере шаблонов) и включить опцию Просмотр позиций модулей.

cart3

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

cart4

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

cart5

Как видите стандартный вид оставляет желать лучшего, разберем, как можно изменить отображение этого модуля. Необходимый нам файл хранится в директории папка сайта\modules\mod_virtuemart_cart\tmpl\default.php . Строки, которые непосредственно отвечают за отображение начинаются с 46.

Можно заметить, что выводится три блока:

  1. $data->billTotal – суммарная стоимость всех товаров
  2. $data->cart_show – ссылка для перехода в корзину
  3. $data->totalProductTxt – количество единиц товара в корзине

Совет – убрать в настройках модуля показ списка товаров в корзине. Он занимает много места, ведь отображает каждый товар. Для вывода достаточно лишь суммы заказа и количества единиц.

cart6

cart7

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

cart8

Вставьте этот вод вместо строк 46-54.

<table width="180" height="59" border="0">
  <tr>
    <td width="30%" rowspan="2" class="backtab">
	   <div class="total_products">
       <?php echo  $data->totalProductTxt ?>
     
       </div>
	</td>
    <td>
	   <div class="show_cart"rel="nofollow">
	   <?php echo  $data->cart_show; ?>
       </div>	
    </td>      
  </tr>
  <tr>
    
    <td>
	<?php if ($data->totalProduct and $show_price and $currencyDisplay->_priceConfig['salesPrice'][0]) { ?>
	    <div class="total" >
		<?php echo $data->billTotal; ?>
	     </div>
         <?php } else { ?>
         <?php echo "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Пусто" ?>		
           <?php } ?>
	</td>
      </tr>

</table>

 Если вместо букв пусто выводятся иероглифы- сохраните файл блокнотов в кодировке UNF-8.

cart9

 

Чтобы добавить фоновый файл (папка \components\com_virtuemart\assets\images ), закачайте его на сайт и добавьте следующие строки в конец файла папка сайта\components\com_virtuemart\assets\css\vmsite-ltr.css:

.backtab
{
background:url(../images/cart.png) no-repeat;
}

 

cart10

Если картинка не появилась, то проверьте существует ли она в указанной папке, очистите кеш сайта и браузера, перезапустите браузер.

 

Страница оформления заказа

Данный модуль отвечает за вывод списка товаров, которые находятся в вашей корзине, заполение личных данных пользователем (почты, имени, адреса), выбор формы оплаты и доставки. Особенностью является то, то все эти операции можно проделать за один шаг с помощью плагина One Page Checkout.

Оформление заказа - один из самых сложных со стороны технической части модуль.
Сайт должен быть предварительно настроен и установлено расширение VirtueMart.

В первую очередь добавьте хотя бы один метод доставки и один метод оплаты.
Сделать это можно перейдя в меню Магазин – Способы доставки. Нажмите на кнопку создать.

one4

На следующей странице необходимо заполнить только название и сохранить.

one5

Проделайте такие же операции со способом оплаты, только в данном случае необходимо сменить параметр опубликовано на Да.

one6

Необходимо установить плагин одностраничного заказа. Стандартный….
Через установку расширений установини плагин plg_system_onepage_vm2.
Включите его в менеджере плагинов. Щелкнув на красный круг напротив названия.

one1

one2

Установите опции плагина, как показано на рисунке и сохраните.

one3

Теперь необходимо добавить html файлы для одностраничного. Просто добавьте в html папку из этого архива. Она подменяет внешний вид модуля Оформлени заказа.
папка с сайтом \templates\ название установленного шаблона\html
проверьте, чтобы в файле ваш_шаблон/html/com_virtuemart/cart/default.php строка 

echo $this->checkout_link_html; /*- была раскомменитирована*/
//echo '<a class="vm-button-correct" href="javascript:void(0);" 
//onclick="submit_order();"><span>
//' . JText::_('COM_VIRTUEMART_ORDER_CONFIRM_MNU') . '
//</span></a>'; /*- закомментирована*/

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

Исправление дублирования полей. Убираем второй адрес доставки. Для этого переходим в:
папка сайта\components\com_virtuemart\assets\css\vmsite-ltr.css
и добавляем строки вконце.

#div_shipto{
display:none;
}

  Перевод текста в модуле. Просто замените данный файл в папке:

\language\ru-RU\ru-RU.com_virtuemart.ini или допишите значения переменных, которые вы хотите увидеть. Таких переменных может и не быть в файле.

COM_VIRTUEMART_USER_FORM_EDIT_BILLTO_LBL=""

Эта строчка уберет надпись изменить.

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

Для этого в файле
папка сайта\components\com_virtuemart\assets\css\vmsite-ltr.css
Свойству .vm2-billto-icon присвойте значение свойства .vm2-shipto-icon
Остается убрать только ненужные для заполнения пользователем поля. На рисунке отмечено то, что изменилось.

one7

Удалить ненужные для заполнения пользователем поля. Перейдите в меню Настройки – Поля, заполняемые пользователем.

one9

Необходимо убрать галочки со всех полей, кроме тех, которые указаны на рисунке. Оставьте обязательные поля (их невозможно убрать), поле Имя (оно уже есть в обязательных, но его нужно добавить подробнее можете прочитать в статье о регистрации пользователей ),  и другие поля по-вашему усмотрению, например, телефон и адрес (можно сделать необязательными к заполнению).

one10

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

one11

Убрать галочку Условия обслуживания. Чтобы пользователь постоянно не нажимал на галочку принимать условия соглашения – лучше удалить ее. Только само поле нельзя отключить в настройках. Для отключения необходимо изменить строчку в коде файла:
папка сайта / administrator/components/com_virtuemart/models/userfields.php
код

static function getCoreFields(){
return array( 'name','username', 'email', 'password', 'password2' , 'agreed');
}

 заменить на

static function getCoreFields(){
return array( 'name','username', 'email', 'password', 'password2' , /*'agreed'*/);
}

 Теперь нужно отключить поле adreed в настройках.

one12

И еще раз проверьте, чтобы в меню Настройки – Настройки – Оформление заказа свойства Покупатели должны соглашаться с условиями обслуживания во время заказаи Показать информацию о политике возврата в корзине/на странице подтверждения заказа были выключены.

one13

Следующий урок >>Корзина Virtiuemart.

 

onepage

 

Дорогие Читатели моего блога.
Писав эту статью, я не знал о существовании такого компонента, как One Page Checkout for VirtueMart.
Его установка и настройка решает большинство стандартных проблем описанных в этой и некоторых других моих статьях.
Сам плагин на официальном сайте стоит очень дорого €49.00, поэтому делюсь с вами за символическую стоимость.