Online-shop BDSM-Toys

06/22/16

The complete development cycle of the online toy store for adults

Backend Design Frontend Infarch

http://bdsm-toys.ru/

Project task

Task: Create online shop as the next item of market in socials Vkontakte. Engine of site should be able to provide goods, prices, quantity and modifications.

Site engine

As the CMS we choose OpenCart. This engine allows to create full site and have enough functionality for managing the shop. By the way it's not wonderful, cause this CMS created for online-markets.

But in the base it have not blog module.

Site design

We planned to use huge navigation, including first level of menu. To combine all components in one screen we used vertical split of viewport. On the left we placed this navigation as «header» of site. And at the right was the rest of site.

This design often uses in admin-panels, but very cool for shops and corporate sites.

Layout and programming of site

This stage we used parallel work. It means we did layout and programming site in the same time.

As the basis we used default template of OpenCart and modified it according with design. This solution provide us to create good compatibility with engine.

Header

This block meet you on every page and as we said has huge functionality. There we combined not only main menu, but additional, for example pages like «How to pay». The are duplicates in footer but left panel always with you.

To create triggers between states (open main nav, open add. nav, etc) we used solution on CSS and some JS. And notice: JS we used only to turn off input fields.

Button «Buy»

Good idea was to sound accompaniment when button is clicked. And we did it. The sound is whip.

But this is good idea not in the night, so we added JS rules, that looks up the client time through browser. Certainly this rule can be easily crashed if user have not right time on his device. But we cannot be held responsible for this setup.

Catalog

On main page we output full catalog in 2 levels. It helps user to see actual catalog from one place. Empty categories are not visible.

This solution made us to improve engine.

Simple to it we did additional navigation in catalog. You can see subcategories while you see categories. And you can see quantity if goods in them.

Payment system

Client chose Yandex.Money as main payment system. It allows to use debit/credit card like Maestro or Visa to pay, and Yandex.Money.

We had to avoid default checkout page and create our own. After this we have one-page checkout system.

Members

Arsenii
Irina