...
| Code Block |
|---|
composer require "creativestyle/magesuite-widget-salebar-widget" ^1.0.0 |
Admin settings
In Content -> Widgets add a new widget and select Salebar type and desired theme.
...
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 the timer runs out | string | Optional but filling it with a text is hardly recommended (see notes below) |
Frontend
XML configuration:
...
| Code Block |
|---|
<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:
...
| Code Block |
|---|
mgsSalebarWidget: 'js/salebar-widget' |
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.