Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added view more button #1554

Merged
merged 1 commit into from
Aug 8, 2024
Merged

Added view more button #1554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 32 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -858,14 +858,18 @@ <h4>Suggested for You</h4>
</div>


<!-- fetch mobile under 15000-->
<div class="containter-fluid bg-white">
<div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<!-- Mobile Phone Under 15000 Rs -->
<div class="container-fluid bg-white">
<div class="container-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<h4>Mobile Phone Under 15000 Rs</h4>
</div>
<div id="mobileUnder15000-product" class="row m-1"></div>
<div id="viewMoreMobileUnder15000Container" class="d-flex justify-content-center">
<button id="viewMoreMobileUnder15000Btn" class="btn btn-primary">View More</button>
</div>
</div>


<!-- newsection for grid items -->
<section id="img-box">
<a href="">
Expand All @@ -882,22 +886,30 @@ <h4>Mobile Phone Under 15000 Rs</h4>
</a>
</section>

<!-- fetch best deal products -->
<div class="containter-fluid bg-white">
<div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<!-- Best Deal for You -->
<div class="container-fluid bg-white">
<div class="container-fluid p-3" style="border-bottom: 1px solid #e4e7eb;">
<h4>Best Deal for You</h4>
</div>
<div id="best-deal-product" class="row m-1"></div>
<div id="viewMoreBestDealContainer" class="d-flex justify-content-center">
<button id="viewMoreBestDealBtn" class="btn btn-primary">View More</button>
</div>
</div>

<!-- fetch data under 500-->
<div class="containter-fluid bg-white">
<div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">

<!-- Shop Now Under 500 Rs -->
<div class="container-fluid bg-white">
<div class="container-fluid p-3" style="border-bottom: 1px solid #e4e7eb;">
<h4>Shop Now Under 500 Rs</h4>
</div>
<div id="shopUnder500-product" class="row m-1"></div>
<div id="viewMoreShopUnder500Container" class="d-flex justify-content-center">
<button id="viewMoreShopUnder500Btn" class="btn btn-primary none">View More</button>
</div>
</div>



<!-- fetch data-->
<div class="containter-fluid bg-white">
Expand All @@ -922,10 +934,13 @@ <h4> </h4>

<!-- Top Selection -->
<div class="containter-fluid bg-white">
<div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<div class="containter-fluid p-3" style="border-bottom: 1px solid #e4e7eb;">
<h4>Top Selection</h4>
</div>
<div id="top-selection-product" class="row m-1"></div>
<div id="viewMoreTopSelectionContainer" class="d-flex justify-content-center">
<button id="viewMoreTopSelectionBtn" class="btn btn-primary">View More</button>
</div>
</div>

<!--Other Top Deals-->
Expand Down Expand Up @@ -989,15 +1004,18 @@ <h3>Other Top Deals</h3>
</div>
</section>



<!-- Product Selection -->
<div class="containter-fluid bg-white">
<div class="containter-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<div class="container-fluid bg-white">
<div class="container-fluid p-3 mt-1" style="border-bottom: 1px solid #e4e7eb;">
<h4>Select Your Choice</h4>
</div>
<div id="seletcYourChoice-product" class="row m-1"></div>
<div id="viewMoreContainer" class="d-flex justify-content-center">
<button id="viewMoreBtn" class="btn btn-primary">View More</button>
</div>
</div>


<!-- Adding brand directory -->
<div class="brand-directory">
<h5 class="brand-directory-heading">Top Stories : Brand Directory</h5>
Expand Down
213 changes: 167 additions & 46 deletions js/fetchProductOfIndex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,29 +37,96 @@ function createProductCard(product) {
.join("");
}

// Function to best deal products
let currentBestDealIndex = 0;
const bestDealItemsPerPage = 6;
let allBestDealProducts = [];

function best_deal_products(products) {
const productList = document.getElementById("best-deal-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
allBestDealProducts = products;
currentBestDealIndex = 0;
loadMoreBestDealProducts();
}

function loadMoreBestDealProducts() {
const productList = document.getElementById("best-deal-product");
const newProducts = allBestDealProducts.slice(currentBestDealIndex, currentBestDealIndex + bestDealItemsPerPage);
productList.innerHTML += newProducts.map((product) => createProductCard(product)).join("");
currentBestDealIndex += bestDealItemsPerPage;
toggleViewMoreBestDealButton();
}

function toggleViewMoreBestDealButton() {
const viewMoreBtn = document.getElementById("viewMoreBestDealBtn");
if (currentBestDealIndex >= allBestDealProducts.length) {
viewMoreBtn.style.display = "none";
} else {
viewMoreBtn.style.display = "block";
}
}
// Function to best top-selection-product

document.getElementById("viewMoreBestDealBtn").addEventListener("click", loadMoreBestDealProducts);



let currentTopSelectionIndex = 0;
const topSelectionItemsPerPage = 6;
let allTopSelectionProducts = [];

function top_selection_products(products) {
const productList = document.getElementById("top-selection-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
allTopSelectionProducts = products;
currentTopSelectionIndex = 0;
loadMoreTopSelectionProducts();
}

function loadMoreTopSelectionProducts() {
const productList = document.getElementById("top-selection-product");
const newProducts = allTopSelectionProducts.slice(currentTopSelectionIndex, currentTopSelectionIndex + topSelectionItemsPerPage);
productList.innerHTML += newProducts.map((product) => createProductCard(product)).join("");
currentTopSelectionIndex += topSelectionItemsPerPage;
toggleViewMoreTopSelectionButton();
}

function toggleViewMoreTopSelectionButton() {
const viewMoreBtn = document.getElementById("viewMoreTopSelectionBtn");
if (currentTopSelectionIndex >= allTopSelectionProducts.length) {
viewMoreBtn.style.display = "none";
} else {
viewMoreBtn.style.display = "block";
}
}

// Function to under 15000 rs mobile
document.getElementById("viewMoreTopSelectionBtn").addEventListener("click", loadMoreTopSelectionProducts);


let currentMobileUnder15000Index = 0;
const mobileUnder15000ItemsPerPage = 6;
let allMobileUnder15000Products = [];

function mobileUnder15000(products) {
const productList = document.getElementById("mobileUnder15000-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
allMobileUnder15000Products = products;
currentMobileUnder15000Index = 0;
loadMoreMobileUnder15000Products();
}

function loadMoreMobileUnder15000Products() {
const productList = document.getElementById("mobileUnder15000-product");
const newProducts = allMobileUnder15000Products.slice(currentMobileUnder15000Index, currentMobileUnder15000Index + mobileUnder15000ItemsPerPage);
productList.innerHTML += newProducts.map((product) => createProductCard(product)).join("");
currentMobileUnder15000Index += mobileUnder15000ItemsPerPage;
toggleViewMoreMobileUnder15000Button();
}

function toggleViewMoreMobileUnder15000Button() {
const viewMoreBtn = document.getElementById("viewMoreMobileUnder15000Btn");
if (currentMobileUnder15000Index >= allMobileUnder15000Products.length) {
viewMoreBtn.style.display = "none";
} else {
viewMoreBtn.style.display = "block";
}
}

document.getElementById("viewMoreMobileUnder15000Btn").addEventListener("click", loadMoreMobileUnder15000Products);



// Function to s2-product
Expand All @@ -70,49 +137,103 @@ function createProductCard(product) {
.join("");
}

// Function to under 500 Product
let currentShopUnder500Index = 0;
const shopUnder500ItemsPerPage = 6;
let allShopUnder500Products = [];

function shopUnder500(products) {
const productList = document.getElementById("shopUnder500-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
allShopUnder500Products = products;
currentShopUnder500Index = 0;
loadMoreShopUnder500Products();
}

function loadMoreShopUnder500Products() {
const productList = document.getElementById("shopUnder500-product");
const newProducts = allShopUnder500Products.slice(currentShopUnder500Index, currentShopUnder500Index + shopUnder500ItemsPerPage);
productList.innerHTML += newProducts.map((product) => createProductCard(product)).join("");
currentShopUnder500Index += shopUnder500ItemsPerPage;
toggleViewMoreShopUnder500Button();
}

function toggleViewMoreShopUnder500Button() {
const viewMoreBtn = document.getElementById("viewMoreShopUnder500Btn");
if (currentShopUnder500Index >= allShopUnder500Products.length) {
viewMoreBtn.style.display = "none";
} else {
viewMoreBtn.style.display = "block";
}
}

document.getElementById("viewMoreShopUnder500Btn").addEventListener("click", loadMoreShopUnder500Products);



// best of Electronics
function bestOfEelecronics_products(products) {
const productList = document.getElementById("bestOfElectronics-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
}

// seletcYourChoice-product
function seletcYourChoice_products(products) {

let currentIndex = 0;
const itemsPerPage = 6;
let allProducts = [];

function seletcYourChoice_products(products) {
allProducts = products;
currentIndex = 0;
loadMoreProducts();
}

function loadMoreProducts() {
const productList = document.getElementById("seletcYourChoice-product");
productList.innerHTML = products
.map((product) => createProductCard(product))
.join("");
}

// General function to fetch and shuffle data
function fetchAndShuffleData(url, callback, numberOfProducts) {
const newProducts = allProducts.slice(currentIndex, currentIndex + itemsPerPage);
productList.innerHTML += newProducts.map((product) => createProductCard(product)).join("");
currentIndex += itemsPerPage;
toggleViewMoreButton();
}

function toggleViewMoreButton() {
const viewMoreBtn = document.getElementById("viewMoreBtn");
if (currentIndex >= allProducts.length) {
viewMoreBtn.style.display = "none";
} else {
viewMoreBtn.style.display = "block";
}
}

document.getElementById("viewMoreBtn").addEventListener("click", loadMoreProducts);

function shopUnder500(products) {
const productList = document.getElementById("shopUnder500-product");
productList.innerHTML = products.map((product) => createProductCard(product)).join("");
}

function bestOfEelecronics_products(products) {
const productList = document.getElementById("bestOfElectronics-product");
productList.innerHTML = products.map((product) => createProductCard(product)).join("");
}

// General function to fetch and shuffle data
function fetchAndShuffleData(url, callback, numberOfProducts) {
fetch(url)
.then((response) => response.json())
.then((data) => {
// Shuffle the array using the Fisher-Yates algorithm
for (let i = data.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[data[i], data[j]] = [data[j], data[i]];
}
// Select the desired number of products from the shuffled array
const selectedProducts = data.slice(0, numberOfProducts);
// Call the callback function with the selected products
callback(selectedProducts);
})
.catch((error) => console.error("Error fetching data:", error));
}
.then((response) => response.json())
.then((data) => {
// Shuffle the array using the Fisher-Yates algorithm
for (let i = data.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[data[i], data[j]] = [data[j], data[i]];
}

// Select the desired number of products from the shuffled array
const selectedProducts = data.slice(0, numberOfProducts);

// Call the callback function with the selected products
callback(selectedProducts);
})
.catch((error) => console.error("Error fetching data:", error));
}


// General function to fetch 15000 rs mobile data
Expand Down
Loading