Разработка сайта для конкурса от diafan.CMS

Сайт: http://vilka.galimov.net

Diafan.CMS это движок управления сайтом с которым я познакомился несколько лет назад и он мне сразу понравился, так было всё необходимое сразу из коробки.

Итак, конкурс….описание задания тут http://cms.diafan.ru/konkurs/.

На создания сайта, а именно интернет-магазина столовых приборов у меня ушло 4 выходных.

Расскажу по порядку как это происходило:

Рисуем дизайн

Сразу отказался от дефолтного шаблона, так как я всё же дизайнер. И прочитав основные требования к функционалу сайта делаю макеты 3-4 страниц сайта.

Самое интересное, когда рисуешь дизайн без особых требований и никто над тобой не стоит, и не говорит «поиграйся со шрифтами» или «тут красный не такой красный как я хотел», то получается вполне красивый макет и в 4-5 раз быстрее.

Верстка макетов

Рассказывать тут особо нечего. Всё как обычно html5 + css3.

Но в этот раз использовал CSS препроцессор Sass. Давно хотел его попробовать, но всё как то не складывалось.

На деле это оказалось замечательная штука, которая позволяет кастомизировать верстку как угодно, от цветовый схемы сайта до кол-ва элементов в строке.

И конечно ускоряет написание стилей в разы.

Настраиваем diafan.CMS

Устанавливаем на свой хостинг движок. Использовалась последняя версия на текущий момент 5.1.2. Установка занимает пару минут.

3.1 Начнем с магазина

У каталога есть свои настройки. Там мы всё включаем и отключаем что нам нужно.

Характеристики товаров

Добавляем категории и характеристики для товаров. У каждой категорий есть как общие характеристики, такие как «бренд» или «страна производитель», так и отличающиеся, например «комплектация» для наборов, или «кол-во зубцов» для вилок.

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

Оплата товаров

В diafan.CMS большие возможности для магазина.

Добавляем 3 типа скидок.

Просто скидка 7 или 10% на усмотрение админа на определенного товара.

Скидка для оптовиков 15% если оплачено товаров более чем на 100 т.р.

Скидка для всех покупателей 5% если оплачено товаров более чем на 20 т.р.

Используем 4 метода оплаты:

Наличными

Вебмани

Яндекс.деньги

Robokassa

Способы доставки:

Курьером

Самовывоз

Также добавляем сопутствующую услугу «Подарочная упаковка» это даст возможность покупателям сразу упаковать товар красиво на подарок.

3.2 Статические страницы

Создаем обычные страницы такие как «Доставка» «Оплата» и тд.

Натягиваем верстку на движок

Для сайта создаем 4 основных макета (каркаса), которые располагаются в папке themes/

site.php - это каркас для каталога и товаров c левым сайдбаром поиска по каталогу

site_noside.php - такой же каркас без левого сайдбара, для страниц корзины, оформления заказа, отложенных товаров.

site_main.php - каркас для главной страницы, так как она у нас отличается от всех других страниц

site_contact.php - это макет страницы «Адреса продаж», на которой у нас на будет дубльгис карта на всё рабочее пространство и меню.

Внизу располагаем блок всех брендов через шаблонный тег в котором выводим название бренда с ссылкой на этот бренд.

Далее правим шаблоны страниц магазина, которые распологаются здесь /modules/shop/views/. Времени занимает это немного, знаний верстальщика достаточно.

Добавление товаров

Добавлением товаров занималась моя девушка, так как по мне это работа нудная и делать её не хотелось да и админка diafan.CMS позволяет работать человеку без каких либо дополнительны знаний.

Используемые плюшки

Jquery плагины:

JCarousel - cкрипт слайдера товаров на главной

JQzoom - увеличении фотографии на странице товара

SimpleTabs - создание табов Описание и Отзывы на странице товара

Jquery Slider - ползунок для выбора цены от и до

На jquery делаем красивое окошко «Товар добавлен в корзину»

Используем мгновенную отправку формы поиска по товарам при клике на какую либо характеристику.

Заключение

Разработка качественного интернет магазина в короткие сроки на diafan.CMS это легко как показала практика.

Я дизайнер-верстальщик и ниразу не программист, однако прикрутить дизайн к diafan.CMS действительно просто. Гибкость модулей позволяет делать разнообразные сайта. Прикрутить какой либо плагин к модулям тоже не проблема, всё делается налету.

Мне понравилось работать с этим движком, советую и вам попробовать.