Dinosaur Product Tags Widget¶

Description¶

The Dinosaur Product Tags Widget allows tagging products on images, similar to "Shop the Look" features. Users click on tags to view product information.

Page Builder Name: Product Tags | PapaThemes Dinosaur

Version: 1.0.0

Features¶

• ✅ Tag products on images
• ✅ Drag and drop tag positioning in edit mode
• ✅ Fetch product info via GraphQL
• ✅ Display price, rating, buy button
• ✅ Wave animation effects
• ✅ Responsive product popups

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Product Tags | PapaThemes Dinosaur widget to the page
3. Upload background image

2. Add Product Tags¶

In Settings Panel:¶

1. Click Add Item
2. Enter product SKU
3. Select Icon (tag/image)
4. Set Position (X, Y percentage)

In Edit Mode:¶

1. Click "Set Tag Position"
2. Click on position on image
3. Tag moves to new position

Configuration Details¶

Tag Item Settings¶

Tag Positioning¶

Drag & Drop Mode¶

1. Click "Set Tag Position"
2. Cursor changes to tag icon
3. Click new position on image
4. Position automatically updates

// Calculate position percentages
const leftPercent = parseInt(
    (clickX - containerRect.left) / containerRect.width * 100
);
const topPercent = parseInt(
    (clickY - containerRect.top) / containerRect.height * 100
);

Manual Position¶

In settings panel: - Position X: 0-100% - Position Y: 0-100%

Product Data (GraphQL)¶

Widget fetches product information via GraphQL:

query {
    site {
        product(sku: "SKU123") {
            name
            entityId
            path
            addToCartUrl
            prices {
                price { formatted }
                salePrice { formatted }
            }
            reviewSummary {
                summationOfRatings
                numberOfReviews
            }
            defaultImage {
                url320wide
            }
            productOptions {
                edges { node { entityId } }
            }
        }
    }
}

Product Popup¶

When clicking a tag, popup displays:

<div class="product-tag-popup">
    <h4 class="product-title">Product Name</h4>
    <div class="product-price">$99.99</div>
    <div class="product-rating">★★★★☆</div>
    <div class="product-actions">
        <a href="/product-link">View</a>
        <a href="/cart/add">Add to Cart</a>
    </div>
</div>

Wave Animation¶

Tags have wave animation effect:

@keyframes wave {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

Custom Wave for Custom Icon¶

.tag-icon::before,
.tag-icon::after,
.tag-icon .wave-three {
    animation: wave 3s linear infinite;
}

.tag-icon::before { animation-delay: 0s; }
.tag-icon::after { animation-delay: 1s; }
.wave-three { animation-delay: 2s; }

Popup Repositioning¶

Popup automatically adjusts position to prevent overflow:

// Check bottom overflow
if (tagRect.bottom + popupHeight > containerRect.bottom) {
    $popup.css({ bottom: targetHeight, top: 'auto' });
}

// Check right overflow
if (tagRect.right + popupWidth > containerRect.right) {
    $popup.css({ right: targetWidth, left: 'auto' });
}

Mobile¶

Popup centers in container on mobile (<550px).

Tax Display¶

Price displays according to store settings:

Usage Examples¶

Shop the Look¶

Background: Lifestyle room photo
Tags:
- Sofa (SKU: SOFA-001, Position: 30%, 60%)
- Table (SKU: TABLE-002, Position: 55%, 75%)
- Lamp (SKU: LAMP-003, Position: 70%, 35%)

Featured Products¶

Background: Product collection image
Tags: Multiple products at strategic positions

SVG Icons¶

Widget automatically injects SVG icons:

const svgSymbols = `
    <symbol id="icon-tag" viewBox="...">...</symbol>
    <symbol id="icon-cart" viewBox="...">...</symbol>
    <symbol id="icon-link" viewBox="...">...</symbol>
`;

Notes¶

1. Accurate SKU: Ensure SKU exists in catalog
2. GraphQL Token: Required for data fetching
3. Image size: Background needs high quality
4. Tag density: Keep under 5-6 tags per image
5. Mobile UX: Test popup positioning on mobile
6. Edit mode: Must enter edit mode to drag tags