Search

api call for get item prices with a search bar

Shuhain
  • Edited

hello 
this code for anyone who need api to get item prices with search option change 
            $api_base_url = 'http://demo.phppointofsale.com/index.php/api/v1/';
            $api_key = 'oow8g80wosw88o00coo4ogss8o40ocw8c4kc8w0o';
with your api address and api key

code included comments 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search API</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        /* Styling for the search form and header */
        #search-form {
            margin-top: 25px;
            margin-bottom: 20px;
        }

        h1 {
            text-align: center;
            margin-top: 50px;
        }

        /* Styling for the search results table */
        table {
            margin: 0 auto;
            font-size: 18px;
            border-collapse: collapse;
            width: 100%;
            max-width: 800px;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
        }

        table th {
            background-color: #f2f2f2;
        }

        #search-input {
            padding: 10px;
            font-size: 18px;
        }

        /* Notification popup styles */
        #notification-popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            font-size: 18px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <h1>Scan Barcode to Get Price</h1>
    <form id="search-form" method="GET" action="">
        <input type="text" name="search" id="search-input" placeholder="Enter barcode..." value="">
        <input type="submit" value="Search">
    </form>

    <!-- Notification popup -->
    <div id="notification-popup">
        Scan to Price
    </div>

    <?php
    if (!empty($_GET['search'])) {
        // API settings
        $api_base_url = 'http://demo.phppointofsale.com/index.php/api/v1/';
        $api_key = 'oow8g80wosw88o00coo4ogss8o40ocw8c4kc8w0o';
        $search = urlencode($_GET['search']);

        // Request data from the API
        $curl = curl_init();
        curl_setopt_array($curl, [
            CURLOPT_URL => "{$api_base_url}items/?search={$search}",
            CURLOPT_HTTPHEADER => [
                'x-api-key: ' . $api_key,
                'accept: application/json',
            ],
            CURLOPT_FOLLOWLOCATION => false,
            CURLOPT_RETURNTRANSFER => true,
        ]);
        $api_response = curl_exec($curl);

        // Process and display API response
        if (!curl_errno($curl)) {
            $result = json_decode($api_response, true);
            curl_close($curl);

            if (!empty($result)) {
                echo '<table>';
                echo '<thead>';
                echo '<tr><th>Name</th><th>Item Number</th><th>Product ID</th><th>Unit Price</th></tr>';
                echo '</thead>';
                echo '<tbody>';

                foreach ($result as $item) {
                    echo '<tr>';
                    echo '<td>' . htmlspecialchars($item['name']) . '</td>';
                    echo '<td>' . htmlspecialchars($item['item_number']) . '</td>';
                    echo '<td>' . htmlspecialchars($item['product_id']) . '</td>';
                    echo '<td>' . htmlspecialchars($item['unit_price']) . '</td>';
                    echo '</tr>';
                }

                echo '</tbody>';
                echo '</table>';
            } else {
                echo 'No results found.';
            }
        }
    }
    ?>

    <script>
        // JavaScript to clear the search input field when the page loads
        window.onload = function() {
            document.getElementById("search-input").value = "";
            setTimeout(function() {
                document.getElementById("search-input").focus();
            }, 100);
            setTimeout(function() {
                document.getElementById("notification-popup").style.display = "none";
            }, 10000);

            // Clear search results after 30 seconds
            setTimeout(function() {
                document.querySelector('table tbody').innerHTML = '';
            }, 30000);
        };
    </script>
</body>
</html>

Comments

0 comments

Please sign in to leave a comment.