SalebarWidget (optional)
- Marta Siewierska-Stańczak
- Tomasz Drabik
- Krzysztof Kula
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. Using the timer allows to stop showing salebar at some point.
- 1 Installation
- 2 Admin settings
- 2.1 Settings:
- 2.1.1 Storefront Properties
- 2.1.2 Widget Options
- 2.1 Settings:
- 3 Frontend
- 3.1 Storefront screens
- 3.2 Styling
- 3.3 Scripts
- 3.4 Important notes
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 |
|---|---|---|
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 | String | Fill text through editor or add HTML. Use %TIMER% to insert countdown timer. (it’s not necessary) |
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. Using timer causes cache to be refreshed for pages which contain the widget, when the timer ends. |
Text to show when the timer runs out | string | By default the text stays the same as initial. |
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 It can be also changes per every widget instance. |
default_text_color | Hex color, default 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: 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 highly recommended to not 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.