Skip to content

Commit

Permalink
Merge pull request #76 from faustogenga/Fausto-Genga-Updates
Browse files Browse the repository at this point in the history 
update
  • Loading branch information
@faustogenga
faustogenga authored Jan 10, 2024
2 parents 033dc8d + 0696762 commit 1c2e5d8
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 80 deletions.
38 changes: 36 additions & 2 deletions src/CSS/Responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
}

.logo-container {
justify-content: left !important;
justify-content: center !important;
}

.responsiveSearchBar {
Expand Down Expand Up @@ -119,7 +119,9 @@
margin: 3% 0% !important;
}

.table1 table tbody tr td, th, button {
.table1 table tbody tr td,
.table1 table thead tr th,
.table1 table tbody tr td button {
min-width: 12vw !important;
font-size: x-small !important;
padding: 2% !important;
Expand Down Expand Up @@ -171,6 +173,38 @@

}

.carritoResponsive div h4 {
width: 100% !important;

}

.responsiveTable thead tr th {
font-size: small !important;
}

.responsiveTable tbody tr td {
font-size: small !important;
}

.responsiveTable tbody tr td button{
margin: 2% !important;
font-size: x-small !important;
}

.responsiveTable tbody tr td button:last-of-type{
margin: 3% !important;
padding: 0% !important;
font-size: xx-small !important;
}

.responsiveTable thead tr:first-child th {
width: 30px !important;
}

.responsiveTable tbody tr:first-child td div,
.responsiveTable tbody tr td div img {
width: 100% !important;
}


}
Expand Down
144 changes: 71 additions & 73 deletions src/components/Cart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ export const Cart = ({ user }) => {


const fetchProducts = async () => {
try {
try {
collectionAssignation('CustomerCart');
const result = await onFindbyEmail(user.email);
if (result) {
const productsData = result.map((doc) => ({
id: doc.id,
...doc.data(),
}));
}));
setProducts(productsData);
} else {
console.log("Error")
Expand All @@ -43,7 +43,7 @@ export const Cart = ({ user }) => {
await fetchProductsCallback();
}
};

fetchData();
}, [user, fetchProductsCallback]);

Expand Down Expand Up @@ -125,7 +125,7 @@ export const Cart = ({ user }) => {
const proceedToPayment = async () => {
try {
console.log(products);
if(products.length > 0) {
if (products.length > 0) {
cart = [...products];
console.log(cart);
navigate('/Checkout');
Expand All @@ -147,78 +147,76 @@ export const Cart = ({ user }) => {

return (
<div className='mainCart'>
<Container className="py-4">
<Container className="carritoResponsive py-4">
<div className='col-12 d-flex justify-content-center'>
<h4 className='col-2 text-center bg-white rounded-2 p-1'>Mi Carrito 🛒</h4>
</div>
<Table responsive="sm" className='table align-middle opacity-80'>
<thead>
<tr style={{ fontSize: '20px' }}>
<th className='text-center'>Imagen</th>
<th className='text-center'>Nombre del Producto</th>
<th className='text-center'>Precio</th>
<th className='text-center'>Cantidad</th>
<th className='text-center'>Acciones</th>
</tr>
</thead>
<tbody>
{products.map((item, index) => {
return (
<tr key={index} >
<td>
<div style={{
background: 'white', height: '7rem', overflow: 'hidden', display: 'flex',
justifyContent: 'center', alignItems: 'center'
}}>
<div style={{ padding: '.5rem' }}>
<img src={item.image} style={{ width: '7rem' }} alt={item.name} />
</div>
</div>
</td>
<td className='text-center'>
<h6 style={{ width: '12rem', marginLeft: '150px', fontSize: '20px' }}>
{item.name}
</h6>
</td>
<td className='text-center' style={{ fontSize: '18px' }}>$ {item.price}</td>
<td className='text-center' style={{ fontSize: '18px' }}>{item.quantity}</td>
<td className='text-center'>
<Button className="btn-info ms-2" onClick={() => updateCartItemQuantity(index, false)}>-</Button>
<Button className="btn-success ms-2" onClick={() => updateCartItemQuantity(index, true)}>+</Button>
<Button variant="danger" className="ms-2" onClick={() => removeItem(index, item.id)}>Eliminar Producto</Button>
</td>
</tr>
)
})}
</tbody>
</Table>

<Row
style={{ position: 'inherit', bottom: 0 }}
className={`justify-content-center w-100`}
>
<Col className="py-2">
<div style={{ width: '200px' }}>
<h4 className='bg-white p-1 rounded-2 text-black'>Total: $ {cartTotal}</h4>
</div>
</Col>
<Col className="p-0" md={4}>
<Button variant="warning"
className="m-2"
onClick={clearCart}
>
<BsCartX size="1.7rem" />
Limpiar Carrito
</Button>
<Button variant="success"
className="m-2"
onClick={proceedToPayment}
>
<BsCartCheck size="1.7rem" />
Proceder al Pago
</Button>
</Col>
</Row>
<Table responsive="sm" className='responsiveTable table align-middle opacity-80'>
<thead>
<tr style={{ fontSize: '20px' }}>
<th className='text-center'>Imagen</th>
<th className='text-center'>Nombre del Producto</th>
<th className='text-center'>Precio</th>
<th className='text-center'>Cantidad</th>
<th className='text-center'>Acciones</th>
</tr>
</thead>
<tbody>
{products.map((item, index) => {
return (
<tr key={index} >
<td>
<div style={{
background: 'white', height: '7rem', overflow: 'hidden', display: 'flex',
justifyContent: 'center', alignItems: 'center'
}}>
<img src={item.image} style={{ width: '7rem' }} alt={item.name} />
</div>
</td>
<td className='text-center'>
<h6 style={{ width: '12rem', marginLeft: '150px', fontSize: '20px' }}>
{item.name}
</h6>
</td>
<td className='text-center' style={{ fontSize: '18px' }}>$ {item.price}</td>
<td className='text-center' style={{ fontSize: '18px' }}>{item.quantity}</td>
<td className='text-center'>
<Button className="btn-info ms-2" onClick={() => updateCartItemQuantity(index, false)}>-</Button>
<Button className="btn-success ms-2" onClick={() => updateCartItemQuantity(index, true)}>+</Button>
<Button variant="danger" className="deleteBtn ms-2" onClick={() => removeItem(index, item.id)}>Eliminar Producto</Button>
</td>
</tr>
)
})}
</tbody>
</Table>

<Row
style={{ position: 'inherit', bottom: 0 }}
className={`justify-content-center w-100`}
>
<Col className="py-2">
<div style={{ width: '200px' }}>
<h4 className='bg-white p-1 rounded-2 text-black'>Total: $ {cartTotal}</h4>
</div>
</Col>
<Col className="p-0" md={4}>
<Button variant="warning"
className="m-2"
onClick={clearCart}
>
<BsCartX size="1.7rem" />
Limpiar Carrito
</Button>
<Button variant="success"
className="m-2"
onClick={proceedToPayment}
>
<BsCartCheck size="1.7rem" />
Proceder al Pago
</Button>
</Col>
</Row>
</Container>
</div>
)
Expand Down
10 changes: 6 additions & 4 deletions src/components/Catalogsidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@ import { Catalogcategories } from './Catalogcategories'
import { Catalogprices } from './Catalogprices'
import '../CSS/Catalogsidebar.css'

export const Catalogsidebar = ({ handleClickPrice, handleClickCategory, categoryClicked, priceClicked}) => {
export const Catalogsidebar = ({ handleClickPrice, handleClickCategory, categoryClicked, priceClicked }) => {
return (
<>
<section className="responsiveCategory sidebar col-2">
<div className="logo-container justify-content-left d-flex">
<h1 className='d-flex'>🛒</h1>
<a href='/cart' style={{textDecoration: 'none'}}>
<h1 className='d-flex'>🛒</h1>
</a>
</div>
<Catalogcategories handleClickCategory={handleClickCategory} categoryClicked={categoryClicked}/>
<Catalogprices handleClickPrice={handleClickPrice} priceClicked={priceClicked}/>
<Catalogcategories handleClickCategory={handleClickCategory} categoryClicked={categoryClicked} />
<Catalogprices handleClickPrice={handleClickPrice} priceClicked={priceClicked} />
</section>
</>
)
Expand Down
4 changes: 3 additions & 1 deletion src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ export const Navbar = ({ loggedIn, user, logOut, isVendor }) => {
return (
<div>
<div>
<img src="/assets/Banner.png" className="img-fluid" width={'100%'} alt="Banner" />
<a href='/'>
<img src="/assets/Banner.png" className="img-fluid" width={'100%'} alt="Banner" />
</a>
</div>
<nav className="navbar navbar-expand-lg" data-bs-theme="dark">
<button className="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
Expand Down

0 comments on commit 1c2e5d8

Please sign in to comment.