Compare commits

..

3 Commits

5 changed files with 3408 additions and 1788 deletions

View File

@ -689,11 +689,11 @@ if ($_SESSION["userId"] <> "") {
</div>
</div>
<script>
let userDataGlobal = null;
let globalQuantity = null;
let globalProductId = null;
let globalProduct = null;
document.addEventListener("DOMContentLoaded", function() {
let userDataGlobal = null;
let globalQuantity = null;
let globalProductId = null;
let globalProduct = null;
let globalVariation = null;
@ -945,7 +945,7 @@ if ($_SESSION["userId"] <> "") {
const firstImageUrl = getFirstImageUrl(productData?.images);
console.log(productData)
// console.log(productData)
const productCon = document.createElement('div');
productCon.className = 'product-con-wrap';
productCon.innerHTML =

View File

@ -66,7 +66,7 @@ if (isset($_GET['id'])) {
<meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
<!-- css Icon Font -->
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
@ -530,6 +530,7 @@ if (isset($_GET['id'])) {
function selectVariation(variation) {
globalVariation = variation;
displayReviews();
console.log("Variation selected: ", variation);
document.getElementById("productDescription").innerHTML = variation
@ -1623,10 +1624,13 @@ if (isset($_GET['id'])) {
.comments_wrap {
height: 100%;
width: 100%;
max-height: 800px;
overflow-y: scroll;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 10px;
}
@ -1651,7 +1655,7 @@ if (isset($_GET['id'])) {
.comment_card {
height: auto;
width: 100%;
width: 90%;
border-radius: 15px;
display: flex;
align-items: center;
@ -1660,7 +1664,7 @@ if (isset($_GET['id'])) {
border-radius: 10px;
border: 1px solid #eee;
flex-direction: column;
margin-top: 5px;
}
.user_info {
@ -1669,16 +1673,19 @@ if (isset($_GET['id'])) {
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
.user_info .left {
display: flex;
width: 70%;
justify-content: flex-start;
align-items: center;
flex-direction: row;
min-width: 300px;
}
.user_info .right {
@ -1686,9 +1693,22 @@ if (isset($_GET['id'])) {
justify-content: flex-end;
align-items: center;
flex-direction: row;
}
@media (min-width:768px) {
.user_info {
flex-direction: row;
}
.user_name {
font-size: 16px;
}
}
.user_img {
height: 30px;
width: 30px;
@ -1697,7 +1717,7 @@ if (isset($_GET['id'])) {
}
.user_name {
font-size: 16px;
font-size: 13px;
color: #000;
font-weight: bold;
padding: 10px;
@ -1714,11 +1734,41 @@ if (isset($_GET['id'])) {
padding: 10px;
}
.comment_details {}
.comment_details {
width: 100%;
}
.comment_text {}
.comment_text {
text-align: left;
width: 100%;
padding: 0px 10px;
}
.comment_media {}
.comment_media {
display: flex;
width: 100%;
justify-content: flex-start;
align-items: center;
/* flex-direction: row;*/
flex-wrap: wrap;
}
.comment_media img {
height: 150px;
width: 150px;
object-fit: cover;
margin: 1px 2px;
max-width: 200px;
}
.comment_media video {
height: 150px;
width: 150px;
object-fit: cover;
margin: 1px 2px;
max-width: 200px;
}
.comment_footer {
width: 100%;
@ -1729,11 +1779,12 @@ if (isset($_GET['id'])) {
<div class="rating_con">
<div class="comments_con">
<p class="comment_header">
<p class="comment_header" id="comment_header">
Total Reviews: 20
</p>
<ul class="comments_wrap">
<li class="comment_card_wrap">
<ul class="comments_wrap" id="comments_wrap">
<!-- <li class="comment_card_wrap">
<div class="comment_card">
<div class="user_info">
<div class="left">
@ -1776,7 +1827,7 @@ if (isset($_GET['id'])) {
</div>
</div>
</li>
</li> -->
</ul>
</div>
<!-- <div class="comment_footer">
@ -1800,6 +1851,112 @@ if (isset($_GET['id'])) {
<script>
document.addEventListener("DOMContentLoaded", function() {
displayReviews();
async function fetchProductData() {
let response = null
try {
response = await fetch(
'https://api.obanana.shop/api/v1/products/' + globalProductId
);
const prodData = await response.json();
return prodData;
} catch (error) {
console.error('Error fetching user data:', error);
return null;
}
}
async function displayReviews() {
const prodData = await fetchProductData();
const reviewList = document.getElementById('comments_wrap');
const header = document.getElementById('comment_header');
header.innerText = `Total Reviews: ${prodData?.ratings?.length??0}`
if (prodData?.ratings?.length > 0) {
for (const rate of prodData?.ratings) {
const li = document.createElement('li');
li.classList.add('comment_card_wrap');
// Format the createdAt date
const formattedDate = new Date(rate?.createdAt).toLocaleDateString(
'en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
});
// Use customer image or fallback to vendor image
const userImage = rate?.customer_id?.customer_image || rate?.vendor_id
?.vendor_image || 'default-image-url.png';
const userName = rate?.customer_id ?
`${rate?.customer_id?.first_name} ${rate?.customer_id?.last_name}` :
`${rate?.vendor_id?.first_name} ${rate?.vendor_id?.last_name}`;
// Generate media content
let mediaContent = '';
if (rate?.images?.length > 0) {
for (const img of rate.images) {
mediaContent +=
`<img src="https://api.obanana.shop/images/storage/upload_ratings/${img}" alt=""/>`;
}
}
if (rate?.videos?.length > 0) {
for (const vid of rate.videos) {
mediaContent +=
`<video class="vid-prev" controls><source src="https://api.obanana.shop/images/storage/upload_ratings/${vid}" type="video/mp4"></video>`;
}
}
li.innerHTML = `
<div class="comment_card">
<div class="user_info">
<div class="left">
<img loading="lazy" class="user_img" src="${userImage}" alt="" />
<p class="user_name">${userName}</p>
<div class="rate_star">
<i class="ecicon eci-star ${parseInt(rate?.rating) >= 1 ? 'fill' : ''}"></i>
<i class="ecicon eci-star ${parseInt(rate?.rating) >= 2 ? 'fill' : ''}"></i>
<i class="ecicon eci-star ${parseInt(rate?.rating) >= 3 ? 'fill' : ''}"></i>
<i class="ecicon eci-star ${parseInt(rate?.rating) >= 4 ? 'fill' : ''}"></i>
<i class="ecicon eci-star ${parseInt(rate?.rating) >= 5 ? 'fill' : ''}"></i>
</div>
</div>
<div class="right">
<p class="date_feedback">${formattedDate}</p>
</div>
</div>
<div class="comment_details">
<p class="comment_text">${rate?.comments ??''}</p>
<div class="comment_media">
${mediaContent}
</div>
</div>
</div>
`;
reviewList.appendChild(li);
}
} else {
const li = document.createElement('li');
li.classList.add('comment_card_wrap');
li.innerHTML = `<p class="comment_text2">No reviews yet</p>`;
reviewList.appendChild(li);
}
}
})
function openTab(tabName) {
var i, tabContent, tabButtons;
tabContent = document.getElementsByClassName("tab-content");

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff