I've been trying create own e commerce from scratch. Here I try to implement the product pages through url queries.
<html>
<head>
<link rel="stylesheet" href="CemaraMotor.css">
<title>Cemara Auto Motor</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="header">
<div class="header-left">
<a href="" class="logo">Cemara <em>Auto Motor</em></a>
</div>
<div class="header-left">
<input type="text" id="search" placeholder="Search ..." onkeyup="search()">
</div>
<div class="header-right">
<a href="">Home</a>
<a href="">Products</a>
<a href="">About Us</a>
<a href="">Contact</a>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="assets/a.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="assets/b.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="assets/c.jpg">
<div class="text">Caption Three</div>
</div>
<div class="inside-box">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>
<section>
<?php
$wer = $_GET['id'];
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "database";
$x =0;
$name= array();
$price= array();
$id= array();
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT name, price, id FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$name[$x]=$row["name"];
$price[$x]=$row["price"];
$id[$x]=$row["id"];
$x=$x+1;
}
} else {
echo "0 results";
}
$q=0+(($wer-1)*18);
for($x=0;$x<=2;$x++){
echo '<div class="product-line">
<div class="product-row">
<div class="row" id"row-box">
';
for($v=0;$v<=5;$v++){
echo '<div class="col-md-5">
<div class="spacing">
<div class="colomn-box" id="productbox">
<div class="colomn-picture">
<img id="image1"src="assets/new.png">
</div>
<div class="word-text" id="bar1">
<a id="name1">'.$name[$q].'</a>
<a id="price1">'.$price[$q].'</a>
</div>
</div>
</div>
</div>';
$q=$q+1;
}
}
$conn->close();
?>
</section>
<section>
<div class="container">
<div class="row">
<div class="moves">
<div class="spacing click1" onclick="numberpage()">
<i class="arrow left centering" ></i>
</div>
<div class="spacing " id="click1" onclick=""><a id="link1" onclick="link1()">1</a></div>
<div class="spacing" id="click2" onclick=""><a id="link2" onclick="link2()">2</a></div>
<div class="spacing" id="click3"onclick="" ><a id="link3" onclick="link3()">3</a></div>
<div class="spacing click4" onclick="jumpage()">...</div>
<div class="spacing click5" onclick="">
<i class="arrow right centering" onclick="numberpages()"></i>
</div>
</div>
</div>
</div>
</section>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function numberpages(q) {
var number1=document.getElementById("link1").innerHTML;
var number2=document.getElementById("link2").innerHTML;
var number3=document.getElementById("link3").innerHTML;
var y= Number(document.getElementById("link1").innerHTML);
document.getElementById("link1").innerHTML=y+1;
document.getElementById("link2").innerHTML=y+2;
document.getElementById("link3").innerHTML=y+3;
}
function numberpage(q) {
var y= Number(document.getElementById("link1").innerHTML);
if (y>1) {
document.getElementById("link1").innerHTML=y-1;
document.getElementById("link2").innerHTML=y;
document.getElementById("link3").innerHTML=y+1;
}
}
function jumpage(args) {
var y= Number(document.getElementById("link1").innerHTML);
document.getElementById("link1").innerHTML=y+3;
document.getElementById("link2").innerHTML=y+4;
document.getElementById("link3").innerHTML=y+5;
}
function search(){
var filter,input,bar,side,a;
input=document.getElementById("search");
filter=input.value.toUpperCase();
for (let i=0 ; i<=25; i++) {
bar=document.getElementsByClassName("word-text")[i];
side=bar.getElementsByTagName("a")[0];
if(side.innerHTML.toUpperCase().indexOf(filter)>-1){
document.getElementsByClassName("spacing")[i].style.display="";
}
else{
document.getElementsByClassName("spacing")[i].style.display="none";
}
}
}
function link1(){
var x=document.getElementById("link1").innerHTML;
document.getElementById("link1").href="CemaraMotor.php?id="+x;
}
function link2(){
var x=document.getElementById("link2").innerHTML;
document.getElementById("link2").href="CemaraMotor.php?id="+x;
}
function link3(){
var x=document.getElementById("link3").innerHTML;
document.getElementById("link3").href="CemaraMotor.php?id="+x;
}
</script>
</body>
</html>Looks like the url queries I create using javascript instead of php, does it will impact on other code or is it okay? if someone have a better solution please provide. I have also try to using search filter does anyone have a suggestion for the implementation?
Aucun commentaire:
Enregistrer un commentaire