Skip to content

Instantly share code, notes, and snippets.

@Olanetsoft

Olanetsoft/script.js

Created May 31, 2025 19:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Olanetsoft/5033105e09e7fde1adf1b02efbf72434 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Olanetsoft/5033105e09e7fde1adf1b02efbf72434 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Olanetsoft created this gist May 31, 2025.
    77 changes: 77 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@

    //...

    // Working demo configuration using Cloudinary's sample videos
    const DEMO_CONFIG = {
    cloudName: "demo", // Using Cloudinary's demo account for testing
    };

    // Mock product database - simulates Shopify API responses
    const MOCK_PRODUCTS = {
    1: {
    id: 1,
    title: "Classic Sunglasses",
    price: 89.99,
    comparePrice: 129.99,
    available: true,
    stockLevel: 12,
    description: "UV protection with style",
    url: "#product-1",
    },
    2: {
    id: 2,
    title: "Summer Dress",
    price: 149.99,
    comparePrice: null,
    available: true,
    stockLevel: 3,
    description: "Perfect for sunny days",
    url: "#product-2",
    },
    3: {
    id: 3,
    title: "Leather Handbag",
    price: 299.99,
    comparePrice: 399.99,
    available: false,
    stockLevel: 0,
    description: "Premium leather craftsmanship",
    url: "#product-3",
    },
    };

    // Demo video configuration with shoppable products
    const VIDEO_PRODUCTS = {
    "docs/shoppable_demo": {
    products: [
    {
    productId: 1,
    productName: MOCK_PRODUCTS[1].title,
    startTime: 0,
    endTime: 10,
    publicId: "docs/shoppable_sunglasses",
    hotspots: [
    {
    time: "00:03",
    x: "30%",
    y: "40%",
    tooltipPosition: "right",
    clickUrl: MOCK_PRODUCTS[1].url,
    },
    ],
    onClick: {
    action: "goto",
    pause: true,
    args: {
    url: MOCK_PRODUCTS[1].url,
    },
    },
    onHover: {
    action: "overlay",
    args: `${MOCK_PRODUCTS[1].title} - $${MOCK_PRODUCTS[1].price}`,
    },
    },
    // Add more products following the same pattern
    ],
    },
    };