Develop a Responsive Web Carousel in Odoo
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.
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.
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)