esun3d/app/code/Esun/PromotionPopup/README.md

Esun Promotion Popup

Configure each Website at Stores > Configuration > Esun > Promotion Popup.

The selected CMS Block owns the promotion image, copy and CTA. The module owns the modal shell, display schedule, audience, frequency, accessibility behavior and responsive styling.

Initial CMS Block

Upload these images in the Media Gallery:

• wysiwyg/promotion/welcome-24-desktop.jpg
• wysiwyg/promotion/welcome-24-mobile.jpg

Then create an active CMS Block and add the following HTML in a Page Builder HTML Code element:

<section class="promotion-popup-content promotion-popup-content--welcome"
         aria-labelledby="welcome-promotion-title">
    <div class="promotion-popup-content__media">
        <picture>
            <source media="(max-width: 767px)"
                    srcset="{{media url='wysiwyg/promotion/welcome-24-mobile.jpg'}}">
            <img src="{{media url='wysiwyg/promotion/welcome-24-desktop.jpg'}}"
                 alt="eSUN new customer promotion"
                 loading="eager">
        </picture>
    </div>
    <div class="promotion-popup-content__body">
        <p class="promotion-popup-content__eyebrow">NEW CUSTOMER EXCLUSIVE</p>
        <h2 class="promotion-popup-content__title" id="welcome-promotion-title">Get $24 Off</h2>
        <p class="promotion-popup-content__condition">On Orders Over $299</p>
        <p class="promotion-popup-content__description">
            Create your eSUN account and subscribe to our newsletter to receive an exclusive $24 coupon.
        </p>
        <a class="promotion-popup-content__button" href="{{store url='customer/account/create/'}}">
            Create Account
        </a>
        <p class="promotion-popup-content__terms">
            New customers only. Coupon will be added to My Coupons after successful registration and subscription.
        </p>
    </div>
</section>