Website vending33.ru

Case study on creating a website of vending machines vending33.ru

Website vending33.ru

Creation of the website of the Vladimir Vending Company. Coffee machines and a one-page online store.

Region: Vladimir

Cooperation beginning: 2014

http://vending33.ru

A simple and convenient website describing the company's activities, its services and products offered.

A special feature is the functionality of a one-page online store on a page with ingredients for vending machines, which I wrote from scratch.

Website vending33.ru

The first version of the site vending33.ru I did it back in 2014. It was a website with a fairly simple design and functionality.

A year later, VVC became the official representative of a Moscow company that sells ingredients for vending machines. For example, coffee, sugar, tea. These ingredients make what you drink in coffee machines.

Accordingly, the functionality of a small online store was required. Together with the head of the Vladimir Vending Company, we decided to make a one-page online store inside the current site.

I made the site on MODX Revo. This allows you to complement a regular website with services with the functionality of an online store.

The requirements were as follows:

  • The price of goods in the price list in euros. It is necessary to show the price in euros and rubles on the website.
  • The euro exchange rate should be up to date on the current date.
  • Selection of the number of packages of each product.
  • Adding and removing items from an order (similar to a shopping cart).
  • A form with a phone number, an email and a comment on the order.
  • The order is sent to the mail to the customer and the client. This letter should additionally contain a unique order number, date, list of products with prices, total price, company contacts.
  • Validation. The minimum order is 100 euros, mandatory fields with phone and email.

Single-page online store

As always, the basic functionality of MODX helped. I am surprised how much this site management system has intuitive and understandable functionality. Even with basic programming knowledge, you can use templates, additional fields and chunks to implement almost anything.

Firstly, I transferred photos and descriptions of 40 products from the Moscow website. For each product I have made the following fields:

  • Name
  • Description
  • Illustration (photo)
  • Price (in Euro)
  • Weight
  • Package capacity
  • Ingredient type (everything is divided into 5 subcategories)
  • Feature (you can specify that the product is new)

That is, in the future, when working with the site, the client will not have to dig into the code. You just need to fill in the product description. Products can be copied, changed, hidden and shown.

With the help of pdoTools, I implemented the output of these products on the Ingredients page. The appearance of the products in the output is set in the corresponding chunk (mini-templates in MODX).

Then I made the left column of the site stick to the top of the screen at the moment when the site visitor reaches it. Using the left column, you can navigate through the assortment. It is made using the usual anchors to the subheadings + a small script that makes scrolling smooth.

There is also an order form on the left column. An order for such ingredients usually consists of several items. With a resolution of 1280x720, 8 products fit. Accordingly, the higher the permission of the site visitor, the more products can be placed on the right column. Together with the customer, we came to the conclusion that they will definitely not order more than 5 products. Otherwise, it would be possible to make the left column ordinary (so that it scrolls through), and not sticking to the screen.

Single-page online store

Then I used the CurrencyRate plugin, which takes the current euro exchange rate from the website of the Central Bank of the Russian Federation. I wrote a small script that automatically multiplies the prices from the price list for this course.I also used Javascript to calculate the price in real time when a person enters the number of packages.

By clicking the "Add to order" button, if the number of packages is greater than zero, then the product goes to the cart. The button changes color and the text becomes "Added to order". The button stops being active so that one product is not duplicated in the order. The product can be removed from the basket, then the button becomes active again.

Everything is calculated correctly in real time. Javascript, or rather its jQuery framework, is an excellent tool for solving such a problem.

The next stage was the formation of a letter with an application to the client and the owner of the site.The free Formit plugin solved this problem perfectly. I had to create a couple of variables: the current date and the order number. A letter template was also created, which included all the goods, their price, quantity, and total amount. Everything is taken from the inputs.

As a result, such a letter comes to two mail:

Order from online store

It took me exactly one week to implement the functionality of a one-page online store.

Such a one-page online store is well suited for companies that have a fairly limited list of products and categories (up to 100 products, up to 10 categories). I think that these developments can be used to make a convenient website for pizza or sushi delivery.

In addition to the functionality of the one-page online store, a small redesign of the site was made, modification of some sections.

Lets cooperate!