Untitled
unknown
plain_text
a year ago
37 kB
3
Indexable
Never
<?php
include 'components/connect.php';
session_start();
$user_id = $_SESSION['user_id'];
if(!isset($user_id)){
header('location:user_login.php');
}
if (isset($_SESSION['user_id'])) {
$user_id = $_SESSION['user_id'];
} else {
$user_id = '';
};
if (isset($_POST['update_qty'])) {
$cart_id = $_POST['pid'];
$qty = $_POST['qty'];
$qty = filter_var($qty, FILTER_SANITIZE_STRING);
$update_qty = $conn->prepare("UPDATE `cart` SET quantity = ? WHERE id = ?");
$update_qty->execute([$qty, $pid]);
$message[] = 'cart quantity updated';
}
$products_query = "SELECT * FROM products";
$result = mysqli_query($link, $products_query);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buy Now</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> -->
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.message-box {
border: 1px solid green;
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 20px;
}
.form-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 80%;
/* Adjust as needed */
margin: auto;
border: 2px solid #ffffff;
/* Add a white border to the form container */
padding: 20px;
border-radius: 5px;
}
.contact form {
padding: 2rem;
text-align: center;
background-color: var(--white);
box-shadow: var(--box-shadow);
border-radius: 0.5rem;
border: var(--border);
max-width: 99rem;
margin: 0 auto;
}
.contact form .box {
margin: 9rem 0;
width: 100%;
background-color: var(--light-bg);
padding: 1rem;
font-size: 1.8rem;
height: 100%;
color: var(--black);
}
.section-heading {
text-align: center;
color: #fff;
/* Change this to the color you prefer */
}
.textarea,
.upload-label {
height: 300px;
/* Adjust this value to control the height of the textarea and upload box */
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.file-input {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.form-label {
color: white;
font-size: 16px;
width: 120px;
text-align: center;
font-weight: bold;
}
.form-input {
width: 100%;
border: 1px solid white;
border-radius: 0.5rem;
background-color: var(--white);
box-shadow: var(--box-shadow);
padding: 0.8rem;
font-size: 14px;
color: var(--black);
}
.file-message {
font-size: small;
font-weight: 300;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.choose-file-button {
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
padding: 8px 15px;
margin-right: 10px;
font-size: 12px;
text-transform: uppercase;
}
.upload-label {
cursor: pointer;
}
.upload-icon {
font-size: 5rem;
}
#product option {
background-color: #2e2c39;
color: white;
font-size: 18px;
}
#product,
#country {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #2e2c39;
color: white;
text-align: center;
width: 27%;
}
input[type="file"] {
padding: 10px 20px;
}
.buy {
width: 80%;
/* Adjust the width of the buy section */
margin: auto;
border: 2px solid #ffffff;
/* Add a white border to the buy section */
padding: 20px;
border-radius: 5px;
}
.product-name {
font-size: 24px;
font-weight: bold;
color: #000;
}
.product-details {
font-size: 18px;
color: #666;
}
.buy .box-container .form-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.form-label {
width: 120px;
text-align: center;
font-weight: bold;
}
.form-input {
flex: 1;
max-width: 250px;
text-align: center;
}
.buy .box-container {
display: flex;
}
.file-drop-area {
position: relative;
display: flex;
align-items: center;
width: 450px;
max-width: 100%;
padding: 25px;
border: 1px dashed rgba(255, 255, 255, 0.4);
border-radius: 3px;
transition: 0.2s;
height : 200px;
}
.file-drop-area .file-message,
.file-drop-area .choose-file-button {
color: white;
}
.img-preview {
max-width: 100%;
max-height: 100%;
}
.text-below-input {
font-size: 12px;
color: var(--black); /* Change this color as needed */
margin-top: 5px; /* Adjust margin as needed */
}
.product-name {
display: flex;
flex-direction: column;
align-items: center; /* Center horizontally */
justify-content: center; /* Center vertically */
text-align: center; /* Center text horizontally */
height: 100%; /* Ensure the container takes up the full height */
}
.product-name .name {
font-size: 35px;
}
.product-name .price {
color: #e74c3c;
margin-top: 10px; /* Add a little space between the name and price */
}
.product-name .details {
font-size: x-small;
margin-top: 10px; /* Add space between price and details */
}
@keyframes tonext {
75% {
left: 0;
}
95% {
left: 100%;
}
98% {
left: 100%;
}
99% {
left: 0;
}
}
@keyframes tostart {
75% {
left: 0;
}
95% {
left: -300%;
}
98% {
left: -300%;
}
99% {
left: 0;
}
}
@keyframes snap {
96% {
scroll-snap-align: center;
}
97% {
scroll-snap-align: none;
}
99% {
scroll-snap-align: none;
}
100% {
scroll-snap-align: center;
}
}
.carousel {
position: relative;
padding-top: 75%;
filter: drop-shadow(0 0 10px #0003);
perspective: 100px;
}
.carousel__viewport {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow-x: scroll;
counter-reset: item;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.carousel__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
background-color: #f99;
counter-increment: item;
}
.carousel__slide:nth-child(even) {
background-color: #99f;
}
.carousel__slide:before {
content: counter(item);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-40%,70px);
color: #fff;
font-size: 2em;
}
.carousel__snapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
scroll-snap-align: center;
}
@media (hover: hover) {
.carousel__snapper {
animation-name: tonext, snap;
animation-timing-function: ease;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.carousel__slide:last-child .carousel__snapper {
animation-name: tostart, snap;
}
}
@media (prefers-reduced-motion: reduce) {
.carousel__snapper {
animation-name: none;
}
}
.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
animation-name: none;
}
.carousel__navigation {
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
display: inline-block;
}
.carousel__navigation-button {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #333;
background-clip: content-box;
border: 0.25rem solid transparent;
border-radius: 50%;
font-size: 0;
transition: transform 0.1s;
}
.carousel::before,
.carousel::after,
.carousel__prev,
.carousel__next {
position: absolute;
top: 0;
margin-top: 37.5%;
width: 4rem;
height: 4rem;
transform: translateY(-50%);
border-radius: 50%;
font-size: 0;
outline: 0;
}
.carousel::before,
.carousel__prev {
left: -1rem;
}
.carousel::after,
.carousel__next {
right: -1rem;
}
.carousel::before,
.carousel::after {
content: '';
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
}
.carousel::before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
}
.carousel::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<img id="modalImg" src="" alt="">
</div>
</div>
<?php include 'components/user_header.php'; ?>
<section class="buy">
<img src="images/buy_now.jpg" style="width: 100%; height: auto; display: block; margin: 0 auto;">
<h1 class="heading">Proceed to Buy</h1>
<div class="select-product" style="display: flex; justify-content: center; align-items: center;">
<label for="country" style="font-size: 18px; color:white;">Select Product: </label>
<?php
// Check if the pid key exists in the POST data
if (isset($_POST['pid'])) {
$selected_pid = $_POST['pid'];
} else {
$selected_pid = null; // Set a default value if pid is not set
}
?>
<select name="product" id="product" class="box">
<?php
// Check if the result has any rows
if (mysqli_num_rows($result) > 0) {
// Fetch all rows
while ($row = mysqli_fetch_assoc($result)) {
// Check if this option should be pre-selected
$selected = $row['id'] == $selected_pid ? 'selected' : '';
echo "<option value=" . $row['id'] . " " . $selected . ">" . $row['name'] . "</option>";
}
}
?>
</select>
</div><br>
<div class="box-container">
<form action="cartbackend.php" method="post" class="box" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<input type="hidden" name="pid" class="id" value="<?= isset($_REQUEST['pid']) ? $_REQUEST['pid'] : '-'; ?>">
<input type="hidden" name="image" class="image" value="<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : '-'; ?>">
<!-- Display the image -->
<h1>CSS-only Carousel</h1>
<p>This carousel is created with HTML and CSS only.</p>
<section class="carousel" aria-label="Gallery">
<ol class="carousel__viewport">
<li id="carousel__slide1"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper">
<a href="#carousel__slide4"
class="carousel__prev">Go to last slide</a>
<a href="#carousel__slide2"
class="carousel__next">Go to next slide</a>
</div>
</li>
<li id="carousel__slide2"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide1"
class="carousel__prev">Go to previous slide</a>
<a href="#carousel__slide3"
class="carousel__next">Go to next slide</a>
</li>
<li id="carousel__slide3"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide2"
class="carousel__prev">Go to previous slide</a>
<a href="#carousel__slide4"
class="carousel__next">Go to next slide</a>
</li>
<li id="carousel__slide4"
tabindex="0"
class="carousel__slide">
<div class="carousel__snapper"></div>
<a href="#carousel__slide3"
class="carousel__prev">Go to previous slide</a>
<a href="#carousel__slide1"
class="carousel__next">Go to first slide</a>
</li>
</ol>
<aside class="carousel__navigation">
<ol class="carousel__navigation-list">
<li class="carousel__navigation-item">
<a href="#carousel__slide1"
class="carousel__navigation-button">Go to slide 1</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide2"
class="carousel__navigation-button">Go to slide 2</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide3"
class="carousel__navigation-button">Go to slide 3</a>
</li>
<li class="carousel__navigation-item">
<a href="#carousel__slide4"
class="carousel__navigation-button">Go to slide 4</a>
</li>
</ol>
</aside>
</section>
<div class="slider">
<div class="slides">
<div class="carousel-item active">
<img id="myImage" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
</div>
<div class="carousel-item">
<img id="myImage1" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
</div>
<div class="carousel-item">
<img id="myImage2" src="uploaded_img/<?= isset($_REQUEST['image']) ? $_REQUEST['image'] : 'photo_2023-06-23_14-42-42.jpg'; ?>" alt="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="product-name text-center mt-3">
<input type="hidden" style="text-align: center;" name="name" class="name" value="<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>">
<input type="hidden" name="price" class="price" value="<?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '0'; ?>">
<div class="name nametext" style="font-size: 35px;">
<?= isset($_REQUEST['name']) ? $_REQUEST['name'] : '-'; ?>
</div>
<div class="price" style="color: #e74c3c;">
<?= isset($_REQUEST['price']) ? $_REQUEST['price'] : '-'; ?>
</div><hr>
<div class="details" style="font-size: x-small; color:#fff; text-align:left;">
<?= isset($_REQUEST['details']) ? nl2br($_REQUEST['details']) : '-'; ?>
</div>
<input type="hidden" name="details" class="name" value="<?= isset($_REQUEST['details']) ? $_REQUEST['details'] : '-'; ?>">
<div class="flex">
</div>
</div><br>
</div>
</div><hr>
<div class="buyform" style="margin-left: 6%; margin-top:15px;">
<div class="form-row">
<span class="form-label">First Name:</span>
<input type="text" class="form-input" name="firstName" required="required" pattern="[A-Za-z]+" title="Please enter only letters.">
<span class="form-label">Middle Name:</span>
<input type="text" class="form-input" name="middleName" required="required" pattern="[A-Za-z]+" title="Please enter only letters.">
</div>
<div class="form-row">
<span class="form-label">Last Name:</span>
<input type="text" class="form-input" name="lastName" required="required" pattern="[A-Za-z]+" title="Please enter only letters.">
<span class="form-label">Gender:</span>
<select class="form-input" name="gender" required="required">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-row">
<span class="form-label">Eye Color:</span>
<select class="form-input" name="eyeColor" required="required">
<option value="BLU">Blue</option>
<option value="BRN">Brown</option>
<option value="GRN">Green</option>
<option value="HAZ">Hazel</option>
<option value="BLK">Black</option>
<option value="GRY">Gray</option>
<option value="SDY">Sandy</option>
<option value="MUL">Multicolor</option>
</select>
<span class="form-label">Hair Color:</span>
<select class="form-input" name="hairColor" required="required">
<option value="BLN">Blonde</option>
<option value="BRN">Brown</option>
<option value="BLK">Black</option>
<option value="GRY">Gray</option>
<option value="BLD">Bald</option>
<option value="RED">Red</option>
</select>
</div>
<div class="form-row">
<span class="form-label">Date of Birth:</span>
<input type="date" class="form-input" name="dob" required="required" min="1950-01-01">
<span class="form-label">Height:</span>
<input type="text" placeholder="Mention centimetres or ft." class="form-input" name="height" required="required">
</div>
<div class="form-row">
<span class="form-label">Weight:</span>
<input type="text" placeholder="Mention KG or lbs." class="form-input" name="weight" required="required">
<span class="form-label">Street Address:</span>
<input type="text" class="form-input" name="streetAddress">
</div>
<div class="form-row">
<span class="form-label">City for ID:</span>
<input type="text" class="form-input" name="cityForID">
<span class="form-label">Zip Code for ID:</span>
<input type="text" class="form-input" name="zipCodeForID">
</div>
<div class="form-row">
<span class="form-label">ISS Date:</span>
<input type="date" class="form-input" name="issDate">
<span class="form-label">Restrictions:</span>
<select class="form-input" name="restrictions">
<option value="none">None</option>
<option value="limited">Limited</option>
<option value="full">Full</option>
</select>
</div>
<div class="form-row">
<span class="form-label">Organ Donor:</span>
<select class="form-input" name="organDonor">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<input type="hidden" class="quanty" name="country" value="0">
<div class="country-select">
<label for="country" style="font-size: 18px; color:white;">Duplicate Copy: </label>
<select name="coutry" id="country">
<option value="0">Select</option>
<option value="1">1x</option>
<option value="2">2x</option>
<option value="3">3x</option>
</select>
<p style="color:#fff; margin-left:20%">By Default You Will Receive 2 copies.</p>
</div><br>
<label for="#" style="font-size: 18px; color:white;">Upload Images </label>
<div class="form-row">
<div class="file-drop-area">
<span class="choose-file-button">Choose files</span>
<span class="file-message">or drag and drop files here</span>
<input class="file-input" type="file" accept="image/*" multiple name="file1" onchange="readURL(this, 'preview1')" required>
<img id="preview1" class="img-preview" src="#" style = "display:none;">
</div>
<div class="file-drop-area">
<span class="choose-file-button">Choose files</span>
<span class="file-message">or drag and drop files here</span>
<input class="file-input" type="file" accept="image/*" multiple name="file2" onchange="readURL(this, 'preview2')" required>
<img id="preview2" class="img-preview" src="#" style = "display:none;">
</div>
</div>
<button type="submit" id="proceedToCheckoutBtn" class="btn" name="submitaddtocart">Add To Cart</button>
</form>
</div>
</section>
<?php include 'components/footer.php'; ?>
<script src="js/script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImg");
// Loop through all carousel images
var imgs = document.querySelectorAll(".carousel-item img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', function() {
modal.style.display = "flex";
modalImg.src = this.src;
modalImg.alt = this.alt;
});
}
// Close the modal when the background is clicked
modal.addEventListener('click', function(event) {
if (event.target === modal) {
modal.style.display = "none";
}
});
});
</script>
</body>
</html>
<?php
require 'vendor/autoload.php';
if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['name']) && isset($_POST['email'])) {
$name = $_POST['name'];
$email = $_POST['email'];
// Process image1 upload
$targetDirectoryImg1 = "user_images/";
$targetImage1File = $targetDirectoryImg1 . basename($_FILES["image1"]["name"]);
$uploadImage1Ok = 1;
$image1FileType = strtolower(pathinfo($targetImage1File, PATHINFO_EXTENSION));
// Check if the uploaded file is a valid image (you can adjust the allowed file types as needed)
if ($image1FileType !== "jpg" && $image1FileType !== "jpeg" && $image1FileType !== "png") {
echo "Only JPG, JPEG, and PNG images are allowed for image1.";
$uploadImage1Ok = 0;
}
// Move the uploaded image1 file to the target directory
if ($uploadImage1Ok === 1 && move_uploaded_file($_FILES["image1"]["tmp_name"], $targetImage1File)) {
// Insert the record into the database with the image1 file path
$image1_path = $targetImage1File;
} else {
echo "Error uploading your image1.";
exit;
}
// Process image2 upload
$targetDirectoryImg2 = "user_images/";
$targetImage2File = $targetDirectoryImg2 . basename($_FILES["image2"]["name"]);
$uploadImage2Ok = 1;
$image2FileType = strtolower(pathinfo($targetImage2File, PATHINFO_EXTENSION));
// Check if the uploaded file is a valid image (you can adjust the allowed file types as needed)
if ($image2FileType !== "jpg" && $image2FileType !== "jpeg" && $image2FileType !== "png") {
echo "Only JPG, JPEG, and PNG images are allowed for image2.";
$uploadImage2Ok = 0;
}
// Move the uploaded image2 file to the target directory
if ($uploadImage2Ok === 1 && move_uploaded_file($_FILES["image2"]["tmp_name"], $targetImage2File)) {
// Insert the record into the database with the image2 file path
$image2_path = $targetImage2File;
} else {
echo "Error uploading your image2.";
exit;
}
}
?>
<script>
// dropdown
$(document).ready(function() {
$("#product").change(function() {
var productid = $(this).val();
$.ajax({
url: "product_fetch_buy_now.php", // Replace with your API URL
type: "POST",
data: {
'id': productid,
'onchange': "onchange"
},
success: function(data) {
// Handle the response data
var parsedData = JSON.parse(data);
// console.log(parsedData.details);
var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, ' ');
$(".id").val(parsedData.id);
$(".name").val(parsedData.name);
$(".image").val(parsedData.image_01);
$(".price").val(parsedData.price);
$(".price").html('Total price: $' + parsedData.price + '/-');
$(".nametext").text(parsedData.name);
$(".showedprice").text(parsedData.price);
$(".details").html('<strong>Description:</strong> <br>'+processedResponse); // Display the product details
var newImageSrc = "uploaded_img/" + parsedData.image_01;
var newImageSrc2 = "uploaded_img/" + parsedData.image_02;
var newImageSrc3 = "uploaded_img/" + parsedData.image_03;
$("#myImage").attr("src", newImageSrc);
$("#myImage").attr("alt", parsedData.name);
$("#myImage1").attr("src", newImageSrc2);
$("#myImage1").attr("alt", parsedData.name);
$("#myImage2").attr("src", newImageSrc3);
$("#myImage2").attr("alt", parsedData.name);
// $("#result").html("<p>" + JSON.stringify(data) + "</p>");
},
error: function(xhr, status, error) {
}
});
});
// Also fetch and display the details when the page is first loaded
$(document).ready(function() {
var productid = $("#product").val();
$.ajax({
url: "product_fetch_buy_now.php", // Replace with your API URL
type: "POST",
data: {
'id': productid,
'onchange': "onchange"
},
success: function(data) {
// Handle the response data
var parsedData = JSON.parse(data);
// console.log(parsedData.details);
var processedResponse = parsedData.details.replace(/\n/g, '<br>').replace(/ /g, ' ');
$(".id").val(parsedData.id);
$(".name").val(parsedData.name);
$(".image").val(parsedData.image_01);
$(".price").val(parsedData.price);
$(".price").html('Total price: $' + parsedData.price + '/-');
$(".nametext").text(parsedData.name);
$(".showedprice").text(parsedData.price);
$(".details").html('<strong>Description: </strong><br>'+processedResponse); // Display the product details
var newImageSrc = "uploaded_img/" + parsedData.image_01;
var newImageSrc2 = "uploaded_img/" + parsedData.image_02;
var newImageSrc3 = "uploaded_img/" + parsedData.image_03;
$("#myImage").attr("src", newImageSrc);
$("#myImage").attr("alt", parsedData.name);
$("#myImage1").attr("src", newImageSrc2);
$("#myImage1").attr("alt", parsedData.name);
$("#myImage2").attr("src", newImageSrc3);
$("#myImage2").attr("alt", parsedData.name);
// $("#result").html("<p>" + JSON.stringify(data) + "</p>");
},
error: function(xhr, status, error) {
}
});
});
});
</script>
<script>
$(document).on('change', '.file-input', function() {
var filesCount = $(this)[0].files.length;
var textbox = $(this).prev();
if (filesCount === 1) {
var fileName = $(this).val().split('\\').pop();
textbox.text(fileName);
} else {
textbox.text(filesCount + ' files selected');
}
});
</script>
<script>
// JavaScript to set and get the selected option using local storage
var selectElement = document.getElementById('product');
selectElement.addEventListener('change', function() {
var selectedValue = selectElement.value;
localStorage.setItem('selectedProduct', selectedValue);
});
var storedSelectedValue = localStorage.getItem('selectedProduct');
if (storedSelectedValue !== null) {
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value === storedSelectedValue) {
selectElement.options[i].selected = true;
break;
}
}
}
</script>
<!-- js for image preview -->
<script>
function readURL(input, previewId) {
var previewElement = document.getElementById(previewId);
if(input.files){
previewElement.style.display = "block";
}else{
previewElement.style.display = "none";
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
previewElement.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
} else {
// previewElement.src = "images/noimage.png";
}
}
$('#country').change(function(){
var polucarbostate = ['TEXAS','GEORGIA','COLORADO','MARYLAND','OHIO','WISCONSIN','PENNSYLVANIA','INDIANA','NEW-YORK','UNITED-KINGDOM','ONTARIO'];
var countryarray = $(".name").val().split(" ");
console.log(countryarray);
var countryupper = countryarray[0].toUpperCase();
var price = 40;
var price2 = 60;
var totlamt = 0;
if($(this).val()==1){
if(polucarbostate.includes(countryupper)){
totlamt = price2 * 1;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}else{
totlamt = price * 1;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}
}else if($(this).val()==2){
if(polucarbostate.includes(countryupper)){
totlamt = price2 * 2;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}else{
totlamt = price * 2;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}
}else if($(this).val()==3){
if(polucarbostate.includes(countryupper)){
totlamt = price2 * 4;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}else{
totlamt = price * 4;
Swal.fire("AMOUNT FOR DUPLICATE COPY ", totlamt +" will be added", "success");
$('.quanty').val(totlamt);
}
}else{
$('.quanty').val(totlamt);
}
});
</script>
<script>
// Add your JavaScript code here
const slides = document.querySelector('.slides');
const prevButton = document.querySelector('.carousel-control-prev');
const nextButton = document.querySelector('.carousel-control-next');
let currentIndex = 0;
nextButton.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % slides.children.length;
updateSlidePosition();
});
prevButton.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + slides.children.length) % slides.children.length;
updateSlidePosition();
});
function updateSlidePosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
</script>