pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: improve "Popup" snippet

Browse Source 
Review the layout to always use standard bootstrap classes so that
future task targeting modal can target s_popup snippets the same way
(for example: our task allowing to open a popup on click on a button).

This also allows to simplify the css and simplify the options. A new
option also now allows to have a backdrop, or not, so that user clicks
are blocked while the popup is opened, or not.

+ Adapt cookie bar accordingly.

Part of https://github.com/odoo/odoo/pull/52698
task-2210730

Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Cocographique
2020-06-12 17:06:36 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent cd4eb1fd33
commit e5a5f98819
13 changed files with 274 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/data/website_data.xml
+6
View File
@@ -684,6 +684,12 @@
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_team_member_2.png</field>
</record>
<record id="website.s_popup_default_image" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">s_popup_default_image.jpg</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_popup.jpg</field>
</record>
</data>
<data>
<record id="group_multi_website" model="res.groups">
addons/website/static/src/img/snippets_demo/s_popup.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 113 KiB

addons/website/static/src/js/editor/snippets.options.js
+1 -1
View File
@@ -1806,7 +1806,7 @@ options.registry.CookiesBar = options.registry.SnippetPopup.extend({
websiteId: websiteId,
}));
const $content = this.$target.find('.s_popup_content');
const $content = this.$target.find('.modal-content');
const selectorsToKeep = [
'.o_cookies_bar_text_button',
'.o_cookies_bar_text_policy',
addons/website/static/src/scss/website.edit_mode.scss
+6 -15
View File
@@ -150,21 +150,12 @@ table.editorbar-panel {
}
// s_popup in edit mode
.editor_has_snippets {
.s_popup_main {
z-index: 1000 !important;
left: $o-we-sidebar-width !important;
top: var(--o-we-toolbar-height) !important;
&.s_popup_fixed {
.s_popup_full .s_popup_content {
left: $o-we-sidebar-width !important;
}
}
&.s_popup_fixed_top {
.s_popup_content {
top: var(--o-we-toolbar-height) !important;
}
body.editor_enable.editor_has_snippets {
.s_popup .modal {
top: var(--o-we-toolbar-height);
background-color: transparent;
&.fade .modal-dialog {
transform: none;
}
}
}
addons/website/static/src/scss/website.scss
+7
View File
@@ -996,3 +996,10 @@ $ribbon-padding: 100px;
@include o-position-absolute($top: 0, $left: 0);
padding: 0.25rem 1rem;
}
// Cookies Bar
#website_cookies_bar {
:not(.o_cookies_popup) {
bottom: 0;
}
}
addons/website/static/src/snippets/s_popup/000.js
+30 -6
View File
@@ -9,6 +9,7 @@ const PopupWidget = publicWidget.Widget.extend({
selector: '.s_popup',
events: {
'click .js_close_popup': '_onCloseClick',
'hide.bs.modal': '_onHideModal',
},
/**
@@ -38,7 +39,7 @@ const PopupWidget = publicWidget.Widget.extend({
* @private
*/
_bindPopup: function () {
const $main = this.$target.find('.s_popup_main');
const $main = this.$target.find('.modal');
let display = $main.data('display');
let delay = $main.data('showAfter');
@@ -48,7 +49,7 @@ const PopupWidget = publicWidget.Widget.extend({
display = 'afterDelay';
delay = 5000;
}
this.$('.s_popup_main').removeClass('s_popup_center').addClass('s_popup_bottom');
this.$('.modal').removeClass('s_popup_middle').addClass('s_popup_bottom');
}
if (display === 'afterDelay') {
@@ -61,7 +62,7 @@ const PopupWidget = publicWidget.Widget.extend({
* @private
*/
_hidePopup: function () {
this.$target.find('.s_popup_main').addClass('d-none');
this.$target.find('.modal').modal('hide');
},
/**
* @private
@@ -70,7 +71,7 @@ const PopupWidget = publicWidget.Widget.extend({
if (this._popupAlreadyShown) {
return;
}
this.$target.find('.s_popup_main').removeClass('d-none');
this.$target.find('.modal').modal('show');
},
//--------------------------------------------------------------------------
@@ -81,14 +82,37 @@ const PopupWidget = publicWidget.Widget.extend({
* @private
*/
_onCloseClick: function () {
const nbDays = this.$el.find('.s_popup_main').data('consentsDuration');
this._hidePopup();
},
/**
* @private
*/
_onHideModal: function () {
const nbDays = this.$el.find('.modal').data('consentsDuration');
utils.set_cookie(this.$el.attr('id'), true, nbDays * 24 * 60 * 60);
this._popupAlreadyShown = true;
this._hidePopup();
},
});
publicWidget.registry.popup = PopupWidget;
// Prevent bootstrap to prevent scrolling and to add the strange body
// padding-right they add if the popup does not use a backdrop (especially
// important for default cookie bar).
const _baseSetScrollbar = $.fn.modal.Constructor.prototype._setScrollbar;
$.fn.modal.Constructor.prototype._setScrollbar = function () {
if (this._element.classList.contains('s_popup_no_backdrop')) {
return;
}
return _baseSetScrollbar.apply(this, ...arguments);
};
const _baseGetScrollbarWidth = $.fn.modal.Constructor.prototype._getScrollbarWidth;
$.fn.modal.Constructor.prototype._getScrollbarWidth = function () {
if (this._element.classList.contains('s_popup_no_backdrop')) {
return 0;
}
return _baseGetScrollbarWidth.apply(this, ...arguments);
};
return PopupWidget;
});
addons/website/static/src/snippets/s_popup/000.scss
+1 -1
View File
@@ -1,5 +1,5 @@
// s_popup
.s_popup_main {
.s_popup_main:not([data-vcss]) {
.s_popup_content {
// keep lower than <p> height (cookies bar)
min-height: $o-font-size-base * $o-line-height-base;
addons/website/static/src/snippets/s_popup/001.scss
+66
View File
@@ -0,0 +1,66 @@
.s_popup[data-vcss='001'] {
.modal-content {
min-height: $font-size-lg * 2;
border: 0;
border-radius: 0;
box-shadow: $modal-content-box-shadow-sm-up;
}
// Close icon
.s_popup_close {
z-index: $zindex-modal;
@include o-position-absolute(0, 0);
width: $font-size-lg * 2;
height: $font-size-lg * 2;
line-height: $font-size-lg * 2;
@include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
box-shadow: $box-shadow-sm;
cursor: pointer;
font-size: $font-size-lg;
text-align: center;
}
// Size option - Full
.s_popup_size_full {
padding: 0 !important;
max-width: 100%;
> .modal-content {
// Use the backdrop color as background-color
background-color: transparent;
box-shadow: none;
border-radius: 0;
}
}
// Position option - Middle
.s_popup_middle .modal-dialog {
align-items: center;
}
// Position option - Top/Bottom
.s_popup_top,
.s_popup_bottom {
.modal-dialog {
margin-right: 0;
&:not(.s_popup_size_full) {
padding: $spacer !important;
}
}
}
.s_popup_top .modal-dialog {
align-items: flex-start;
}
.s_popup_bottom .modal-dialog {
align-items: flex-end;
}
// No backdrop
.s_popup_no_backdrop {
pointer-events: none;
.modal-content {
pointer-events: auto;
}
}
}
addons/website/static/src/snippets/s_popup/options.js
+31 -40
View File
@@ -10,13 +10,26 @@ options.registry.SnippetPopup = options.Class.extend({
start: function () {
// Note: the link are excluded here so that internal modal buttons do
// not close the popup as we want to allow edition of those buttons.
this.$target.find('.js_close_popup:not(a, .btn)').on('click', ev => {
this.$target.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
ev.stopPropagation();
this.onTargetHide();
this.trigger_up('snippet_option_visibility_update', {show: false});
});
this.$target.on('shown.bs.modal.SnippetPopup', () => {
this.trigger_up('snippet_option_visibility_update', {show: true});
});
this.$target.on('hidden.bs.modal.SnippetPopup', () => {
this.trigger_up('snippet_option_visibility_update', {show: false});
});
return this._super(...arguments);
},
/**
* @override
*/
destroy: function () {
this._super(...arguments);
this.$target.off('.SnippetPopup');
},
/**
* @override
*/
@@ -33,14 +46,26 @@ options.registry.SnippetPopup = options.Class.extend({
* @override
*/
onTargetShow: async function () {
this.$target.removeClass('d-none');
this.$target.modal('show');
$(document.body).children('.modal-backdrop:last').addClass('d-none');
},
/**
* @override
*/
onTargetHide: async function () {
this.$target.addClass('d-none');
return new Promise(resolve => {
const timeoutID = setTimeout(() => {
this.$target.off('hidden.bs.modal.popup_on_target_hide');
resolve();
}, 500);
this.$target.one('hidden.bs.modal.popup_on_target_hide', () => {
clearTimeout(timeoutID);
resolve();
});
this.$target.modal('hide');
});
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
@@ -56,18 +81,11 @@ options.registry.SnippetPopup = options.Class.extend({
this.$target.closest('.s_popup').prependTo($container.find('.oe_structure:o_editable').first());
},
/**
* Switch layout from modal <--> a sticky div
*
* @see this.selectClass for parameters
*/
setLayout: function (previewMode, widgetValue, params) {
const isModal = widgetValue === 'modal';
const isTop = widgetValue === 'fixedTop';
this.$target.toggleClass('s_popup_fixed', !isModal);
this.$target.toggleClass('s_popup_fixed_top', isTop);
this.$target.toggleClass('s_popup_center modal', isModal);
this.$target.find('.s_popup_frame').toggleClass('modal-dialog modal-dialog-centered', isModal);
this.$target.find('.s_popup_content').toggleClass('modal-content', isModal);
setBackdrop(previewMode, widgetValue, params) {
const color = widgetValue ? 'var(--black-50)' : '';
this.$target[0].style.setProperty('background-color', color, 'important');
},
//--------------------------------------------------------------------------
@@ -89,33 +107,6 @@ options.registry.SnippetPopup = options.Class.extend({
switch (methodName) {
case 'moveBlock':
return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
case 'setLayout':
if (this.$target.hasClass('s_popup_center')) {
return 'modal';
} else if (this.$target.hasClass('s_popup_fixed_top')) {
return 'fixedTop';
}
return 'fixedBottom';
}
return this._super(...arguments);
},
});
options.registry.PopupContent = options.Class.extend({
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Enable bg-color only if "centered AND full-size".
* Visibility according to the size is managed by data-dependencies.
*
* @override
*/
async _computeWidgetVisibility(widgetName, params) {
if (widgetName === 'popup_content_colorpicker_opt') {
return this.$target.closest('.s_popup_main').hasClass('s_popup_center');
}
return this._super(...arguments);
},
addons/website/static/src/xml/website.cookies_bar.xml
+37 -45
View File
@@ -1,74 +1,66 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="website.cookies_bar.text_title">
<div class="o_cookies_bar_text_title">
<p>Respecting your privacy is our priority.</p>
</div>
<h3 class="o_cookies_bar_text_title">
Respecting your privacy is our priority.
</h3>
</t>
<t t-name="website.cookies_bar.text_primary">
<div class="o_cookies_bar_text_primary">
<p class="o_cookies_bar_text_primary">
We use cookies to provide you a better user experience.
</div>
</p>
</t>
<t t-name="website.cookies_bar.text_secondary">
<div class="o_cookies_bar_text_secondary">
We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see.
<br/>
<p class="o_cookies_bar_text_secondary">
We use them to store info about your habits on our website. It will helps us to provide you the very best experience and customize what you see. <br/>
By clicking on this banner, you give us permission to collect data.
</div>
</p>
</t>
<t t-name="website.cookies_bar.discrete">
<section class="pt4 pb4">
<div class="container text-600 d-flex align-items-center">
<div class="mb0">
<t t-call="website.cookies_bar.text_primary"/>
<section class="o_colored_level o_cc o_cc1">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16">
<p>We use cookies to provide you a better user experience.</p>
</div>
<div class="col-lg-4 pt16 text-right">
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
</div>
</div>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
</div>
</section>
</t>
<t t-name="website.cookies_bar.classic">
<section class="pt24 pb24">
<div class="container text-600 d-flex align-items-center">
<div>
<div class="h3 text-900">
<section class="o_colored_level o_cc o_cc1 pt32 pb16">
<div class="container">
<div class="row">
<div class="col-lg-6">
<t t-call="website.cookies_bar.text_title"/>
</div>
<div class="small">
<t t-call="website.cookies_bar.text_primary"/>
</div>
<div class="small">
<t t-call="website.cookies_bar.text_secondary"/>
</div>
</div>
<div class="ml-auto">
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block text-nowrap">I agree</a>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap">Cookie Policy</a>
<div class="col-lg-3 offset-lg-3">
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-block">I agree</a>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-block">Cookie Policy</a>
</div>
</div>
</div>
</section>
</t>
<t t-name="website.cookies_bar.popup">
<section class="p-5">
<div class="container text-800 text-center">
<img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid" alt="Website Logo"/>
<br/><br/>
<div class="h3">
<t t-call="website.cookies_bar.text_title"/>
<section class="o_colored_level o_cc o_cc1 p-5">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<img t-attf-src="/web/image/website/#{websiteId}/logo/250x250" class="img img-fluid mb-4" alt="Website Logo"/>
<t t-call="website.cookies_bar.text_title"/>
<t t-call="website.cookies_bar.text_primary"/>
<t t-call="website.cookies_bar.text_secondary"/>
<a href="/cookie-policy" class=" o_cookies_bar_text_policy btn btn-link mr-2">Cookie Policy</a>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary">I agree</a>
</div>
</div>
<br/>
<div class="mb0 text-left">
<t t-call="website.cookies_bar.text_primary"/>
</div>
<div class="text-left">
<t t-call="website.cookies_bar.text_secondary"/>
</div>
<br/>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-lg">Cookie Policy</a>
<br/>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link">I agree</a>
</div>
</section>
</t>
addons/website/views/snippets/s_popup.xml
+65 -41
View File
@@ -2,26 +2,28 @@
<odoo>
<template id="s_popup" name="Popup">
<div class="s_popup o_snippet_invisible">
<div class='modal s_popup_main popup_backdrop s_popup_center o_one_page bg-black-25 '
data-show-after="5000" data-display="afterDelay" data-consents-duration="7">
<div class='modal-dialog modal-dialog-centered s_popup_frame modal-md'>
<div class='oe_structure modal-content s_popup_content oe_img_bg oe_custom_bg' style="background-color: #FFFFFF">
<div class='js_close_popup s_popup_close o_we_no_overlay o_not_editable'>&amp;times;</div>
<section class="s_banner parallax pt96 pb96" data-snippet="s_banner">
<span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_banner_default_image');"></span>
<div class="s_popup o_snippet_invisible" data-vcss="001">
<div class="modal fade s_popup_middle"
style="background-color: var(--black-50) !important;"
data-show-after="5000"
data-display="afterDelay"
data-consents-duration="7"
data-focus="false"
data-backdrop="false"
tabindex="-1"
role="dialog">
<div class="modal-dialog d-flex">
<div class="modal-content oe_structure">
<div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable">&amp;times;</div>
<section class="s_banner oe_img_bg pt96 pb96"
data-snippet="s_banner"
style="background-image: url('/web/image/website.s_popup_default_image');">
<div class="container">
<div class="row s_nb_column_fixed">
<div class="offset-lg-1 col-lg-7 o_cc o_cc1 jumbotron rounded pt32 pb32">
<div class="row">
<div class="col-lg-12 s_col_no_bgcolor">
<h1>
<font style="font-size: 62px;">Win 20$</font>
</h1>
<p class="lead">Order now, and get 20$ discount on your first order with the coupon:<br/></p>
<p><button class="btn btn-primary rounded-circle">NEWCUSTOMER</button></p>
</div>
</div>
<div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
<h2><font style="font-size: 62px;">Win $20</font></h2>
<p class="lead">Check out now and get $20 off your first order.</p>
<a href="#" class="btn btn-primary">New customer</a>
</div>
</div>
</div>
@@ -34,52 +36,74 @@
<template id="s_popup_options" inherit_id="website.snippet_options">
<xpath expr="." position="inside">
<div data-js="SnippetPopup" data-selector=".s_popup" data-target=".s_popup_main">
<we-select string="Position">
<we-button data-set-layout="fixedTop" data-name="position_top">Top</we-button>
<we-button data-set-layout="modal" data-name="position_centered">Center</we-button>
<we-button data-set-layout="fixedBottom" data-name="position_bottom">Bottom</we-button>
<t t-set="base_popup_options">
<we-select string="Position" data-dependencies="layout_popup_opt"> <!-- When cookie configuration only display this for popup mode -->
<we-button data-select-class="s_popup_top" data-name="position_top">Top</we-button>
<we-button data-select-class="s_popup_middle" data-name="position_middle">Middle</we-button>
<we-button data-select-class="s_popup_bottom" data-name="position_bottom">Bottom</we-button>
</we-select>
<we-select string="Size" data-apply-to=".s_popup_frame">
<we-select string="Size" data-apply-to=".modal-dialog" data-name="s_popup_size_opt">
<we-button data-select-class="modal-sm">Small</we-button>
<we-button data-select-class="modal-md" data-name="s_popup_size_md">Medium</we-button>
<we-button data-select-class="" data-name="s_popup_size_md">Medium</we-button>
<we-button data-select-class="modal-lg">Large</we-button>
<we-button data-select-class="modal-xl">Big</we-button>
<we-button data-select-class="s_popup_full" data-name="s_popup_size_full">Full</we-button>
<we-button data-select-class="modal-xl">Extra Large</we-button>
<we-button data-select-class="s_popup_size_full" data-name="s_popup_size_full">Full</we-button>
</we-select>
<we-colorpicker string="Backdrop Color" data-select-style="true"
data-css-property="background-color" data-color-prefix="bg-" data-dependencies="position_centered"/>
</div>
<div data-js="PopupContent" data-selector=".s_popup" data-target=".s_popup_content">
<we-colorpicker string="Background Color"
<we-row string="Backdrop">
<we-colorpicker data-dependencies="popup_backdrop_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-css-compatible="true"/>
<we-checkbox data-name="popup_backdrop_opt"
data-select-class="s_popup_no_backdrop|"
data-set-backdrop="true"
data-no-preview="true"/>
</we-row>
</t>
<t t-set="extra_popup_options">
<we-colorpicker string="Close Button Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-name="popup_content_colorpicker_opt"
data-dependencies="s_popup_size_full"/>
</div>
<div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".s_popup_main">
<we-colorpicker string="Text Color" data-select-style="true" data-css-property="color" data-color-prefix="text-"/>
data-css-property="color"
data-color-prefix="text-"
data-apply-to=".s_popup_close"/>
<we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
<we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
<we-button data-select-data-attribute="mouseExit">On Exit</we-button>
</we-select>
<we-input string="Delay" data-select-data-attribute="" data-attribute-name="showAfter" data-unit="s" data-save-unit="ms" data-dependencies="show_delay"/>
<we-input string="Delay"
data-select-data-attribute=""
data-attribute-name="showAfter"
data-unit="s"
data-save-unit="ms"
data-dependencies="show_delay"/>
<t t-set="unit_popup_duration">days</t>
<we-input string="Hide For" title="Once the user closes the popup, it won't be shown again for that period of time." t-attf-data-select-data-attribute="7#{unit_popup_duration}" data-attribute-name="consentsDuration" t-att-data-unit="unit_popup_duration"/>
<we-select string="Show on" data-no-preview="true">
<we-button data-move-block="moveToBody">This page</we-button>
<we-button data-move-block="moveToFooter">All pages</we-button>
</we-select>
</t>
<div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".modal">
<t t-raw="base_popup_options"/>
<t t-raw="extra_popup_options"/>
</div>
<div data-js="SnippetPopup" data-selector=".s_popup#website_cookies_bar" data-target=".modal">
<t t-raw="base_popup_options"/>
</div>
</xpath>
</template>
<template id="assets_snippet_s_popup_css_000" inherit_id="website.assets_frontend">
<template id="assets_snippet_s_popup_css_000" inherit_id="website.assets_frontend" active="False">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/000.scss"/>
</xpath>
</template>
<template id="assets_snippet_s_popup_css_001" inherit_id="website.assets_frontend">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/001.scss"/>
</xpath>
</template>
<template id="assets_snippet_s_popup_js_000" inherit_id="website.assets_frontend">
<xpath expr="//script[last()]" position="after">
addons/website/views/snippets/snippets.xml
+2 -2
View File
@@ -647,11 +647,11 @@
</div>
<!-- Cookies Bar -->
<div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".s_popup_main">
<div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".modal">
<we-select string="Layout" class="o_we_inline">
<we-button data-select-class="o_cookies_discrete" data-select-layout="discrete" data-trigger="position_bottom,s_popup_size_full">Discrete</we-button>
<we-button data-select-class="o_cookies_classic" data-select-layout="classic" data-trigger="position_bottom,s_popup_size_full">Classic</we-button>
<we-button data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_centered,s_popup_size_md">Popup</we-button>
<we-button data-name="layout_popup_opt" data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_middle,s_popup_size_md">Popup</we-button>
</we-select>
</div>
addons/website/views/website_templates.xml
+22 -13
View File
@@ -521,21 +521,30 @@
</template>
<template id="cookies_bar" inherit_id="website.footer_custom" name="Cookies Bar">
<xpath expr="//div[@id='footer']" position="before">
<div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar">
<div class='s_popup_main s_popup_fixed popup_backdrop d-none o_cookies_discrete'
data-show-after="500" data-display="afterDelay" data-consents-duration="999">
<div class='s_popup_frame s_popup_full'>
<div class='oe_structure s_popup_content bg-white'>
<section class="pt4 pb4">
<div class="container text-600 d-flex align-items-center">
<div class="mb0">
<div class="o_cookies_bar_text_primary">
We use cookies to provide you a better user experience.
<xpath expr="//footer" position="after">
<div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible" data-name="Cookies Bar" data-vcss="001" data-invisible="1">
<div class="modal s_popup_bottom s_popup_no_backdrop o_cookies_discrete"
data-show-after="500"
data-display="afterDelay"
data-consents-duration="999"
data-focus="false"
data-backdrop="false"
data-keyboard="false"
tabindex="-1"
role="dialog">
<div class="modal-dialog d-flex s_popup_size_full">
<div class="modal-content oe_structure">
<section class="o_colored_level o_cc o_cc1">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16">
<p>We use cookies to provide you a better user experience.</p>
</div>
<div class="col-lg-4 pt16 text-right">
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
</div>
</div>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm text-nowrap ml-auto">Cookie Policy</a>
<a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm text-nowrap">I agree</a>
</div>
</section>
</div>