Dinosaur Coupons Widget¶

Description¶

The Dinosaur Coupons Widget displays coupon tickets with a special design for the Dinosaur theme. Supports links and inline editing.

Page Builder Name: Coupons | PapaThemes Dinosaur

Version: 1.0.0

Features¶

• ✅ Coupon ticket design
• ✅ Multiple coupons support
• ✅ Clickable links
• ✅ Inline editing
• ✅ Responsive layout

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Coupons | PapaThemes Dinosaur widget to the page
3. Widget displays with default coupons

2. Configuration¶

Coupon Settings¶

Link Behavior¶

Widget handles clicks as follows:

widgetElement.querySelectorAll('[data-link]').forEach((el) => {
    el.addEventListener('click', () => {
        // Don't navigate in edit mode
        if (!widgetElement.dataset.editMode) {
            if (el.dataset.link) {
                window.location = el.dataset.link;
            }
        }
    });
});

Edit Mode¶

• Link doesn't work
• Can click to edit content

Preview/Live Mode¶

• Click navigates to link
• Full functionality

Coupon Structure¶

<div class="coupon-item" data-link="/sale/">
    <div class="coupon-header">
        <span class="coupon-discount">20% OFF</span>
    </div>
    <div class="coupon-body">
        <p class="coupon-title">Summer Sale</p>
        <p class="coupon-code">CODE: SUMMER20</p>
        <p class="coupon-expiry">Expires: 12/31/2026</p>
    </div>
</div>

Styling¶

Ticket Design¶

Coupons are designed like tickets: - Border with perforation edge - Background color/gradient - Distinct sections

CSS Variables¶

.coupon-item {
    --coupon-bg: #f8f9fa;
    --coupon-accent: #dc3545;
    --coupon-text: #333;
}

Usage Examples¶

Discount Coupons¶

Coupon 1:
- Title: Flash Sale
- Discount: 30% OFF
- Code: FLASH30
- Link: /flash-sale/

Coupon 2:
- Title: Free Shipping
- Discount: FREE SHIP
- Code: FREESHIP
- Link: /shipping-info/

Category Promos¶

Coupon 1:
- Title: Electronics
- Discount: Up to 50%
- Link: /electronics/

Coupon 2:
- Title: Fashion
- Discount: Buy 2 Get 1
- Link: /fashion/

Inline Editing¶

1. Enable Edit Mode
2. Click on coupon
3. Edit:
4. Title
5. Discount amount
6. Code
7. Description
8. Save changes

Responsive¶

Coupons automatically adjust: - Desktop: Multiple coupons per row - Tablet: 2 coupons/row - Mobile: 1 coupon/row

Notes¶

1. Links: Ensure URLs are valid
2. Codes: Sync with actual coupon system
3. Expiry: Update when expired
4. Design: Keep consistent with theme
5. Mobile: Test touch targets