Як створити інтернет-магазин

143
  • Варіанти інтеграції інтернет-магазину VirtueMart в Джумла
  • Як дізнатися ID товару або категорії в VirtueMart?
  • Що таке Flypage шаблон для картки товару)
  • При заході відвідувача на сайт відразу відкривається магазин
  • Настроювання головного модуля інтернет-магазину Virtuemart
  • Здрастуйте, шановні читачі блогу . Продовжимо розгляд теми створення інтернет-магазину на Joomla (зрозуміло, що Ебей на ньому не створити, але і то не погано) з допомогою безкоштовного компонента VirtueMart, встановлення якого ми розглянули в наведеній статті.

    Як створити інтернет-магазин

    Перш ніж приступити до вивчення внутрішніх налаштувань цього инетмагазина, я пропоную відразу ж визначитися з його позиціонуванням всередині сайту. Справа в тому, що його можна зробити як головною сторінкою (відразу буде відкриватися виртуемарт), так і звичайним пунктом меню Джумлы , який буде, відповідно, відкриватися тільки після звернення до нього користувача.

    Варіанти інтеграції інтернет-магазину VirtueMart в Джумла

    У будь-якому випадку для початку нам потрібно створити пункт меню, який буде відкривати вікно з категоріями нашого ЇМ. Для цього заходимо в адмінку нашого сайту (http://vash_sait.ru/administrator/) і підводимо мишу до пункту «меню» у верху відкритого вікна.

    З випадаючого списку вибираємо той варіант, в якому ми хочемо розмістити посилання. В результаті у вас відкриється вікно з уже наявними в цьому меню пунктами. Нам потрібно буде створити новий. Для цього ми натискаємо на кнопку «Створити» у верхньому правому кутку відкритого вікна. У дереві «Виберіть тип меню», клацаємо по напису «VirtueMart». Перед нами з’явиться вікно налаштувань, що складається з лівого і правого блоків.

    У лівому блоці всі налаштування будуть аналогічні описаним тут. У правому блоці налаштувань, в «Параметри — Компонент», ви можете вказати в полі «Product ID» ідентифікатор) якого-небудь товару, і тоді при клацанні по даному пункту меню відкриється не весь список категорій Виртуемарта, а тільки вікно з описом одного єдиного товару, що має ідентифікаційний номер ID, рівний заданому в налаштуваннях.

    Якщо ж поле «Product ID» залишити не заповненим, а в полі «Category ID» ввести ID якої-небудь категорії, то при клацанні по створюваному пункту відкриється її вміст.

    Як дізнатися ID товару або категорії в VirtueMart?

    Ці налаштування дозволяють дуже гнучко підходити до створення різноманітних способів відкриття інтернет магазину. Залишається тільки питання: а як дізнатися ID товару або категорії? Ну, тут все досить просто: заходимо в адмінку, переходимо з верхнього меню в «Компоненти» — «VirtueMart», а у вікні налаштувань вибираємо з лівого блоку налаштувань пункт «Товари».

    Як створити інтернет-магазинЯк створити інтернет-магазин

    Для перегляду ID категорії потрібно вибрати в розкрився блоці меню пункт «Список категорій». В крайній правій колонці відкритого вікна, навпроти кожної категорії, ви можете подивитися його ID.

    Як створити інтернет-магазинЯк створити інтернет-магазин

    Якщо ж ви хочете дізнатися ID якого-небудь товару, то в лівому меню оберіть пункт «Товари». Вгорі вікна відкрився у вас є можливість вибрати з випадаючого списку розділ, в якому повинен знаходитися шуканий товар. ID ви зможете побачити, знову ж таки, в останній правій колонці, навпроти назви.

    Продовжимо розбирати налаштування пункту меню для VM. У правому блоці ви можете ввести в поле «Flypage» назва шаблону для відображення карток товарів, наприклад, flypage-ask.tpl. В результаті чого, для відображення всього асортименту буде використовуватися даний шаблон.

    Тобто якщо ми вказали у пункті «Product ID» якийсь конкретний ID продається предмета, то до нього застосувати шаблон для картки товару — flypage-ask.tpl. Якщо ми вказали у пункті «Category ID» якийсь конкретний ID розділу, то всі предмети з нього будуть відображатися на основі шаблону сторінки категорії VirtueMart — flypage-ask.tpl.

    Ну і, нарешті, якщо ми взагалі нічого не вказали в пунктах «Product ID» і «Category ID» (у цьому випадку, по натисненню на створюваний пункт, буде відриватися список всіх категорій ЇМ), то всі предмети у всіх категоріях будуть відкриватися на основі шаблону flypage-ask.tpl.

    Що таке Flypage шаблон для картки товару)

    Тепер, для тих хто не знає, що таке шаблон відображення картки товару в VM, поясню. Якщо ви підключаєтесь по протоколу FTP до вашого сервера і знайдете наступну папку /components/com_virtuemart/themes/default/templates/product_details, то зможете побачити там кілька файлів XXX.tpl.php, які і є шаблонами.

    Фактично ці шаблони Flypage дозволяють задавати, що і яким чином буде розташовано у картці (сторінці) товару. Для різних категорій в їх налаштуваннях можна задавати різні шаблони Flypage.

    Тут же, в полі «Flypage», ми можемо задати один і той самий шаблон для всього вмісту. Докладніше про настроювання шаблонів Flypage я планую розповісти в одній з наступних статей даної рубрики.

    Поки ще я не зрозумів для чого потрібно полі «Сторінка» в правому блоці налаштувань. Якщо хтось володіє цією інформацією, то прохання написати про це в коментарях до даного посту. Так само в правому блоці налаштувань є область під назвою «Параметри — Система», в якій можна фактично встановити зміст мета тега TITLE для відкритої сторінки — це її заголовок, який ви можете побачити в самому верху вікна браузера.

    Вміст мета-тегу TITLE має набагато більше значення для пошукачів, ніж текст сторінки, тому варто включати в нього ключові слова, за якими ви плануєте просувати свій проект. Тайтл прописується в налаштування пункту меню — «Заголовок сторінки», а в полі «Показувати Заголовок сторінки» ви можете вибрати, чи буде він видно на сторінці:

    Як створити інтернет-магазинЯк створити інтернет-магазин

    Тепер тиснемо на кнопку «Зберегти» або «Застосувати» (при натисканні на кнопку «Зберегти» — ваші налаштування збережуться і вас викине з вікна налаштувань, а при натисканні на кнопку «Застосувати» — ваші налаштування також збережуться, але ви залишитеся в цьому ж вікні). Якщо тепер перейти на Joomla-сайт, то можна побачити і випробувати тільки що створений пункт меню.

    Але при переході на ваш сайт відвідувач як і раніше буде спочатку потрапляти на головну сторінку, і для переходу в магазин йому потрібно буде знайти і натиснути відповідний пункт у меню. Це не завжди зручно і може створювати додаткові проблеми, тому краще зробити так, щоб інтернет-магазин відкривався відразу ж при вході користувача.

    При заході відвідувача на сайт відразу відкривається магазин

    Для цього потрібно зайти в адмінку і підвести мишу до пункту «меню» у верху відкритого вікна. З випадаючого списку потрібно вибрати той, у якому знаходиться тільки що створений нами пункт для VirtueMart. Ви можете бачити, що зірочка в колонці «За замовчуванням» стоїть навпроти головної сторінки, тому вона і відкривається при зверненням до сайту за адресою http://vash_sait.ru/.

    Як створити інтернет-магазинЯк створити інтернет-магазин

    Для того, щоб відразу відкривався ЇМ, потрібно поставити галочку в чекбоксі поруч з його пунктом меню і натиснути у верхній панелі кнопок на велику жовту зірку «За замовчуванням». У підсумку, зірочка в колонці «За замовчуванням» стане напроти пункту інтернет-магазину, і про зверненні до сайту за адресою http://vash_sait.ru/ буде відразу відкриватися список категорій VM.

    Для створення зручності роботи з магазином слід встановити головний модуль VirtueMart. Він об’єднує в собі практично все, що може знадобитися покупцеві для повноцінної роботи:

    • список категорій товарів в різних форматах
    • кошик
    • форму авторизації
    • форму пошуку
    • розширений пошук
    • пошук за характеристиками
    • вхід в особистий кабінет користувача

    Для початку потрібно встановити сам головний модуль, інсталяційний пакет якого ви завантажили разом з компонентом (Complete Package). Після розпакування файлу зайдіть в папку modules, яка була всередині архіву, і там ви побачите архів під назвою mod_virtuemart_….zip — ось це і є дистрибутив головного модуля, який ми зараз будемо встановлювати.

    Виконуємо таку послідовність дій в адмінці Джумлы: «Розширення» — «Встановити/Видалити» — «Завантажити файл пакета» — кнопка «Обзор» — знаходимо на своєму комп’ютері файл mod_virtuemart_…..zip — тиснемо на кнопку «Завантажити файл&Встановити». Процес установки головного модуля займає небагато часу і по його завершенні ви побачите повідомлення про успішне його закінчення. Якщо виникнуть які-небудь проблеми на цьому етапі, то ви можете пошукати тут рішення вашої проблеми при установці розширень Joomla.

    Настроювання головного модуля інтернет-магазину Virtuemart

    Тепер переходимо безпосередньо до його налаштуванні. Відкриваємо в адмінці у верхньому меню пункт «Розширення» — «Менеджер модулів» і клацаємо по назві щойно встановленого розширення. Ліва частина вікна налаштувань практично у всіх випадках буде виглядати однаково і містити наступні області:

  • «Заголовок» — задати потрібний заголовок
  • «Показати заголовок» — вибрати, чи буде він видний на сайті
  • «Включений» — вибрати, включити чи відображення даного модуля на сайті чи ні
  • «Позиція» — вибрати позицію для його відображення (назва позицій для модулів залежить від використовуваного вами шаблону). Для того, щоб побачити всі наявні у вашому шаблоні позиції для модулів, можна додати до адресою вашого сайту ?tp=1, тобто в підсумку вийде http://vash_sait.ru/?tp=1.)
  • «Доступ» — вибрати з випадаючого списку, кому буде видно даний модуль: всім, тільки зареєстрованим користувачам або тільки адмінам
  • в області «Призначення меню», в полі «Меню», ви можете налаштувати, на яких сторінках він буде відображатися, а на яких не буде (за замовчуванням стоїть галочка «Все» і він буде, відповідно, видно на всіх сторінках сайту)
  • «Вибір меню» — ви можете, утримуючи Shift або Ctrl на клавіатурі вибрати ті сторінки, на яких буде відображати цей модуль, якщо в налаштуваннях попереднього поля ви вибрали «Вибрати зі списку»
  • У правій частині вікна налаштувань ви можете:

  • «Menu Class Suffix» і «Суфікс класу модуля» — вказати суфікси для надання зовнішнім виглядом модуля заздалегідь заданого виду (про суффиксах ми поговоримо пізніше)
  • «Pre-text» — ви можете ввести текст, який буде передувати списком категорій магазину в цьому модулі
  • «Show a Login Form for the customers?» — ви можете вибрати, чи відображати форму авторизації для покупців
  • «Show the Product Categories?» — ви можете вибрати, чи відображати категорії
  • «Show List All — link?» — ви можете вибрати, чи відображати посилання «Список всіх товарів», клацання по якій відкриється відповідне вікно
  • «Show Administrator Link?» — ви можете вибрати, чи відображати посилання на управління магазином для користувачів з правами адміністратора або менеджера (яким дозволено керування НИМ)
  • «Show Account Link?» — ви можете вибрати, чи відображати посилання для входу користувачів власний аккаунт, де показуються всі виписані і оплачені рахунки, а так само адресу доставки, який можна змінити
  • «Open the Account Maintenance in a GreyBox?» — не зрозумів для чого потрібно, але начебто не працює
  • «Show Mini Cart?» — ви можете вибрати, чи відображати міні-кошик
  • «Open the Cart in a GreyBox?» — ви можете вибрати, чи відкривати кошик у спливаючому вікні (можете спробувати, як вам більше сподобається)
  • «Show Product Search Field?» — ви можете вибрати, чи відображати пошук по товарах
  • «Show Product Parameter Search Field?» — ви можете вибрати, чи відображати пошук за типами товарів
  • «Category display type» — вибираємо зі списку тип відображення категорій:
    • варіант «Link List» — простий список
    • варіант «Tigra Tree» — деревоподібний формат
    • варіант «JSCook» — симпатичне випадаюче меню або ж дерево (в залежності від настройки у полі «JSCook Type») на ДжаваСкрипт
    • варіант «TransMenu» — красиве виїжджає меню
    • варіант «dTree» — ще один варіант деревовидного меню
  • «JSCook Type» — вибираємо зі списку вид відображення JSCook — у вигляді меню або у вигляді дерева
  • «JSCookMenu Style» — можемо змінити тему для оформлення меню JSCook (теми оформлення задаються в однойменних папках і файлах, розташованих за адресою modules/mod_virtuemart)
  • «JSCookMenu Orientation» — вибираємо орієнтацію меню JSCook — горизонтальну або вертикальну
  • «JSCookTree Style» — можемо змінити тему для оформлення дерева категорій JSCook (теми оформлення задаються в однойменних папках і файлах, розташованих за адресою modules/mod_virtuemart)
  • «Label of the dTree Root» — можемо задати заголовок дерева, якщо в полі «Category display type» був обраний варіант «dTree» (наприклад, Инетмагазин)
  • Не забудьте після закінчення налаштувань натиснути на кнопку «Зберегти» або «Застосувати».

    Раджу ще подивитися відео про створення карти для інтернет-магазину з Вебмастерской Яндекса:

    Як створити інтернет-магазин«alt=»»>

    Удачі вам! До зустрічей на сторінках блогу