Join the Odoo Inner Circle to view the premium video below.
Develop a Responsive Web Carousel in Odoo
Topics
Introduction: Using bootstrap to create a web carousel
0:00:01
Creating a custom application inherited from website and website_sale
0:02:17
Creating the CSS required for dynamic number of products
0:03:58
Developing the website controller
0:04:47
Connecting the product record to the website slider
0:06:08
Python code to loop through the product records and generate HTML
0:10:22
Determine how many products to show based on screen size
0:12:00
Using bootstrap classes and building out the website controller
0:16:11

Develop a Responsive Web Carousel in Odoo

25.00 25.0 USD

25.00

Free with Odoo Inner Circle Add to Cart

Learn to use Odoo's framework, bootstrap, and qWeb templates to develop an interactive responsive carousel that allows you to display products on your Odoo eCommerce website.

Video Length:   19 Minutes
Free With Odoo Inner Circle

Build a Responsive Web Carousel for your product page

In this video you will learn how to utilize Odoo's powerful web building framework to create your own custom web carousel. This useful web widget can be used to better organize your products on your website and make your site more user friendly and easier to navigate.

Learning more about Odoo's framework and design

If you have started spending a little time developing for Odoo you may now know that the Odoo framework is comprised of several different sub-frameworks that provide the necessary utility to create a specific type of application. In this video we look at Odoo's web framework and how to use Bootstrap & qWeb templates.

Developing Web Applications in Odoo - Learning new tools

This is an Odoo development video that targets intermediate to advanced Odoo developers. If you are brand new to Odoo development you will want to check out some of the associated videos below. Odoo provides a powerful framework for developing web applications. It does however require that you understand the basics of Odoo development.

    Odoo image and text block

    What is a Web Carousel and why would I want one?

    A web carousel is a web component for eCommerce that allows you to easily page products. A key feature of a good web carousel is that it will resize automatically depending on the screen size of the device it is being viewed on. Because more and more people are using their smart phones to browse the Internet, a web carousel provides users an easy way to navigate your products even on smaller devices. 

    Creating a Web Carousel in Odoo - It's all about the templates!

    Fortunately Odoo provides a full set of templates that give you the building blocks you need to make a custom web carousel using the Odoo framework. While there are certainly some steps that you have to follow to set it up, the video goes through all the pieces in detail so you can setup your own web carousel in Odoo.

    Building Web Controls and Widgets in Odoo 

    What steps are required to create a web carousel or other widget in Odoo?

    If you are new to Odoo development you will want to watch some of the associated videos below. They will help you better understand the Odoo web framework and make it easier for you to follow along with this more advanced video.

    Base slider control class - Example of an Odoo web control

    Here is the code we use to create the main class for our web carousel control.

    class Slider(http.Controller):
         @http.route(['/slider'], type='http', auth='public', website=True)
         def slider(elf, **kwargs):
             env = request.env
             
             # BEGIN container - fluid, row, col-xs-12
             slider_html = '''
                         <div class="container-fluid">
                          <div class="row">
                                 <div class="col-xs-12">
                            '''
             # Get all the website products
             products = env['product.template'.search([])
             
             # If we have products, process them
             if products:
                 # Get a dynamic slider with existing products
                 slider_html += self.get_slider_with_existing_products(products,6)
             
             # End the container
             slider_html += '''
             </div>
                               </div>
                            </div>
                            '''
             values = {
                'slider_html': slider_html,
             }
             return request.website.render('slider_dev.slider_page', values)