Website-catalog of a manufacturer of security systems
About the project and the task
Trinix, a Ukrainian manufacturer of access control and management systems, approached us with the task of developing a corporate website catalog, which was subsequently to grow into an online store. We got a ready-made design and offered a win-win solution — WordPress + WooCommerce. This technological tandem successfully combines content and commerce, as we have repeatedly seen from our experience. How we managed this time, read in our case.
Layout
In the implementation of the project, our front-end developer used the language:
- HTML 5 hypertext markup to form the skeleton of the site;
- CSS to style the pages according to the layout design;
- JavaScript to bring pages to life with any user interaction.
Of the additional JavaScript tools, the scroll-lock library was used, which blocks page scrolling when opening any modal windows on the site. This library, unlike the similar overflow:hidden library, is friendly with the Safari mobile browser on iPhone iOS devices.
In addition, SCSS was used in the development, a Sass preprocessor syntax that speeds up writing CSS code.
In general, the use of technologies that simplify the life of developers always means saving time on the project, and hence the client's budget.
Therefore, we would like also to mention Gulp, a web project builder that has accelerated JavaScript development by automating routine processes.
Crossbrowser compatibility
Displaying the site in all, even outdated browsers, is a particularly important feature of any online store. In order to make the site accessible to users, we have modernized JavaScript using the Babel.js transcompiler, which turns the new syntax into the old ECMAScript 2015+ standard.
Programming
WooCommerce
The Trinix corporate site is planning to move into the category of online stores soon, so we immediately put the world’s most popular WooCommerce commercial plugin into the WordPress admin panel. So the catalog on the site, which is still informative in nature, will be able to sell and scale when the client wishes.
So let’s move on to functions. Filtering products on the site is possible by properties depending on their category (type, size, device power supply, etc.):
We have also equipped the site with a convenient search. So, if you enter at least 3 characters in the corresponding field, the site offers the first possible results:
Card Product
Tabs “Characteristics”, “Description”, “Instructions” and “Video” are displayed on the site provided that these blocks are filled with content.
We have implemented the ability to automatically display product characteristics both in the preview on the category page and on the product page to the right of the photo (and this is without the need for manual duplication of characteristics in the admin panel):
When filling in the price of the goods in the admin panel, it is automatically displayed on the site. If the price is not specified, then clicking on the text “Check the price” causes the pop-up “Ask a question”:
We also implemented the function of loading product instructions in the tab with the same name:
Two-way synchronization, implemented by the developers, allows you to display on the card not only instruction files, but also Blog articles corresponding to this product:
The “Video” tab contains a YouTube video embedded on the site using an iframe:
Integration with 1C
Using the WooCommerce — 1C — Data Exchange plugin, we synchronized the catalog on the site with the 1C program. This tool provides quick data exchange between the accounting platform and the website, for example, uploading orders, uploading and updating products and prices, etc.
Additional plugins
As we have already noted, the site is based on WooCommerce, but the functionality of the online store is not limited to it. Back-end developers have implemented many other plugins, in particular:
- ACF (Advanced Custom Fields) — for adding input fields to the WordPress admin panel;
- CF7 (Contact Form 7) — for creating contact forms;
- Premmerce Product Filter for WooCommerce — for filtering products;
- WPC Smart Compare for WooCommerce (Premium) — for comparing products;
- Elementor — for posting and designing articles;
- Yoast — for SEO-optimization of the site.
To protect the site from spam, reCaptcha 3 technology was connected through integration with the CF7 plugin. In addition, the developers took care of the ability to add labels with descriptions to the Google map on the “Contacts” page.
Online store features
Non-standard product comparison
We have implemented a non-standard for WordPress and WooCommerce product comparison function. This handy feature helps users who are looking at several products of different categories at once (for example, batteries, cables, and security devices). Thanks to the horizontal filter, they can be sorted in one click and compared with each other within a separate category:
You can add a product to the “Comparison” from the product card, from the product category and from the product display sliders. When adding a product, the icon becomes active both in the card and in the site header without reloading the page.
Blog with custom filters
Blog is still the most effective tool for SEO promotion of an online store, because the higher the site traffic, the more likely it is to get an order.
From a development point of view, the Trinix blog site is somewhat non-standard for the WordPress platform. It has a more advanced filter compared to the standard WooCommerce filter, which allows you to quickly sort articles into categories in real time:
In addition, Blog articles can be easily distributed in social networks and instant messengers:
The results
The Webnauts team once again produced a successful online store on WordPress: they applied the finished design onto the engine, integrated the 1C program and took care of the correct display of the site even in outdated browsers. Moreover, they went beyond the platform and implemented several features that are unusual for WooCommerce, namely the function of comparing products by category and a convenient filter for Blog articles by category.
Comments