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 |
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. |
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.
1*
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.