File: /var/www/html/www.winghung.com/demo/product.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
require_once('../wp-load.php');
session_start();
date_default_timezone_set("Asia/Hong_Kong");
global $wpdb, $sitepress;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wing Hung Printing Solution</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
<script src="https://unpkg.com/cropperjs"></script>
<style>
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1320px;
}
}
.preview_section {
border: none;
}
.container {
margin-top: 20px;
}
.card {
background-color: rgba(0, 0, 0, 0.01);
margin-bottom: 20px;
border: none;
}
.card-header {
background-color: #0067b1;
color: #ffffff;
}
.card-title {
margin-bottom: 0rem !important;
}
.col-form-label {
font-size: 16px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.image_area {
position: relative;
}
.modal-body {
padding: 0px !important;
}
/*
img {
display: block;
max-width: 100%;
}
*/
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg {
max-width: 1000px !important;
}
.image_area {
position: relative;
}
img {
/*display: block;*/
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg {
max-width: 1000px !important;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
height: 0;
transition: .5s ease;
width: 100%;
}
.image_area:hover .overlay {
height: 50%;
cursor: pointer;
}
.text {
color: #333;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div style="font-size:1cm; text-align: center;">
<h2 face="verdana" style="margin: 0px auto; font-weight: 700; padding: 20px">Wing Hung Printing Solution <img src='asset/logo.png' height='60'></h2>
</div>
<div class="container">
<div class="row mt-3">
<?php
$omit_height = in_array($_GET['cat'], [3, 4, 5]) ? "1" : "0";
$arr_product = array();
$productResult = $wpdb->get_results("SELECT * FROM `custom_product` WHERE category_id = '" . $_GET['cat'] . "' AND status = '1'");
foreach ($productResult as $productObj) {
$arr_product[$productObj->id] = $productObj->path;
?>
<div class="col-md-<?php echo count($productResult) == 1 ? 6 : (count($productResult) > 2 ? 4 : 6); ?> col-sm-12 col-xs-12">
<div class="card" style="width: 100%;">
<div class="card-header text-center">
<h4 class="card-title"><?php echo $productObj->name; ?></h5>
</div>
<div class="card-body">
<iframe class='preview_section' id='preview_<?php echo $productObj->id; ?>' src="<?php echo $productObj->path; ?>&length=<?php echo $productObj->length_cm; ?>&width=<?php echo $productObj->width_cm; ?>&height=<?php echo $productObj->height_cm; ?>" title="<?php echo $productObj->name; ?>" width='100%' height='<?php echo count($productResult) == 1 ? 400 : (count($productResult) > 2 ? 300 : 400); ?>'></iframe>
<div class='price_area text-center' id='price_<?php echo $productObj->id; ?>'></div>
<hr>
<div class="mb-3 row">
<label for="length" class="col-sm-4 col-form-label">Length (cm)*</label>
<div class="col-sm-8">
<input type="number" class="form-control param_length" id="length_<?php echo $productObj->id; ?>" value="<?php echo $productObj->length_cm; ?>" min="1" max="100" step="1">
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Width (cm) *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_width" id="width_<?php echo $productObj->id; ?>" value="<?php echo $productObj->width_cm; ?>" min="1" max="100" step="1">
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Depth (cm) *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_height" id="height_<?php echo $productObj->id; ?>" value="<?php if ($productObj->height_cm > 0) echo $productObj->height_cm; ?>" min="1" max="100" step="1" <?php if ($productObj->height_cm == 0) echo "readonly"; ?>>
</div>
</div>
<div class="mb-3 row">
<label for="image" class="col-sm-4 col-form-label">Customized Image</label>
<div class="col-sm-8">
<input type="file" name="image" class="form-control image upload_image" id="image_<?php echo $productObj->id; ?>" accept="image/*">
<input type="hidden" name="hash" id="hash_<?php echo $productObj->id; ?>" value="" />
</div>
</div>
<div class="mb-3 row">
<label for="quantity" class="col-sm-4 col-form-label">Qty. <small>(MOQ.:100)</small> *</label>
<div class="col-sm-8">
<input type="number" class="form-control param_qty" id="qty_<?php echo $productObj->id; ?>" value="100" min="100" max="100000" step="1">
</div>
</div>
<div class="mb-3 row">
<label for="paper" class="col-sm-4 col-form-label">Paper Material *</label>
<div class="col-sm-8">
<select id='paper_<?php echo $productObj->id; ?>' name='paper' class="form-control param_paper" aria-label="Select paper material">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_material_paper` WHERE status = '1'");
foreach ($result as $paper) {
echo "<option value='" . $paper->id . "'>" . $paper->name . "</option>";
}
?>
</select>
</div>
</div>
<div class="mb-3 row">
<label for="color" class="col-sm-4 col-form-label">Printing Colour *</label>
<div class="col-sm-8">
<select id='color_<?php echo $productObj->id; ?>' name='color' class="form-control param_color" aria-label="Select printing color">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_printing_color` WHERE status = '1'");
foreach ($result as $color) {
echo "<option value='" . $color->id . "'>" . $color->name . "</option>";
}
?>
</select>
</div>
</div>
<hr>
<div class="mb-3 row">
<label for="unitprice" class="col-sm-4 col-form-label">Unit Price (HKD)</label>
<label for="unitprice" class="col-sm-8 col-form-label" id="displayunitprice_<?php echo $productObj->id; ?>">
<p class='text-danger'>Enter All Required Information</p>
</label>
<input type="hidden" id="unitprice_<?php echo $productObj->id; ?>" readonly>
<!--<div class="col-sm-8">
<input type="text" class="form-control param_unitprice" id="unitprice_<?php echo $productObj->id; ?>" readonly>
</div>-->
</div>
<div class="mb-3 row">
<label for="finishing" class="col-sm-4 col-form-label">Finishing</label>
<div class="col-sm-8">
<div class="form-check">
<?php
$result = $wpdb->get_results("SELECT * FROM `custom_finishing_option` WHERE status = '1'");
foreach ($result as $finishing) {
?>
<input class="form-check-input finishing_<?php echo $productObj->id; ?>_<?php echo $finishing->category; ?>" type="checkbox" id="finishing_<?php echo $productObj->id; ?>_<?php echo $finishing->id; ?>" name="finishing" value="<?php echo $finishing->price_factor; ?>">
<label class="form-check-label"><?php echo $finishing->name; ?></label><br>
<?php
}
?>
</div>
</div>
</div>
<div class="mb-3 row">
<label for="totalprice" class="col-sm-4 col-form-label">Total Price (HKD)</label>
<label for="totalprice" class="col-sm-8 col-form-label" id="displaytotalprice_<?php echo $productObj->id; ?>">
<p class='text-danger'>Enter All Required Information</p>
</label>
<input type="hidden" id="totalprice_<?php echo $productObj->id; ?>" readonly>
</div>
<div class="mb-3 row">
<label for="leadtime" class="col-sm-4 col-form-label">Est. Lead Time</label>
<label for="leadtime" class="col-sm-8 col-form-label">20 Days</label>
</div>
<div class="mb-3 row">
<button id='placeorder_<?php echo $productObj->id; ?>' type='button' class='btn btn-lg btn-dark btn-block'>Place Order</button>
</div>
<div class="mb-3 row">
<label for="contact" class="col-sm-12 col-form-label"><small class='text-primary'>To further customize your product, please contact sales@winghung.com</small></label>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<div class="row" style='margin:20px 0px;'>
<div class="col-md-4 col-sm-12 col-xs-12">
<button type="button" class="btn btn-outline-dark" onclick="window.location.href='index.php'">Back</button>
</div>
</div>
<div class="row">
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop Image Before Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img src="" id="sample_image" />
</div>
<div class="col-md-4">
<div class="preview"></div>
<input type="hidden" name="element_id" id="element_id" value=""/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary crop" id="">Crop</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
var products = <?php echo json_encode($arr_product); ?>;
//console.log(products);
$(document).ready(function() {
var $modal = $('#modal');
var image = document.getElementById('sample_image');
var cropper;
$('.upload_image').change(function(event) {
var ids = $(this).attr("id").split("_")[1];
var files = event.target.files;
var done = function(url) {
image.src = url;
$(".modal-body #element_id").val(ids);
$(".modal-footer .crop").attr("id", "crop_" + ids);
$modal.modal('show');
};
if (files && files.length > 0) {
reader = new FileReader();
reader.onload = function(event) {
done(reader.result);
};
reader.readAsDataURL(files[0]);
}
});
$modal.on('shown.bs.modal', function() {
var ids = $(".modal-body #element_id").val();
cropper = new Cropper(image, {
aspectRatio: $("#length_" + ids).val() / $("#width_" + ids).val(),
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function() {
cropper.destroy();
cropper = null;
});
$(".crop").click(function() {
var ids = $(this).attr("id").split("_")[1];
canvas = cropper.getCroppedCanvas({
width: 200,
height: 200,
});
canvas.toBlob(function(blob) {
//url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
//console.log(reader);
var base64data = reader.result;
$.ajax({
url: "file_upload.php",
method: "POST",
data: {
image: base64data
},
success: function(data) {
$modal.modal('hide');
page = products[ids];
$("#hash_" + ids).val(data);
$("#preview_" + ids).attr('src', page + "&hash=" + data + "&length=" + $("#length_" + ids).val() + "&width=" + $("#width_" + ids).val() + "&height=" + $("#height_" + ids).val());
//$('#uploaded_image').attr('src', data);
}
});
}
});
});
});
$('input[type=number]').on('mousewheel', function(e) {
$(e.target).blur();
});
function calculate_price(id, update = true) {
var bypass_height = '<?php echo $omit_height; ?>';
if ($("#length_" + id).val().length <= 0 || $("#length_" + id).val() == 0) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if ($("#width_" + id).val().length <= 0 || $("#width_" + id).val() == 0) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if (bypass_height == 0 && ($("#height_" + id).val().length <= 0 || $("#height_" + id).val() == 0)) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if ($("#qty_" + id).val().length <= 0) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if ($("#qty_" + id).val() < 100) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if ($("#paper_" + id).val().length <= 0) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else if ($("#color_" + id).val().length <= 0) {
$("#displayunitprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Enter All Required Information</p>");
$("#placeorder_" + id).prop('disabled', true);
} else {
if (update == true) {
page = products[id];
$('#preview_' + id).attr('src', page + "&hash=" + $("#hash_" + id).val() + "&length=" + $("#length_" + id).val() + "&width=" + $("#width_" + id).val() + "&height=" + $("#height_" + id).val());
}
var dataString = "section=calculate_price_by_product_type&id=" + id + "&length=" + $("#length_" + id).val() + "&width=" + $("#width_" + id).val() + "&height=" + $("#height_" + id).val() + "&qty=" + $("#qty_" + id).val() + "&paper=" + $("#paper_" + id).val() + "&color=" + $("#color_" + id).val();
//console.log(dataString);
$.ajax({
type: "POST",
url: "ajax_data.php",
data: dataString,
cache: false,
success: function(data) {
var json = JSON.parse(data);
if (json.condition == 'success') {
$("#displayunitprice_" + id).html("<h3>" + json.display_unit_price + "</h3>");
$("#displaytotalprice_" + id).html("<h3 class='text-primary'>" + json.display_price + "</h3>");
$("#totalprice_" + id).val(json.price);
$("#unitprice_" + id).val(json.unit_price);
// $("#placeorder_"+id).css('display','block');
$("#placeorder_" + id).prop('disabled', false);
calculate_finishing(id);
} else {
$("#displayunitprice_" + id).html("<p class='text-danger'>Product size out of range</p>");
$("#displaytotalprice_" + id).html("<p class='text-danger'>Product size out of range</p>");
$("#placeorder_" + id).prop('disabled', true);
}
},
beforeSend: function() {
$("#unitprice_" + id).html("<p class='text-danger'>Calculating...</p>");
$("#totalprice_" + id).html("<p class='text-danger'>Calculating...</p>");
},
});
}
}
$(".param_qty, .param_paper, .param_color").change(function() {
var id = $(this).attr('id').split("_")[1];
console.log("change");
calculate_price(id, false);
});
$(".param_length, .param_width, .param_height").keyup(function(e) {
var id = $(this).attr('id').split("_")[1];
calculate_price(id);
});
$(".param_qty").keyup(function(e) {
var id = $(this).attr('id').split("_")[1];
calculate_price(id, false);
});
$(".param_length, .param_width, .param_height").on('keypress', function(e) {
if (e.which == 13) {
var id = $(this).attr('id').split("_")[1];
calculate_price(id);
e.preventDefault();
}
});
$(".param_qty").on('keypress', function(e) {
if (e.which == 13) {
var id = $(this).attr('id').split("_")[1];
calculate_price(id, false);
e.preventDefault();
}
});
function check_finishing_action() {
$("input[name=finishing]").click(function() {
var product_id = $(this).attr('id').split("_")[1];
var class_name = $(this).attr('class').split(" ")[1];
$('.' + class_name).not(this).each(function() {
$(this).prop("checked", false);
});
calculate_finishing(product_id);
});
}
function calculate_finishing(product_id) {
var price_factor = 0;
//$(".finishing_"+product_id).each(function(){
$("input[id^='finishing_" + product_id + "']").each(function() {
if ($(this).is(':checked')) {
price_factor += parseFloat($(this).val());
}
})
var total_price = $("#totalprice_" + product_id).val();
var display_total_price = parseFloat(total_price) * (1 + price_factor);
var display_total_price = Math.ceil(display_total_price);
var display_unit_price = display_total_price / parseInt($("#qty_" + product_id).val());
$("#displaytotalprice_" + product_id).html("<h3 class='text-primary'>" + display_total_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</h3>");
$("#displayunitprice_" + product_id).html("<h3>" + display_unit_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "</h3>");
}
Object.keys(products).forEach(key => {
//console.log(key);
//console.log(products[key]);
calculate_price(key);
});
check_finishing_action();
</script>