Skip to content

Commit

Permalink
Merge pull request #1554 from nagalakshmi08/viewmore
Browse files Browse the repository at this point in the history 
Added view more button
  • Loading branch information
@arghadipmanna101
arghadipmanna101 authored Aug 8, 2024
2 parents 2846e41 + 5ed5c5d commit d02bb59
Show file tree
Hide file tree
Showing 2 changed files with 199 additions and 60 deletions.
46 changes: 32 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -866,14 +866,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 @@ -890,22 +894,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 @@ -930,10 +942,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 @@ -997,15 +1012,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
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

0 comments on commit d02bb59

Please sign in to comment.