Vendas Online via API com Mercado Pago - #10 Carrinho de Compras I

28/03/2020

Na aula de hoje iniciaremos a criação de um carrinho de compras para que possamos realizar compras com vários produtos utilizando a API do Mercado Pago.

Carrinho de Compras com Mercado Livre

Nosso carrinho de compras terá os seguintes arquivos:

diretorios mercado pago

O nosso arquivo index.php ficará assim:

<!doctype html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pagamento via API - Mercado Pago</title>
    <link rel="stylesheet" href="lib/css/style.css">
</head>

<body>
    <div class="banner">
        <img src="img/banner-mercado-pago-l.jpg" alt="Mercado Pago">
    </div>

    <div class="carrinho">
        Você tem X produtos no carrinho.
    </div>

    <div class="product">
        <div class="product_title">Pen Drive</div>
        <div class="product_image"><img src="img/pendrive.jpg" alt=""></div>
        <div class="product_desc">Pen Drive de 16gb</div>
        <div class="product_btn"><a href="http://localhost/controllers/CarrinhoController.php?action=add&product=pendrive&price=10&id=9485906696">Adicionar ao Carrinho</a></div>
    </div>


    <div class="product">
        <div class="product_title">Celular</div>
        <div class="product_image"><img src="img/celular.jpg" alt=""></div>
        <div class="product_desc">Celular Sony</div>
        <div class="product_btn"><a  href="http://localhost/controllers/CarrinhoController.php?action=add&product=celular&price=200&id=1334124134">Adicionar ao Carrinho</a></div>
    </div>

</body>
</html>

O CSS vai ficar assim:

*{margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif;}

.product{display: inline-block; width: 20%;margin: 10px 2.5%;box-shadow: 0 5px 20px #ccc;}
    .product_title{width: 100%;background: #333;padding: 10px;color: #fff;font-weight: bold;text-align: center;}
    .product_image{padding: 10px 40px;}
    .product_image img{max-width: 100%;}
    .product_desc{font-size: 16px; text-align: center;}
    .product_btn{text-align: center;}

.banner img{width: 100%; vertical-align: middle;}

.carrinho{width: 100%; margin-bottom: 30px; background: #333333; color:#fff; font-weight: bold; padding: 10px 5%; text-align: center;}

No composer.json vamos criar os namespaces necessários para nosso sistema:

,
"autoload":{
    "psr-4":{
        "Classes\\":"../class/"
    }
}

Após editar o arquivo abrimos o terminal, vamos até a pasta raíz do projeto e rodamos o comando update.

cd c:/wamp64/www/lib
composer udpate

Vamos criar dentro da pasta controllers o CarrinhoController.php

<?php
var_dump($_GET);
header("location: http://localhost/views/checkout.php");

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor particular? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Vendas Online via API com Mercado Pago - #9 Outros meios de pagamento

Neste tutorial trabalharemos com os diversos meios de pagamento disponibilizados pela API do Mercado Pago.

Vendas Online via API com Mercado Pago - #11 Carrinho de Compras II

Na aula de hoje continuaremos a construção do carrinho de compras criando a classe de produtos e a classe do carrinho.

Mercado Pago

Neste curso aprenderemos como desenvolver pagamentos através do checkout transparente da API do Mercado Pago.