WidgetNotificationModal (optional)
- Bartłomiej Podgórski
- Patrycja Niestrój
- Marta Siewierska-Stańczak
In order to increase awareness and improve campaign success Notification modal custom widget was introduced.
Installation
composer require "creativestyle/magesuite-widget-notification-modal"
Admin settings
Module doesn’t have additional configuration in Stores > Configuration.
Creating CMS Block
To add a widget first create a static block with Content Constructor CMS content:
As admin user navigate to Content -> Blocks and create a new block with 'Add New Block' on the upper right corner.
Your new block requires a ‘Block Title’ and a ‘Identifier’ f.e:
Scroll further down to ‘Content Constructor’ section and add an ‘Image Teaser’ component.
To the left upload or select your desired image and to the right add your content, f.e:
In description field you can add a copy to clipboard icon by using “coupon-code with-icon” span. Please see 1* at the end of the page.
Create notification widget:
Go to Content -> Widgets, choose Notification modal widget type and desired theme.
Please select the required settings marked with a *
After clicking on the Continue button add further settings. Choose Notification modal Container as a container.
Please select the required settings marked with a *
Open the Widget options tab and set the desired configuration:
Select your just-created CMS block configured in the previous step.
Widget Options
Name | Possible values | Comment |
|---|---|---|
Content mode | CMS Block / Image | Image is not supported yet! Please use CMS Block only. |
Select Block... |
| Select static block to display modal content |
Show modal after X second | Number (in seconds) | Leave empty modal should not be triggered automatically |
Show modal after X second of inactivity | Number (in seconds) | When filled in modal will be displayed after given period of inactivity on a page (no mousemoves, no keypress). |
Trigger selectors | String, f.e. | Add selectors separated by commas. Leave empty if theer are not trigger elements. |
Reopen policy |
| Choose when notification modal should be opened again. Always - absolute: use with caution. The modal will run every time regardless of the number of previous runs. |
Cookie expiration | number | Filed is available when Reopen policy is set to A few days (type below) |
Modal type |
|
|
Modal title |
| Leave empty in order to hide modal header |
Hide padding space inside modal | No/Yes |
|
Position modal |
| This setting will work only with popup modal type. Can be left empty if default modal position should be used. |
Aspect ratio |
| Set modal aspect ratio, f.e.: 2/3. Can be left empty. This setting will not be added to slide modal type. |
Display widget only for |
|
|
Date from | date (please use browsers calendar) | Date from which the modal will be visible |
Date to | date (please use browsers calendar) | Date until which the modal will be visible |
Result:
Closing modal
Modal won’t show again depending on the selected reopen policy.
Copying coupon code
In order to add a coupon code that can be copied to the clipboard when clicking on it add markup:
<span class="copy-coupon-code">Redeem your code: <span class="coupon-code with-icon">Kjs8yGt5</span></span>copy-coupon-code class trigger coping of coupon code. The coupon code must be placed inside coupon-code class. Please do not place anything besides the coupon code inside the element with coupon-code class. with-icon class can be added to both coupon-code and `copy-coupon-code elements. It adds copy icon, which is changed into a tick icon, after the coupon is copied
Configuration hints
When aspect ratio setting is filled used an image with the same aspect ratio.
When padding is removed set aspect-ratio and fill the modal with an image with the same aspect-ratio