JAMES WEB

Aprenda como se faz.

Sumário

Carrinho de Compras – Parte 2 (Inserindo e deletando produtos no carrinho)

O novo módulo de carrinho de compras, os clientes desfrutarão de uma navegação fluida e intuitiva. Esqueça as complexidades; agora, adicionar e remover produtos será uma tarefa simples, elevando a satisfação e impulsionando as vendas a novos patamares.

Esta atualização robusta foca em otimizar cada interação. O cart.php gerenciará adições e remoções, enquanto o site.php garantirá rotas de acesso e processamento eficientes. Os templates HTML index, cart e category serão aprimorados para uma integração visual perfeita, proporcionando uma jornada de compra impecável e moderna.

adicionar produto Carrinho de Compras

Adicionado e removendo produtos do carrinho.

Neste módulo, mergulharemos fundo em como adicionar e remover produtos de forma eficiente. Exploraremos a funcionalidade da tabela tb_cartsproducts em seu banco de dados, que mantém o registro de cada item com base em uma sessão ativa. Ao final, no arquivo cart.php, você implementará as funções essenciais para manipular o carrinho, garantindo uma experiência de compra impecável para os clientes.

Acesse o arquivo PHP cart.php e adicione ao final o método addProduct que será responsável de inserir um produto no carrinho de compras.

PHP: cart.php

?
1
2
3
4
5
6
7
8
9
10
11
<?php
//** parte inicial do código php oculto . . . *
public function addProduct(Product $product)
        {
            $sql = new Sql();
            $sql->query("INSERT INTO tb_cartsproducts (idcart, idproduct) VALUES (:idcart, :idproduct)", [
                ':idcart'=>$this->getidcart(),
                ':idproduct'=>$product->getidproduct()
            ]);
        }
?>

A função addProduct pega um objeto de produto, obtém o ID do carrinho atual e o ID desse produto, e então insere esses dois IDs na tabela tb_cartsproducts do seu banco de dados. Isso efetivamente associa o produto ao carrinho, registrando-o para futura referência.

Por dentro, ela cria uma nova linha na tabela tb_cartsproducts (a tabela do seu banco de dados que guarda os itens do carrinho). Nesta nova linha, ela registra dois dados importantes:

  • O ID do carrinho atual (para saber a qual carrinho o produto pertence).
  • O ID do produto que está sendo adicionado.

Removendo um produto do carrinho de compras.

Acesse o arquivo PHP cart.php e adicione ao final o método removeProduct que será responsável de remover um produto no carrinho de compras.

?
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
<?php
//** parte inicial do código php oculto . . . *
 
public function removeProduct(Product $product, $all = false)
{
    $sql = new Sql();
 
    if ($all) {
        $sql->query(
            "UPDATE tb_cartsproducts 
             SET dtremoved = NOW() 
             WHERE idcart = :idcart 
             AND idproduct = :idproduct 
             AND dtremoved IS NULL",
            [
                ':idcart' => $this->getidcart(),
                ':idproduct' => $product->getidproduct()
            ]
        );
    } else {
        $sql->query(
            "UPDATE tb_cartsproducts 
             SET dtremoved = NOW() 
             WHERE idcart = :idcart 
             AND idproduct = :idproduct 
             AND dtremoved IS NULL 
             LIMIT 1",
            [
                ':idcart' => $this->getidcart(),
                ':idproduct' => $product->getidproduct()
            ]
        );
    }
}
?>

Essa função PHP, removeProduct, serve para “remover” um produto do carrinho de compras no seu site. Ela não apaga o produto do banco de dados, mas sim marca ele como removido. Ela faz isso atualizando a coluna dtremoved (data de remoção) na tabela tb_cartsproducts para a data e hora atual. Isso é útil para manter um histórico.

Ela recebe dois dados:

  • $product: O produto específico que você quer remover.
  • $all: Um “interruptor” (que é falso por padrão). Se você ligar ele (passar true), a função removerá TODAS as unidades daquele produto no carrinho. Se não (mantiver false), ela removerá apenas UMA unidade.
  • Se $all for true: Ela procura por todos os registros desse produto no carrinho que ainda não foram removidos (dtremoved IS NULL) e marca todos eles como removidos.

Se $all for false (padrão): Ela faz a mesma coisa, mas com um LIMIT 1 na consulta SQL, garantindo que apenas a primeira ocorrência (ou seja, uma unidade) do produto seja marcada como removida.

Listando os produtos no carrinho de compras.

Depois de inseridos, os produtos devem ser exibidos no carrinho de compras. O método getProducts é responsável por este procedimento. Acesse o arquivo cart.php e insira a função no final do cósigo como no exemplo a seguir:

?
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
<?php
//** parte inicial do código php oculto . . . *
 
public function getProducts()
{
    $sql = new Sql();
    $rows = $sql->select("
        SELECT 
            b.idproduct, 
            b.desproduct, 
            b.vlprice, 
            b.vlwidth, 
            b.vlheight, 
            b.vllength, 
            b.vlweight, 
            b.desurl, 
            COUNT(*) AS nrqtd, 
            SUM(b.vlprice) AS vltotal
        FROM 
            tb_cartsproducts a 
        INNER JOIN 
            tb_products b ON a.idproduct = b.idproduct 
        WHERE 
            a.idcart = :idcart AND a.dtremoved IS NULL 
        GROUP BY 
            b.idproduct, 
            b.desproduct, 
            b.vlprice, 
            b.vlwidth, 
            b.vlheight, 
            b.vllength, 
            b.vlweight, 
            b.desurl
        ORDER BY 
            b.desproduct
        ", 
        [
            ':idcart' => $this->getidcart()
        ]
    );
?>

A função PHP, getProducts, serve para buscar e listar todos os produtos que estão atualmente no carrinho de compras do seu site. Ela faz uma consulta (um “pedido”) ao banco de dados para pegar as informações dos produtos. Ela olha para duas tabelas: tb_cartsproducts (onde está registrado quais produtos estão no carrinho) e tb_products (onde estão os detalhes de cada produto, como nome, preço, etc.).

Ela pega os produtos que:


  • Pertencem ao carrinho de compras atual (usando o ID do carrinho).
  • Ainda não foram removidos (dtremoved IS NULL).

O resultado dessa busca é uma lista de produtos, mas com algumas informações extras calculadas:

  • nrqtd: A quantidade de cada produto no carrinho (se o cliente adicionou o mesmo item várias vezes).
  • vltotal: O preço total para todas as unidades daquele produto específico no carrinho.

No final, ela organiza essa lista de produtos pelo nome (desproduct) e a entrega para ser usada no seu site para exibir os itens que o cliente colocou no carrinho.

Rota carrinho de compras

Agora é hora de criar as rotas que irão dar acesso aos templates do carrinho de compras e aos métodos que criamos anteriormente.

Primeiro acesse o arquivo site.php e altere a rota de acesso do carrinho com os procedimentos que inserem os dados dos produtos no carrinho de compras.

PHP: site.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
//** parte inicial do código php oculto . . . *
 
//Rota Carrinho de Compras
$app->get("/cart", function(){
    $cart = Cart::getFromSession();
    $page = new Page();
    $page->setTpl("cart", [
        'cart'=>$cart->getValues(),
        'products'=>$cart->getProducts()
    ]);
});
?>

Esta parte do código define uma rota no seu site, especificamente para a página do carrinho de compras. Quando um usuário visita a página /cart, este código pega o carrinho de compras dele, busca todos os produtos que estão nele, e então mostra tudo isso em um template HTML específico, apresentando a página do carrinho de compras.

Como funciona:

  • $app->get(“/cart”, function(){ … });: Isso significa que, quando alguém acessa a URL /cart no site, o código dentro dessa função será executado. O get indica que é uma requisição para obter (visualizar) a página.
  • $cart = Cart::getFromSession();: Esta linha recupera o carrinho de compras do usuário da sessão. A sessão é como se fosse uma “memória temporária” do navegador que guarda informações sobre o usuário enquanto ele navega pelo site. Assim, o sistema sabe qual carrinho pertence a qual pessoa.
  • $page = new Page();: Cria uma nova instância de uma classe Page. Essa classe é responsável por carregar e gerenciar os templates HTML do seu site.
  • $page->setTpl(“cart”, […] );: Esta linha diz à classe Page para carregar o template HTML chamado “cart“. É o arquivo que contém a estrutura visual da página do carrinho (onde os produtos serão exibidos).
  • ‘cart’=>$cart->getValues(),: Passa para o template “cart” os detalhes gerais do carrinho, como o valor total, etc. (o que o método getValues() do objeto $cart retornar).
  • ‘products’=>$cart->getProducts(): Passa para o template “cart” a lista de produtos que estão dentro do carrinho, que é obtida através do método getProducts() do objeto $cart.

Rota adicionar produto ao carrinho de compras

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
//** parte inicial do código php oculto . . . *
 
//Rota Carrinho de Compras - Adicionar produto
$app->get("/cart/:idproduct/add", function($idproduct){
    $product = new Product();
    $product->get((int)$idproduct);
    $cart = Cart::getFromSession();
    $qtd = (isset($_GET['qtd'])) ? (int)$_GET['qtd'] : 1;
    for ($i = 0; $i < $qtd; $i++) {
        $cart->addProduct($product);
    }    
    header("Location: /ecommerce/cart");
    exit;
});
?>

Esta é uma rota do seu site para adicionar produtos ao carrinho de compras. Quando o usuário clica em “Adicionar ao Carrinho” (e a URL aponta para essa rota), este código identifica qual produto e quantos dele devem ser adicionados, faz a adição e, em seguida, leva o usuário diretamente para a página do carrinho para que ele possa ver os itens.

Como funciona:

  • $app->get(“/cart/:idproduct/add”, function($idproduct){ … });: Esta linha define que, quando alguém acessa uma URL como /cart/123/add (onde 123 seria o ID de um produto), o código dentro da função será executado. O :idproduct é uma parte “variável” da URL que captura o ID do produto que será adicionado.
  • $product = new Product(); e $product->get((int)$idproduct);: Primeiro, o código cria um novo objeto Product e, em seguida, usa o ID do produto obtido da URL ($idproduct) para carregar todas as informações desse produto específico do banco de dados.
  • $cart = Cart::getFromSession();: Ele busca o carrinho de compras do usuário que já está ativo na sessão.
  • $qtd = (isset($_GET[‘qtd’])) ? (int)$_GET[‘qtd’] : 1;: Esta linha verifica se a quantidade (qtd) do produto foi especificada na URL (por exemplo, /cart/123/add?qtd=3). Se sim, usa essa quantidade; caso contrário, assume que o usuário quer adicionar apenas 1 unidade do produto.
  • for ($i = 0; $i < $qtd; $i++) { $cart->addProduct($product); }: Este é um loop que executa a função addProduct (aquela que explicamos antes) quantas vezes forem necessárias para adicionar a quantidade desejada do produto ao carrinho. Se $qtd for 1, ele adiciona uma vez; se for 3, adiciona três vezes.
  • header(“Location: /ecommerce/cart”); e exit;: Após adicionar o(s) produto(s) ao carrinho, o usuário é redirecionado de volta para a página do carrinho de compras (/ecommerce/cart). O exit; garante que nenhum outro código seja executado após o redirecionamento.

Rota remover um produto do carrinho de compras

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
//** parte inicial do código php oculto . . . *
 
//Rota Carrinho de Compras - Remove um produto indicado
$app->get("/cart/:idproduct/minus", function($idproduct){
    $product = new Product();
    $product->get((int)$idproduct);
    $cart = Cart::getFromSession();
    $cart->removeProduct($product);
    header("Location: /ecommerce/cart");
    exit;
});
?>

Esta rota do seu site serve para remover uma unidade de um produto específico do carrinho de compras. Quando um usuário decide diminuir a quantidade de um item no carrinho (ou removê-lo completamente, se houver apenas um), esta rota identifica qual produto é, realiza a remoção de uma unidade e, em seguida, atualiza a página do carrinho para o usuário ver a mudança.

  • $app->get(“/cart/:idproduct/minus”, function($idproduct){ … });: Esta linha define que, quando alguém acessa uma URL como /cart/123/minus (onde 123 seria o ID do produto), o código dentro da função é executado. O :idproduct na URL captura o ID do produto a ser removido.
  • $product = new Product(); e $product->get((int)$idproduct);: O código primeiro cria um objeto Product e então usa o ID do produto (vindo da URL) para carregar todos os detalhes desse produto do banco de dados.
  • $cart = Cart::getFromSession();: Ele busca o carrinho de compras do usuário que já está ativo na sessão, garantindo que a remoção seja feita no carrinho correto.
  • $cart->removeProduct($product);: Aqui, a função removeProduct (aquela que explicamos antes, que por padrão remove uma unidade) é chamada, passando o produto que deve ser “removido” do carrinho.
  • header(“Location: /ecommerce/cart”); e exit;: Depois de remover o produto, o usuário é redirecionado de volta para a página do carrinho de compras (/ecommerce/cart). O comando exit; impede que qualquer código adicional seja executado após o redirecionamento.

Rota remover todos os produtos de um tipo do carrinho de compras

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
//** parte inicial do código php oculto . . . *
 
//Rota Carrinho de Compras - Remove todos produtos indicados com o mesmo id
$app->get("/cart/:idproduct/remove", function($idproduct){
    $product = new Product();
    $product->get((int)$idproduct);
    $cart = Cart::getFromSession();
    $cart->removeProduct($product, true);
    header("Location: /ecommerce/cart");
    exit;
});
 
?>

Esta rota do seu site é usada para remover todas as unidades de um produto específico do carrinho de compras de uma só vez. Quando o usuário decide remover completamente um tipo de produto do carrinho, esta rota identifica qual produto é, instrui o sistema a remover todas as suas unidades e, em seguida, atualiza a página do carrinho para o usuário ver a mudança.

  • $app->get(“/cart/:idproduct/remove”, function($idproduct){ … });: Esta linha define que, ao acessar uma URL como /cart/123/remove (onde 123 é o ID do produto), o código dentro da função será executado. O :idproduct na URL captura o ID do produto a ser removido.
  • $product = new Product(); e $product->get((int)$idproduct);: O código primeiro cria um objeto Product e então usa o ID do produto (obtido da URL) para carregar todos os seus detalhes do banco de dados.
  • $cart = Cart::getFromSession();: Ele busca o carrinho de compras do usuário que já está ativo na sessão, garantindo que a remoção ocorra no carrinho correto.
  • $cart->removeProduct($product, true);: Aqui está a diferença principal! A função removeProduct (que já explicamos) é chamada, mas com o segundo parâmetro true. Isso informa à função que ela deve remover todas as ocorrências desse produto no carrinho, e não apenas uma unidade.
  • header(“Location: /ecommerce/cart”); e exit;: Após a remoção de todos os produtos, o usuário é redirecionado de volta para a página do carrinho de compras (/ecommerce/cart). O exit; garante que nenhum outro código seja executado após o redirecionamento.

Modificando os templates HTML

Depois de criado os métodos e as rotas do carrinho de compras, será necessário editar nossos templates HTML cart, index e category. As modificações no código HTML do cart.html visam principalmente transformá-lo de um conteúdo estático (apenas para exibição) em um conteúdo dinâmico, que se adapta aos produtos que o cliente realmente tem no carrinho, e que permite interações.

Acesse o arquivo cart.html e modifique o trecho entre as tags (tbody) conforme o exemplo a seguir:

?
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
<tbody>
  {loop="$products"}
  <tr class="cart_item">
    <td class="product-remove">
      <a 
        title="Remove this item" 
        class="remove" 
        href="/ecommerce/cart/{$value.idproduct}/remove">
        ×
      </a>
    </td>
    <td class="product-thumbnail">
      <a href="/products/{$value.desurl}">
        <img 
          width="145" 
          height="145" 
          alt="poster_1_up" 
          class="shop_thumbnail" 
          src="{$value.desphoto}">
      </a>
    </td>
    <td class="product-name">
      <a href="/products/{$value.desurl}">
        {$value.desproduct}
      </a>
    </td>
    <td class="product-price">
      <span class="amount">
        R$ {function="formatPrice($value.vlprice)"}
      </span>
    </td>
    <td class="product-quantity">
      <div class="quantity buttons_added">
        <input 
          type="button" 
          class="minus" 
          value="-" 
          onclick="window.location.href = '/ecommerce/cart/{$value.idproduct}/minus'">
        <input 
          type="number" 
          size="4" 
          class="input-text qty text" 
          title="Qty" 
          value="{$value.nrqtd}" 
          min="0" 
          step="1">
        <input 
          type="button" 
          class="plus" 
          value="+" 
          onclick="window.location.href = '/ecommerce/cart/{$value.idproduct}/add'">
      </div>
    </td>
    <td class="product-subtotal">
      <span class="amount">
        R$ {function="formatPrice($value.vltotal)"}
      </span>
    </td>
  </tr>
  {/loop}
</tbody>
  1. Remoção de conteúdo estático e adição de um “loop”:
    • Antes: <tbody> continha diretamente uma linha fixa (<tr class=”cart_item”>…</tr>) que exibia um único produto de exemplo (“Ship Your Idea”).
    • Depois: Foi adicionado {loop=”$products”} e {/loop}. Isso é um comando de um “template engine” (como o Twig ou Smarty, que o seu sistema PHP provavelmente usa). Ele diz: “Para cada item dentro da lista de $products que eu te passei lá do PHP (a variável products que a rota getProducts retorna), repita todo o conteúdo que está aqui dentro”. Isso significa que, se o cliente tiver 3 produtos no carrinho, essa parte do código será repetida 3 vezes, exibindo cada um deles.
  2. Substituição de dados fixos por variáveis:
    • Antes: Informações como nome, preço, imagem e quantidade eram fixas (ex: Ship Your Idea, R$15.00, img/product-thumb-2.jpg, value=”1″).
    • Depois: Foram substituídas por variáveis do seu sistema PHP, como {$value.idproduct}, {$value.desurl}, {$value.desproduct}, {$value.vlprice}, {$value.desphoto}, {$value.nrqtd}, e {$value.vltotal}.
      • {$value.idproduct}: ID único do produto.
      • {$value.desurl}: URL amigável do produto (para o link).
      • {$value.desproduct}: Nome do produto.
      • {$value.vlprice}: Preço unitário do produto.
      • {$value.desphoto}: Caminho da imagem do produto.
      • {$value.nrqtd}: Quantidade desse produto no carrinho.
      • {$value.vltotal}: Preço total para a quantidade daquele produto.
      • {function=”formatPrice(…)”}: Isso é um comando para chamar uma função PHP (formatPrice) que formata o valor do preço para que ele seja exibido corretamente (ex: R$ 15,00).
  3. Adição de funcionalidade de remoção e ajuste de quantidade (usando links/botões):
    • Antes: Os botões de remover (×), diminuir (-) e aumentar (+) não faziam nada, pois o href era # ou não havia onclick.
    • Depois: Os links e botões agora apontam para as rotas PHP que explicamos anteriormente:
      • Botão ‘×’ (Remover tudo): href=”/ecommerce/cart/{$value.idproduct}/remove” – Quando clicado, ele vai para a rota que remove todas as unidades daquele produto do carrinho.
      • Botão ‘-‘ (Diminuir quantidade): onclick=”window.location.href = ‘/ecommerce/cart/{$value.idproduct}/minus'” – Ao clicar, ele vai para a rota que remove uma unidade daquele produto do carrinho.
      • Botão ‘+’ (Aumentar quantidade): onclick=”window.location.href = ‘/ecommerce/cart/{$value.idproduct}/add'” – Ao clicar, ele vai para a rota que adiciona uma unidade daquele produto ao carrinho.

As modificações neste trecho de código HTML visam transformar uma exibição estática de produtos em um carrossel de produtos dinâmico, que é preenchido com informações do seu banco de dados e oferece funcionalidades interativas.

Essas modificações transformaram um simples bloco de HTML em um componente dinâmico do seu e-commerce. Agora, em vez de mostrar produtos pré-definidos, ele exibe automaticamente todos os produtos que você tem cadastrados e permite que os usuários interajam diretamente com eles, adicionando-os ao carrinho ou visualizando seus detalhes.

HTML: index.html

?
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
<div class="product-carousel">
  {loop="$products"}
  <div class="single-product">
    <div class="product-f-image">
      <img 
        src="{$value.desphoto}" 
        alt="imagem produto" 
        title="title">
      <div class="product-hover">
        <a 
          href="/ecommerce/cart/{$value.idproduct}/add" 
          class="add-to-cart-link">
          <i class="fa fa-shopping-cart"></i> Comprar
        </a>
        <a 
          href="/ecommerce/products/{$value.desurl}" 
          class="view-details-link">
          <i class="fa fa-link"></i> Ver Detalhes
        </a>
      </div>
    </div>
     
    <h2>
      <a href="/ecommerce/products/{$value.desurl}">
        {$value.desproduct}
      </a>
    </h2>
     
    <div class="product-carousel-price">
      <ins>R$ {function="formatPrice($value.vlprice)"}</ins>
    </div>
  </div>
  {/loop}
</div>

Acesse o arquivo index.html, identifique a div da classe “product-carousel” e altere as linhas indicadas.

  1. Transformando em Conteúdo Dinâmico ({loop=”$products”} e {/loop}):
    • Antes: O HTML original continha um ou mais blocos div class=”single-product” repetidos manualmente para exibir produtos de exemplo.
    • Depois: A adição do **{loop=”$products”}** no início e **{/loop}** no final encapsula o HTML de um único produto. Isso indica a um “template engine” (o sistema que processa esse código antes de enviá-lo ao navegador) para repetir todo o conteúdo dentro do loop para cada item presente na variável $products. A variável $products é uma lista de produtos que seu PHP está passando para este template, geralmente obtida do banco de dados.
  2. Substituição de Dados Fixos por Variáveis Dinâmicas:
    • Antes: As informações de cada produto, como a imagem, o nome, o preço e os links, eram fixas e codificadas diretamente no HTML (ex: src=”img/product-thumb-2.jpg”, <h2>Ship Your Idea</h2>, R$15.00).
    • Depois: Todas essas informações foram substituídas por variáveis que vêm do seu sistema PHP, usando a sintaxe **{$value.nomeDaPropriedade}**. O $value representa o produto atual sendo processado dentro do loop.
      • **{$value.desphoto}**: Substitui a imagem estática pela URL da foto do produto, vinda do banco de dados.
      • **{$value.idproduct}**: Usado nos links para identificar qual produto está sendo manipulado (adicionado ao carrinho, ou ver detalhes).
      • **{$value.desurl}**: Usado nos links para a página de detalhes do produto, gerando URLs amigáveis.
      • **{$value.desproduct}**: Exibe o nome do produto.
      • **{function=”formatPrice($value.vlprice)”}**: Aqui, o preço do produto ($value.vlprice) é passado para uma função PHP chamada formatPrice. Esta função se encarrega de formatar o número corretamente (ex: adicionar R$ e usar vírgula para centavos), garantindo que o preço seja exibido de forma padronizada.
  3. Adição de Funcionalidades Interativas (Links para Adicionar e Ver Detalhes):
    • Antes: Os links de “Comprar” e “Ver Detalhes” tinham href=”#” ou URLs estáticas.
    • Depois: Os atributos href foram atualizados para apontar para as rotas PHP que você definiu:
      • **href=”/ecommerce/cart/{$value.idproduct}/add”**: O botão “Comprar” agora direciona o usuário para a rota que adiciona o produto ao carrinho. Ele usa {$value.idproduct} para saber qual produto específico deve ser adicionado.
      • **href=”/ecommerce/products/{$value.desurl}”**: O link “Ver Detalhes” leva o usuário para a página individual do produto, usando a URL amigável ({$value.desurl}).

Editando template category.html.

A última parte deste módulo que vamos modificar é o arquivo category.html que exibe os produtos por categorias e permitem acionar a compra do produto ao clicar em um botão específico.

Acesse o arquivo category.html e mosifique parte do arquivo condorme op exemplo abaixo:

?
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
<div class="row">
  {loop="$products"}
  <div class="col-md-3 col-sm-6">
    <div class="single-shop-product">
      <div class="product-upper">
        <img src="{$value.desphoto}" alt="">
      </div>
      <h2>
        <a href="/ecommerce/products/{$value.desurl}">
          {$value.desproduct}
        </a>
      </h2>
      <div class="product-carousel-price">
        <ins>{function="formatPrice($value.vlprice)"}</ins>
      </div>
      <div class="product-option-shop">
        <a 
          class="add_to_cart_button" 
          data-quantity="1" 
          data-product_sku="" 
          data-product_id="70" 
          rel="nofollow" 
          href="/ecommerce/cart/{$value.idproduct}/add">
          Comprar
        </a>
      </div>
    </div>
  </div>
  {/loop}
</div>

Modificações Resumidas:

  1. Exibição Dinâmica de Produtos ({loop=”$products”}):
    • O bloco {loop=”$products”} e {/loop} é um comando de template que itera sobre uma lista de produtos (a variável $products que vem do seu PHP). Para cada produto nessa lista, todo o HTML dentro do loop é repetido, gerando um “cartão” de produto para cada item. Isso elimina a necessidade de copiar e colar o código para cada produto.
  2. Dados do Produto Preenchidos Automaticamente ({$value.propriedade}):
    • Elementos como src=”{$value.desphoto}“, href=“/ecommerce/products/{$value.desurl}“, {$value.desproduct}, e {function=”formatPrice($value.vlprice)”} substituem informações estáticas por dados reais do produto, puxados do banco de dados:
      • {$value.desphoto}: Caminho da imagem do produto.
      • {$value.desurl}: URL amigável para a página de detalhes do produto.
      • {$value.desproduct}: Nome do produto.
      • {function=”formatPrice($value.vlprice)”}: Exibe o preço do produto formatado (ex: “R$ 99,90”).
  3. Botão “Comprar” Dinâmico (href=”/ecommerce/cart/{$value.idproduct}/add“):
    • O link “Comprar” agora tem um href que aponta para a rota PHP de adição ao carrinho (/ecommerce/cart/{$value.idproduct}/add). Isso significa que, ao clicar, o ID do produto ({$value.idproduct}) é enviado para o sistema PHP, que então adiciona aquele item ao carrinho de compras.

Carrinho de Compras
Parte 1 – Efetuando vendas em seu site

Books
Veja outros books disponíveis