misc/class
lib/jquery_pnotify, lib/moment, lib/lodash, misc/notification, site/engine, misc/social
if( $.browser.msie && $.browser.version <= 8 ) include('lib/respond'); $._social.__cfg = {"init":[{"service":"basic"},{"fb_app_id":"1997094873850041","service":"fb"},{"vk_app_id":"2978320","service":"vk"},{"service":"twi"}],"like":[{"service":"fb"},{"service":"vk"},{"via":"","channel":"","hash_tag":"","service":"twi"}]}; window._SiteEngine = new classes.SiteEngine( { user_id: 0, controller: 'portfolio_page', action: 'view', content_css_version: '1459538664', social_enabled: 0} );

Faiwer

Блог web-программиста

Formula7.kz (f7.kz) — это интернет-магазин компании Formula 7. Сайт содержит обширный каталог продаваемых компанией товаров, которые можно заказать и оплатить при помощи карт VISA и MasterCard (через платёжный шлюз АльфаБанка).

Дизайн сайта выполнен в фирменных цветах компании. Главная страница содержит ленту новостей и акций, фильтр по товарам, ленту рекомендуемых товаров и список продаваемых брендов. В нижней части страницы располагается карта проезда и краткая информация для связи. Таким образом дизайн главной страницы, не перегружая посетителя визуальной состовляющей, содержит всю минимально-необходимую информацию, а также располагает удобным инструментом для поиска товаров.

Главным инструментом для поиска по сайту является фильтр. Фильтр разбит на 3 группы (шины, диски и масла), каждая из которых может быть гибко настроена. К примеру посетитель может искать зимние шины Bridgestone, выбирая только те, которое попадают под заданный ценовой диапазон и указанные типоразмеры.

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

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

Ключевыми моментами при разработке сайта были: разработка удобного и интуитивно-понятного для посетителя интерфейса, функциональной административной панели (позволяющей выполнять сложные операции наиболее удобным способом в краткие сроки), SEO-оптимизация.

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

Используемые технологии

  • server: linux, nginx, php5-fpm
  • back-end: php5, nodeJS, mysql, memcache, sphinxsearch, git
  • front-end: javascript, jade, scss, socket.io, jquery, jquery ui

Изображения