workshop-qr-template-php/detail.php at master · MercadoPagoDevelopers/workshop-qr-template-php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
    <head>
        <title>Ejemplo e-commerce</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=1024">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <link rel="stylesheet" href="/assets/custom.css" type="text/css">
    </head>

    <body>
        <div id="page-container">
            <div class="header-container">
                <img src="/assets/images/banner.jpg"/>
            </div>
            <div id="content-wrap">
                <br>
                <div class="col-lg-8 main-section p-3 bg-white">
                <div class="row m-0">
                    <div class="col-lg-6 left-side-product-box pb-3">
                        <img id="product_img" src="<?php echo $_POST['img'] ?>" class="border p-3">
                    </div>
                    <div class="col-lg-6">
                        <div class="right-side-pro-detail border p-3 m-0">
                            <div class="row">
                                <div class="col-lg-12">
                                    <p id="product_title" class="m-0 p-0"> <?php echo $_POST['title'] ?> </p>
                                </div>
                                <div class="col-lg-12">
                                    <p id="product_price" class="m-0 p-0 price-pro"> <?php echo $_POST['price'] ?> </p>
                                    <hr class="p-0 m-0">
                                </div>
                                <div class="col-lg-3">
                                    <br><h6>Cantidad :</h6>
                                    <input id="product_quantity" type="number" class="form-control text-center w-100" value="1">
                                </div>
                                <div class="col-lg-12 mt-3">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <button id="create_button" onclick="createOrder()" class="mp-button mp-button-create">Generar Orden</button>
                                            <button hidden id="cancel_button" onclick="cancelOrder()" class="mp-button mp-button-cancel">Cancelar Orden</button>
                                            <br><br>
                                            <h5 id="order_status"></h5><!--Actualice aquí el estado de la órden-->
                                            <hr>
                                            <img src="" class="border p-3" style="width: 80%;"><!--Completar src con URL de imagen de tu QR de pago-->
                                            <br><br>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
                <br><br>
            </div>
            <footer id="footer" class="bg-secondary">
                <div class="card-body text-left">
                    <img src="/assets/images/logo.png" style="width: 100px"/>
                    <h6 style="color: white; display:inline"> | Ejemplo de Integración</h6>
                </div>
            </footer>
        </div>

        <script>

            function createOrder() {
                //Invocar aquí al backend para crear la orden

            }

            function cancelOrder() {
                //Invocar aquí al backend para cancelar la orden

            }

            /** Tip:
                Se sugiere utilizar las siguientes funciones para consultar periódicamente
                el backend y actualizar el estado de la orden en curso
            **/
            var pollInterval = undefined;

            function startStatusPolling() {
                pollInterval = setInterval(
                    function() {
                        $.ajax({
                            url: "", //Completar con endpoint de backend y los parámetros necesarios para obtener el estado
                            dataType: 'json',
                            type: 'get',
                            success: function(data) {
                                //Actualizar estado actual en pantalla

                            },
                            error: function (data) {
                                console.log('Error:', data);
                            }
                        });
                    },
                    3000
                );
            };

            function stopStatusPolling(){
                clearInterval(pollInterval);
            }
        </script>
    </body>
</html>