Site Builder

Editing: retail.php

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Slider</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .product {
            margin: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            max-width: 300px;
        }
        .retailer-buttons {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .retailer-buttons button {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .retailer-buttons button:hover {
            background-color: #0056b3;
        }
        .price-link {
            display: none;
            padding: 10px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="product-container">
    <?php
    $products = [
        [
            "id" => 1,
            "name" => "Product 1",
            "retailers" => [
                [
                    "name" => "Walmart",
                    "price" => 45.47,
                    "link" => "https://www.walmart.com"
                ],
                [
                    "name" => "Amazon",
                    "price" => 45.47,
                    "link" => "https://www.amazon.com"
                ]
            ]
        ],
        // Add more products here
    ];

// Get the pid from the URL
    $pid = isset($_GET['pid']) ? intval($_GET['pid']) : null;

// Find the product with the matching pid
    $productToShow = null;
    foreach ($products as $product) {
        if ($product['id'] === $pid) {
            $productToShow = $product;
            break;
        }
    }

if ($productToShow) {
        echo "<div class='product'>";
        echo "<h2>{$productToShow['name']}</h2>";
        echo "<div class='retailer-buttons' id='retailer-buttons-{$productToShow['id']}'>";
        foreach ($productToShow['retailers'] as $retailer) {
            echo "<button onclick=\"showPriceLink('{$productToShow['id']}', '{$retailer['name']}')\">{$retailer['name']}</button>";
        }
        echo "</div>";
        echo "<div id='price-links-{$productToShow['id']}'>";
        foreach ($productToShow['retailers'] as $retailer) {
            echo "<div id='price-link-{$productToShow['id']}-{$retailer['name']}' class='price-link'>";
            echo "Buy from {$retailer['name']} for \${$retailer['price']} <br>";
            echo "<a href='{$retailer['link']}' target='_blank'>Go to {$retailer['name']}</a>";
            echo "</div>";
        }
        echo "</div>";
        echo "</div>";
    } else {
        echo "<p>Product not found.</p>";
    }
    ?>
</div>

const buttons = document.querySelectorAll(`#retailer-buttons-${productId} button`);
        buttons.forEach(btn => {
            btn.style.backgroundColor = '#007bff';
        });

document.getElementById(`price-link-${productId}-${retailer}`).style.display = 'block';
        const button = Array.from(buttons).find(btn => btn.textContent === retailer);
        button.style.backgroundColor = '#0056b3';
    }
</script>

</body>
</html>

Site Builder

Editing: retail.php

Site Builder