В процессе разработки сайта для IT агенства Rubika были учтены особенности целевой аудитории, а также выполнены SEO требования для достижения наилучших результатов среди конкурентов.

При разработке структуры было принято решение разбить сайт на следующие разделы:

1. услуги — основной раздел, где пользователь может ознакомиться с перечнем услуг компании;
2. портфолио — раздел с выполненными работами, где компания показывает свои достижения и опыт;
3. отзывы — в данном разделе могут быть приведены отзывы в виде набранного текста, скан-копии документа или видео, все это сделано для повышения доверия к компании;
4. блог — раздел, где сотрудники компании, путем написания статей на интересующие их тематики, показывают свои знания в данной области;
5. контакты — типичный раздел с контактными данными для связи.

Данный сайт был разработан по подобию персонального сайта поскольку по мнению авторов данная структура является удобной и логически последовательной.

Утвержденный дизайн интернет магазина Scoot, в ходе работы, был немного видоизменен, исходя из соображений удобства использования, а товары были скопированы со старого сайта, и все это сделало еще красивей и удобнее интерфейс сайта. Ниже представлены изображения рабочего макета (первые 4 изобр.) и конечного результата.

Данный интернет магазин обладает следующими компонентами:

• адаптивный дизайн;
• модуль валюты интернет магазина — позволяет установить разные валюты для административной и пользовательской частей магазина;
• модуль «Задать вопрос» — выводит форму для отправки вопроса;
• модуль «Акций» — позволяет устанавливать любому товару вне зависимости от цены лейбл «Акция»;
• модуль «Видео товара» — позволяет указать для каждого товара код видео с YouTube;
• модуль «Привязка по цветам» — позволяет привязать к товару варианты в других цветах;
• модуль «Быстрая покупка» — позволяет сделать заказ в один клик.

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

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

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

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

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

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

При добавлении дополнительных товаров в комплект, появляется кнопка «Удалить», а также для навигации по комплекту можно воспользоваться стрелками слайдера. В случае, когда пользователь удаляет товары из комплекта, и остается один товар — кнопка «Удалить» скрывается.

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

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

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

Основной сложностью была реализация локализации на языке JavaScript, т.к. клиентский хостинг не поддерживал PHP. Задача была решена использованием одной из JS библиотек, однако для каждого из языков необходимо было также заменять изображения, что не позволял реализовать функционал библиотеки. Однако, немного модифицировав файл, задача была решена.

Проанализировав текущее на тот момент состояние ресурса, я пришел к выводу что требуется полная замена программного обеспечения, т.к. сайт был перегружен, слишком долго грузился, а также был «слеплен из того что было».

Из особенностей можно выделить:

• выпадающий ajax поиск;
• обратный звонок;
• всплывающая корзина (отказались);
• ajax подгрузка товаров на странице категорий;
• увеличение в стиле «лупа» при наведении на изображение товара;
• замена стандартного слайдшоу на адаптивное LightBox;
• адаптивный дизайн;
• система скидок для групп пользователей;
• администраторский лог.

Так как данный интернет магазин является оптовым, то и клиенты в основном постоянные, соответственно на сайте должна была присутствовать система скидок для каждой группы покупателей, таким образом, для интернет магазина De Esse был реализован модуль скидок для групп покупателей.

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

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

Дизайн интернет магазина De Esse подразумевал адаптивность под все мобильные устройства, и мной было принято решение заменить скрипт ColorBox, для увеличения фотографий, поставляющийся в стандартной сборке Opencart, на адаптивный LightBox, пример которого вы можете увидеть у меня на сайте.

При разработке мобильной версии также были внесены в предложенный дизайнером макет в пользу юзабилити (удобства использования), так например кнопки разделов «Личный кабинет», «Корзина» и «Вверх» были перенесены в верхний левый угол экрана, где и были зафиксированы, чтобы пользователь мог в любое время обратиться к этим разделам.

При создании интернет магазина были разработаны следующие модули:

• Модуль отсчета времени до конца акции OpenCart;
• Модуль Акции категории со счетчиком для OpenCart;
• Модуль тегов блога PavBlog для OpenCart;
• Модуль Авторизации через социальные сети для OpenCart;
• LookBook для OpenCart;
• Категории для Брендов.

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

Отсчет до конца акции в карточке товара — первый, однако далеко не самый специфичный модуль из списка, позволяющий вывести в карточке товара таймер до конца акции.

Модуль Акции категории со счетчиком пользователи группы социальной сети ВКонтакте встретили с огромной радостью и даже попросили его модернизировать, что и было сделано в ближайшее время. Данный модуль позволяет вывести в любом, из доступных для вывода, месте ссылку на категорию с изображением, таймером обратного отсчета, минимальной ценой или максимальной скидкой в категории, основываясь на данных об акциях на товары в данной категории.

Модуль тегов — один из простых модулей из данного списка, который выводит все теги блога на PavBlog в списке в блоке.

Модуль авторизации через социальные сети для OpenCart — позволяет войти и зарегистрироваться пользователю при помощи одной из социальных сетей. Регистрация происходит автоматически при первой авторизации пользователя. Далее пользователь может входить либо через соц. сеть, либо используя свой Email и пароль, который генерируется и высылается при первой авторизации.

Модуль LookBook — модуль позволяющий создавать «Экспонаты», при нажатии на которые вы можете посмотреть что используется в данной модели. Данный модуль может быть использован не только в сфере моды (модели и одетая на них одежда), а также и для других сфер, где возможна комбинация продуктов.

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

Также, при создании интернет магазина «Тамани» были добавлены:

• Быстрый просмотр товара;
• Привязка к товару товаров другого цвета;
• Авторизация через социальные сети.

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

• стандартный функционал интернет магазина (каталог товаров, корзина, оформление заказа, личный кабинет);
• новостная лента с категориями;
• подписка пользователей на рассылку;
• инструмент импорта/експорта CSV прайсов (xls) из 1С;
• полный пакет SEO инструментов;

Создано в составе MAS Group.

Сайт разработан на CMS Shop Script Lego Edition, к нему были дописаны следующие модули:

• модуль импорта;
• модуль подключения товаров по цвету/объему для помад и т.п. и парфюмерии;
• модуль фильтра в категории;
• модуль генерации отчета наличия товаров в магазине;
• модуль генерации экономических отчетов;
• модуль генерации отчета о товарах которые покупаются и их остаток.