Skip to content

Commit

Permalink
CookiesBarOption
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinlej
robinlej committed Feb 26, 2025
1 parent 3755390 commit 0164ffc
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 0 deletions.
97 changes: 97 additions & 0 deletions addons/html_builder/static/src/plugins/cookies_bar_option.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { Plugin } from "@html_editor/plugin";
import { registry } from "@web/core/registry";
import { renderToElement } from "@web/core/utils/render";

class CookiesBarOptionPlugin extends Plugin {
static id = "CookiesBarOptionPlugin";
static dependencies = ["clone"];
resources = {
builder_options: [
{
template: "html_builder.CookiesBarOption",
selector: "#website_cookies_bar",
applyTo: ".modal",
},
],
builder_actions: this.getActions(),
};

getDialogEl(editingElement) {
return editingElement.closest(".s_popup");
}

getActions() {
return {
selectLayout: {
apply: ({ editingElement, value: layout }) => {
const templateEl = renderToElement(`website.cookies_bar.${layout}`, {
websiteId: this.services.website.currentWebsite.id,
});
const contentEl = editingElement.querySelector(".modal-content");

// The selectors' order is significant since some selectors
// may be nested within others, and we want to preserve the
// nested ones.
// For instance, in the case of '.o_cookies_bar_text_policy'
// nested inside '.o_cookies_bar_text_secondary', the parent
// selector should be copied first, followed by the child
// selector to ensure that the content of the nested
// selector is not overwritten.
const selectorsToKeep = [
".o_cookies_bar_text_button",
".o_cookies_bar_text_button_essential",
".o_cookies_bar_text_title",
".o_cookies_bar_text_primary",
".o_cookies_bar_text_secondary",
".o_cookies_bar_text_policy",
];

if (this.savedSelectors === undefined) {
this.savedSelectors = [];
}

for (const selector of selectorsToKeep) {
const currentLayoutEls = contentEl.querySelectorAll(`${selector} > *`);
const newLayoutEl = templateEl.querySelector(selector);
if (currentLayoutEls.length) {
// Save value before change, eg 'title' is not
// inside the 'discrete' template but we want to
// preserve it in case we select another layout
// later
this.savedSelectors[selector] = currentLayoutEls;
}
const savedSelector = this.savedSelectors[selector];
if (newLayoutEl && savedSelector?.length) {
newLayoutEl.replaceChildren(savedSelector);
}
}

contentEl.replaceChildren(templateEl);

const dialogEl = this.getDialogEl(editingElement);
switch (layout) {
case "discrete":
case "classic":
dialogEl.classList.add("s_popup_bottom", "s_popup_size_full");
break;
case "popup":
dialogEl.classList.add("s_popup_middle");
break;
}
},
clean: ({ editingElement }) => {
// See "base_popup_options" > Position
const positionClasses = ["s_popup_top", "s_popup_middle", "s_popup_bottom"];
// See "s_popup_size_opt"
const sizeClasses = ["modal-sm", "modal-lg", "modal-xl", "s_popup_size_full"];
this.getDialogEl(editingElement).classList.remove(
...positionClasses,
...sizeClasses
);
},
},
};
}
}

registry.category("website-plugins").add(CookiesBarOptionPlugin.id, CookiesBarOptionPlugin);
19 changes: 19 additions & 0 deletions addons/html_builder/static/src/plugins/cookies_bar_option.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

<t t-name="html_builder.CookiesBarOption">
<BuilderRow label.translate="Layout">
<BuilderSelect action="'selectLayout'">
<BuilderSelectItem classAction="'o_cookies_discrete'" actionValue="'discrete'">
Discrete
</BuilderSelectItem>
<BuilderSelectItem classAction="'o_cookies_classic'" actionValue="'classic'">
Classic
</BuilderSelectItem>
<BuilderSelectItem classAction="'o_cookies_popup'" actionValue="'popup'" id="'layout_popup_opt'">
Popup
</BuilderSelectItem>
</BuilderSelect>
</BuilderRow>
</t>
</templates>
87 changes: 87 additions & 0 deletions addons/website/static/src/client_actions/website_preview/website.cookies_bar.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="website.cookies_bar.text_title">
<h3 class="o_cookies_bar_text_title">
Respecting your privacy is our priority.
</h3>
</t>
<t t-name="website.cookies_bar.text_primary">
<p class="o_cookies_bar_text_primary">
Allow the use of cookies from this website on this browser?
</p>
</t>
<t t-name="website.cookies_bar.text_secondary">
<p class="o_cookies_bar_text_secondary">
We use cookies to provide improved experience on this website. You can learn more about our cookies and how we use them in our <a href="/cookie-policy" class="o_cookies_bar_text_policy">Cookie Policy</a>.
</p>
</t>
<t t-name="website.cookies_bar.text_button_all">
<a href="#" id="cookies-consent-all" role="button"
class="js_close_popup o_cookies_bar_accept_all o_cookies_bar_text_button btn btn-outline-primary rounded-circle mb-1 px-2 py-1">Allow all cookies</a>
</t>
<t t-name="website.cookies_bar.text_button_essential">
<a href="#" id="cookies-consent-essential" role="button"
class="js_close_popup o_cookies_bar_accept_essential o_cookies_bar_text_button_essential btn btn-outline-primary rounded-circle mt-1 mb-2 px-2 py-1">Only allow essential cookies</a>
</t>
<t t-name="website.cookies_bar.discrete">
<!-- When updating this template, do not forget to also update the
backend `website.cookies_bar` template -->
<section class="o_colored_level o_cc o_cc1">
<div class="container">
<div class="row">
<div class="col-lg-8 pt16">
<p>
<span class="pe-1">We use cookies to provide you a better user experience on this website.</span>
<a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm px-0">Cookie Policy</a>
</p>
</div>
<div class="col-lg-4 text-end pt16 pb16">
<a href="#" id="cookies-consent-essential" role="button"
class="js_close_popup btn btn-outline-primary rounded-circle btn-sm px-2">Only essentials</a>
<a href="#" id="cookies-consent-all" role="button"
class="js_close_popup btn btn-outline-primary rounded-circle btn-sm">I agree</a>
</div>
</div>
</div>
</section>
</t>
<t t-name="website.cookies_bar.classic">
<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"/>
<t t-call="website.cookies_bar.text_primary"/>
<t t-call="website.cookies_bar.text_secondary"/>
</div>
<div class="col-lg-3 d-flex align-items-center">
<div class="row">
<div class="col-lg-12 d-flex align-items-center">
<t t-call="website.cookies_bar.text_button_all"/>
</div>
<div class="col-lg-12 d-flex align-items-center">
<t t-call="website.cookies_bar.text_button_essential"/>
</div>
</div>
</div>
</div>
</div>
</section>
</t>
<t t-name="website.cookies_bar.popup">
<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"/>
<t t-call="website.cookies_bar.text_button_all"/>
<t t-call="website.cookies_bar.text_button_essential"/>
</div>
</div>
</div>
</section>
</t>
</templates>

0 comments on commit 0164ffc

Please sign in to comment.