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:
- Illustration (photo)
- Price (in Euro)
- 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.
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.
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:
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.