What happens is that I am developing a website with a shopping cart, which connects to paypal to make the payment. I have a database in MYSQL where I get the data of the products, the php page where the data is obtained by the products and shows them on the screen correctly. The problem is that when I show the content automatically, a buy button is added for each product, and when crushing it does not work. On the contrary, if I burn the code directly in html (product by default on the page) the button works correctly. Any solution? I would appreciate greetings.
Next the code of the page that obtains the products of the BDD. buy.php
<!DOCTYPE html>
<html>
<head>
<title>Buscar productos</title><meta charset="utf-8">
<meta name="description" content="Bootstrap HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<link rel="stylesheet" href="css/estilos.css">
<link href="https://file.myfontastic.com/SnwsCaP7tHRQg33WPWDYKZ/icons.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/4/united/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
function Reproducir(id)
{
var in1 = "<iframe title=\"YouTube video player\" width=\"299\" height=\"168\" src=\"http://www.youtube.com/embed/";
var in2 = "\" frameborder=\"0\" allowfullscreen></iframe>";
var ids = ["P09AKS7Htpc", "l71awxHqWYc", "jj68dUrq-0E", "wJ1QTP-fA-g", "X5D-gfDJRqc", "9WqGvjMzEBI", "x76VEPXYaI0", "T_xX2dFsyoY", "u5OGoXca-II", "CK76aj_-5xY"];
for (i = 0; i < ids.length; i++)
{
if (id === i)
{
document.getElementById("rep").innerHTML = in1 + ids[i] + in2;
}
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<header class="header">
<div class="contenedor">
<h1 class="" ></h1>
<span class="icon-menu" id="btn-menu"></span>
<nav class="nav" id="nav">
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="quienes.html">¿Quiénes Somos?</a></li>
<li class="menu__item"><a class="menu__link" href="index.html">Principal</a></li>
</ul>
</nav>
</div>
</header>
<div class="banner" align="center">
<img src="img/portada2.jpg" alt="" >
<div class="contenedor">
</div>
</div>
<div class="container-fluid">
<div class="row">
<aside id="asi" class="col-md-3">
<div id="rep">
</div>
</aside>
<section id="seccion" class="col-md-8">
<div class="row">
<div class="contenedor">
<section class="productos">
<h1>BUSQUEDA DE PRODUCTOS ULTRA TECNO</h1>
<br>
<div class="formulario">
<br><br><label for="caja_busqueda">Buscar</label>
<input type="text" name="caja_busqueda" id="caja_busqueda"></input>
</div>
<br>
<div id="datos">
</div>
</section>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/find_products.js"></script>
</div>
</div>
</section>
</div>
</div>
<script src="minicart.js"></script>
<script>
// configuraci�n inicial del carrito
paypal.minicart.render({
strings: {
button: 'Pagar'
, buttonAlt: "Total"
, subtotal: 'Total:'
, empty: 'No hay productos en el carrito'
}
});
// Eventos para agregar productos al carrito
$('.producto').click(function (e) {
e.stopPropagation();
paypal.minicart.cart.add({
business: '[email protected]', // Cuenta paypal para recibir el dinero
item_name: $(this).attr("titulo"),
amount: $(this).attr("precio"),
currency_code: 'USD',
});
});
</script>
<footer class="footer">
<div class="social">
<h4>Creadores <img src="img/ups.jpg" alt="" width="150" align="right"></h4>
<h4>Luis Fernando Vallejo Llumiquinga ([email protected])</h4>
<h4>Jose Antonio Guerra Cajas ([email protected])</h4>
<h4>Brayan Leonardo Ramírez Merino ([email protected])</h4>
<h4>Todos los derechos reservados</h4>
</div>
</footer>
</body>
</html>
This is the PHP file that contains the connection to the database and makes the query. search.php
<?php
$servername = "localhost";
$username = "username";
$password = "contraseña";
$dbname = "bdd_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
die("Conexión fallida: ".$conn->connect_error);
}
$salida = "";
$query = "SELECT * FROM Productos";
if (isset($_POST['consulta'])) {
$q = $conn->real_escape_string($_POST['consulta']);
$query = "SELECT * FROM Productos WHERE producto LIKE '%$q%' OR marca LIKE '%$q%' OR modelo LIKE '%$q%' OR descripcion LIKE '%$q%' OR cod_producto LIKE '$q' ";
}
$resultado = $conn->query($query);
if ($resultado->num_rows > 0) {
$salida.="<table border=3 class='tabla_datos'>
<thead>
<tr id='titulo'>
<td>ID</td>
<td>Producto</td>
<td>Descripcion</td>
<td>Marca</td>
<td>Modelo</td>
<td>Precio</td>
<td>Stock</td>
</tr>
</thead>
<tbody>";
while ($fila = $resultado->fetch_assoc()) {
$salida.="<div class='col-xs-6 col-sm-3 col-md-3'>
<div class='thumbnail'>
<img data-src='holder.js/100%x200' alt='100%x200' src='img/ps4.jpg' data-holder-rendered='true' style='height: 200px; width: 100%; display: block;'>
<div class='caption'>
<h3>".$fila['producto']."</h3>
<p>".$fila['descripcion']."</p>
<p><a href='javascript:Reproducir(9)' class='btn btn-primary' role='button'>Ver</a>
<a href='#' class='btn btn-default producto' precio='".$fila['precio']."' titulo='".$fila['producto']."' role='button'>Comprar</a></p>
</div>
</div>
</div>" ;
}
}else{
$salida.="NO HAY DATOS :(";
}
echo $salida;
$conn->close();
?>
This is the script that is responsible for displaying the data on the page. find_products.js
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
$(buscar_datos());
function buscar_datos(consulta){
$.ajax({
url: 'php/buscar.php' ,
type: 'POST' ,
dataType: 'html',
data: {consulta: consulta},
})
.done(function(respuesta){
//$("#datos").html(respuesta);
document.getElementById("datos").innerHTML=respuesta+"<h3>OK INNER</h3>";
})
.fail(function(){
console.log("error");
});
}
$(document).on('keyup','#caja_busqueda', function(){
var valor = $(this).val();
if (valor != "") {
buscar_datos(valor);
}else{
buscar_datos();
}
});
The operation when I burn the data in the html should be that it opens a dialog box that enters the product when you click on buy. To prove it you can try it in the next papina. link on that page I am implementing, eye that is the page where the data inserted in the html are.
The page where I get the data from the database shows the products but that dialog is not shown to add the product to the cart as in the page where the products are in the inserted html. You can try the correct operation on this page. link
Greetings I hope you can help me