https://github.com/magesuite/widget-salebar

This creates a widget called Salebar. This widget adds a small info bar, with an optional counter, at the top of the page.

Installation

This module is optional

composer require "creativestyle/magesuite-salebar-widget" ^1.0.0

Admin settings

In Content -> Widgets add a new widget and select Salebar type and desired theme.

Display widget on all pages or on specific kinds of pages

Choose the proper container: Header - Salebar Widget

Provide widget content: add texts, optionally add background and text color, and optionally add a timer.

Add %TIMER% string to texts and set expiration zone: use format YYYY-MM-DD HH:MM:SS in CET timezone.

Settings:

Storefront Properties

Name	Value	Note
Type	Salebar
Design Package/Theme		can be theme-cretiveshop or child theme
Widget Title		required
Assign to Store Views
Sort Order		Sort Order of widget instances in the same container

Widget Options

Name	Value	Note
Text		Fill text through editor or add HTML. Use %TIMER% to insert countdown timer.
Background color	Hex color	Use CSS hex value for background-color, example: #ffffff
Text color	Hex color	Use CSS hex value for text-color, example: #ffffff
Make whole salebar clickable	Yes/No
URL		Where salebar should redirect
Include timer	Yes/No	Enable timer support, use %TIMER% to include it in text.
Timer ends on	Date	Use format YYYY-MM-DD HH:MM:SS in CET timezone.
Text to show when timer runs out	string

Frontend

XML configuration:

It is possible to pass XMl configuration for a widget:

<vars module="MageSuite_WidgetSalebar">
    <var name="default_background_color">#4b782e</var>
    <var name="default_text_color">#ffffff</var>
    <var name="related_fixed_elements"></var>
    <var name="fixed_elements_breakpoint"></var>
</vars>

Settings:

Name	Note
default_background_color	Hex color, default `#d63a47` It can be also changes per every widget instance.
default_text_color	Hex color, default `#fff` It can be also changes per every widget instance.
related_fixed_elements	String of comma separated query selectors, for the elements which require top position adjustments when they're fixed or sticky
fixed_elements_breakpoint	in pixels, example: `768` Breakpoint, below which elements specified in relatedElementsSelectors become sticky

Storefront screens

Example text:

<p>Sale of our limited edition ends soon! Only %TIMER% left!</p>

Styling

Corresponding styles are placed in theme-creativeshop, in:

theme-creativeshop/src/MageSuite_WidgetSalebar/web/css/salebar-widget.scss

There are 2 scss variables that can be configured:

$fixed-on-mobile: true !default;
$salebar-font-size_small: 1.4rem !default;
$salebar-font-size_medium: 1.8rem !default;

In case a shop has some fixed elements - like offfcanvases - and there is a need to position them below the sidebar (when it is fixed on mobile), selectors of these elements must be passed into XML.

Scripts