Enable Dark Mode!
how-to-create-manage-a-website-popup-in-the-odoo-erp.jpg
By: Sachin T

How to Create & Manage a Website Popup in the Odoo ERP

Technical Odoo 15 Website&E-commerce

We have seen many popups and wizards on a website that are commonly used to fetch or display some data. We define a popup to store data to perform further actions with it temporarily. We can define a website popup in different ways.

This blog will show how to create a website popup using modal.

Here we are defining a new template and inside a div element, we add a button labeled Warranty Claim Submission. For this button, we add an attribute called data-toggle and data-target as modal and div id of our popup respectively.

<template id="portal_warranty_requests" name="Warranty Requests">
    <t t-call="portal.portal_layout">
        <t t-set="breadcrumbs_searchbar" t-value="True" />
        <t t-call="portal.portal_searchbar">
            <t t-set="title">Warranty Request</t>
        </t>
        <t t-if="warranty_obj == 0">
            <p>There are currently no Warranty requests for your account.</p>
        </t>
        <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
            <div>
                <a role="button" class="btn btn-secondary flex-grow-1 mb-1 createButton" data-toggle="modal"
                    id='myModal' data-target="#warrantypopup" href="#">
                    <t>Warranty Claim Submission</t>
                </a>
            </div>
        </div>
        </form>
</template>

how-to-create-manage-a-website-popup-in-the-odoo-erp-cybrosys

Now upon clicking the button Warranty Claim Submission, we expect a website popup in which we can enter the required information for the submission. Here, I am adding a form action and div element inside a template,

<form action="/warranty/request/submit" method="post" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
    <div id="warrantypopup" class="modal fade">
        <div class="modal-dialog modal-content"
            style="border:solid 2px white; min-height:200px;max-width:800px;margin-top:10px">
            <div class="modal-body" id="pop_html">
                <a href="#" class="o_popup_btn_close o_not_editable o_default_snippet_text pull-right"
                    data-dismiss="modal" style="font-size:30px">×
                </a>
                <br />
                <div style="margin-top:-48px">
                    <h2 style="text-align:center; font-size 18px; font-weight:bold" class="o_default_snippet_text">
                        Warranty Request Form
                    </h2>
                </div>
                </br>
                <div class="form-group row form-field">
                    <div class="col-lg-3 col-md-4">
                        <label class="col-form-label" for="dealer_contact">Warranty Number *</label>
                    </div>
                    <div class="col-lg-7 col-md-8">
                        <input id="phone" type="text" required="True" class="form-control o_website_form_input"
                            name="phone" t-att-value="partner.phone" />
                    </div>
                </div>
                <div class="form-group row form-field">
                    <div style="padding:0 45% 0 45%">
                        <button type="submit" id="warranty_submit"
                            class="btn btn-primary btn-md o_website_form_send">Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

how-to-create-manage-a-website-popup-in-the-odoo-erp-cybrosys

In this way, we can add a popup to the odoo website.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message