Commit Graph

16 Commits

Author SHA1 Message Date
897cbb3efc feat: soportar resumen de compras para catalog_sales y sales
- Agregar método getSummaryCatalogPurchase() en django-api.js y api.js
- Modificar SummaryPurchase.vue para aceptar prop 'type' y usar endpoint correcto
- Actualizar catalog.vue para pasar type=catalog en redirect a summary_purchase
- Actualizar summary_purchase.vue para pasar prop type desde query params
- Lógica: si type='catalog' usa /resumen_compra_catalogo_json/{id}, sino usa /resumen_compra_json/{id}
- Mantener retrocompatibilidad: sin type usa endpoint de sales normal
2026-05-30 20:32:22 -05:00
d049357231 feat: agregar imagen por defecto para productos sin foto en catálogo 2026-05-29 18:38:01 -05:00
38c1d8c17c feat: optimize product images to e-commerce standard (600x600 → 300px display)
INDUSTRY STANDARD IMPLEMENTATION:
- Change placeholder images from 300x200 (3:2) to 600x600 (1:1 square)
- Set max-height to 300px with aspect-ratio 1:1 for consistent display
- Follow e-commerce best practices (Amazon, Shopify, Mercado Libre)

TEMPLATE CHANGES:
- catalog.vue: Update placeholder URL to 600x600 square images
- Card.vue: Add aspect-ratio="1" for perfect square display
- Card.vue: Increase max-height from 140px to 300px
- Restore padding: pa-2 → pa-3 (8px → 12px)
- Restore title size: text-subtitle-2 → text-subtitle-1
- Restore margins: mb-1 → mb-2
- Restore chip size: x-small → small
- Restore footer padding: pa-2 → pa-2 pb-3

CSS CHANGES:
- Remove fixed height from .product-image-container (use 100% for flexibility)
- Product name: 0.85rem → 0.95rem, min-height 2rem → 2.5rem
- Price label: 0.6rem → 0.65rem
- Price value: 0.9rem → 1.1rem
- Price chip: height 22px → 26px, font 0.75rem → 0.9rem
- Quantity input: 55px → 65px, font 0.85rem → 0.95rem
- Section gaps: 2px → 4px, row gaps: 1px → 2px

RESPONSIVE STRATEGY (optimized for 300px max):
- Mobile XS (<375px): Natural scaling, compact layout
- Mobile (375-559px): Natural scaling, readable text
- Tablet (560-959px): Enhanced padding and fonts
- Desktop (≥960px): Full 300px display with optimal spacing
- Desktop L/XL: Maintain 300px with enhanced typography

RESULT:
- Square images (1:1) matching industry standard
- 600x600 source allows retina displays and zoom
- 300px display on desktop (sweet spot for catalogs)
- Responsive scaling maintains aspect ratio
- Professional e-commerce appearance
2026-05-28 23:25:17 -05:00
6970867f7b feat: transform catalog to modern grid layout with compact product cards
- Transform Card.vue from horizontal to vertical compact design
- Reduce card height with fixed image max-height (160-240px responsive)
- Center all text content (product name, prices, actions)
- Style product name with semibold font-weight, 2-line ellipsis
- Redesign price labels: subtle gray uppercase for labels, bold primary for values
- Style quantity controls: tonal icon buttons with smooth animations
- Redesign input field: solo-filled variant, compact density, subtle shadow
- Transform catalog.vue list layout to responsive grid (v-row/v-col)
- Implement responsive columns: 1 col mobile, 2 cols tablet, 3 cols desktop
- Clean up obsolete .catalog-item styles, use native Vuetify grid spacing
- Add hover effects: translateY(-6px), scale(1.08) on image, border highlight
- Add footer background (#fafafa) for visual separation
- Optimize breakpoints: 6 responsive sizes (374px, 559px, 959px, 1280px, 1920px)
- Result: Professional, compact, balanced e-commerce catalog design
2026-05-28 23:05:57 -05:00
196a5e2068 fix: resolve mobile layout issues and redesign catalog header
- Add 'app' prop to NavBar for proper Vuetify layout integration
- Fix mobile z-index: page-header now compensates for NavBar height (64px)
- Fix cart visibility: position cart above footer instead of hidden underneath
- Redesign header: white background with subtle shadow instead of blue gradient
- Expand catalog layout: increase catalog width (md=10 lg=9) for better content space
- Optimize mobile search: expand search field to full width, hide title on mobile
- Adjust mobile padding: increase to 100px to account for footer + collapsed cart
2026-05-28 22:57:21 -05:00
619590adcc fix: optimize catalog mobile cart behavior and z-index hierarchy
- Fix cart overlay blocking header in mobile (z-index: header 900 < cart 1000)
- Add cart-is-collapsed class with translateY(calc(100% - 60px)) for bottom sheet behavior
- Ensure cart header remains visible and clickable when collapsed in mobile
- Add deep Vuetify styles for search field integration (:deep(.v-field))
- Preserve desktop sticky sidebar behavior (position: sticky, overflow-y: auto)
- Make entire cart header clickable in mobile (@click on v-card-title)
- Add visual feedback with chevron icons (mdi-chevron-up/down)
- Clean CSS organization with section comments
2026-05-28 22:44:13 -05:00
da45c4c1f7 feat: add search bar and restyle catalog header matching Nueva Compra
- Replace plain title with gradient page-header (icon, title, subtitle)
- Add search field with mdi-magnify icon and real-time name filtering
- Integrate search into the header as a single sticky unit
- Add filteredItems computed for client-side product search
- Reset to page 1 on search query change
- Show distinct message when search yields no results
- Adapt pagination to work with filtered results
2026-05-28 22:19:10 -05:00
df291df451 fix: correct catalog purchase field name and swap api method mappings
- Rename saleline_set to catalogsaleline_set in catalog purchase payload
- Fix swapped createPurchase/createCatalogPurchase method calls in Api class
- Format http.js (indentation, quotes, trailing commas)
2026-05-28 18:57:51 -05:00
e816ae3e7d feat: add inline catalog checkout with modals
Replace redirect to /comprar with a 2-step modal flow (cart confirmation
+ personal data) on the catalog page. Add createCatalogPurchase API
endpoint for catalog sales.
2026-05-28 17:13:22 -05:00
99d3881d61 feat: improve catalog responsive design, cart layout and card component
- Redesign Cart component with improved alignments, gaps, and responsive padding
- Refactor Card component with mobile-first layout and consistent spacing
- Update catalog layout to 60/40 split for products/cart on desktop (lg)
- Add PaginationControls component (previously untracked)
- Clean up obsolete CSS styles from catalog page
2026-05-15 13:10:54 -05:00
18507bc337 fix: Add missing import for useCartStore in catalog 2026-03-14 17:04:54 -05:00
78923ddb6e feat: Add cart store for catalog quantity sync
- Create Pinia cart store to manage cart state globally
- Sync quantity changes between catalog cards and cart sidebar
- Improve product card design with borders and hover effects
- Fix cart sync when updating quantity via minus button or input field
2026-03-14 16:59:45 -05:00
1d37ce42dc feat: Improve product card design and sync cart quantity
- Add borders, hover effects, and box shadows to product cards
- Improve typography and layout styling
- Fix cart sync when updating quantity via minus button or input field
- Add updateQuantity prop to handle manual quantity changes
2026-03-14 16:28:10 -05:00
2ba8004240 feat: Add quantity controls to cart with +/- buttons 2026-03-07 17:57:31 -05:00
339ac6727f feat: Add shopping cart to catalog page with sidebar 2026-03-07 17:33:57 -05:00
9e78646d20 feat: Add catalog page idea 2026-02-21 17:10:30 -05:00