first commit
This commit is contained in:
@@ -0,0 +1,87 @@
|
||||
$(document).ready(function() {
|
||||
let subscriptionData = localStorage.getItem("subscription-data") ? JSON.parse(localStorage.getItem("subscription-data")) : null;
|
||||
|
||||
|
||||
data.cores = subscriptionData.blockDetails.cores;
|
||||
data.ram = subscriptionData.blockDetails.ram;
|
||||
data.storage = subscriptionData.blockDetails.storage;
|
||||
data.transfer = subscriptionData.blockDetails.transfer;
|
||||
|
||||
blockValue = subscriptionData.currentBlock;
|
||||
|
||||
subscriptionType = subscriptionData.subscriptionType;
|
||||
|
||||
data.totalCost = subscriptionData.totalCost
|
||||
|
||||
toggleSwitch = subscriptionData.toggleSwitch
|
||||
|
||||
console.log(toggleSwitch)
|
||||
|
||||
|
||||
changeHtmlData();
|
||||
$("#auth-block-input").change(function(){
|
||||
|
||||
let blockInp=$(this).val();
|
||||
if(blockInp==0 || blockInp >= 100) return;
|
||||
|
||||
blockValue = blockInp;
|
||||
data.cores=4*blockInp;
|
||||
data.ram =4*blockInp;
|
||||
data.storage =512*blockInp;
|
||||
data.transfer = 8*blockInp;
|
||||
|
||||
changeHtmlData();
|
||||
|
||||
})
|
||||
});
|
||||
// toggleswitch
|
||||
// $('#order-summary-toggle-switch').change(function() {
|
||||
console.log('change event')
|
||||
console.log($('#order-summary-toggle-switch'))
|
||||
|
||||
$('#order-summary-toggle-switch').change(function() {
|
||||
blockValue = $("#auth-block-input").val();
|
||||
if(blockValue == 0) return;
|
||||
|
||||
if(this.checked) {
|
||||
subscriptionType = "yearly";
|
||||
}else{
|
||||
subscriptionType = "monthly";
|
||||
}
|
||||
|
||||
changeTotalCost();
|
||||
});
|
||||
$(".status-check.nav-pills .nav-link").click(function() {
|
||||
// $(".status-check.nav-pills .nav-link").find('input[type=radio]').prop('checked',false);
|
||||
$(".status-check.nav-pills .nav-link.active").find('input[type=radio]').prop('checked',true);
|
||||
});
|
||||
$(".status-label").click(function() {
|
||||
// $(".status-label").find('input[type=radio]').prop('checked',false);
|
||||
// $(".status-label").find('input[type=radio]').prop('checked',true);
|
||||
});
|
||||
// change total-cost-order-summery
|
||||
function changeTotalCost() {
|
||||
blockValue = $("#auth-block-input").val();
|
||||
if(blockValue == 0) return;
|
||||
|
||||
if(!totalCost[blockValue]) return;
|
||||
|
||||
$("#subscription-cost").html(totalCost[blockValue].total[subscriptionType]);
|
||||
|
||||
changeServerPricing(blockValue);
|
||||
}
|
||||
|
||||
// new-input-changes
|
||||
function changeHtmlData() {
|
||||
$("#auth-block-input").val(blockValue);
|
||||
$("#data-cores").html(data.cores);
|
||||
$("#data-ram").html(data.ram);
|
||||
$("#data-storage").html(data.storage);
|
||||
$("#data-transfer").html(data.transfer);
|
||||
$("#data-subscription-type").html(subscriptionType);
|
||||
$("#subscription-cost").html(totalCost[blockValue].total[subscriptionType]);
|
||||
// toggle-switch
|
||||
if (toggleSwitch == true){
|
||||
$('#order-summary-toggle-switch').prop('checked',true);
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,238 @@
|
||||
|
||||
// calculator-input
|
||||
$(document).ready(function() {
|
||||
$('.btn-minus').click(function () {
|
||||
var $input = $(this).parent().find('input');
|
||||
var count = parseInt($input.val()) - 1;
|
||||
count = count < 1 ? 1 : count;
|
||||
$input.val(count);
|
||||
$input.change();
|
||||
return false;
|
||||
});
|
||||
$('.btn-plus').click(function () {
|
||||
var $input = $(this).parent().find('input');
|
||||
$input.val(parseInt($input.val()) + 1);
|
||||
$input.change();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
// left-block-data
|
||||
var data = {
|
||||
cores : 4,
|
||||
ram : 4,
|
||||
storage:512,
|
||||
transfer:8
|
||||
};
|
||||
var toggle= false;
|
||||
|
||||
var totalCost = {};
|
||||
// total-cost-and-savings
|
||||
for (let i = 0; i < 100 ; i++) {
|
||||
let value = i+1;
|
||||
|
||||
totalCost[value] = {
|
||||
total : { monthly : value* 1000, yearly : value*12000},
|
||||
serversCost : {
|
||||
Hireserver : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
},
|
||||
Aws : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
},
|
||||
Google : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
},
|
||||
Azure : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
},
|
||||
Digital : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
},
|
||||
Linode : {
|
||||
price: { monthly : value*10, yearly : value*100 },
|
||||
savings: { monthly : value*10/2, yearly : value*100/2 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var blockValue = 1;
|
||||
var subscriptionType = "monthly";
|
||||
// purchase-btn
|
||||
$("#total-cost").html(totalCost[1].total.monthly);
|
||||
|
||||
// calculator-input
|
||||
$(document).ready(function() {
|
||||
// toggleswitch
|
||||
$('#block-calculator-toggle-switch').change(function() {
|
||||
blockValue = $("#block-input").val();
|
||||
|
||||
if(blockValue == 0) return;
|
||||
|
||||
if(this.checked) {
|
||||
subscriptionType = "yearly";
|
||||
toggle=true;
|
||||
}else{
|
||||
subscriptionType = "monthly";
|
||||
toggle=false;
|
||||
}
|
||||
|
||||
changeTotalCost();
|
||||
});
|
||||
|
||||
$("#block-input").change(function(){
|
||||
let blockInp=$(this).val();
|
||||
if(blockInp==0 || blockInp >= 100) return;
|
||||
|
||||
data.cores=4*blockInp;
|
||||
data.ram =4*blockInp;
|
||||
data.storage =512*blockInp;
|
||||
data.transfer = 8*blockInp;
|
||||
|
||||
addLeftBlockHTML();
|
||||
|
||||
})
|
||||
$("#btn-plus").click(function () {
|
||||
let value = $("#block-input").val();
|
||||
|
||||
data.cores *= 2;
|
||||
data.ram *= 2;
|
||||
data.storage *= 2;
|
||||
data.transfer *= 2;
|
||||
addLeftBlockHTML();
|
||||
|
||||
})
|
||||
$("#btn-minus").click(function () {
|
||||
let value1 = $("#block-input").val();
|
||||
if(value1==1){
|
||||
return
|
||||
}
|
||||
data.cores /= 2;
|
||||
data.ram /= 2;
|
||||
data.storage /= 2;
|
||||
data.transfer /= 2;
|
||||
addLeftBlockHTML();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// input
|
||||
addLeftBlockHTML();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// leftblock
|
||||
function addLeftBlockHTML(){
|
||||
let html = `
|
||||
<div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
|
||||
<div class="content-data ">
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<ul class="d-flex align-items-center justify-content-evenly list-unstyled">
|
||||
<li><img src="./images/home-page/new-svg/chip-icon.svg"
|
||||
class="img-fluid me-4" alt="core-icon"></li>
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-text mb-0">CPU's</p>
|
||||
<p class="sub-card-text">Core AMD EPYC 7003</p>
|
||||
</li></ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content-value">
|
||||
<p >${data.cores} cores</p>
|
||||
</div></div>
|
||||
<div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
|
||||
<div class="content-data d-flex align-items-center">
|
||||
<img src="./images/home-page/new-svg/chip-icon.svg"
|
||||
class="img-fluid me-4" alt="core-icon">
|
||||
<p class="card-text">RAM</p>
|
||||
</div>
|
||||
<div class="content-value">
|
||||
<p>${data.ram}GB</p>
|
||||
</div></div>
|
||||
<div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
|
||||
<div class="content-data ">
|
||||
<ul class="d-flex align-items-center justify-content-evenly list-unstyled">
|
||||
<li> <img src="./images/home-page/new-svg/chip-icon.svg"
|
||||
class="img-fluid me-4" alt="core-icon"></li>
|
||||
<ul class="list-unstyled"><li>
|
||||
<p class="card-text mb-0">STORAGE</p>
|
||||
<p class="sub-card-text">NVMe SSD</p>
|
||||
</li></ul>
|
||||
</ul> </div>
|
||||
<div class="content-value">
|
||||
<p>${data.storage}GB</p>
|
||||
</div></div>
|
||||
<div class="block-calculator-content d-flex justify-content-between border-bottom align-items-center">
|
||||
<div class="content-data ">
|
||||
<ul class="d-flex align-items-center justify-content-evenly list-unstyled">
|
||||
<li> <img src="./images/home-page/new-svg/chip-icon.svg"
|
||||
class="img-fluid me-4" alt="core-icon"></li>
|
||||
<li> <p class="card-text">TRANSFER</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-value">
|
||||
<p>${data.transfer}TB</p>
|
||||
</div></div>
|
||||
`
|
||||
$("#block-content-main").html(html);
|
||||
changeServerPricing();
|
||||
changeTotalCost();
|
||||
}
|
||||
// total-cost-change-purchase-btn
|
||||
function changeTotalCost() {
|
||||
blockValue = $("#block-input").val();
|
||||
if(blockValue == 0) return;
|
||||
|
||||
if(!totalCost[blockValue]) return;
|
||||
|
||||
$("#total-cost").html(totalCost[blockValue].total[subscriptionType]);
|
||||
|
||||
changeServerPricing(blockValue);
|
||||
}
|
||||
// right-block
|
||||
function changeServerPricing () {
|
||||
$("#hire-server-cost").html(totalCost[blockValue].serversCost.Hireserver.savings[subscriptionType]);
|
||||
$("#hire-server-total-cost").html(totalCost[blockValue].serversCost.Hireserver.price[subscriptionType]);
|
||||
|
||||
$("#aws-cost").html(totalCost[blockValue].serversCost.Aws.savings[subscriptionType]);
|
||||
$("#aws-total-cost").html(totalCost[blockValue].serversCost.Aws.price[subscriptionType]);
|
||||
|
||||
$("#google-cost").html(totalCost[blockValue].serversCost.Google.savings[subscriptionType]);
|
||||
$("#google-total-cost").html(totalCost[blockValue].serversCost.Google.price[subscriptionType]);
|
||||
|
||||
$("#azure-cost").html(totalCost[blockValue].serversCost.Azure.savings[subscriptionType]);
|
||||
$("#azure-total-cost").html(totalCost[blockValue].serversCost.Azure.price[subscriptionType]);
|
||||
|
||||
$("#digital-cost").html(totalCost[blockValue].serversCost.Digital.savings[subscriptionType]);
|
||||
$("#digital-total-cost").html(totalCost[blockValue].serversCost.Digital.price[subscriptionType]);
|
||||
|
||||
$("#linode-cost").html(totalCost[blockValue].serversCost.Linode.savings[subscriptionType]);
|
||||
$("#linode-total-cost").html(totalCost[blockValue].serversCost.Linode.price[subscriptionType]);
|
||||
|
||||
}
|
||||
|
||||
// passing values to order-summary
|
||||
$("#purchase-button").click(function(){
|
||||
let subscriptionData = {
|
||||
currentBlock : blockValue,
|
||||
subscriptionType : subscriptionType,
|
||||
blockDetails: data,
|
||||
totalCost: totalCost,
|
||||
toggleSwitch:toggle
|
||||
};
|
||||
|
||||
localStorage.setItem("subscription-data",JSON.stringify(subscriptionData));
|
||||
|
||||
window.location.href="../login-register.html";
|
||||
})
|
||||
|
||||
// export {data};
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,643 @@
|
||||
$(function () {
|
||||
// configuration js
|
||||
let m2DriveMaxQty = 4;
|
||||
let m2DriveSelectedQty = 0;
|
||||
// configuration items
|
||||
localStorage.setItem("currency", "INR");
|
||||
const configCatgories = [
|
||||
{
|
||||
id: 1,
|
||||
title: "barebone",
|
||||
maxQty: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "processor",
|
||||
maxQty: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "memory",
|
||||
maxQty: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "m.2 drive",
|
||||
maxQty: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const bareboneProducts = [
|
||||
{
|
||||
id: 1,
|
||||
title: `Intel<sup>®</sup> C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Intel<sup>®</sup> 1-Gigabit Ethernet (RJ45) - 350W Power Supply`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
];
|
||||
|
||||
const processorProducts = [
|
||||
{
|
||||
productcatid: 1,
|
||||
productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB
|
||||
Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Eight-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2378 Processor 2.6GHz 16MB Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 2,
|
||||
productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series with Intel<sup>®</sup> UHD P750 Graphics`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2324G Processor 3.1GHz
|
||||
8MB Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2374G Processor 3.7GHz 8MB Cache (80W)`,
|
||||
qty: 2,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2356G Processor 3.2GHz 12MB Cache (80W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2386G Processor 3.5GHz 12MB Cache (95W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const memoryProducts = [
|
||||
{
|
||||
id: 1,
|
||||
title: `16GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
|
||||
qty: 2,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `32GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
|
||||
qty: 2,
|
||||
price: 220,
|
||||
},
|
||||
];
|
||||
|
||||
const m2driveProducts = [
|
||||
{
|
||||
productcatid: 1,
|
||||
productcattitle: `Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `256GB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State
|
||||
Drive`,
|
||||
qty: 4,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `512GB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 2,
|
||||
productcattitle: `Intel<sup>®</sup> DC P4801X M.2 PCIe 3.0 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `100GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe 3.0 x4 NVMe
|
||||
Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `200GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe
|
||||
3.0 x4 NVMe Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 3,
|
||||
productcattitle: `Micron 7400 PRO M.2 PCIe 4.0 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `480GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4 NVMe Solid
|
||||
State Drive`,
|
||||
qty: 4,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `960GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4
|
||||
NVMe Solid State Drive`,
|
||||
qty: 4,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `1.92TB Micron 7400 PRO Series M.2 22x110 PCIe 4.0 x4 NVMe Solid
|
||||
State Drive`,
|
||||
qty: 4,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
//Bind Config Categories
|
||||
bindConfigurations();
|
||||
updateItemsCount();
|
||||
// max quantity-progress-bar
|
||||
function bindConfigurations() {
|
||||
let configCatHtml = "";
|
||||
$.each(configCatgories, function (i, cat) {
|
||||
const id = cat.id;
|
||||
let title = cat.title;
|
||||
let qty = cat.maxQty;
|
||||
let maxQtyHtml = "";
|
||||
if (title == "m.2 drive") {
|
||||
title = "m2-drive";
|
||||
}
|
||||
if (title == "m2-drive" || title == "processor") {
|
||||
let quantityHtml = "";
|
||||
if (title == "m2-drive") {
|
||||
let qtyProgressBarHtml = "";
|
||||
for (let i = 0; i < qty; i++) {
|
||||
qtyProgressBarHtml += `<span class="sms progress-bar progress-bar-${i}"></span>`;
|
||||
}
|
||||
quantityHtml = `<span>Quantity:</span><div class="max-qty-wrap ml-15"><div class="d-flex justify-content-between align-items-center"><div class="d-flex flex-column"><div class="qty-progress-bars d-flex align-items-center">${qtyProgressBarHtml}</div><div class="d-flex justify-content-between flex-wrap align-items-center mt-1"><span class="small">Max Quantity: ${qty}</span><div class="small"><span class="selected-qty">0</span>/<span class="max-qty-span">${qty}</span></div></div></div></div></div>`;
|
||||
}
|
||||
maxQtyHtml = `<div class="text-white p-3 border-radius-custom flex-wrap float-lg-end d-flex align-items-center config-max-quantity">${quantityHtml}</div>`;
|
||||
}
|
||||
configCatHtml += `<div class="product-config-selector accordion mb-20" id="config-${title}" data-maxqty='${qty}'>
|
||||
<div class="config-heading d-flex justify-content-between flex-wrap align-items-center">
|
||||
<h5 class="text-white p-3 border-radius-custom text-uppercase">${title}
|
||||
</h5>
|
||||
${maxQtyHtml}
|
||||
</div>
|
||||
<div class="config-content p-0"></div>
|
||||
</div>`;
|
||||
});
|
||||
$("#block-content-main").html(configCatHtml);
|
||||
bindAllConfigProducts();
|
||||
}
|
||||
// appending-html
|
||||
function bindAllConfigProducts() {
|
||||
bindBareboneAndMemoryProducts("barebone");
|
||||
bindBareboneAndMemoryProducts("memory");
|
||||
bindProcessorAndM2DriveProducts("processor");
|
||||
bindProcessorAndM2DriveProducts("m2-drive");
|
||||
bindEventListeners();
|
||||
}
|
||||
|
||||
function bindBareboneAndMemoryProducts(cat) {
|
||||
let productHtml = "";
|
||||
let productsArr = bareboneProducts;
|
||||
if (cat == "memory") {
|
||||
productsArr = memoryProducts;
|
||||
}
|
||||
$.each(productsArr, function (i, product) {
|
||||
productHtml += `<p class="provide-content product-item">
|
||||
<div
|
||||
class="name-of-config card-body row justify-content-between py-1 align-items-center config-product-item" data-id='${product.id}' data-cat='${cat}' data-price='${product.price}'>
|
||||
<div class="form-check mt-2 col-lg-7" id="form-check">
|
||||
<input class="form-check-input product-radio-btn" id="${cat}-radio-btn-${product.id}" type="radio" name="radio-btns"
|
||||
value="${product.title}">
|
||||
<label class="form-check-label" for="${cat}-radio-btn-${product.id}">
|
||||
<strong>${product.title}</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group config-quantity-btn text-black col-lg-2">
|
||||
<select class="form-select fw-bold qty-selector">`;
|
||||
for (let i = 0; i <= product.qty; i++) {
|
||||
productHtml += `<option value="${i}">Qty: ${i}</option>`;
|
||||
}
|
||||
productHtml += `</select>
|
||||
</div>
|
||||
<div class="config-pricing col-lg-2">
|
||||
<span class="config-price-span p-2 border-radius-custom"><span>+</span><span class="total-price-amount price-wrap d-flex align-items-center"><span class="currency-symbol">₹</span><span class="product-price">${product.price}</span></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</p>`;
|
||||
});
|
||||
$(`#config-${cat} .config-content`).html(productHtml);
|
||||
$('.qty-selector option[value="0"]').text("Select");
|
||||
}
|
||||
|
||||
function bindProcessorAndM2DriveProducts(cat) {
|
||||
let productCatHtml = "";
|
||||
let productsArr = processorProducts;
|
||||
let accordion = "processorProductAccordion";
|
||||
let collapse = "processorProductcollapse";
|
||||
let lastSelectDataAttr = "";
|
||||
if (cat == "m2-drive") {
|
||||
productsArr = m2driveProducts;
|
||||
accordion = "m2DriveProductAccordion";
|
||||
collapse = "m2DriveProductcollapse";
|
||||
lastSelectDataAttr = 'data-lastval="1"';
|
||||
}
|
||||
$.each(productsArr, function (i, productcat) {
|
||||
const productcatid = productcat.productcatid;
|
||||
const productcattitle = productcat.productcattitle;
|
||||
productCatHtml += `<div class="accordion mt-4 border-radius-custom" id="${accordion}-${productcatid}">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" style="color:#4e4c7d; background-color: #e7e9f4;"
|
||||
type="button" data-bs-toggle="collapse" data-bs-target="#${collapse}-${productcatid}"
|
||||
aria-expanded="true" aria-controls="${collapse}-${productcatid}">
|
||||
<strong>${productcattitle}</strong>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="${collapse}-${productcatid}" class="accordion-collapse collapse show" data-bs-parent="#${accordion}-${productcatid}">
|
||||
<div class="accordion-body">`;
|
||||
let productHtml = "";
|
||||
|
||||
$.each(productcat.products, function (i, product) {
|
||||
productHtml += `
|
||||
<div class="name-of-config row justify-content-between py-1 align-items-center config-product-item" data-id='${
|
||||
product.id
|
||||
}' data-cat='${cat}' data-price='${
|
||||
product.price
|
||||
}' data-productcatid='${productcatid}'>
|
||||
<div class="form-check mt-2 col-lg-7" id="form-check">
|
||||
${appendProcessorAndM2DriveInput(
|
||||
cat,
|
||||
product.id,
|
||||
product.title,
|
||||
productcatid
|
||||
)}
|
||||
</div>
|
||||
<div class="btn-group config-quantity-btn text-black col-lg-2">
|
||||
<select class="form-select fw-bold qty-selector" ${lastSelectDataAttr}><option value="0">Select</option>`;
|
||||
for (let i = 1; i <= product.qty; i++) {
|
||||
productHtml += `<option value="${i}">Qty: ${i}</option>`;
|
||||
}
|
||||
productHtml += `</select>
|
||||
</div>
|
||||
<div class="config-pricing col-lg-2">
|
||||
<span class="config-price-span p-2 border-radius-custom"><span>+</span><span class="processor-total-price total-price-amount price-wrap d-flex align-items-center"><span class="currency-symbol">₹</span><span class="product-price">${product.price}</span></span> </span>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
productCatHtml += productHtml;
|
||||
productCatHtml += `</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
$(`#config-${cat} .config-content`).html(productCatHtml);
|
||||
//$('.qty-selector option[value="0"]').text('Select')
|
||||
}
|
||||
|
||||
function appendProcessorAndM2DriveInput(cat, id, title, productcatid = 0) {
|
||||
if (cat == "m2-drive") {
|
||||
return `<input class="form-check-input product-check-btn" type="checkbox" name="m2Drive-check-btns"
|
||||
id="${cat}-check-btn-${productcatid}-${id}" value="${title}" >
|
||||
<label class="form-check-label" for="${cat}-check-btn-${productcatid}-${id}">
|
||||
<strong>${title}</strong>
|
||||
</label>`;
|
||||
} else {
|
||||
return `<input class="form-check-input product-radio-btn" type="radio" name="processor-radio-btns"
|
||||
id="${cat}-radio-btn-${productcatid}-${id}" value="${title}" >
|
||||
<label class="form-check-label" for="${cat}-radio-btn-${productcatid}-${id}">
|
||||
<strong>${title}</strong>
|
||||
</label>`;
|
||||
}
|
||||
}
|
||||
// select and radio-check-btn-section
|
||||
function bindEventListeners() {
|
||||
var alertBox = `<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>`;
|
||||
$(".product-radio-btn").click(function (e) {
|
||||
const radioEl = $(this);
|
||||
const accordionID = $(this).parents(".accordion").attr("id");
|
||||
const parentEl = radioEl.parents(".config-product-item");
|
||||
const val = radioEl.val();
|
||||
const productCatId = parentEl.attr("data-id");
|
||||
const cat = parentEl.attr("data-cat");
|
||||
const qty = parseInt(parentEl.find(".qty-selector").val("1"));
|
||||
const price = qty * parseInt(parentEl.attr("data-price"));
|
||||
const id = parentEl.attr("data-id");
|
||||
$(`#config-${cat}`).find(".config-price-span").removeClass("active");
|
||||
parentEl.find(".config-price-span").addClass("active");
|
||||
bindSelectedProduct(cat, val, qty, price, id, productCatId, accordionID);
|
||||
updateItemsCount();
|
||||
updateTotalCartPrice();
|
||||
});
|
||||
|
||||
$(".qty-selector").change(function () {
|
||||
const selectEl = $(this);
|
||||
const accordionId = $(this).parents(".accordion").attr("id");
|
||||
const parentEl = selectEl.parents(".config-product-item");
|
||||
const val = parseInt(selectEl.val());
|
||||
const lastSelectedVal = parseInt(selectEl.attr("data-lastval"));
|
||||
const price = val * parseFloat(parentEl.attr("data-price")).toFixed(2);
|
||||
const cat = parentEl.attr("data-cat");
|
||||
const id = parentEl.attr("data-id");
|
||||
if (!parentEl.find("input").is(":checked")) {
|
||||
parentEl.find("input").trigger("click");
|
||||
parentEl.find(".config-price-span").addClass("active");
|
||||
}
|
||||
|
||||
const selectedQty = val - lastSelectedVal;
|
||||
if (cat == "m2-drive") {
|
||||
if (m2DriveMaxQty >= m2DriveSelectedQty + selectedQty) {
|
||||
m2DriveSelectedQty += selectedQty;
|
||||
selectEl.attr("data-lastval", val);
|
||||
m2DriveProgress();
|
||||
parentEl.find(".product-price").text(price);
|
||||
const selecedSummaryProduct = $(
|
||||
`.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
|
||||
);
|
||||
selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
|
||||
selecedSummaryProduct.find(".product-price").text(price);
|
||||
updateTotalCartPrice();
|
||||
} else {
|
||||
alert("Quantity Max limit reached");
|
||||
selectEl.val(lastSelectedVal);
|
||||
parentEl.find("input").trigger("click");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
parentEl.find(".product-price").text(price);
|
||||
const selecedSummaryProduct = $(
|
||||
`.${cat}-cart-product-${id}[data-accordionid="${accordionId}"]`
|
||||
);
|
||||
selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
|
||||
selecedSummaryProduct.find(".product-price").text(price);
|
||||
updateTotalCartPrice();
|
||||
}
|
||||
});
|
||||
|
||||
$(".product-check-btn").click(function () {
|
||||
const checkEl = $(this);
|
||||
const ElementId = $(this).parents(".accordion").attr("id");
|
||||
const parentEl = checkEl.parents(".config-product-item");
|
||||
const val = checkEl.val();
|
||||
const productCatId = parentEl.attr("data-productcatid");
|
||||
const cat = parentEl.attr("data-cat");
|
||||
const qtySelectEl = parentEl.find(".qty-selector");
|
||||
const qty = parseInt(qtySelectEl.val("1"));
|
||||
const price = parentEl.attr("data-price");
|
||||
const totalPrice = qty * parseFloat(price).toFixed(2);
|
||||
const id = parentEl.attr("data-id");
|
||||
|
||||
if (checkEl.is(":checked")) {
|
||||
m2DriveSelectedQty++;
|
||||
parentEl.addClass("selected");
|
||||
} else {
|
||||
m2DriveSelectedQty -= qty;
|
||||
qtySelectEl.val("1").attr("data-lastval", "1").trigger("change");
|
||||
parentEl.removeClass("selected").find(".product-price").text(price);
|
||||
}
|
||||
|
||||
if (m2DriveSelectedQty > m2DriveMaxQty) {
|
||||
alert("Quantity Max limit reached");
|
||||
return false;
|
||||
} else {
|
||||
parentEl.find(".config-price-span").toggleClass("active");
|
||||
bindSelectedProduct(
|
||||
cat,
|
||||
val,
|
||||
qty,
|
||||
totalPrice,
|
||||
id,
|
||||
productCatId,
|
||||
ElementId
|
||||
);
|
||||
updateItemsCount();
|
||||
updateTotalCartPrice();
|
||||
m2DriveProgress();
|
||||
}
|
||||
});
|
||||
// $('.product-check-btn ,.product-radio-btn').click(function() {
|
||||
// qtySelectEl.val('1').attr('data-lastval', '1').trigger('change');;
|
||||
// });
|
||||
}
|
||||
|
||||
function m2DriveProgress() {
|
||||
if (m2DriveSelectedQty <= m2DriveMaxQty) {
|
||||
$(".qty-progress-bars .progress-bar").removeClass("active");
|
||||
for (let i = 0; i < m2DriveSelectedQty; i++) {
|
||||
$(".qty-progress-bars .progress-bar").eq(i).addClass("active");
|
||||
}
|
||||
$("#config-m2-drive .max-qty-wrap")
|
||||
.find(".selected-qty")
|
||||
.text(m2DriveSelectedQty);
|
||||
}
|
||||
if (m2DriveSelectedQty == m2DriveMaxQty) {
|
||||
disableM2DriveOptions();
|
||||
} else {
|
||||
enableM2DriveOptions();
|
||||
}
|
||||
}
|
||||
|
||||
function enableM2DriveOptions() {
|
||||
$(".product-check-btn").prop("disabled", false);
|
||||
$("#config-m2-drive .qty-selector").prop("disabled", false);
|
||||
}
|
||||
|
||||
function disableM2DriveOptions() {
|
||||
$(".product-check-btn").not(":checked").prop("disabled", true);
|
||||
$("#config-m2-drive .config-product-item")
|
||||
.not(".selected")
|
||||
.find(".qty-selector")
|
||||
.prop("disabled", true);
|
||||
}
|
||||
|
||||
// summary section
|
||||
function bindSelectedProduct(
|
||||
cat,
|
||||
val,
|
||||
qty,
|
||||
price,
|
||||
id,
|
||||
productCatId = "",
|
||||
ElementId
|
||||
) {
|
||||
const summaryProductHtml = `<li class="w-100 my-1 d-flex align-items-center cart-product-item ${cat}-cart-product-${id}" data-accordionid="${ElementId}" data-productcatid='${productCatId}'><span class="summary-total-qty"><span class="qty-span">${qty}</span><i class="fa fa-times"></i></span>
|
||||
<div class="flex-grow-1 d-flex align-items-center justify-content-between"><span class="summary-product-val mr-2">${val}</span>
|
||||
<span class="price-wrap d-flex align-items-center"><span class="summary-plus-sign">+</span><span class="currency-symbol" id="summary-currency-symbol">₹</span><span class="order-price price-span product-price ml-auto">${price}</span></span>
|
||||
</div>
|
||||
</li>`;
|
||||
|
||||
if (cat == "m2-drive") {
|
||||
if (
|
||||
$(
|
||||
`.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"] `
|
||||
).length
|
||||
) {
|
||||
$(
|
||||
`.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`
|
||||
).remove();
|
||||
} else {
|
||||
$(`#${cat}-summary .summary-list`).append(summaryProductHtml);
|
||||
}
|
||||
} else {
|
||||
$(`#${cat}-summary .summary-list`).html(summaryProductHtml);
|
||||
}
|
||||
if ($(`#${cat}-summary .summary-list li`).length) {
|
||||
$(`#${cat}-summary`).removeClass("d-none");
|
||||
} else {
|
||||
$(`#${cat}-summary`).addClass("d-none");
|
||||
}
|
||||
}
|
||||
|
||||
// items-count
|
||||
function updateItemsCount() {
|
||||
const cartProductCount = $(
|
||||
"#productOrderSummary .cart-product-item"
|
||||
).length;
|
||||
$(".summary-head #items-count").text(cartProductCount);
|
||||
|
||||
if (cartProductCount >= 1) {
|
||||
$(".your-order-wrap").show();
|
||||
$(".your-order-wrap-empty").hide();
|
||||
} else {
|
||||
$(".your-order-wrap").hide();
|
||||
$(".your-order-wrap-empty").show();
|
||||
}
|
||||
}
|
||||
|
||||
// total-cart-price
|
||||
function updateTotalCartPrice() {
|
||||
let totalPrice = 0;
|
||||
$("#productOrderSummary .cart-product-item")
|
||||
.find(".price-span")
|
||||
.each(function (i, e) {
|
||||
totalPrice += Number($(e).text().trim());
|
||||
});
|
||||
$("#productOrderSummary #total-amount").text(totalPrice);
|
||||
}
|
||||
|
||||
//currency-converter:
|
||||
var rates = {
|
||||
INR: {
|
||||
value: 1,
|
||||
symbol: "₹",
|
||||
USD: 0.01311,
|
||||
INR: 1,
|
||||
GBP: 0.01,
|
||||
},
|
||||
USD: {
|
||||
value: 75,
|
||||
symbol: "$",
|
||||
USD: 1,
|
||||
INR: 76.32,
|
||||
GBP: 0.76,
|
||||
},
|
||||
GBP: {
|
||||
value: 100,
|
||||
symbol: "£",
|
||||
USD: 1.31,
|
||||
INR: 100,
|
||||
GBP: 1,
|
||||
},
|
||||
};
|
||||
|
||||
let usercurency;
|
||||
if (localStorage.getItem("currency")) {
|
||||
usercurency = localStorage.getItem("currency");
|
||||
} else {
|
||||
usercurency = "INR";
|
||||
}
|
||||
|
||||
$("#custom-selects").val(usercurency.toLowerCase());
|
||||
|
||||
function updatePrices(previousCurrency, currentCurrency) {
|
||||
$(".product-price").each(function (i, el) {
|
||||
console.log(currentCurrency);
|
||||
let val = parseFloat($(el).text());
|
||||
let con = val * rates[previousCurrency][currentCurrency],
|
||||
_con;
|
||||
if (currentCurrency == "INR") {
|
||||
_con = Math.round(con);
|
||||
} else {
|
||||
_con = con;
|
||||
}
|
||||
let curentSymbol = rates[currentCurrency];
|
||||
$(el).text(_con.toFixed(2));
|
||||
|
||||
$(el).siblings(".currency-symbol").text(curentSymbol.symbol);
|
||||
});
|
||||
$("[data-price]").each(function (i, e) {
|
||||
let val = parseFloat($(this).attr("data-price"));
|
||||
let con = val * rates[previousCurrency][currentCurrency],
|
||||
_con;
|
||||
if (currentCurrency == "INR") {
|
||||
_con = Math.round(con);
|
||||
} else {
|
||||
_con = parseInt(con);
|
||||
}
|
||||
$(this).attr("data-price", con);
|
||||
});
|
||||
let amount = parseFloat($("#total-amount").text()).toFixed(2);
|
||||
let curentSymbol = rates[currentCurrency];
|
||||
let conVal = amount * rates[previousCurrency][currentCurrency],
|
||||
_con;
|
||||
if (currentCurrency == "INR") {
|
||||
_con = Math.round(conVal);
|
||||
} else {
|
||||
_con = conVal;
|
||||
}
|
||||
$("#total-amount").text(parseFloat(_con).toFixed(2));
|
||||
$(".currency-symbol").text(curentSymbol.symbol);
|
||||
}
|
||||
|
||||
$("#custom-selects").on("change", function (e) {
|
||||
let previousCurrency = localStorage.getItem("currency");
|
||||
localStorage.setItem("currency", e.target.value.toUpperCase());
|
||||
updatePrices(previousCurrency, e.target.value.toUpperCase());
|
||||
});
|
||||
|
||||
updatePrices(rates[usercurency]);
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,108 @@
|
||||
$(document).ready(function () {
|
||||
let footerHtml = `
|
||||
<!-- footer strat -->
|
||||
<footer class="">
|
||||
<div class="footer mt-md-5">
|
||||
<div class="container">
|
||||
<div class="row w-100">
|
||||
<div class="col-12 col-sm-6 col-lg-5 ">
|
||||
<div class="footer-widget mx-w-400">
|
||||
<div class="footer-logo mb-25">
|
||||
<a href="index.html">
|
||||
<img class="w-50" src="./assets/img/logo/anwi-logo-white.svg" alt="footer logo">
|
||||
</a>
|
||||
</div>
|
||||
<h4 class="text-white mb-30 pl-10 footer-content">
|
||||
Sign Up to <br>
|
||||
Our Newsletter
|
||||
</h4>
|
||||
|
||||
<div class="nletter-form mb-35 pl-10">
|
||||
<form class="bg-transparent border-bottom position-relative" >
|
||||
<input class="bg-transparent border-0 border-bottom form-control" type="text"
|
||||
placeholder="Email Address">
|
||||
<button class="btn news-letter-btn text-capitalize bg-white" >
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-7 row mt-md-5">
|
||||
<div class="col-5 col-sm-6 col-lg-5 mb-30 pl-5">
|
||||
<div class="footer-widget">
|
||||
<div class=" cbb1 ">
|
||||
<div class="section-title">
|
||||
<h2 class="title footer-title">Products</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer-menu start -->
|
||||
<ul class="footer-menu">
|
||||
<li><a href="servers.html">Servers</a></li>
|
||||
<li><a href="24-bay-storage.html">Storage</a></li>
|
||||
<li><a href="network-switches.html">Network Switches</a></li>
|
||||
<li><a href="network-cards.html">Network Cards</a></li>
|
||||
</ul>
|
||||
<!-- footer-menu end -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-sm-6 col-lg-4 mb-30">
|
||||
<div class="footer-widget footer-information">
|
||||
<div class=" cbb1 ">
|
||||
<div class="section-title">
|
||||
<h2 class="title footer-title">About</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer-menu start -->
|
||||
<ul class="footer-menu">
|
||||
<li><a href="about.html">About Us</a></li>
|
||||
<li><a href="#">Terms</a></li>
|
||||
<li><a href="#">Privacy</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
<!-- footer-menu end -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 col-sm-6 col-lg-3 mb-30">
|
||||
<div class="footer-widget footer-information">
|
||||
<div class=" cbb1 ">
|
||||
<div class="section-title">
|
||||
<h2 class="title footer-title">Help</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- footer-menu start -->
|
||||
<ul class="footer-menu">
|
||||
<li><a href="#">FAQs</a></li>
|
||||
<li><a href="contact-us.html">Contact Us</a></li>
|
||||
</ul>
|
||||
<!-- footer-menu end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-content-between row">
|
||||
<div class="col-12 col-lg-6 pl-15 row">
|
||||
<div class="col-lg-6 col-6"></div>
|
||||
<div class="col-lg-6 col-6"></div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 social-icons text-lg-end text-center">
|
||||
<a href="https://www.facebook.com/">
|
||||
<i class="fab fa-facebook-f mx-4"></i>
|
||||
</a>
|
||||
<a href="https://www.twitter.com/">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="https://www.instagram.com/">
|
||||
<i class="fab fa-instagram mx-4"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- coppy-right end -->
|
||||
</footer>
|
||||
<!-- footer end -->
|
||||
`;
|
||||
$("#footer-head").html(footerHtml);
|
||||
});
|
||||
@@ -0,0 +1,145 @@
|
||||
$(document).ready(function () {
|
||||
let formHTML = ` <!-- pop up -->
|
||||
<!-- enquire-form pop up -->
|
||||
<div class="modal fade style" id="enquireModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class=" justify-content-center ">
|
||||
<!-- <h5 class="modal-title" id="itemTitle"> </h5> -->
|
||||
<button type="button" class="close" data-bs-dismiss="modal" style="color: black;" >
|
||||
<span >×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="myModal">
|
||||
<div class="contact-form-content">
|
||||
<h3 class="contact-page-title">Buy Now</h3>
|
||||
<div class="contact-form">
|
||||
<form id="contact-form" name="enquire_form" >
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Your Name" name="name" id="usernames" onblur="submit_enquiry()" required />
|
||||
<small id="usercheck" style="color: red;" >
|
||||
*Username is missing
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="Product" name="Title" id="itemTitle" disabled />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" placeholder="Email-Id" name="email" id="email" onblur="submit_enquiry()" required/>
|
||||
<small id="emailvalid" class="form-text
|
||||
text-muted invalid-feedback">
|
||||
Your email must be a valid email
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="phone" placeholder="Mobile No" name="phone" id="phone" onblur="submit_enquiry()" required/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="subject" name="subject" id="subject" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea name="contactMessage" placeholder="Your Message" class="pb-10" id="contactMessage" required></textarea>
|
||||
</div>
|
||||
<div class="form-group mb-0">
|
||||
<button type="submit" value="submit" id="submitbtn" class="btn btn-dark btn--lg " name="submit" onclick="submit_enquiry()">
|
||||
submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- <p class="form-message mt-10"></p> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end popup -->`
|
||||
|
||||
$("#enquire").html(formHTML);
|
||||
|
||||
|
||||
// Document is ready
|
||||
$(document).ready(function () {
|
||||
|
||||
// Validate Username
|
||||
$('#usercheck').hide();
|
||||
let usernameError = true;
|
||||
$('#usernames').keyup(function () {
|
||||
validateUsername();
|
||||
});
|
||||
|
||||
function validateUsername() {
|
||||
let usernameValue = $('#usernames').val();
|
||||
if (usernameValue.length == '') {
|
||||
$('#usercheck').show();
|
||||
usernameError = false;
|
||||
return false;
|
||||
} else if ((usernameValue.length < 3) ||
|
||||
(usernameValue.length > 10)) {
|
||||
$('#usercheck').show();
|
||||
$('#usercheck').html("*length of username must be between 3 and 10");
|
||||
usernameError = false;
|
||||
return false;
|
||||
} else {
|
||||
$('#usercheck').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Validate Email
|
||||
const email =
|
||||
document.getElementById('email');
|
||||
email.addEventListener('blur', () => {
|
||||
let regex =
|
||||
/^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
|
||||
let s = email.value;
|
||||
if (regex.test(s)) {
|
||||
email.classList.remove(
|
||||
'is-invalid');
|
||||
emailError = true;
|
||||
} else {
|
||||
email.classList.add(
|
||||
'is-invalid');
|
||||
emailError = false;
|
||||
}
|
||||
})
|
||||
|
||||
// Submit button
|
||||
$('#submitbtn').click(function () {
|
||||
validateUsername();
|
||||
validateEmail();
|
||||
if ((usernameError == true) &&
|
||||
(passwordError == true) &&
|
||||
(emailError == true)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
function pop_up() {
|
||||
let title = $('.single-product-head').find('.title').text();
|
||||
// $('#itemTitle').text(title);
|
||||
// console.log(title);
|
||||
$('#itemTitle').val(title);
|
||||
}
|
||||
|
||||
function submit_enquiry() {
|
||||
// alert("awsdfa");
|
||||
if (enquire_form.name.value.length == 0) {
|
||||
document.getElementById('errName');
|
||||
}
|
||||
if (enquire_form.email.value.length == 0) {
|
||||
document.getElementById('errEmail');
|
||||
|
||||
}
|
||||
}
|
||||
pop_up();
|
||||
submit_enquiry()
|
||||
})
|
||||
@@ -0,0 +1,184 @@
|
||||
$(document).ready(function () {
|
||||
let formHTML = ` <!-- pop up -->
|
||||
<!-- enquire-form pop up -->
|
||||
<div class="modal fade style" id="enquireModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="wrap-contact100">
|
||||
|
||||
<div class="modal-content contact100-form validate-form">
|
||||
<div class=" justify-content-center ">
|
||||
<!-- <h5 class="modal-title" id="itemTitle"> </h5> -->
|
||||
<button type="button" class="close" data-bs-dismiss="modal" >
|
||||
<span >×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row w-100">
|
||||
<div class="enquire-form-img col-md-6 col-12">
|
||||
</div>
|
||||
<div class="enquire-form col-md-6 col-12 py-5 px-30">
|
||||
<div>
|
||||
<h3 class="contact-page-title">Request a Quote</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div id="pageloader" class="d-none">
|
||||
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif"
|
||||
alt="processing..." />
|
||||
</div>
|
||||
<form id="anwi-enquire-form" method="POST" action="quote-request.php">
|
||||
<div class="form-floating ">
|
||||
<input type="text" class="form-control" id="userName" name="name" placeholder="name@example.com" onblur="submit_enquiry()" required>
|
||||
<label for="name">Your Name</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" id="itemTitle" name="Title" placeholder="Password" disabled>
|
||||
<label for="name">Product</label>
|
||||
</div>
|
||||
<div class="form-floating ">
|
||||
<input type="email" class="form-control" id="floatingEmail" name="email" placeholder="name@example.com" onblur="submit_enquiry()" required>
|
||||
<label for="floatingEmail">Email address</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="number" class="form-control" id="floatingPhonenumber" name="phone" placeholder="Password" onblur="submit_enquiry()" required>
|
||||
<label for="floatingPhonenumber">Mobile No</label>
|
||||
</div>
|
||||
<div class="form-floating ">
|
||||
<input type="text" class="form-control" id="floatingSubject" name="subject" placeholder="name@example.com" required>
|
||||
<label for="floatingSubject">Subject</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<textarea name="contactMessage" class="form-control" id="contactMessage" name="message" placeholder="Your Message" required style="height:100px"></textarea>
|
||||
<label for="floatingPassword">Message</label>
|
||||
</div>
|
||||
<div class="form-floating text-center my-4">
|
||||
<button type="submit" value="submit" id="submitbtn" class="btn btn-primary btn--lg " name="submit" onclick="submit_enquiry()">
|
||||
submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end popup -->`;
|
||||
|
||||
$("#enquire").html(formHTML);
|
||||
|
||||
// Document is ready
|
||||
$(document).ready(function () {
|
||||
// Validate Username
|
||||
$("#usercheck").hide();
|
||||
let usernameError = true;
|
||||
$("#usernames").keyup(function () {
|
||||
validateUsername();
|
||||
});
|
||||
|
||||
function validateUsername() {
|
||||
let usernameValue = $("#usernames").val();
|
||||
if (usernameValue.length == "") {
|
||||
$("#usercheck").show();
|
||||
usernameError = false;
|
||||
return false;
|
||||
} else if (usernameValue.length < 3 || usernameValue.length > 10) {
|
||||
$("#usercheck").show();
|
||||
$("#usercheck").html("*length of username must be between 3 and 10");
|
||||
usernameError = false;
|
||||
return false;
|
||||
} else {
|
||||
$("#usercheck").hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Validate Email
|
||||
const email = document.getElementById("email");
|
||||
email.addEventListener("blur", () => {
|
||||
let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
|
||||
let s = email.value;
|
||||
if (regex.test(s)) {
|
||||
email.classList.remove("is-invalid");
|
||||
emailError = true;
|
||||
} else {
|
||||
email.classList.add("is-invalid");
|
||||
emailError = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Submit button
|
||||
$("#submitbtn").click(function () {
|
||||
validateUsername();
|
||||
validateEmail();
|
||||
if (
|
||||
usernameError == true &&
|
||||
passwordError == true &&
|
||||
emailError == true
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function pop_up() {
|
||||
let title = $(".single-product-head").find(".title").text();
|
||||
// $('#itemTitle').text(title);
|
||||
// console.log(title);
|
||||
$("#itemTitle").val(title);
|
||||
}
|
||||
|
||||
function submit_enquiry() {
|
||||
// alert("awsdfa");
|
||||
if (enquire_form.name.value.length == 0) {
|
||||
document.getElementById("errName");
|
||||
}
|
||||
if (enquire_form.email.value.length == 0) {
|
||||
document.getElementById("errEmail");
|
||||
}
|
||||
}
|
||||
pop_up();
|
||||
submit_enquiry();
|
||||
|
||||
$("#anwi-enquire-form").validate({
|
||||
rules: {
|
||||
phone: {
|
||||
minlength: 10,
|
||||
maxlength: 10,
|
||||
number: true,
|
||||
},
|
||||
},
|
||||
submitHandler: function (form) {
|
||||
loader();
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "quote-request.php",
|
||||
data: $(form).serialize(),
|
||||
success: function (res) {
|
||||
if (res == 1) {
|
||||
toastr.success("Form Submitted Successfully!");
|
||||
$(form).trigger("reset");
|
||||
$(form)
|
||||
.find(".form-control-placeholder")
|
||||
.removeClass("floating-label");
|
||||
$("#pageloader").remove();
|
||||
$("#anwi-enquire-form").removeClass("d-none");
|
||||
} else {
|
||||
toastr.error("Something Went Wrong,Try Again!");
|
||||
$("#pageloader").remove();
|
||||
$("#anwi-enquire-form").removeClass("d-none");
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
},
|
||||
});
|
||||
|
||||
function loader() {
|
||||
//$("#biz-contact-form").on("submit", function () {
|
||||
$("#pageloader").fadeIn();
|
||||
$("#anwi-enquire-form").addClass("d-none");
|
||||
//});
|
||||
//submit
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,469 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// Searching & Expand Menu Popup
|
||||
|
||||
var searchToggle = $(".search-toggle"),
|
||||
closeA = $(".scale"),
|
||||
closeB = $(".searching button"),
|
||||
cBody = $("body"),
|
||||
closeScale = closeA.add(closeB);
|
||||
|
||||
if (searchToggle.length > 0) {
|
||||
searchToggle.on("click", function () {
|
||||
cBody.toggleClass("open");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
if (closeScale.length > 0) {
|
||||
closeScale.on("click", function () {
|
||||
cBody.removeClass("open");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
$(".close").on("click", function () {
|
||||
$("body").removeClass("open");
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*-----------------------------main slider active---------------------------- */
|
||||
|
||||
const $mainSlider = $(".main-slider");
|
||||
|
||||
$mainSlider.slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
speed: 400,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: true,
|
||||
fade: true,
|
||||
arrows: true,
|
||||
prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
|
||||
responsive: [{
|
||||
breakpoint: 767,
|
||||
settings: {
|
||||
dots: true,
|
||||
arrows: false
|
||||
}
|
||||
}, ],
|
||||
})
|
||||
.slickAnimation();
|
||||
/*-------------------------- product slider init ---------------------------- */
|
||||
const $productSliderInit = $(".product-slider-init");
|
||||
|
||||
$productSliderInit.slick({
|
||||
autoplay: false,
|
||||
autoplaySpeed: 10000,
|
||||
dots: true,
|
||||
infinite: false,
|
||||
arrows: true,
|
||||
speed: 1000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
|
||||
responsive: [{
|
||||
breakpoint: 1199,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
autoplay: true,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
// You can unslick at a given breakpoint now by adding:
|
||||
// settings: "unslick"
|
||||
// instead of a settings object
|
||||
],
|
||||
});
|
||||
|
||||
/*--------------------------popular-slider-init---------------------------- */
|
||||
const $popularSlider = $(".popular-slider-init");
|
||||
|
||||
$popularSlider.slick({
|
||||
autoplay: true,
|
||||
autoplaySpeed: 10000,
|
||||
dots: true,
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
speed: 1000,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
|
||||
responsive: [{
|
||||
breakpoint: 1280,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
infinite: false,
|
||||
dots: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
// You can unslick at a given breakpoint now by adding:
|
||||
// settings: "unslick"
|
||||
// instead of a settings object
|
||||
],
|
||||
});
|
||||
|
||||
/*-------------------------- featured-init ---------------------------- */
|
||||
const $featuredSlider = $(".featured-init");
|
||||
|
||||
$featuredSlider.slick({
|
||||
autoplay: false,
|
||||
autoplaySpeed: 10000,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
arrows: true,
|
||||
speed: 1000,
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
|
||||
responsive: [{
|
||||
breakpoint: 1280,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
infinite: false,
|
||||
dots: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
// You can unslick at a given breakpoint now by adding:
|
||||
// settings: "unslick"
|
||||
// instead of a settings object
|
||||
],
|
||||
});
|
||||
|
||||
/*--------------------------
|
||||
product ctry slider init
|
||||
---------------------------- */
|
||||
|
||||
const $productCtry = $(".product-ctry-init");
|
||||
$productCtry.slick({
|
||||
autoplay: false,
|
||||
autoplaySpeed: 10000,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
arrows: true,
|
||||
speed: 1000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
prevArrow: '<button class="slick-prev"><i class="fa fa-chevron-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fa fa-chevron-right"></i></button>',
|
||||
responsive: [{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
dots: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
breakpoint: 767,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: true,
|
||||
autoplay: true,
|
||||
},
|
||||
},
|
||||
|
||||
// You can unslick at a given breakpoint now by adding:
|
||||
// settings: "unslick"
|
||||
// instead of a settings object
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
|
||||
/*---------------------------
|
||||
countdown-syncing
|
||||
---------------------------- */
|
||||
|
||||
$(".countdown-sync-init").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
draggable: false,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
fade: true,
|
||||
asNavFor: ".countdown-sync-nav",
|
||||
});
|
||||
$(".countdown-sync-nav").slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
prevArrow: '<button class="slick-prev"><i class="fas fa-arrow-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fas fa-arrow-right"></i></button>',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
asNavFor: ".countdown-sync-init",
|
||||
focusOnSelect: true,
|
||||
draggable: false,
|
||||
});
|
||||
|
||||
/*---------------------------
|
||||
product-syncing
|
||||
---------------------------- */
|
||||
|
||||
$(".product-sync-init").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
infinite: true,
|
||||
draggable: false,
|
||||
arrows: false,
|
||||
dots: false,
|
||||
fade: true,
|
||||
asNavFor: ".product-sync-nav",
|
||||
});
|
||||
$(".product-sync-nav").slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
prevArrow: '<button class="slick-prev"><i class="fas fa-arrow-left"></i></button>',
|
||||
nextArrow: '<button class="slick-next"><i class="fas fa-arrow-right"></i></button>',
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
asNavFor: ".product-sync-init",
|
||||
focusOnSelect: true,
|
||||
draggable: false,
|
||||
});
|
||||
|
||||
/*--------------------------
|
||||
tooltip
|
||||
---------------------------- */
|
||||
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
|
||||
// slider-range
|
||||
$("#slider-range").slider({
|
||||
range: true,
|
||||
min: 0,
|
||||
max: 800,
|
||||
values: [200, 600],
|
||||
slide: function (event, ui) {
|
||||
$("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
|
||||
},
|
||||
});
|
||||
$("#amount").val(
|
||||
"€" +
|
||||
$("#slider-range").slider("values", 0) +
|
||||
" - €" +
|
||||
$("#slider-range").slider("values", 1)
|
||||
);
|
||||
|
||||
// slider-range end
|
||||
/*----------------------------------------
|
||||
fixed issue in bootstrap tabs problem
|
||||
----------------------------------------- */
|
||||
|
||||
$('a[data-bs-toggle="pill"]').on("shown.bs.tab", function (e) {
|
||||
e.target;
|
||||
e.relatedTarget;
|
||||
$(".slick-slider").slick("setPosition");
|
||||
});
|
||||
|
||||
/*-----------------------------------
|
||||
fixed issue in bs modal problem
|
||||
---------------------------------- */
|
||||
|
||||
$(".modal").on("shown.bs.modal", function (e) {
|
||||
$(".slick-slider").slick("setPosition");
|
||||
});
|
||||
|
||||
/*--------------------------
|
||||
comment scroll down
|
||||
---------------------------- */
|
||||
|
||||
$("#write-comment").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$("html, body").animate({
|
||||
scrollTop: $(".btn-dark ").offset().top + 750
|
||||
},
|
||||
500,
|
||||
"linear"
|
||||
);
|
||||
});
|
||||
|
||||
/*--------------------------
|
||||
counter
|
||||
-------------------------- */
|
||||
|
||||
$(".count").each(function () {
|
||||
var count = $(this),
|
||||
input = count.find('input[type="number"]'),
|
||||
increament = count.find(".increment"),
|
||||
decreament = count.find(".decrement"),
|
||||
minValue = input.attr("min"),
|
||||
maxValue = input.attr("max");
|
||||
|
||||
increament.on("click", function () {
|
||||
var oldValue = parseFloat(input.val());
|
||||
if (oldValue >= maxValue) {
|
||||
var newVal = oldValue;
|
||||
} else {
|
||||
var newVal = oldValue + 1;
|
||||
}
|
||||
count.find("input").val(newVal);
|
||||
count.find("input").trigger("change");
|
||||
});
|
||||
|
||||
decreament.on("click", function () {
|
||||
var oldValue = parseFloat(input.val());
|
||||
if (oldValue <= minValue) {
|
||||
var newVal = oldValue;
|
||||
} else {
|
||||
var newVal = oldValue - 1;
|
||||
}
|
||||
count.find("input").val(newVal);
|
||||
count.find("input").trigger("change");
|
||||
});
|
||||
});
|
||||
|
||||
/*-------------------------
|
||||
Create an account toggle
|
||||
--------------------------*/
|
||||
$(".checkout-toggle2").on("click", function () {
|
||||
$(".open-toggle2").slideToggle(1000);
|
||||
});
|
||||
|
||||
$(".checkout-toggle").on("click", function () {
|
||||
$(".open-toggle").slideToggle(1000);
|
||||
});
|
||||
|
||||
/*--------------------------
|
||||
SscrollUp
|
||||
---------------------------- */
|
||||
|
||||
$.scrollUp({
|
||||
scrollName: "scrollUp", // Element ID
|
||||
scrollDistance: 400, // Distance from top/bottom before showing element (px)
|
||||
scrollFrom: "top", // 'top' or 'bottom'
|
||||
scrollSpeed: 800, // Speed back to top (ms)
|
||||
easingType: "linear", // Scroll to top easing (see http://easings.net/)
|
||||
animation: "fade", // Fade, slide, none
|
||||
animationSpeed: 400, // Animation speed (ms)
|
||||
scrollTrigger: false, // Set a custom triggering element. Can be an HTML string or jQuery object
|
||||
scrollTarget: false, // Set a custom target element for scrolling to. Can be element or number
|
||||
scrollText: '<i class="fas fa-arrow-up"></i>', // Text for element, can contain HTML
|
||||
scrollTitle: false, // Set a custom <a> title if required.
|
||||
scrollImg: false, // Set true to use image
|
||||
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
|
||||
zIndex: 214, // Z-Index for the overlay
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
||||
Vendored
+30883
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,758 @@
|
||||
$(document).ready(function () {
|
||||
let navbarHtml = `
|
||||
<!-- offcanvas-overlay start -->
|
||||
<div class="offcanvas-overlay"></div>
|
||||
<!-- offcanvas-overlay end -->
|
||||
<!-- offcanvas-mobile-menu start -->
|
||||
<div id="offcanvas-mobile-menu" class="offcanvas theme1 offcanvas-mobile-menu ">
|
||||
<div class="inner">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="inner-img d-flex ">
|
||||
<img src="./assets/img/logo/logo-black.png" class="img-fluid " alt="anwi-logo">
|
||||
</div>
|
||||
<div class=" pt-3 text-end">
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="offcanvas-menu">
|
||||
<ul>
|
||||
<li class="home-text">
|
||||
<a class="home-text1" href="index.html"><span class="menu-text ">Home</span></a>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="products.html"><span class="menu-text">Products</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="servers.html"><span class="menu-text">Servers</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="surpass3u.html"><span class="menu-text">ANWI SURPASS 3U</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="surpass2u.html"><span class="menu-text">ANWI SURPASS 2U</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="surpass1u.html"><span class="menu-text">ANWI SURPASS 1U</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="24-bay-storage.html"><span class="menu-text">Storage</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="24-bay-storage.html"><span class="menu-text">24 Bay Storage</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a class="shop-text1" href="network-switches.html"><span class="menu-text">Network Switches</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li><a href="400g-data.html">400G</a></li>
|
||||
<li>
|
||||
<a href="100g-port3.html"><span class="menu-text">100G</span></a>
|
||||
</li>
|
||||
<li><a href="40g-data.html">40G</a></li>
|
||||
<li><a href="25g-data.html">25G</a></li>
|
||||
<li><a href="10g-data.html">10G</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="network-cards.html"><span class="menu-text">Network Cards/Cables </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="network-card-700series.html"><span class="menu-text">700 Series</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="network-card-800series.html"><span class="menu-text">800 Series</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text d-none">
|
||||
<a class="shop-text1" href="routers.html"><span class="menu-text">Routers </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="routers.html"><span class="menu-text">COR580</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text d-none">
|
||||
<a class="shop-text1" ><span class="menu-text">Firewalls </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="firewalls.html"><span class="menu-text">Netgate 7100 1U</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text d-none">
|
||||
<a class="shop-text1" ><span class="menu-text">Smart Racks </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="racks.html"><span class="menu-text">Computer Racks</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text d-none">
|
||||
<a class="shop-text1" ><span class="menu-text">Management Units </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="management-units.html"><span class="menu-text">IMOU Unit</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="about.html"><span class="menu-text">About US</span></a>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="contact-us.html"><span class="menu-text">Contact</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="offcanvas-social py-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><i class="fab fa-facebook-f"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fab fa-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fab fa-instagram"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fab fa-google"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="fab fa-whatsapp"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- offcanvas-mobile-menu end -->
|
||||
<!-- OffCanvas Wishlist Start -->
|
||||
<div id="offcanvas-wishlist" class="offcanvas offcanvas-wishlist theme1">
|
||||
<div class="inner">
|
||||
<div class="head d-flex flex-wrap justify-content-between">
|
||||
<span class="title">Wishlist</span>
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
<ul class="minicart-product-list">
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/4.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>orginal Age Defying Cosmetics Makeup</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$100.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/5.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>On Trend Makeup and Beauty Cosmetics</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$35.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/6.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>orginal Age Defying Cosmetics Makeup</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$9.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
href="wishlist.html"
|
||||
class="btn btn-primary btn--lg d-block d-sm-inline-block mt-30"
|
||||
>view wishlist</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- OffCanvas Wishlist End -->
|
||||
|
||||
<!-- OffCanvas Cart Start -->
|
||||
<div id="offcanvas-cart" class="offcanvas offcanvas-cart theme1">
|
||||
<div class="inner">
|
||||
<div class="head d-flex flex-wrap justify-content-between">
|
||||
<span class="title">Cart</span>
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
<div id="side-cart">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5">
|
||||
<a href="cart.html" class="btn btn-secondary btn--lg d-block d-sm-inline-block me-sm-2 side-cart-btn" >view cart</a>
|
||||
<a href="checkout.html" class="btn btn-dark btn--lg d-block d-sm-inline-block mt-4 mt-sm-0 side-cart-btn" >checkout</a>
|
||||
<p class="minicart-message">Free Shipping on All Orders Over $100!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- OffCanvas Cart End -->
|
||||
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<!-- header-middle satrt -->
|
||||
<div id="sticky" class="header-middle theme1 py-lg-0 main-index product-info-page">
|
||||
<div class="container position-relative headers">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6 col-lg-2 col-xl-2 mt-0">
|
||||
<div class="logo">
|
||||
<a href="index.html"
|
||||
><img class="main-logo img-fluid " src="./assets/img/logo/logo-white.png" alt="anwi-logo"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 col-xl-10 col-lg-10 d-lg-flex justify-content-between">
|
||||
<ul class="main-menu d-lg-flex d-none">
|
||||
<li class="ml-0 highlight">
|
||||
<a href="index.html" class="ps-0 main-nav-list nav-home"><span class="active cool-link">Home</span></a>
|
||||
</li>
|
||||
<li class="position-static highlight">
|
||||
<a href="products.html" class="nav-products main-nav-list"><span class="active cool-link">Products</span> <i class="fa fa-chevron-down"></i></a>
|
||||
<div class="mega-menu row">
|
||||
<div class="container nav-mega-menu">
|
||||
<ul id="tabs-nav" class=" nav-menu-category">
|
||||
<li data-role="thumb-1" class="nav-menu-category1 active py-3">
|
||||
<a href="servers.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Servers</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-1" class="menu-sections">
|
||||
<!-- <button class="close-btn">×</button> -->
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class= "d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="servers.html"><h4>Servers</h4></a></div> <div><a href="servers.html" class= "view-all">view all</a> </div> </div>
|
||||
<div class=" mx-5 border-bottom row">
|
||||
<a href="surpass3u.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div> <img src="./assets/img/slider/slider-img1.svg" class="mega-nav-img"></div>
|
||||
<div >ANWI SURPASS 3U</div>
|
||||
</a>
|
||||
<a href="surpass2u.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/400!280/server2U.png" class="mega-nav-img"></div>
|
||||
<div >ANWI SURPASS 2U</div>
|
||||
</a>
|
||||
<a href="surpass1u.html" class="col-md-4 d-flex py-5 sub-nav-list ">
|
||||
<div><img src="./assets/img/400!280/server1U.png" class="mega-nav-img"></div>
|
||||
<div >ANWI SURPASS 1U</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- servers-end -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="24-bay-storage.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Storage</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="24-bay-storage.html"> <h4>Storage</h4> </a> </div> <div class="d-none"><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="24-bay-storage.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/storage/24-bay-storage.png" class="mega-nav-img switches router"></div>
|
||||
<div >24 Bay Storage </div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- storage-end -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class=" nav-menu-category1 py-3">
|
||||
<a href="network-switches.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Switches</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class=" pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="network-switches.html"> <h4>Network Switches</h4> </a> </div> <div><a href="network-switches.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="10g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/10g.png" class="mega-nav-img switches"></div>
|
||||
<div >10G-Switch</div>
|
||||
</a>
|
||||
|
||||
<a href="25g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/25g.png" class="mega-nav-img switches"></div>
|
||||
<div >25G-Switch</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="40g-data.html" class="col-md-3 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/40g.png" class="mega-nav-img switches"></div>
|
||||
<div >40G-Switch</div>
|
||||
</a>
|
||||
|
||||
<a href="100g-port3.html" class="col-md-3 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/100g3.png" class="mega-nav-img switches"></div>
|
||||
<div >100G-Switch</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="100g-port2.html" class="col-md-3 d-flex py-5 sub-nav-list d-none">
|
||||
<div><img src="./assets/img/650!450/100g2.png" class="mega-nav-img switches"></div>
|
||||
<div href="100g-port2.html" >100G-2 Switch</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="100g-port1.html" class="col-md-3 d-flex py-5 sub-nav-list d-none">
|
||||
<div><img src="./assets/img/650!450/100g1.png" class="mega-nav-img switches"></div>
|
||||
<div >100G-1 Switch</div>
|
||||
</a>
|
||||
|
||||
<a href="400g-data.html" class="col-md-3 d-flex py-4 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/400g.png" class="mega-nav-img switches"></div>
|
||||
<div >400G Switch</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- switches-end -->
|
||||
<!-- network-cards / cables start -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="network-cards.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Cards/Cables</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <a href="network-cards.html"> <h4>Network Cards</h4> </a> </div> <div><a href="network-cards.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row ms-5 border-bottom">
|
||||
<a href="network-card-700series.html" class="col-md-5 py-5 d-flex sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches"></div>
|
||||
<div >Anwi Ethernet Network Adapter XXV710</div>
|
||||
</a>
|
||||
<a href="network-card-800series.html" class="col-md-5 py-5 d-flex sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/800-series.png" class="mega-nav-img switches"></div>
|
||||
<div >Anwi Ethernet 800 Series Network Adapters</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- network-cards / cables end -->
|
||||
|
||||
<!---Routers start -->
|
||||
<ul class=" nav-menu-category d-none">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="routers.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Routers</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Routers</h4></div> <div class="d-none"><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="routers.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches"></div>
|
||||
<div >Routers</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Routers end -->
|
||||
|
||||
<!---Firewalls start -->
|
||||
<ul class=" nav-menu-category d-none">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="firewall.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Firewalls</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Firewalls</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="firewall.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches"></div>
|
||||
<div >Netgate 7100 1U</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Firewalls end -->
|
||||
|
||||
<!---Smart Racks start -->
|
||||
<ul class=" nav-menu-category d-none">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="racks.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Smart Racks</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Smart Racks</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="racks.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/no-image.png" class="mega-nav-img switches"></div>
|
||||
<div>Computer Racks</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Smart Racks end -->
|
||||
|
||||
<!---Management Units start -->
|
||||
<ul class=" nav-menu-category d-none">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="management-units.html" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Management Units</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Management Units</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="management-units.html" class="col-md-4 d-flex py-5 sub-nav-list">
|
||||
<div><img src="./assets/img/no-image.png" class="mega-nav-img switches"></div>
|
||||
<div >IMOU Unit</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Management units end -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="highlight">
|
||||
<a href="about.html" class="main-nav-list"><span class="active cool-link">About US</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="d-flex main-menu justify-content-end">
|
||||
<li class="highlight currency">
|
||||
<select class="browser-default white-arrow" id="custom-selects">
|
||||
<option value="inr" id="inr" selected >₹ INR</span></option>
|
||||
<option value="usd" id="usd">$ USD</option>
|
||||
<option value="gbp" id="gbp">£ GBP</option>
|
||||
<option value="eur" id="eur">€ EUR</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="highlight d-none d-lg-block">
|
||||
<a href="contact-us.html" class=" get-in main-nav-list"><span class="get-in-touch active cool-link px-3 py-2">Get in Touch<i class="fa fa-arrow-right pl-20"></i> </span></a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-2 col-lg-2 mt-0">
|
||||
<!-- search-form end -->
|
||||
<div class="d-flex align-items-center justify-content-end">
|
||||
<!-- static-media end -->
|
||||
<div class="mobile-menu-toggle theme1 d-lg-none">
|
||||
<a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
|
||||
<svg viewBox="0 0 700 550">
|
||||
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" style="stroke: #fff;"></path>
|
||||
<path d="M300,320 L540,320" id="middle" style="stroke: #fff;"></path>
|
||||
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)" style="stroke: #fff;"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- header-middle end -->
|
||||
</header>
|
||||
<!-- header end -->
|
||||
`;
|
||||
$("#navbar-head").html(navbarHtml);
|
||||
|
||||
$(".nav-products").click(function () {
|
||||
$(".mega-menu").toggle();
|
||||
});
|
||||
|
||||
// all category hover
|
||||
$(".nav-menu-category1").mouseover(function () {
|
||||
$(".nav-menu-category1").find("a").removeClass("active");
|
||||
$(this).find("a").addClass("active");
|
||||
$(".menu-sections").attr("Style", "");
|
||||
});
|
||||
|
||||
// products hover
|
||||
$("a.main-nav-list").click(function () {
|
||||
$("a.main-nav-list").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".nav-menu-category1.bgg .menu-sections").css("top", "1.7%");
|
||||
});
|
||||
|
||||
$(".nav-menu-category1.active").removeClass("active");
|
||||
$(this).parents(".menu-sections").removeClass("d-none");
|
||||
$(this).parents(".menu-sections").parent().addClass("active");
|
||||
|
||||
// active-menu for navbar
|
||||
if (location.pathname != "/") {
|
||||
// Main Nav
|
||||
$("a.main-nav-list").each(function () {
|
||||
if (this.href === location.href) {
|
||||
$(this).addClass("active");
|
||||
if ($(this).parents().hasClass("highlight")) {
|
||||
$(this)
|
||||
.parents("highlight")
|
||||
.find("a.main-nav-list")
|
||||
.addClass("active");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// else if ($('body[data-page="product"]')) {
|
||||
// $(this).addClass("active");
|
||||
// }
|
||||
});
|
||||
} else {
|
||||
$("a.nav-home").addClass("active");
|
||||
}
|
||||
// active-menu for sub category
|
||||
if (location.pathname != "/") {
|
||||
// Main Nav
|
||||
$("a.sub-nav-list").each(function () {
|
||||
if (this.href === location.href) {
|
||||
$(this).addClass("active");
|
||||
if ($(this).parents().hasClass("highlight")) {
|
||||
$(this)
|
||||
.parents("highlight")
|
||||
.find("a.sub-nav-list")
|
||||
.addClass("active");
|
||||
$(this)
|
||||
.parents(".nav-menu-category1")
|
||||
.css("background", "white")
|
||||
.addClass("bgg");
|
||||
$(this).parents(".menu-sections").css("top", "1.7%");
|
||||
// $(this).parents('.menu-sections').parent().addClass('active');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// console.log(location.pathname);
|
||||
}
|
||||
|
||||
// border for products
|
||||
if (location.pathname != "/") {
|
||||
$(".sub-nav-list").each(function () {
|
||||
if (this.href === location.href) {
|
||||
$(this).addClass("border");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// active-menu for category
|
||||
// if (location.pathname != "/") {
|
||||
// // Main Nav
|
||||
// $(".sub-category").each(function () {
|
||||
// if (this.href === location.href) {
|
||||
// $(this).addClass("active");
|
||||
// if ($(this).parents().hasClass("nav-menu-category1")) {
|
||||
// $(this).parents("nav-menu-category1").find(".sub-category").addClass("active");
|
||||
// }
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
/*---------------------------
|
||||
Commons Variables
|
||||
------------------------------ */
|
||||
const $window = $(window),
|
||||
$body = $("body");
|
||||
|
||||
/*--------------------------
|
||||
Sticky Menu
|
||||
---------------------------- */
|
||||
var initialSrc = "./assets/img/logo/logo-white.png";
|
||||
var scrollSrc = "./assets/img/logo/logo-black.png";
|
||||
|
||||
$($window).on("scroll", function () {
|
||||
var scroll = $($window).scrollTop();
|
||||
if (scroll < 150) {
|
||||
$("#sticky").removeClass("is-isticky");
|
||||
$("#sticky").addClass("main-index");
|
||||
|
||||
$("#custom-selects").addClass("white-arrow");
|
||||
$("#custom-selects").removeClass("blue-arrow");
|
||||
} else {
|
||||
$("#sticky").addClass("is-isticky");
|
||||
$("#sticky").removeClass("main-index");
|
||||
|
||||
$("#custom-selects").addClass("blue-arrow");
|
||||
$("#custom-selects").removeClass("white-arrow");
|
||||
}
|
||||
|
||||
var value = $(this).scrollTop();
|
||||
if ($("body").attr("data-page") != "product") {
|
||||
if (value > 100) {
|
||||
$(".main-logo").attr("src", scrollSrc);
|
||||
$(".mobile-menu-toggle.theme1 svg path").css("stroke", "#000");
|
||||
// $("#custom-selects").addClass("blue-arrow");
|
||||
// $("#custom-selects").removeClass("white-arrow");
|
||||
} else {
|
||||
$(".main-logo").attr("src", initialSrc);
|
||||
$(".mobile-menu-toggle.theme1 svg path").css("stroke", "#fff");
|
||||
// $("#custom-selects").addClass("blue-arrow");
|
||||
// $("#custom-selects").removeClass("white-arrow");
|
||||
}
|
||||
}
|
||||
if ($("body").attr("data-page") == "product") {
|
||||
if (value > 100) {
|
||||
$("#custom-selects").addClass("blue-arrow");
|
||||
$("#custom-selects").removeClass("white-arrow");
|
||||
} else {
|
||||
$("#custom-selects").addClass("blue-arrow");
|
||||
$("#custom-selects").removeClass("white-arrow");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if ($("body").attr("data-page") == "product") {
|
||||
// console.log("working");
|
||||
$(".waves").removeClass("waves");
|
||||
$(".main-logo").attr("src", scrollSrc);
|
||||
$(".nav-products").addClass("active");
|
||||
$("#custom-selects").removeClass("white-arrow");
|
||||
$("#custom-selects").addClass("blue-arrow");
|
||||
}
|
||||
|
||||
/*---------------------------------
|
||||
Off Canvas toggler Function
|
||||
-----------------------------------*/
|
||||
const $offCanvasToggle = $(".offcanvas-toggle"),
|
||||
$offCanvas = $(".offcanvas"),
|
||||
$offCanvasOverlay = $(".offcanvas-overlay"),
|
||||
$mobileMenuToggle = $(".mobile-menu-toggle");
|
||||
$offCanvasToggle.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
const $this = $(this),
|
||||
$target = $this.attr("href");
|
||||
$body.addClass("offcanvas-open");
|
||||
$($target).addClass("offcanvas-open");
|
||||
$offCanvasOverlay.fadeIn();
|
||||
if ($this.parent().hasClass("mobile-menu-toggle")) {
|
||||
$this.addClass("close");
|
||||
}
|
||||
});
|
||||
|
||||
$(".offcanvas-close, .offcanvas-overlay").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$body.removeClass("offcanvas-open");
|
||||
$offCanvas.removeClass("offcanvas-open");
|
||||
$offCanvasOverlay.fadeOut();
|
||||
$mobileMenuToggle.find("a").removeClass("close");
|
||||
});
|
||||
|
||||
/*----------------------------------
|
||||
Off Canvas Menu
|
||||
-----------------------------------*/
|
||||
function mobileOffCanvasMenu() {
|
||||
var $offCanvasNav = $(".offcanvas-menu, .overlay-menu"),
|
||||
$offCanvasNavSubMenu = $offCanvasNav.find(".offcanvas-submenu");
|
||||
|
||||
/*Add Toggle Button With Off Canvas Sub Menu*/
|
||||
$offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"></span>');
|
||||
|
||||
/*Category Sub Menu Toggle*/
|
||||
$offCanvasNav.on("click", "li a, .menu-expand", function (e) {
|
||||
var $this = $(this);
|
||||
if ($this.attr("href") === "#" || $this.hasClass("menu-expand")) {
|
||||
e.preventDefault();
|
||||
if ($this.siblings("ul:visible").length) {
|
||||
$this.parent("li").removeClass("active");
|
||||
$this.siblings("ul").slideUp();
|
||||
$this.parent("li").find("li").removeClass("active");
|
||||
$this.parent("li").find("ul:visible").slideUp();
|
||||
} else {
|
||||
$this.parent("li").addClass("active");
|
||||
$this
|
||||
.closest("li")
|
||||
.siblings("li")
|
||||
.removeClass("active")
|
||||
.find("li")
|
||||
.removeClass("active");
|
||||
$this.closest("li").siblings("li").find("ul:visible").slideUp();
|
||||
$this.siblings("ul").slideDown();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mobileOffCanvasMenu();
|
||||
|
||||
$(".close").on("click", function () {
|
||||
$("body").removeClass("open");
|
||||
});
|
||||
|
||||
$("#custom-selects").on("change", function (e) {
|
||||
let userCurrency = localStorage.getItem("defaultCurrency");
|
||||
let selectedCurrency = localStorage.getItem("currentCurrency");
|
||||
|
||||
localStorage.setItem("currentCurrency", e.target.value.toUpperCase());
|
||||
// updatePrices(previousCurrency, e.target.value.toUpperCase());
|
||||
updatePrices(selectedCurrency, e.target.value.toUpperCase());
|
||||
|
||||
updatePrices(rates[usercurency]);
|
||||
});
|
||||
|
||||
// api calling for currrent location finding
|
||||
|
||||
let localCurrency;
|
||||
|
||||
async function myCurrency() {
|
||||
let country;
|
||||
const key = "b3de4pl6nvcq5gvr";
|
||||
|
||||
let url = `https://api.ipregistry.co/?key=${key}&fields=currency,location.country.name,location.continent.name`;
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
var data = await response.json();
|
||||
console.log(data);
|
||||
country = data.currency.code;
|
||||
let country_codes = ["INR", "USD", "EUR", "GBP"];
|
||||
if (!country_codes.includes(country)) {
|
||||
country = "USD";
|
||||
}
|
||||
return country;
|
||||
}
|
||||
if (localStorage.getItem("defaultCurrency") == "undefined") {
|
||||
currency();
|
||||
}
|
||||
|
||||
let selectedCurrency = localStorage.getItem("currentCurrency");
|
||||
let regionalCurrency = localStorage.getItem("defaultCurrency");
|
||||
|
||||
let userCurrency = $("#custom-selects").val();
|
||||
let originalCurrency = "INR";
|
||||
|
||||
async function currency() {
|
||||
localCurrency = await myCurrency();
|
||||
// if (!country_codes.includes(localCurrency)) {
|
||||
// localCurrency = "USD";
|
||||
// }
|
||||
let currency = localStorage.getItem("defaultCurrency");
|
||||
console.log(localCurrency);
|
||||
if ((currency = "undefined")) {
|
||||
localStorage.setItem("defaultCurrency", localCurrency);
|
||||
localStorage.setItem("currentCurrency", localCurrency);
|
||||
$("#custom-selects").val(localCurrency.toLowerCase());
|
||||
} else {
|
||||
let uc = localStorage.getItem("currency");
|
||||
localStorage.setItem("currency", uc);
|
||||
}
|
||||
if (regionalCurrency != selectedCurrency) {
|
||||
updatePrices(originalCurrency, selectedCurrency);
|
||||
} else if (localCurrency != originalCurrency) {
|
||||
updatePrices(originalCurrency, localCurrency);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAllPrices() {
|
||||
function selectChange() {
|
||||
$("#custom-selects").val(selectedCurrency.toLowerCase());
|
||||
if (userCurrency == "undefined") {
|
||||
$("#custom-selects").val(regionalCurrency.toLowerCase());
|
||||
}
|
||||
}
|
||||
selectChange();
|
||||
if (originalCurrency != selectedCurrency) {
|
||||
changeCurrency = $("#custom-selects").val();
|
||||
updatePrices(originalCurrency, changeCurrency.toUpperCase());
|
||||
}
|
||||
}
|
||||
updateAllPrices();
|
||||
});
|
||||
// $(".fade").addClass
|
||||
@@ -0,0 +1,657 @@
|
||||
$(document).ready(function () {
|
||||
let navbarHtml = `
|
||||
<!-- offcanvas-overlay start -->
|
||||
<div class="offcanvas-overlay"></div>
|
||||
<!-- offcanvas-overlay end -->
|
||||
<!-- offcanvas-mobile-menu start -->
|
||||
<div id="offcanvas-mobile-menu" class="offcanvas theme1 offcanvas-mobile-menu ">
|
||||
<div class="inner">
|
||||
<div class="d-flex ">
|
||||
<div class="inner-img d-flex ml-15">
|
||||
<img src="./assets/img/logo/logo-black.png" class="img-fluid " alt="anwi-logo">
|
||||
</div>
|
||||
<div class=" pt-3 pr-10 ms-auto ">
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="offcanvas-menu">
|
||||
<ul>
|
||||
<li class="home-text">
|
||||
<a class="home-text1" href="index.html"><span class="menu-text ">Home</span></a>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="products.html"><span class="menu-text">Products</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Servers</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="surpass3u.html"><span class="menu-text">American Pass</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="surpass2u.html"><span class="menu-text">Coyote Pass</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="surpass1u.html"><span class="menu-text">North Pass</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Storage</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="24-bay-storage.html"><span class="menu-text">24 Bay Storage</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="network-switches.html"><span class="menu-text">Network Switches</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li><a href="400g-data.html">400G</a></li>
|
||||
<li>
|
||||
<a href="#"><span class="menu-text">100G</span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="100g-port1.html">100G1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="100g-port2.html">100G2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="100g-port3.html">100g3</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="40g-data.html">40G</a></li>
|
||||
<li><a href="25g-data.html">25G</a></li>
|
||||
<li><a href="10g-data.html">10G</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Network Cards/Cables </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="network-card-700series.html"><span class="menu-text">700 Series</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="network-card-800series.html"><span class="menu-text">800 Series</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Routers </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="routers.html"><span class="menu-text">COR580</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Firewalls </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="firewalls.html"><span class="menu-text">Netgate 7100 1U</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Smart Racks </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="racks.html"><span class="menu-text">Computer Racks</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" ><span class="menu-text">Management Units </span></a>
|
||||
<ul class="offcanvas-submenu">
|
||||
<li>
|
||||
<a href="management-units.html"><span class="menu-text">IMOU Unit</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="about.html"><span class="menu-text">About US</span></a>
|
||||
</li>
|
||||
<li class="shop-text">
|
||||
<a class="shop-text1" href="contact-us.html"><span class="menu-text">Contact</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="offcanvas-social py-30">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#"><i class="icon-social-facebook"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="icon-social-twitter"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="icon-social-instagram"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="icon-social-google"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"><i class="icon-social-instagram"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- offcanvas-mobile-menu end -->
|
||||
<!-- OffCanvas Wishlist Start -->
|
||||
<div id="offcanvas-wishlist" class="offcanvas offcanvas-wishlist theme1">
|
||||
<div class="inner">
|
||||
<div class="head d-flex flex-wrap justify-content-between">
|
||||
<span class="title">Wishlist</span>
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
<ul class="minicart-product-list">
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/4.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>orginal Age Defying Cosmetics Makeup</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$100.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/5.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>On Trend Makeup and Beauty Cosmetics</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$35.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="single-product.html" class="image"
|
||||
><img src="./assets/img/mini-cart/6.png" alt="Cart product Image"
|
||||
/></a>
|
||||
<div class="content">
|
||||
<a href="single-product.html" class="title"
|
||||
>orginal Age Defying Cosmetics Makeup</a
|
||||
>
|
||||
<span class="quantity-price"
|
||||
>1 x <span class="amount">$9.00</span></span
|
||||
>
|
||||
<a href="#" class="remove">×</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
href="wishlist.html"
|
||||
class="btn btn-primary btn--lg d-block d-sm-inline-block mt-30"
|
||||
>view wishlist</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- OffCanvas Wishlist End -->
|
||||
|
||||
<!-- OffCanvas Cart Start -->
|
||||
<div id="offcanvas-cart" class="offcanvas offcanvas-cart theme1">
|
||||
<div class="inner">
|
||||
<div class="head d-flex flex-wrap justify-content-between">
|
||||
<span class="title">Cart</span>
|
||||
<button class="offcanvas-close">×</button>
|
||||
</div>
|
||||
<div id="side-cart">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5">
|
||||
<a href="cart.html" class="btn btn-secondary btn--lg d-block d-sm-inline-block me-sm-2 side-cart-btn" >view cart</a>
|
||||
<a href="checkout.html" class="btn btn-dark btn--lg d-block d-sm-inline-block mt-4 mt-sm-0 side-cart-btn" >checkout</a>
|
||||
<p class="minicart-message">Free Shipping on All Orders Over $100!</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- OffCanvas Cart End -->
|
||||
|
||||
<!-- header start -->
|
||||
<header>
|
||||
<!-- header-middle satrt -->
|
||||
<div id="sticky" class="header-middle theme1 py-lg-0 main-index product-info-page">
|
||||
<div class="container position-relative headers">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-6 col-lg-2 col-xl-2 mt-0">
|
||||
<div class="logo">
|
||||
<a href="index.html"
|
||||
><img class="main-logo img-fluid " src="./assets/img/logo/logo-white.png" alt="anwi-logo"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-10 col-lg-10 d-none d-lg-block">
|
||||
<ul class="main-menu d-flex justify-content-right">
|
||||
<li class="ml-0 highlight">
|
||||
<a href="index.html" class="ps-0 main-nav-list"><span class="active cool-link">Home</span></a>
|
||||
</li>
|
||||
<li class="position-static highlight">
|
||||
<div class="nav-products main-nav-list"><span class="active cool-link">Products</span> <i class="ion-ios-arrow-down"></i></div>
|
||||
<div class="mega-menu row">
|
||||
<div class="container nav-mega-menu">
|
||||
<ul id="tabs-nav" class=" nav-menu-category">
|
||||
<li data-role="thumb-1" class="nav-menu-category1 active py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>SERVERS</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-1" class="menu-sections">
|
||||
<!-- <button class="close-btn">×</button> -->
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class= "d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Servers</h4></div> <div><a href="products.html" class= "view-all">view all</a> </div> </div>
|
||||
<div class=" mx-5 border-bottom row">
|
||||
<a href="surpass3u.html" class="col-md-4 d-flex py-5 nav-product">
|
||||
<img src="./assets/img/servers/american-pass-fv.png" class="mega-nav-img">
|
||||
<div class="sub-nav-list">American Pass</div>
|
||||
</a>
|
||||
<a href="surpass2u.html" class="col-md-4 d-flex py-5 nav-product">
|
||||
<img src="./assets/img/servers/creek-pass-fv.png" class="mega-nav-img">
|
||||
<div class="sub-nav-list">Coyote Pass</div>
|
||||
</a>
|
||||
<a href="surpass1u.html" class="col-md-4 d-flex py-5 nav-product">
|
||||
<img src="./assets/img/servers/creek-pass-fv.png" class="mega-nav-img">
|
||||
<div class="sub-nav-list">North Pass</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- servers-end -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>STORAGE</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Storage</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="24-bay-storage.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/storage/24-bay-storage.png" class="mega-nav-img switches router">
|
||||
<div class="sub-nav-list">24 Bay Storage </div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- storage-end -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class=" nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Switches</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Network Switches</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="10g-data.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/10g.png" class="mega-nav-img switches">
|
||||
<div >10G-Switch</div>
|
||||
</a>
|
||||
|
||||
<a href="25g-data.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/25g.png" class="mega-nav-img switches">
|
||||
<div >25G-Switch</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="40g-data.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/40g.png" class="mega-nav-img switches">
|
||||
<div >40G-Switch</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="100g-port1.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/100g1.png" class="mega-nav-img switches">
|
||||
<div >100G-1 Switch</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="row mt-5 mx-5 border-bottom">
|
||||
<a href="100g-port2.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/100g2.png" class="mega-nav-img switches">
|
||||
<div href="100g-port2.html" >100G-2 Switch</div>
|
||||
</a>
|
||||
|
||||
|
||||
<a href="100g-port3.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/100g3.png" class="mega-nav-img switches">
|
||||
<div >100G-3 Switch</div>
|
||||
</a>
|
||||
|
||||
<a href="400g-data.html" class="col-md-3 d-flex py-5">
|
||||
<img src="./assets/img/650!450/400g.png" class="mega-nav-img switches">
|
||||
<div >400G Switch</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- switches-end -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Network Cards/Cables</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections">
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Network Cards</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="network-card-700series.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches">
|
||||
<div class="sub-nav-list">Anwi Ethernet Network Adapter XXV710</div>
|
||||
</a>
|
||||
<a href="network-card-800series.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/650!450/800-series.png" class="mega-nav-img switches">
|
||||
<div class="sub-nav-list">Anwi Ethernet 800 Series Network Adapters</div>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
<!-- network-cards / cables end -->
|
||||
|
||||
<!---Routers start -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Routers</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Routers</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="routers.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/650!450/700-series.png" class="mega-nav-img switches">
|
||||
<div class="sub-nav-list">Routers</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Routers end -->
|
||||
|
||||
<!---Firewalls start -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Firewalls</b><span><i class="arrow-nav-img2 fa fa-chevron-right"></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Firewalls</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="firewall.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
|
||||
<div >Netgate 7100 1U</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Firewalls end -->
|
||||
|
||||
<!---Smart Racks start -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Smart Racks</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Smart Racks</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="racks.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
|
||||
<div >Computer Racks</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Smart Racks end -->
|
||||
|
||||
<!---Management Units start -->
|
||||
<ul class=" nav-menu-category">
|
||||
<li data-role="thumb-2" class="nav-menu-category1 py-3">
|
||||
<a href="#" class="sub-category d-flex justify-content-between w-75 px-2 py-1"><b>Management Units</b><span><i class="arrow-nav-img2 fa fa-chevron-right" ></i></span></a>
|
||||
<section data-role="content-2" class="menu-sections" >
|
||||
<div class="container mt-5">
|
||||
<div class="pb-4 px-50 text-lg-start d-flex justify-content-between"><div class="d-flex"><i class="fa fa-2x fa-compass pr-10"></i> <h4>Management Units</h4></div> <div><a href="products.html" class="view-all active">view all</a> </div> </div>
|
||||
<div class="row mx-5 border-bottom">
|
||||
<a href="management-units.html" class="col-md-4 d-flex py-5">
|
||||
<img src="./assets/img/firewall/firewall3.png" class="mega-nav-img switches">
|
||||
<div >IMOU Unit</div>
|
||||
</a>
|
||||
</div>
|
||||
</div></section>
|
||||
</li></ul>
|
||||
<!---Management units end -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<li class="highlight">
|
||||
<a href="about.html" class="main-nav-list"><span class="active cool-link">About US</span></a>
|
||||
</li>
|
||||
<li class="highlight">
|
||||
<a href="contact-us.html" class="main-nav-list"><span class="active cool-link">Contact</span></a>
|
||||
</li>
|
||||
<li class="highlight currency">
|
||||
<select class="browser-default" id="custom-selects">
|
||||
<option value="inr" id="inr" selected>INR</option>
|
||||
<option value="usd" id="usd">USD</option>
|
||||
<option value="gbp" id="gbp">GBP</option>
|
||||
</select>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-lg-2 mt-0">
|
||||
<!-- search-form end -->
|
||||
<div class="d-flex align-items-center justify-content-end">
|
||||
<!-- static-media end -->
|
||||
<div class="mobile-menu-toggle theme1 d-lg-none">
|
||||
<a href="#offcanvas-mobile-menu" class="offcanvas-toggle">
|
||||
<svg viewBox="0 0 700 550">
|
||||
<path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top" style="stroke: #fff;"></path>
|
||||
<path d="M300,320 L540,320" id="middle" style="stroke: #fff;"></path>
|
||||
<path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318)" style="stroke: #fff;"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- header-middle end -->
|
||||
</header>
|
||||
<!-- header end -->
|
||||
`;
|
||||
$("#navbar-head").html(navbarHtml);
|
||||
|
||||
$(".nav-products").click(function () {
|
||||
$(".mega-menu").toggle();
|
||||
});
|
||||
|
||||
// all category hover
|
||||
$(".nav-menu-category1").mouseover(function () {
|
||||
$(".nav-menu-category1").find("a").removeClass("active");
|
||||
$(this).find("a").addClass("active");
|
||||
$(".menu-sections").attr("Style", "");
|
||||
});
|
||||
|
||||
// products hover
|
||||
$("a.main-nav-list").click(function () {
|
||||
$("a.main-nav-list").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(".nav-menu-category1.bgg .menu-sections").css("top", "1.7%");
|
||||
});
|
||||
|
||||
|
||||
$(".nav-menu-category1.active").removeClass("active");
|
||||
$(this).parents(".menu-sections").removeClass("d-none");
|
||||
$(this).parents(".menu-sections").parent().addClass("active");
|
||||
|
||||
// active-menu for navbar
|
||||
if (location.pathname != "/") {
|
||||
// Main Nav
|
||||
$("a.main-nav-list").each(function () {
|
||||
if (this.href === location.href) {
|
||||
$(this).addClass("active");
|
||||
if ($(this).parents().hasClass("highlight")) {
|
||||
$(this)
|
||||
.parents("highlight")
|
||||
.find("a.main-nav-list")
|
||||
.addClass("active");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// else if ($('body[data-page="product"]')) {
|
||||
// $(this).addClass("active");
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// active-menu for sub category
|
||||
// if (location.pathname != "/") {
|
||||
// // Main Nav
|
||||
// $(".sub-nav-list").each(function () {
|
||||
// if (this.href === location.href) {
|
||||
// $(this).addClass("active");
|
||||
// if ($(this).parents().hasClass("highlight")) {
|
||||
// $(this)
|
||||
// .parents("highlight")
|
||||
// .find("a.sub-nav-list")
|
||||
// .addClass("active");
|
||||
// $(this)
|
||||
// .parents(".nav-menu-category1")
|
||||
// .css("background", "white")
|
||||
// .addClass("bgg");
|
||||
// $(this).parents(".menu-sections").css("top", "1.7%");
|
||||
// $(this).parents('.menu-sections').parent().addClass('active');
|
||||
// }
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// border for products
|
||||
if (location.pathname != "/") {
|
||||
$(".nav-product").each(function () {
|
||||
if (this.href === location.href) {
|
||||
$(this).addClass("border");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/*--------------------------- Commons Variables ------------------------------ */
|
||||
const $window = $(window),
|
||||
$body = $("body");
|
||||
|
||||
/*-------------------------- Sticky Menu ---------------------------- */
|
||||
var initialSrc = "./assets/img/logo/logo-white.png";
|
||||
var scrollSrc = "./assets/img/logo/logo-black.png";
|
||||
|
||||
$($window).on("scroll", function () {
|
||||
var scroll = $($window).scrollTop();
|
||||
if (scroll < 150) {
|
||||
$("#sticky").removeClass("is-isticky");
|
||||
$("#sticky").addClass("main-index");
|
||||
} else {
|
||||
$("#sticky").addClass("is-isticky");
|
||||
$("#sticky").removeClass("main-index");
|
||||
}
|
||||
|
||||
var value = $(this).scrollTop();
|
||||
if ($('body').attr("data-page") != "product") {
|
||||
if (value > 100) {
|
||||
$(".main-logo").attr("src", scrollSrc);
|
||||
$(".mobile-menu-toggle.theme1 svg path").css("stroke", "#000");
|
||||
} else {
|
||||
$(".main-logo").attr("src", initialSrc);
|
||||
$(".mobile-menu-toggle.theme1 svg path").css("stroke", "#fff");
|
||||
}
|
||||
}
|
||||
});
|
||||
if ($('body').attr("data-page") == "product") {
|
||||
// console.log("working");
|
||||
$(".waves").removeClass("waves");
|
||||
$(".main-logo").attr("src", scrollSrc);
|
||||
$(".nav-products").addClass("active");
|
||||
}
|
||||
|
||||
/*---------------------------------
|
||||
Off Canvas toggler Function
|
||||
-----------------------------------*/
|
||||
const $offCanvasToggle = $(".offcanvas-toggle"),
|
||||
$offCanvas = $(".offcanvas"),
|
||||
$offCanvasOverlay = $(".offcanvas-overlay"),
|
||||
$mobileMenuToggle = $(".mobile-menu-toggle");
|
||||
$offCanvasToggle.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
const $this = $(this),
|
||||
$target = $this.attr("href");
|
||||
$body.addClass("offcanvas-open");
|
||||
$($target).addClass("offcanvas-open");
|
||||
$offCanvasOverlay.fadeIn();
|
||||
if ($this.parent().hasClass("mobile-menu-toggle")) {
|
||||
$this.addClass("close");
|
||||
}
|
||||
});
|
||||
|
||||
$(".offcanvas-close, .offcanvas-overlay").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
$body.removeClass("offcanvas-open");
|
||||
$offCanvas.removeClass("offcanvas-open");
|
||||
$offCanvasOverlay.fadeOut();
|
||||
$mobileMenuToggle.find("a").removeClass("close");
|
||||
});
|
||||
|
||||
/*----------------------------------
|
||||
Off Canvas Menu
|
||||
-----------------------------------*/
|
||||
function mobileOffCanvasMenu() {
|
||||
var $offCanvasNav = $(".offcanvas-menu, .overlay-menu"),
|
||||
$offCanvasNavSubMenu = $offCanvasNav.find(".offcanvas-submenu");
|
||||
|
||||
/*Add Toggle Button With Off Canvas Sub Menu*/
|
||||
$offCanvasNavSubMenu.parent().prepend('<span class="menu-expand"></span>');
|
||||
|
||||
/*Category Sub Menu Toggle*/
|
||||
$offCanvasNav.on("click", "li a, .menu-expand", function (e) {
|
||||
var $this = $(this);
|
||||
if ($this.attr("href") === "#" || $this.hasClass("menu-expand")) {
|
||||
e.preventDefault();
|
||||
if ($this.siblings("ul:visible").length) {
|
||||
$this.parent("li").removeClass("active");
|
||||
$this.siblings("ul").slideUp();
|
||||
$this.parent("li").find("li").removeClass("active");
|
||||
$this.parent("li").find("ul:visible").slideUp();
|
||||
} else {
|
||||
$this.parent("li").addClass("active");
|
||||
$this
|
||||
.closest("li")
|
||||
.siblings("li")
|
||||
.removeClass("active")
|
||||
.find("li")
|
||||
.removeClass("active");
|
||||
$this.closest("li").siblings("li").find("ul:visible").slideUp();
|
||||
$this.siblings("ul").slideDown();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
mobileOffCanvasMenu();
|
||||
|
||||
$(".close").on("click", function () {
|
||||
$("body").removeClass("open");
|
||||
});
|
||||
|
||||
$("#custom-selects").on('change', function (e) {
|
||||
let previousCurrency = localStorage.getItem('currency');
|
||||
localStorage.setItem('currency', e.target.value.toUpperCase());
|
||||
updatePrices(previousCurrency, e.target.value.toUpperCase());
|
||||
|
||||
updatePrices(rates[usercurency]);
|
||||
})
|
||||
|
||||
|
||||
|
||||
});
|
||||
// $(".fade").addClass
|
||||
@@ -0,0 +1,465 @@
|
||||
$(function () {
|
||||
// configuration js
|
||||
const configCatgories = [
|
||||
{
|
||||
id: 1,
|
||||
title: "barebone",
|
||||
maxQty: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "processor",
|
||||
maxQty: 3,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "memory",
|
||||
maxQty: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "m.2 drive",
|
||||
maxQty: 4,
|
||||
},
|
||||
];
|
||||
|
||||
const bareboneProducts = [
|
||||
{
|
||||
id: 1,
|
||||
title: `Anwi C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Anwi 1-Gigabit
|
||||
Ethernet (RJ45) - 350W Power Supply`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
];
|
||||
|
||||
const processorProducts = [
|
||||
{
|
||||
productcatid: 1,
|
||||
productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB
|
||||
Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Eight-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2378 Processor 2.6GHz 16MB Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 2,
|
||||
productcattitle: `Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series with Anwi UHD P750 Graphics`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2324G Processor 3.1GHz
|
||||
8MB Cache (65W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2374G Processor 3.7GHz 8MB Cache (80W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2356G Processor 3.2GHz 12MB Cache (80W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: `Six-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2386G Processor 3.5GHz 12MB Cache (95W)`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const memoryProducts = [
|
||||
{
|
||||
id: 1,
|
||||
title: `16GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
|
||||
qty: 2,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `32GB PC4-25600 3200MHz DDR4 ECC UDIMM`,
|
||||
qty: 2,
|
||||
price: 220,
|
||||
},
|
||||
];
|
||||
|
||||
const m2driveProducts = [
|
||||
{
|
||||
productcatid: 1,
|
||||
productcattitle: `Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB
|
||||
Cache (65W)`,
|
||||
qty: 3,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)`,
|
||||
qty: 2,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `Eight-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2378 Processor 2.6GHz 16MB Cache (65W)`,
|
||||
qty: 2,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 2,
|
||||
productcattitle: `Anwi DC P4801X M.2 PCIe 3.0 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `100GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe 3.0 x4 NVMe
|
||||
Solid State Drive`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `200GB Intel<sup>®</sup> Optane™ SSD DC P4801X Series M.2 PCIe
|
||||
3.0 x4 NVMe Solid State Drive`,
|
||||
qty: 1,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `1.0TB Kioxia XG6 M.2 PCIe 3.1 x4 NVMe Solid State Drive`,
|
||||
qty: 1,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
productcatid: 3,
|
||||
productcattitle: `Micron 7400 PRO M.2 PCIe 4.0 x4 NVMe Solid State Drives`,
|
||||
products: [
|
||||
{
|
||||
id: 1,
|
||||
title: `480GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4 NVMe Solid
|
||||
State Drive`,
|
||||
qty: 1,
|
||||
price: 99,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: `960GB Micron 7400 PRO Series M.2 22x80 PCIe 4.0 x4
|
||||
NVMe Solid State Drive`,
|
||||
qty: 1,
|
||||
price: 149,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: `1.92TB Micron 7400 PRO Series M.2 22x110 PCIe 4.0 x4 NVMe Solid
|
||||
State Drive`,
|
||||
qty: 1,
|
||||
price: 269,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
//Bind Config Categories
|
||||
bindConfigurations();
|
||||
|
||||
function bindConfigurations() {
|
||||
let configCatHtml = "";
|
||||
$.each(configCatgories, function (i, cat) {
|
||||
const id = cat.id;
|
||||
let title = cat.title;
|
||||
let qty = cat.maxQty;
|
||||
let maxQtyHtml = "";
|
||||
if (title == "m.2 drive") {
|
||||
title = "m2-drive";
|
||||
}
|
||||
if (title == "m2-drive" || title == "processor") {
|
||||
let quantityHtml = "";
|
||||
if (title == "m2-drive") {
|
||||
let qtyProgressBarHtml = "";
|
||||
for (let i = 0; i < qty; i++) {
|
||||
qtyProgressBarHtml += `<span class="progress-bar progress-bar-${i}"></span>`;
|
||||
}
|
||||
quantityHtml = `<span>Quantity:</span><div class="max-qty-wrap ml-15"><div class="d-flex justify-content-between align-items-center"><div class="d-flex flex-column"><div class="qty-progress-bars d-flex align-items-center">${qtyProgressBarHtml}</div><div class="d-flex justify-content-between align-items-center mt-1"><span>Max Quantity: ${qty}</span><div><span class="selected-qty">0</span>/<span class="max-qty-span">${qty}</span></div></div></div></div></div>`;
|
||||
}
|
||||
maxQtyHtml = `<div class="text-white p-3 border-radius-custom float-lg-end d-flex align-items-center config-max-quantity">${quantityHtml}</div>`;
|
||||
}
|
||||
configCatHtml += `<div class="product-config-selector mb-20" id="config-${title}" data-maxqty='${qty}'>
|
||||
<div class="config-heading d-flex justify-content-between align-items-center">
|
||||
<h5 class="text-white p-3 border-radius-custom text-uppercase">${title}
|
||||
</h5>
|
||||
${maxQtyHtml}
|
||||
</div>
|
||||
<div class="config-content p-0"></div>
|
||||
</div>`;
|
||||
});
|
||||
$("#block-content-main").html(configCatHtml);
|
||||
bindAllConfigProducts();
|
||||
}
|
||||
|
||||
function bindAllConfigProducts() {
|
||||
bindBareboneAndMemoryProducts("barebone");
|
||||
bindBareboneAndMemoryProducts("memory");
|
||||
bindProcessorAndM2DriveProducts("processor");
|
||||
bindProcessorAndM2DriveProducts("m2-drive");
|
||||
bindEventListeners();
|
||||
}
|
||||
|
||||
function bindBareboneAndMemoryProducts(cat) {
|
||||
let productHtml = "";
|
||||
let productsArr = bareboneProducts;
|
||||
if (cat == "memory") {
|
||||
productsArr = memoryProducts;
|
||||
}
|
||||
$.each(productsArr, function (i, product) {
|
||||
productHtml += `<p class="provide-content product-item">
|
||||
<div
|
||||
class="name-of-config card-body row justify-content-between py-1 align-items-center config-product-item" data-id='${product.id}' data-cat='${cat}' data-price='${product.price}'>
|
||||
<div class="form-check mt-2 col-lg-7" id="form-check">
|
||||
<input class="form-check-input product-radio-btn" type="radio" name="radio-btns"
|
||||
value="${product.title}" for="Radio-btn-${i}" >
|
||||
<b>${product.title}</b>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-group config-quantity-btn text-black col-lg-2">
|
||||
<select class="form-select fw-bold qty-selector">`;
|
||||
for (let i = 1; i <= product.qty; i++) {
|
||||
productHtml += `<option value="${i}">Qty: ${i}</option>`;
|
||||
}
|
||||
productHtml += `</select>
|
||||
</div>
|
||||
<div class="config-pricing col-lg-2">
|
||||
<span class="config-price-span p-2 border-radius-custom"><span class="total-price-amount">${product.price}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</p>`;
|
||||
});
|
||||
$(`#config-${cat} .config-content`).html(productHtml);
|
||||
}
|
||||
|
||||
function bindProcessorAndM2DriveProducts(cat) {
|
||||
let productCatHtml = "";
|
||||
let productsArr = processorProducts;
|
||||
let accordion = "processorProductAccordion";
|
||||
let collapse = "processorProductcollapse";
|
||||
if (cat == "m2-drive") {
|
||||
productsArr = m2driveProducts;
|
||||
accordion = "m2DriveProductAccordion";
|
||||
collapse = "m2DriveProductcollapse";
|
||||
}
|
||||
$.each(productsArr, function (i, productcat) {
|
||||
const productcatid = productcat.productcatid;
|
||||
const productcattitle = productcat.productcattitle;
|
||||
productCatHtml += `<div class="accordion mt-4 border-radius-custom" id="${accordion}-${productcatid}">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" style="color:#4e4c7d; background-color: #e7e9f4;"
|
||||
type="button" data-bs-toggle="collapse" data-bs-target="#${collapse}-${productcatid}"
|
||||
aria-expanded="true" aria-controls="${collapse}-${productcatid}">
|
||||
<strong>${productcattitle}</strong>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="${collapse}-${productcatid}" class="accordion-collapse collapse show" data-bs-parent="#${accordion}-${productcatid}">
|
||||
<div class="accordion-body">`;
|
||||
let productHtml = "";
|
||||
|
||||
$.each(productcat.products, function (i, product) {
|
||||
productHtml += `
|
||||
<div class="name-of-config row justify-content-between py-1 align-items-center config-product-item" data-id='${
|
||||
product.id
|
||||
}' data-cat='${cat}' data-price='${
|
||||
product.price
|
||||
}' data-productcatid='${productcatid}'>
|
||||
<div class="form-check mt-2 col-lg-7" id="form-check">
|
||||
${appendProcessorAndM2DriveInput(cat, i, product.title)}
|
||||
</div>
|
||||
<div class="btn-group config-quantity-btn text-black col-lg-2">
|
||||
<select class="form-select fw-bold qty-selector">`;
|
||||
for (let i = 1; i <= product.qty; i++) {
|
||||
productHtml += `<option value="${i}">Qty: ${i}</option>`;
|
||||
}
|
||||
productHtml += `</select>
|
||||
</div>
|
||||
<div class="config-pricing col-lg-2">
|
||||
<span class="config-price-span p-2 border-radius-custom"><span class="processor-total-price total-price-amount"> ${product.price} </span> </span>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
productCatHtml += productHtml;
|
||||
productCatHtml += `</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
$(`#config-${cat} .config-content`).html(productCatHtml);
|
||||
}
|
||||
|
||||
function appendProcessorAndM2DriveInput(cat, id, title) {
|
||||
if (cat == "m2-drive") {
|
||||
return `<input class="form-check-input product-check-btn" type="checkbox" name="m2Drive-check-btns"
|
||||
id="Check-btn-${id}" value="${title}" >
|
||||
<label class="form-check-label" for="Check-btn-${id}">
|
||||
<strong>${title}</strong>
|
||||
</label>`;
|
||||
} else {
|
||||
return `<input class="form-check-input product-radio-btn" type="radio" name="processor-radio-btns"
|
||||
id="Radio-btn${id}" value="${title}" >
|
||||
<label class="form-check-label" for="Radio-btn${id}">
|
||||
<strong>${title}</strong>
|
||||
</label>`;
|
||||
}
|
||||
}
|
||||
|
||||
function bindEventListeners() {
|
||||
$(".product-radio-btn").click(function (e) {
|
||||
const radioEl = $(this);
|
||||
const parentEl = radioEl.parents(".config-product-item");
|
||||
const val = radioEl.val();
|
||||
const productCatId = parentEl.data("productcatid");
|
||||
const price = parentEl.data("price");
|
||||
const cat = parentEl.data("cat");
|
||||
const qty = parentEl.find(".qty-selector").val();
|
||||
const id = parentEl.data("id");
|
||||
const maxQty = $(`#config-${cat}`).data("maxqty");
|
||||
$(`#config-${cat}`).find(".config-price-span").removeClass("active");
|
||||
parentEl.find(".config-price-span").addClass("active");
|
||||
bindSelectedProduct(cat, val, qty, price, id, maxQty, productCatId);
|
||||
updateItemsCount();
|
||||
updateTotalCartPrice();
|
||||
});
|
||||
|
||||
$(".qty-selector").change(function () {
|
||||
const selectEl = $(this);
|
||||
const parentEl = selectEl.parents(".config-product-item");
|
||||
const val = selectEl.val();
|
||||
const price = parentEl.data("price");
|
||||
const cat = parentEl.data("cat");
|
||||
const id = parentEl.data("id");
|
||||
if (!parentEl.find("input").is(":checked")) {
|
||||
parentEl.find("input").trigger("click");
|
||||
parentEl.find(".config-price-span").addClass("active");
|
||||
}
|
||||
const selecedSummaryProduct = $(`.${cat}-cart-product-${id}`);
|
||||
selecedSummaryProduct.find(".summary-total-qty .qty-span").text(val);
|
||||
selecedSummaryProduct.find(".price-span").text(price * val);
|
||||
updateTotalCartPrice();
|
||||
});
|
||||
|
||||
$(".product-check-btn").click(function () {
|
||||
const checkEl = $(this);
|
||||
const parentEl = checkEl.parents(".config-product-item");
|
||||
const val = checkEl.val();
|
||||
const productCatId = parentEl.data("productcatid");
|
||||
const price = parentEl.data("price");
|
||||
const cat = parentEl.data("cat");
|
||||
const qty = parentEl.find(".qty-selector").val();
|
||||
const id = parentEl.data("id");
|
||||
const maxQty = $(`#config-${cat}`).data("maxqty");
|
||||
if ($(".product-check-btn:checked").length > maxQty) {
|
||||
alert("Max limit reached");
|
||||
return false;
|
||||
} else {
|
||||
parentEl.find(".config-price-span").toggleClass("active");
|
||||
bindSelectedProduct(cat, val, qty, price, id, maxQty, productCatId);
|
||||
updateItemsCount();
|
||||
updateTotalCartPrice();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindSelectedProduct(
|
||||
cat,
|
||||
val,
|
||||
qty,
|
||||
price,
|
||||
id,
|
||||
maxQty,
|
||||
productCatId = ""
|
||||
) {
|
||||
const summaryProductHtml = `<li class="w-100 my-1 d-flex align-items-center cart-product-item ${cat}-cart-product-${id}" data-productcatid='${productCatId}'><span class="summary-total-qty"><span class="qty-span">${qty}</span><i class="fa fa-times"></i></span>
|
||||
<div class="flex-grow-1 d-flex align-items-center"><span class="summary-product-val mr-2">${val}</span>
|
||||
<span class="order-price price-span ml-auto">${price}</span></div>
|
||||
</li>`;
|
||||
|
||||
if (cat == "m2-drive") {
|
||||
let checkedCount = $(".product-check-btn:checked").length;
|
||||
if (
|
||||
$(`.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`)
|
||||
.length
|
||||
) {
|
||||
$(
|
||||
`.m2-drive-cart-product-${id}[data-productcatid = "${productCatId}"]`
|
||||
).remove();
|
||||
$("#config-m2-drive .qty-progress-bars")
|
||||
.find(".progress-bar.active")
|
||||
.last()
|
||||
.removeClass("active");
|
||||
$("#config-m2-drive .max-qty-wrap")
|
||||
.find(".selected-qty")
|
||||
.text(checkedCount);
|
||||
} else {
|
||||
$("#config-m2-drive .qty-progress-bars")
|
||||
.find(".progress-bar")
|
||||
.not(".active")
|
||||
.first()
|
||||
.addClass("active");
|
||||
$("#config-m2-drive .max-qty-wrap")
|
||||
.find(".selected-qty")
|
||||
.text(checkedCount);
|
||||
$(`#${cat}-summary .summary-list`).append(summaryProductHtml);
|
||||
}
|
||||
} else {
|
||||
$(`#${cat}-summary .summary-list`).html(summaryProductHtml);
|
||||
}
|
||||
if ($(`#${cat}-summary .summary-list li`).length) {
|
||||
$(`#${cat}-summary`).removeClass("d-none");
|
||||
} else {
|
||||
$(`#${cat}-summary`).addClass("d-none");
|
||||
}
|
||||
}
|
||||
|
||||
function updateItemsCount() {
|
||||
const cartProductCount = $(
|
||||
"#productOrderSummary .cart-product-item"
|
||||
).length;
|
||||
$(".summery-head #items-count").text(cartProductCount);
|
||||
}
|
||||
|
||||
function updateTotalCartPrice() {
|
||||
let totalPrice = 0;
|
||||
$("#productOrderSummary .cart-product-item")
|
||||
.find(".price-span")
|
||||
.each(function (i, e) {
|
||||
totalPrice += Number($(e).text().trim());
|
||||
});
|
||||
$("#productOrderSummary #total-amount").text(totalPrice);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,48 @@
|
||||
$(function() {
|
||||
|
||||
// Get the form.
|
||||
var form = $('#contact-form');
|
||||
|
||||
// Get the messages div.
|
||||
var formMessages = $('.form-message');
|
||||
|
||||
// Set up an event listener for the contact form.
|
||||
$(form).submit(function(e) {
|
||||
// Stop the browser from submitting the form.
|
||||
e.preventDefault();
|
||||
|
||||
// Serialize the form data.
|
||||
var formData = $(form).serialize();
|
||||
|
||||
// Submit the form using AJAX.
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: $(form).attr('action'),
|
||||
data: formData
|
||||
})
|
||||
.done(function(response) {
|
||||
// Make sure that the formMessages div has the 'success' class.
|
||||
$(formMessages).removeClass('error');
|
||||
$(formMessages).addClass('success');
|
||||
|
||||
// Set the message text.
|
||||
$(formMessages).text(response);
|
||||
|
||||
// Clear the form.
|
||||
$('#contact-form input,#contact-form textarea').val('');
|
||||
})
|
||||
.fail(function(data) {
|
||||
// Make sure that the formMessages div has the 'error' class.
|
||||
$(formMessages).removeClass('success');
|
||||
$(formMessages).addClass('error');
|
||||
|
||||
// Set the message text.
|
||||
if (data.responseText !== '') {
|
||||
$(formMessages).text(data.responseText);
|
||||
} else {
|
||||
$(formMessages).text('Oops! An error occured and your message could not be sent.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
+13
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+41
File diff suppressed because one or more lines are too long
@@ -0,0 +1,113 @@
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
|
||||
const ele = document.querySelector('.scroll-400g');
|
||||
const ele1 = document.querySelector('.scroll-100g');
|
||||
const ele2 = document.querySelector('.scroll-40g');
|
||||
const ele3 = document.querySelector('.scroll-25g');
|
||||
const ele4 = document.querySelector('.scroll-10g');
|
||||
$('.data-400g').click(function() {
|
||||
ele.scrollIntoView();
|
||||
});
|
||||
$('.data-100g').click(function() {
|
||||
ele1.scrollIntoView();
|
||||
});
|
||||
$('.data-40g').click(function() {
|
||||
ele2.scrollIntoView();
|
||||
});
|
||||
$('.data-25g').click(function() {
|
||||
ele3.scrollIntoView();
|
||||
});
|
||||
$('.data-10g').click(function() {
|
||||
ele4.scrollIntoView();
|
||||
});
|
||||
|
||||
//Adding product to cart
|
||||
|
||||
|
||||
item_count()
|
||||
|
||||
})
|
||||
|
||||
function single_cart(issinglecart,e){
|
||||
|
||||
let img,title,price
|
||||
|
||||
if(issinglecart){
|
||||
img= $($(e)[0].currentTarget).parents("#singlecart").find("img").attr("src");
|
||||
title=$($(e)[0].currentTarget).parents("#singlecart").find(".title").text();
|
||||
price=$($(e)[0].currentTarget).parents("#singlecart").find(".single_cart_price").text();
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
img=$($(e)[0].currentTarget).parents(".card-body").find("img").attr("src");
|
||||
title=$($(e)[0].currentTarget).parents(".card-body").find(".title").text();
|
||||
price=$($(e)[0].currentTarget).parents(".card-body").find(".product-price").text();
|
||||
|
||||
let cart = $("#cart-product-list");
|
||||
let imgtodrag = $($(e)[0].currentTarget).parents(".card-body").find("img").eq(0);
|
||||
console.log(imgtodrag)
|
||||
if (imgtodrag) {
|
||||
let imgclone = imgtodrag.clone().offset({
|
||||
top: imgtodrag.offset().top,
|
||||
left: imgtodrag.offset().left
|
||||
})
|
||||
.css({
|
||||
opacity: "0.5",
|
||||
position: "absolute",
|
||||
height: "50px",
|
||||
width: "50px",
|
||||
"z-index": "1000",
|
||||
"border-radius":"35px",
|
||||
"transition":".9s"
|
||||
})
|
||||
.appendTo($("body"))
|
||||
.animate({
|
||||
top: cart.offset().top + 10,
|
||||
left: cart.offset().left + 10,
|
||||
width: 75,
|
||||
height: 75
|
||||
},
|
||||
1200,
|
||||
"easeInOutExpo"
|
||||
);
|
||||
|
||||
imgclone.animate({
|
||||
width: 0,
|
||||
height: 0
|
||||
},
|
||||
function() {
|
||||
$(this).detach();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let items =[]
|
||||
if( JSON.parse(localStorage.getItem('item'))){
|
||||
|
||||
|
||||
var storeditems = JSON.parse(localStorage.getItem('item'))
|
||||
// console.log(storeditems)
|
||||
items = [...storeditems]
|
||||
if(storeditems.length > 0){
|
||||
items[storeditems.length] = {img,title,price}
|
||||
}
|
||||
else{
|
||||
items[0] = {img,title,price}
|
||||
}
|
||||
}else{
|
||||
items[0] = {img,title,price}
|
||||
}
|
||||
localStorage.setItem('item',JSON.stringify(items))
|
||||
item_count()
|
||||
|
||||
|
||||
}
|
||||
function item_count(e){
|
||||
let res= JSON.parse(localStorage.getItem('item'))
|
||||
$("#cart_item_count").text(res?.length);
|
||||
$("#cart_item_count1").text(res?.length);
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
let components = [
|
||||
{
|
||||
name: "BAREBONE",
|
||||
items: [
|
||||
{
|
||||
name: "Anwi C252 Chipset - 1U - 2x SATA - 1x M.2 - Dual Anwi 1-Gigabit Ethernet (RJ45 - 350W Power Supply",
|
||||
price: 99,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "PROCESSOR",
|
||||
serises: [
|
||||
{
|
||||
name: "Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series",
|
||||
|
||||
items: [
|
||||
{
|
||||
name: "Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2314 Processor 2.8GHz 8MB Cache (65W)",
|
||||
price: 99,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Intel<sup>®</sup> Xeon<sup>®</sup> E-2300 Processor Series",
|
||||
items: [
|
||||
{
|
||||
name: "Quad-Core Intel<sup>®</sup> Xeon<sup>®</sup> E-2334 Processor 3.4GHz 8MB Cache (65W)",
|
||||
price: 99,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Memory",
|
||||
items: [
|
||||
{
|
||||
name: "16GB PC4-25600 3200MHz DDR4 ECC UDIMM",
|
||||
price: 99,
|
||||
quantity: 1,
|
||||
},
|
||||
{
|
||||
name: "32GB PC4-25600 3200MHz DDR4 ECC UDIMM",
|
||||
price: 99,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
$("input:checkbox[name=driver-check-btns]")
|
||||
.unbind("change")
|
||||
.change(function () {
|
||||
if (
|
||||
$(this).prop("checked") &&
|
||||
$(this)[0].classList[0] == "form-check-input"
|
||||
) {
|
||||
let drivetext = $(this).siblings("label").children().text();
|
||||
let qty = parseInt(
|
||||
$(this).parent().parent().find(".form-select option:selected").val()
|
||||
);
|
||||
let value = $(this).parent().parent().find(".wish-list-price").text();
|
||||
let html =
|
||||
'<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name">' +
|
||||
drivetext +
|
||||
'</span><span class="order-price col-md-1"><span id="driver-price" class="price-span "> ' +
|
||||
value +
|
||||
"</span></span></li>";
|
||||
$("#m-2-drive").append(html);
|
||||
//$("#driver-name").text($(this).val());
|
||||
//$("#driver-price").text('$99.00');
|
||||
}
|
||||
$(":checkbox").on("change", function () {
|
||||
var $list = $("#m-2-drive").empty();
|
||||
var name = $(":checkbox:checked")
|
||||
.map(function () {
|
||||
var title = $(this).next("label").text();
|
||||
let value = $(this).parent().parent().find(".wish-list-price").text();
|
||||
$(
|
||||
`<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name"> ${title} </span><span class="order-price col-md-1"><span id="driver-price" class="price-span ">${value}</span></span></li>'`
|
||||
).appendTo($list);
|
||||
return title;
|
||||
})
|
||||
.get();
|
||||
console.log(name);
|
||||
});
|
||||
updateItems();
|
||||
});
|
||||
|
||||
// driver-config-section
|
||||
$(this)
|
||||
.find(".drivers-1-select")
|
||||
.on("change", function () {
|
||||
let blockInp = parseInt($(this).val());
|
||||
data.driversOne = 99 * blockInp;
|
||||
$("#driver-qty").text(blockInp + "X");
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversOne-total-price")
|
||||
.text(parseFloat(data.driversOne).toFixed(2));
|
||||
$("#driver-price").text(parseFloat(data.driversOne).toFixed(2));
|
||||
$(driversCheckBox).prop("checked", true);
|
||||
$("#driver-name").text($(driversCheckBox).val());
|
||||
$("#driver-price").text(
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversOne-total-price")
|
||||
.html()
|
||||
);
|
||||
updateItems();
|
||||
});
|
||||
$(this)
|
||||
.find(".drivers-2-select")
|
||||
.on("change", function () {
|
||||
let blockInp = parseInt($(this).val());
|
||||
data.driversTwo = 149 * blockInp;
|
||||
$("#driver-qty").text(blockInp + "X");
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversTwo-total-price")
|
||||
.text(parseFloat(data.driversTwo).toFixed(2));
|
||||
$("#driver-price").text(parseFloat(data.driversTwo).toFixed(2));
|
||||
$(driversCheckBox).prop("checked", true);
|
||||
$("#driver-name").text($(driversCheckBox).val());
|
||||
$("#driver-price").text(
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversTwo-total-price")
|
||||
.html()
|
||||
);
|
||||
updateItems();
|
||||
});
|
||||
|
||||
$(this)
|
||||
.find(".drivers-3-select")
|
||||
.on("change", function () {
|
||||
let blockInp = parseInt($(this).val());
|
||||
data.driversThree = 269 * blockInp;
|
||||
$("#driver-qty").text(blockInp + "X");
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversThree-total-price")
|
||||
.text(parseFloat(data.driversThree).toFixed(2));
|
||||
$("#driver-price").text(parseFloat(data.driversThree).toFixed(2));
|
||||
$(driversCheckBox).prop("checked", true);
|
||||
$("#driver-name").text($(driversCheckBox).val());
|
||||
$("#driver-price").text(
|
||||
$(this)
|
||||
.parent()
|
||||
.siblings(".confi-pricing")
|
||||
.find(".driversThree-total-price")
|
||||
.html()
|
||||
);
|
||||
updateItems();
|
||||
});
|
||||
$(":checkbox").on("change", function () {
|
||||
// if($('#check-btn2[type="checkbox"]').prop("checked")){ // true
|
||||
// $('#check-btn2[type="checkbox"]').prop("checked", false)
|
||||
// }else{
|
||||
// $('#check-btn2[type="checkbox"]').prop("checked", true)
|
||||
// }
|
||||
var $list = $("#m-2-drive").empty();
|
||||
var name = $(":checkbox:checked")
|
||||
.map(function () {
|
||||
var title = $(this).next("label").text();
|
||||
let value = $(this).parent().parent().find(".wish-list-price").text();
|
||||
$(
|
||||
`<li class="row my-1 align-items-center"> <span class="col-md-2" id="driver-qty"></span> <span class="order-middle-left col-md-8" id="driver-name"> ${title} </span><span class="order-price col-md-1"><span id="driver-price" class="price-span ">${value}</span></span></li>'`
|
||||
).appendTo($list);
|
||||
return title;
|
||||
})
|
||||
.get();
|
||||
console.log(name);
|
||||
});
|
||||
@@ -0,0 +1,627 @@
|
||||
// js Document
|
||||
|
||||
// Created on : 28/2/2022.
|
||||
// Theme Name : Event & Software HTML Template
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
// ------------------------ Company Logo Slider
|
||||
if ($(".companies-logo-slider").length) {
|
||||
$('.companies-logo-slider').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 7,
|
||||
prevArrow: $('.prev'),
|
||||
nextArrow: $('.next'),
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 991,
|
||||
settings: {
|
||||
arrows: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
arrows: true,
|
||||
centerMode: true,
|
||||
slidesToShow: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Company Logo Slider
|
||||
if ($(".partnerSliderTwo").length) {
|
||||
$('.partnerSliderTwo').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
arrows: false,
|
||||
slidesToShow: 5,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
centerMode: true,
|
||||
slidesToShow: 4
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
centerMode: true,
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
centerMode: true,
|
||||
slidesToShow: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Client Feedback Slider One
|
||||
if ($(".clientSliderOne").length) {
|
||||
$('.clientSliderOne').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 1,
|
||||
prevArrow: $('.prev_c'),
|
||||
nextArrow: $('.next_c'),
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Image Slick Slider
|
||||
if ($(".img-slick-slider").length) {
|
||||
$('.img-slick-slider').slick({
|
||||
dots: true,
|
||||
arrows: false,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ------------------------ Client Feedback Slider Two
|
||||
if ($(".clientSliderTwo").length) {
|
||||
$('.clientSliderTwo').slick({
|
||||
dots: true,
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Team Slider One
|
||||
if ($(".teamSliderOne").length) {
|
||||
$('.teamSliderOne').slick({
|
||||
dots: false,
|
||||
arrows: true,
|
||||
prevArrow: $('.prev_c'),
|
||||
nextArrow: $('.next_c'),
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Client Feedback Slider Three
|
||||
if ($(".clientSliderThree").length) {
|
||||
$('.clientSliderThree').slick({
|
||||
dots: false,
|
||||
arrows: true,
|
||||
prevArrow: $('.prevT'),
|
||||
nextArrow: $('.nextT'),
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 3000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Client Feedback Slider Four
|
||||
if ($(".clientSliderFour").length) {
|
||||
$('.clientSliderFour').slick({
|
||||
dots: true,
|
||||
arrows: false,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Client Feedback Slider Five
|
||||
if ($(".clientSliderFive").length) {
|
||||
$('.clientSliderFive').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 1,
|
||||
prevArrow: $('.prev_f'),
|
||||
nextArrow: $('.next_f'),
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Client Feedback Slider Six
|
||||
if ($(".clientSliderSix").length) {
|
||||
$('.clientSliderSix').slick({
|
||||
dots: true,
|
||||
arrows: false,
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 1200,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Client Feedback Slider Seven
|
||||
if ($(".clientSliderSeven").length) {
|
||||
$('.clientSliderSeven').slick({
|
||||
centerMode: true,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 1,
|
||||
prevArrow: $('.prev_cs1'),
|
||||
nextArrow: $('.next_cs1'),
|
||||
autoplay: true,
|
||||
fade: true,
|
||||
autoplaySpeed: 6000,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ App Screen Preview
|
||||
if ($(".app-preview-slider-one").length) {
|
||||
$('.app-preview-slider-one').slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
centerMode: true,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
centerMode: false,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ App Screen Preview Two
|
||||
if ($(".app-preview-slider-two").length) {
|
||||
$('.app-preview-slider-two').slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 5,
|
||||
centerMode: true,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------ Portfolio Slider One
|
||||
if ($(".portfolio_slider_one").length) {
|
||||
$('.portfolio_slider_one').slick({
|
||||
dots: false,
|
||||
arrows: true,
|
||||
prevArrow: $('.prev_case1'),
|
||||
nextArrow: $('.next_case1'),
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerMode: true,
|
||||
autoplaySpeed: 3000,
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Portfolio Slider Two
|
||||
if ($(".portfolio_slider_two").length) {
|
||||
$('.portfolio_slider_two').slick({
|
||||
dots: false,
|
||||
arrows: true,
|
||||
prevArrow: $('.prev_case2'),
|
||||
nextArrow: $('.next_case2'),
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
centerMode: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------ Portfolio Three
|
||||
if ($(".portfolio_slider_three").length) {
|
||||
$('.portfolio_slider_three').slick({
|
||||
dots: false,
|
||||
arrows: true,
|
||||
prevArrow: $('.prev_c'),
|
||||
nextArrow: $('.next_c'),
|
||||
centerPadding: '0px',
|
||||
slidesToShow: 4,
|
||||
slidesToScroll: 1,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 3000,
|
||||
responsive: [{
|
||||
breakpoint: 992,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 480,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// -------------------- Remove Placeholder When Focus Or Click
|
||||
$("input,textarea").each(function () {
|
||||
$(this).data('holder', $(this).attr('placeholder'));
|
||||
$(this).on('focusin', function () {
|
||||
$(this).attr('placeholder', '');
|
||||
});
|
||||
$(this).on('focusout', function () {
|
||||
$(this).attr('placeholder', $(this).data('holder'));
|
||||
});
|
||||
});
|
||||
|
||||
// -------------------------- Doc Sidebar
|
||||
var subMenu = $(".doc-sidebar ul li.dropdown-holder>h4"),
|
||||
secSubMenu = $(".doc-sidebar .sec-menu"),
|
||||
expender = $(".doc-sidebar ul li.dropdown-holder .expander");
|
||||
subMenu.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
subMenu.append(function () {
|
||||
return '<span class="expander"><i class="fa fa-chevron-down" aria-hidden="true"></i></span>';
|
||||
});
|
||||
|
||||
subMenu.on('click', function () {
|
||||
if ($(this).parent('li').children('ul').hasClass('show')) {
|
||||
$(this).parent('li').children('ul').removeClass('show');
|
||||
} else {
|
||||
$('.sub-menu.show').removeClass('show');
|
||||
$(this).parent('li').children('ul').addClass('show');
|
||||
};
|
||||
});
|
||||
|
||||
secSubMenu.on('click', function () {
|
||||
if ($(this).parent('li').children('ul').hasClass('open')) {
|
||||
$(this).parent('li').children('ul').removeClass('open');
|
||||
} else {
|
||||
$('.sub-menu.open').removeClass('open');
|
||||
$(this).parent('li').children('ul').addClass('open');
|
||||
};
|
||||
});
|
||||
|
||||
// -------------------------- Accordion
|
||||
var subMenu = $(".card .card-header");
|
||||
subMenu.on("click", function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
subMenu.on('click', function () {
|
||||
if ($(this).parent('.card').children('.collapse').hasClass('show')) {
|
||||
$(this).parent('.card').children('.collapse').removeClass('show');
|
||||
} else {
|
||||
$('.collapse.show').removeClass('show');
|
||||
$(this).parent('.card').children('.collapse').addClass('show');
|
||||
};
|
||||
});
|
||||
// -------------------------- scroll animate
|
||||
if ($(".main-side-nav").length) {
|
||||
$('.main-side-nav a').on('click', function () {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
if (target.length) {
|
||||
$('html, body').animate({
|
||||
scrollTop: (target.offset().top - 100)
|
||||
}, 800);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// -------------------------- Mobile Nav
|
||||
if ($(".theme-main-menu").length) {
|
||||
$('.theme-main-menu .navbar-toggler').on('click', function () {
|
||||
$(".navbar-collapse").toggleClass("show");
|
||||
$(this).toggleClass("open");
|
||||
});
|
||||
$('.dropdown-menu .dropdown-toggle').on('click', function (e) {
|
||||
if (!$(this).next().hasClass('show')) {
|
||||
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
|
||||
}
|
||||
$(this).next(".dropdown-menu").toggleClass('show');
|
||||
return false;
|
||||
});
|
||||
}
|
||||
// ----------------------- Closes responsive menu when a scroll trigger link is clicked
|
||||
$('#one-page-nav .nav-link').on('click', function () {
|
||||
$('.navbar-collapse').removeClass('show');
|
||||
$('.navbar-toggler').removeClass("open");
|
||||
})
|
||||
|
||||
// -------------------------- Mobile Doc Side Nav
|
||||
if ($(".doc-sidebar").length) {
|
||||
$('.doc-sidebar .btn').on('click', function () {
|
||||
$(".doc-links").toggleClass("show");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// -------------------------- JS tilt Effect
|
||||
if ($(".js-tilt").length) {
|
||||
$('.js-tilt').tilt({
|
||||
glare: true,
|
||||
maxGlare: .3
|
||||
})
|
||||
}
|
||||
|
||||
// --------------------------------- Contact Form
|
||||
// init the validator
|
||||
// validator files are included in the download package
|
||||
// otherwise download from http://1000hz.github.io/bootstrap-validator
|
||||
|
||||
if ($("#contact-form").length) {
|
||||
$('#contact-form').validator();
|
||||
// when the form is submitted
|
||||
$('#contact-form').on('submit', function (e) {
|
||||
|
||||
// if the validator does not prevent form submit
|
||||
if (!e.isDefaultPrevented()) {
|
||||
var url = "inc/contact.php";
|
||||
|
||||
// POST values in the background the the script URL
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: url,
|
||||
data: $(this).serialize(),
|
||||
success: function (data) {
|
||||
// data = JSON object that contact.php returns
|
||||
|
||||
// we recieve the type of the message: success x danger and apply it to the
|
||||
var messageAlert = 'alert-' + data.type;
|
||||
var messageText = data.message;
|
||||
|
||||
// let's compose Bootstrap alert box HTML
|
||||
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
|
||||
|
||||
// If we have messageAlert and messageText
|
||||
if (messageAlert && messageText) {
|
||||
// inject the alert to .messages div in our form
|
||||
$('#contact-form').find('.messages').html(alertBox);
|
||||
// empty the form
|
||||
$('#contact-form')[0].reset();
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$(window).on('load', function () { // makes sure the whole site is loaded
|
||||
|
||||
// -------------------- Site Preloader
|
||||
$('#ctn-preloader').fadeOut(); // will first fade out the loading animation
|
||||
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
|
||||
$('body').delay(350).css({
|
||||
'overflow': 'visible'
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ------------------------------- AOS Animation
|
||||
if ($("[data-aos]").length) {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
mirror: true
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------- Fancybox
|
||||
var fancy = $(".fancybox");
|
||||
if (fancy.length) {
|
||||
fancy.fancybox({
|
||||
arrows: true,
|
||||
buttons: [
|
||||
"zoom",
|
||||
//"share",
|
||||
"slideShow",
|
||||
//"fullScreen",
|
||||
//"download",
|
||||
"thumbs",
|
||||
"close"
|
||||
],
|
||||
animationEffect: "zoom-in-out",
|
||||
transitionEffect: "zoom-in-out",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------- AOS Animation
|
||||
if ($(".map-canvas").length) {
|
||||
var map = new google.maps.Map($(".map-canvas")[0], {
|
||||
zoom: 14,
|
||||
center: new google.maps.LatLng(40.72, -74),
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||
clickableIcons: false
|
||||
});
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
map: map,
|
||||
draggable: true,
|
||||
position: new google.maps.LatLng(40.72, -74),
|
||||
visible: true
|
||||
});
|
||||
}
|
||||
|
||||
}); //End On Load Function
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+40
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user