SalebarWidget (optional)

Owned by Marta Siewierska-Stańczak
Last updated: Jun 04, 2024
3 min read

GitHub - 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-widget-salebar" ^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

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

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 the timer runs out

string

Optional but filling it with a text is hardly recommended (see notes below)

 

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

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:

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

Corresponding styles are placed in theme-creativeshop, in:

theme-creativeshop/src/MageSuite_WidgetSalebar/web/js/salebar-widget.ts

The widget is aliased as:

Important notes

It is hardly recommended to use Text to show when timer runs out and do not leave this option blank. Hiding the salebar leads to a layout shift. Also going back to the previous page after time is over results in a layout shift as first a cached version of the page is shown, and only then the script hides salebar.