Our client wanted a slider on their website that would showcase the 24 most sold products in a unique and dynamic way. The challenge was that only 12 products should be visible in the slider at any given time. To make things more interesting, these products should only be selected from the top sellers. Additionally, the client wanted to have the freedom to select certain products that would always appear in the slider and to be able to arrange them however they wanted. It was important for these selected products to always be displayed at the top of the slider, with a maximum of four such products being able to be specified.
Our Creative Solution
To meet this demanding requirement, we developed a new interface within the WordPress system. This allows the customer to see their preferred products from the WooCommerce store and arrange them in the desired order with a simple drag and drop function. With the use of PHP, we fetch these selected products and arrange the first four of them in the slider exactly as requested by the customer.
We then use a special database query to determine the shop's 24 top-selling products and arrange them in a random order. From this list, as many products as possible are then added to the slider until a total of 12 products are reached. We take the number of manually selected products into account to ensure that the slider always shows the perfect mix of customer favorites and bestsellers.
Integration of JavaScript and responsive design
To bring it all to life, we used JavaScript to animate the slider. This animation creates a smooth and engaging user experience by making the transition between products seamless. A key feature of our slider is its responsiveness. Regardless of the device or screen size, the slider dynamically adjusts and displays fewer products per slide on smaller viewports. This adaptability ensures that the website is just as attractive and user-friendly on mobile as it is on a desktop computer.
The result
The result is a flexible and dynamic product slider that not only exceeds our client's requirements, but also adds an engaging and interactive component to the website. With this solution, visitors can see the most popular products at a glance and are encouraged to explore further by the manually highlighted products.
