Product
<!-- ====================================== -->
<!-- صفحة تعرض كل المنتجات تلقائي -->
<!-- Easy Order Products Page -->
<!-- ====================================== -->
<div class="all-products-page">
<!-- عنوان الصفحة -->
<div class="products-header">
<h1>Our Products</h1>
<p>Discover all available products</p>
</div>
<!-- مكان المنتجات -->
<div class="products-grid" id="productsGrid">
</div>
</div>
<style>
/* ====================================== */
/* شكل الصفحة */
/* ====================================== */
.all-products-page{
padding:30px 18px 120px;
background:#f8f5ef;
min-height:100vh;
}
/* ====================================== */
/* الهيدر */
/* ====================================== */
.products-header{
text-align:center;
margin-bottom:30px;
}
.products-header h1{
font-size:32px;
margin-bottom:8px;
color:#3d3d3d;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
.products-header p{
color:#8d8d8d;
font-size:14px;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
/* ====================================== */
/* الجريد بتاع المنتجات */
/* ====================================== */
.products-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
}
/* ====================================== */
/* الكارت */
/* ====================================== */
.product-card{
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:0 4px 18px rgba(0,0,0,0.05);
transition:.25s ease;
}
/* Hover */
.product-card:hover{
transform:translateY(-3px);
}
/* ====================================== */
/* صورة المنتج */
/* ====================================== */
.product-image{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
background:#f3f3f3;
}
/* ====================================== */
/* معلومات المنتج */
/* ====================================== */
.product-info{
padding:14px;
}
/* اسم المنتج */
.product-title{
font-size:14px;
font-weight:600;
color:#3d3d3d;
margin-bottom:8px;
line-height:1.4;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
/* السعر */
.product-price{
color:#75825e;
font-size:15px;
font-weight:700;
margin-bottom:12px;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
}
/* زرار المنتج */
.product-btn{
width:100%;
border:none;
background:#75825e;
color:#fff;
border-radius:14px;
padding:11px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:.25s ease;
}
.product-btn:hover{
opacity:.9;
}
</style>
<script>
/* ====================================== */
/* سحب كل المنتجات الموجودة */
/* ====================================== */
window.addEventListener('load',()=>{
const grid = document.getElementById('productsGrid');
/* يحاول يجيب كل المنتجات الموجودة */
const products =
document.querySelectorAll('.product-item, .eo-product-item, .product-card, [class*="product"]');
/* يمنع التكرار */
let usedNames = [];
products.forEach(product=>{
/* اسم المنتج */
let title =
product.querySelector('h2,h3,h4,.title,.product-title');
/* السعر */
let price =
product.querySelector('.price,[class*="price"]');
/* الصورة */
let image =
product.querySelector('img');
if(title && image){
let productName = title.innerText.trim();
/* يمنع تكرار نفس المنتج */
if(usedNames.includes(productName)) return;
usedNames.push(productName);
/* إنشاء الكارت */
grid.innerHTML += `
<div class="product-card">
<img class="product-image"
src="${image.src}">
<div class="product-info">
<div class="product-title">
${productName}
</div>
<div class="product-price">
${price ? price.innerText : ''}
</div>
<button class="product-btn">
View Product
</button>
</div>
</div>
`;
}
});
});
</script>