salla-cookies-bar
A cookie consent bar fixed to the bottom of the page.
A cookie consent bar fixed to the bottom of the page. Add it once to the theme layout.
It first shows a message with "Accept All" and "Customize" buttons; "Customize" opens a panel
where the visitor toggles performance, functional and advertising cookies (essential cookies are always on).
The choice is stored in cookies and in salla.storage (cookies-consent), the bar stays hidden
once a choice exists, and for signed-in customers the choice is also sent to the server.
When a category is declined, known first-party tracking cookies of that category are deleted.
A salla-menu with source="footer" and with-cookie-preferences gets a "cookies settings" link that reopens the bar,
if the store has the website-cookies feature.
It emits salla-cookies-bar::accepted and salla-cookies-bar::rejected through salla.event
(no payload), and listens for salla-cookies-bar::open to show the bar again.
The preferences panel has a close button (aria-label is the panel title) that rejects all optional cookies,
and each toggle is a checkbox with an aria-label.
Use it
In HTML or JSX, use the tag <salla-cookies-bar> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaCookiesBar } from '@salla.sa/twilight-components-react/cookies-bar';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { useEffect } from 'react';
import { SallaCookiesBar } from '@salla.sa/twilight-components-react/cookies-bar';
export function Example() {
useEffect(() => {
salla.event.on('salla-cookies-bar::accepted', () => console.log('cookies accepted'));
// Show the bar again, for example from a custom footer link
document.querySelector('salla-cookies-bar').open();
}, []);
return (
<SallaCookiesBar />
);
}Methods
Call these on the element or a React ref.
accept() => Promise<HTMLElement | undefined>
Accept all cookie categories, store the choice, hide the bar and emit salla-cookies-bar::accepted.
Returns Promise<HTMLElement>: A promise that resolves to the component's host element.
open() => Promise<HTMLElement | undefined>
Show cookies settings bar to allow updating consent. Always opens on the initial consent step, same as first load — the customer picks "customize" to reach the per-category panel.
Returns Promise<HTMLElement>: A promise that resolves to the component's host element.
reject() => Promise<HTMLElement | undefined>
Reject all optional cookie categories (only essential cookies stay on), store the choice, hide the bar
and emit salla-cookies-bar::rejected.
Returns Promise<HTMLElement>: A promise that resolves to the component's host element.
Related
Renders: <salla-button>.
salla-contacts
Lists the store's contact channels (mobile, phone, WhatsApp, Telegram, email) taken from the store settings, with an icon and link for each one that has a value.
salla-hook
An invisible marker (rendered with display: none) that names a position in the page where other code can inject elements.