Creating an online store on Bitrix: what nuances should be taken into account when setting up a catalog

Creating an online store on Bitrix: what nuances should be taken into account when setting up a catalog

1C-Bitrix: Site Management is one of the most popular web project management systems in Russia. Of the boxed solutions, it is the most stuffed system with various functionalities. It is used to develop corporate websites and online stores, as well as large Internet portals and information systems. Examples of large stores on Bitrix:

  • apteka.ru
  • www.eldorado.ru
  • euroset.ru

Bitrix is ​​a paid CMS, at the moment there are 4 editions:

  • Start – 5 400 rubles;
  • Standard – 15,900 rubles;
  • Small business – 35,900 rubles;
  • Business – 72 900 rubles.

More details about the differences between versions were written in the article. There is a 30-day trial version for testing, after which it is offered to purchase one of the versions within two weeks.

In addition, you can test the CMS online – bitrixlabs.ru. Access to the demo site of the Business edition is provided for three hours.

Creation of a demo site on Bitrix

For an online store, the license “Small Business” or “Business” is suitable, because they have the necessary module “Internet store” for creating a catalog. We will not talk about the capabilities of the CMS and the differences between editions, we have already written about this in the article.

Today we’ll talk about the main points when creating an online store within the framework of our tariff Creating an online store: Individual design using the example of an electronics store.

1. Trade catalog

The most important part of an online store is its catalog. In Bitrix, the module “Trade catalog” is used to create a catalog of goods. It can be used to create catalogs of goods and services, manage prices and discounts, upload and download product data. The catalog can be divided into sections and subsections for storing products of different categories.

Example directory structure

Example directory structure

Various goods will be stored in our catalog: from smartphones to electric scooters. We understand that these products have different characteristics.

Smartphone specifications

Electric scooter characteristics

CMS allows you to specify both common characteristics for all products, and characteristics inherent in a certain type of product.

General characteristics

Specific section characteristics

Information about the product is filled in in the product card, which can be customized for yourself – arrange the fields where it is convenient for you.

Card Product

Setting up the edit form

For products that have different properties, in addition to common characteristics (for example, a phone with different color and memory options), trade offers are provided. To work with commercial offers, a new infoblock is first created. Let’s call it “Trade Offers”.

Infoblock

After that, in the settings of the “Product catalog” infoblock, on the “Trade catalog” tab, you need to check the box that it has trade offers and select the created “Trade offers” infoblock.

Infoblock

For the information block “Trade offers” we create properties that we will use as characteristics of goods: color, memory size, gallery.

Properties of trade offers

The Catalog Item property is created automatically. For the “Color” property, specify the “Reference” type, create a new reference book and enter the names of colors and icons into it. We make the property “Memory capacity” as a list and enter all kinds of memory sizes.

Setting properties of trade offers

Setting properties of trade offers

After that, we will be able to create products with trade offers.

In order not to create the same products with different colors and memory size, Bitrix can automatically generate these products, substituting values ​​from the properties, and for each generated product you can specify your own price.

Product with trade offers

With such simple manipulations, we will create a fairly voluminous and full-fledged catalog with various categories of goods.

On the product page, you can switch between different products by properties of trade offers:

Switching between products by properties of trade offers

Switching between products by properties of trade offers

In the product card, we add the ability to leave comments and product ratings. In our case, we have implemented this feature only for registered users:

Reviews for an unauthorized user

Reviews for an authorized user

In the standard template, only one product card with trade offers is displayed, with the ability to select properties by hovering over the card. An example from the standard template:

Selecting a trade offer by hovering over the product card

But for our online store, this option is not suitable, since the user, entering the catalog page, should be able to immediately see all available phone options. Therefore, we have implemented the withdrawal of goods with trade offers in different cards:

Display of products with trade offers in different cards

The solution was implemented non-standard and rather complicated. Next, let’s go a little deeper into the technical nuances.

You can display products with trade offers by checking each product for the presence of an array with trade offers. If there are trade offers, then we get the following array:

Array of trade offers

Products without trade offers will not have this array. But there is one caveat: by default, Bitrix outputs only the first 5 sentences to the array. To fix this, in the settings of the “Catalog” component, set the value “Maximum number of offers to display” – 0.

maximum number of offers to show

Having received an array with trade offers, we run a loop to check the array, creating a new card and substituting the name, picture and price from the received array of trade offers. You also need to substitute a link to the product. In the standard template, the link leads to the general product page with the first properties of trade offers marked, but since we display all cards separately (Mi 8 32 GB Pink, Mi 8 32 GB Gold, Mi 8 16 GB Black, etc.) so that the user, by clicking on the “Mi 8 32 GB Pink” card, will be taken to the page with the phone marked with pink color and the memory capacity is 32 GB. To implement this transition, we changed the link to the product, adding a parameter with the ID of the trade offer to it. In the settings of the info block of trade offers, we change the URL of the detailed view page by adding a parameter with ID.

Link to product with trade offers

Customizing the URL of the detail page

In order for specific trade offers to be marked on the product page, it is necessary to make changes to the JavaScript code, mark active those properties of trade offers whose ID is equal to the ID obtained from the address bar.

Product page with selected properties

So, the catalog is filled with products and now the buyer should be given the opportunity to filter products according to the parameters necessary for him. This is where the Smart Filter component comes to the rescue. The filter displays only those characteristics that are indicated in the characteristics of the goods in this section.

Smart filter

To select properties for filtering in a smart filter, in the section settings in the “Show in smart filter” column, tick the required properties.

Setting Smart Filter Properties

We didn’t need more settings and changes to the standard filter.

2. Product Marketing

In almost every online store, promotions are periodically held and discounts are provided on goods.

To work with discounts and promotions, Bitrix uses the Product Marketing: Discounts and Promotions module. This module has rich functionality:

  • discounts on goods, delivery, payment depending on the payment system;
  • discounts for a combination / group of goods;
  • discounts limited by date;
  • creation of coupons for discounts.

Possibilities of the Product

Let’s show with an example. Let’s create a 10% discount for the “Smartphones” product group and distribute it only to registered users.

Creating a discount for a section

Creating a discount for a section

As a result, only a registered user will see the discount:

discount for registered user

Creating a discount for a section

It’s pretty simple. You can set up various discount options (percentage, for a certain amount), for this, ready-made functionality is quite enough and no modifications are required.

3. Product comparison

There are special components for comparing products in Bitrix. They are implemented using ajax technology so that the number of products added to the comparison list is dynamically changed when products are added or removed from the list.

Product comparison

Add product to comparisons button

All completed characteristics are displayed on the product comparison page. You can also see only the differing characteristics.

Product comparison page

4. List of featured products

But the creation of selected products in this CMS is not provided, so here you will have to implement everything yourself or look for ready-made modules on the marketplace.

To store a list of favorites for registered users, we used an additional user field with the type “Link to inf. blocks ”, where the IDs of the selected products were recorded.

Additional field settings

Additional field

For unregistered users, the ID of the selected products is recorded in the cookie.

When you click on the button for adding a product to favorites, the ID number of the selected product is written in an additional field or in cookies, and the button is marked active.

Adding a product to favorites

Creating a discount for a section

As a result, the page with selected products displays all products whose ID numbers are in the list. Thus, a list of selected products is formed.

Displays a list of favorites.

5. Cart

All selected products go to the shopping cart. It immediately recalculates the total cost, taking into account all discounts, if any. It is also possible to enter a coupon to receive a discount.

Shopping cart

When placing an order, the user can select the delivery address, delivery and payment methods, enter information about the buyer. For users who have already made an order, when registering a new one, the data from the previous one is immediately substituted, if the user is authorized. This allows you not to enter the same data, but change them if necessary.

ordering

For payment in Bitrix, there are already ready-made methods, among which are cash payment, by receipt, by issued invoice, PayPal, Robokassa, RBK Money, Assist, Yandex.Money, WebMoney, Qiwi, etc.

For delivery, there are courier services, self-pickup, SPSR-Express, the rest can be installed from the marketplace or set up yourself.

The checkout process is standard. If any changes are needed, this requires major reworking of the entire module, which is very labor intensive. Therefore, most often we leave the ordering unchanged.

Output

CMS Bitrix is ​​a scalable and multifunctional system for website development. But it requires a lot of experience and qualifications, so it can seem very difficult for those who are unfamiliar with it.

If you decide to create a website on CMS 1C-Bitrix – contact us, our certified specialists will develop an individual project for you. In addition, when buying any Bitrix product from us, you will receive 15% discount

Leave a Reply

Your email address will not be published. Required fields are marked *