diff --git a/src/templates/html/mod_virtuemart_cart/README.md b/src/templates/html/mod_virtuemart_cart/README.md new file mode 100644 index 0000000..5d49ef2 --- /dev/null +++ b/src/templates/html/mod_virtuemart_cart/README.md @@ -0,0 +1,205 @@ +# mod_virtuemart_cart Mobile Responsive Override + +## Overview +Mobile-responsive override for VirtueMart's shopping cart module (`mod_virtuemart_cart`), designed for the MokoCassiopeia template. + +## Features + +### Cart Display +- **Cart Summary Header**: Shows item count and total price +- **Product List**: Displays cart items with images, names, quantities, and prices +- **Remove Buttons**: Touch-friendly delete buttons for each item +- **Action Buttons**: View cart and checkout buttons +- **Empty State**: Friendly message when cart is empty + +### Mobile Responsiveness +- **Touch Targets**: 48px on mobile, 44px on desktop (WCAG compliant) +- **Flexible Layout**: Adapts to different screen sizes +- **Stacked Layout**: Products stack vertically on mobile +- **Full-Width Actions**: Buttons expand to full width on small screens + +### Responsive Breakpoints + +#### Mobile (< 576px) +- Vertical product layout +- Full-width product images (max 200px centered) +- Stacked action buttons +- 48px minimum touch targets +- Increased padding for comfortable touch + +#### Tablet (576px - 767px) +- Side-by-side product details +- Inline action buttons begin to appear +- 44px touch targets + +#### Desktop (≥ 768px) +- Horizontal action button layout +- Optimized spacing and alignment +- Enhanced hover effects + +## Module Parameters + +All standard mod_virtuemart_cart parameters are supported: + +- **show_price**: Display product prices (default: Yes) +- **show_product_list**: Display list of products in cart (default: Yes) +- **moduleclass_sfx**: Custom CSS class suffix + +## HTML Structure + +``` +.mod-vm-cart-responsive + ├── .mod-vm-cart__header (if items in cart) + │ ├── .mod-vm-cart__icon + │ └── .mod-vm-cart__summary + │ ├── .mod-vm-cart__count + │ └── .mod-vm-cart__total + ├── .mod-vm-cart__products (if show_product_list) + │ └── .mod-vm-cart__product (foreach product) + │ ├── .mod-vm-cart__product-image + │ ├── .mod-vm-cart__product-details + │ │ ├── .mod-vm-cart__product-name + │ │ ├── .mod-vm-cart__product-quantity + │ │ └── .mod-vm-cart__product-price + │ └── .mod-vm-cart__product-remove + └── .mod-vm-cart__actions + ├── .mod-vm-cart__btn--view + └── .mod-vm-cart__btn--checkout +``` + +## CSS Classes + +### Main Container +- `.mod-vm-cart-responsive` - Main wrapper with responsive styles + +### Header Section +- `.mod-vm-cart__header` - Cart summary container +- `.mod-vm-cart__icon` - Shopping basket icon +- `.mod-vm-cart__summary` - Summary information wrapper +- `.mod-vm-cart__count` - Number of items +- `.mod-vm-cart__total` - Total price display + +### Product List +- `.mod-vm-cart__products` - Products container +- `.mod-vm-cart__product` - Individual product card +- `.mod-vm-cart__product-image` - Product image container +- `.mod-vm-cart__product-details` - Product information +- `.mod-vm-cart__product-name` - Product title +- `.mod-vm-cart__product-quantity` - Quantity display +- `.mod-vm-cart__product-price` - Price display +- `.mod-vm-cart__product-remove` - Remove button container +- `.mod-vm-cart__remove-btn` - Delete button + +### Actions +- `.mod-vm-cart__actions` - Action buttons container +- `.mod-vm-cart__btn` - Base button class +- `.mod-vm-cart__btn--view` - View cart button +- `.mod-vm-cart__btn--checkout` - Checkout button + +### Empty State +- `.mod-vm-cart__empty` - Empty cart container +- `.mod-vm-cart__empty-icon` - Empty state icon +- `.mod-vm-cart__empty-text` - Empty state message + +## CSS Variables Used + +```css +--vm-surface /* Background colors */ +--vm-surface-2 /* Alternative background */ +--vm-text /* Main text color */ +--vm-text-strong /* Strong emphasis text */ +--vm-text-muted /* Muted/secondary text */ +--vm-border /* Border colors */ +--vm-price-color /* Price display color */ +--vm-block-radius /* Border radius */ +--vm-block-shadow /* Box shadow */ +--vm-btn-primary-bg /* Primary button background */ +--vm-btn-primary-text /* Primary button text */ +--vm-btn-padding-y /* Button vertical padding */ +--vm-btn-padding-x /* Button horizontal padding */ +--vm-btn-radius /* Button border radius */ +--danger /* Delete button color */ +``` + +## Accessibility Features + +- ✅ ARIA label on remove buttons with product name +- ✅ Proper semantic HTML structure +- ✅ Icon elements marked with `aria-hidden="true"` +- ✅ Keyboard navigation support +- ✅ Focus indicators on interactive elements +- ✅ Touch-friendly target sizes +- ✅ Color contrast compliance + +## Customization Examples + +### Adjust Cart Width +```css +.mod-vm-cart-responsive { + max-width: 400px; + margin: 0 auto; +} +``` + +### Customize Product Card Spacing +```css +.mod-vm-cart__products { + gap: 1.5rem; +} +``` + +### Change Button Layout +```css +@media (min-width: 768px) { + .mod-vm-cart__actions { + flex-direction: column; + gap: 1rem; + } +} +``` + +### Style Empty State +```css +.mod-vm-cart__empty { + padding: 3rem 1.5rem; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); +} +``` + +## Integration with VirtueMart + +This override works seamlessly with: +- VirtueMart 3.x and 4.x +- Standard VirtueMart cart functionality +- AJAX cart updates (if configured) +- Multiple currency support +- Tax calculations + +## Browser Compatibility + +- ✅ Modern browsers (Chrome, Firefox, Safari, Edge) +- ✅ iOS Safari (no zoom on input/button touch) +- ✅ Android Chrome +- ✅ Touch and mouse input +- ✅ All screen sizes from 320px+ + +## Testing Checklist + +- [ ] Add products to cart +- [ ] Verify item count updates +- [ ] Test remove button functionality +- [ ] Check price calculations +- [ ] Verify cart view link works +- [ ] Test checkout button redirect +- [ ] Check empty cart state +- [ ] Test on mobile device (< 576px) +- [ ] Test on tablet (576px - 767px) +- [ ] Test on desktop (≥ 768px) +- [ ] Verify touch targets are adequate +- [ ] Test with screen reader +- [ ] Check keyboard navigation + +## License + +Copyright (C) 2025 Moko Consulting +Licensed under GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_category/README.md b/src/templates/html/mod_virtuemart_category/README.md new file mode 100644 index 0000000..04682eb --- /dev/null +++ b/src/templates/html/mod_virtuemart_category/README.md @@ -0,0 +1,57 @@ +# mod_virtuemart_category Mobile Responsive Override + +## Overview +Mobile-responsive category navigation with hierarchical structure, optional images, product counts, and active state highlighting. + +## Key Features +- Hierarchical category/subcategory display +- Optional category images (40x40px) +- Product count badges +- Active page highlighting +- Touch-friendly links (48px mobile, 44px desktop) +- Collapsible subcategory lists + +## Responsive Features +- Full-width category links on mobile +- Indented subcategory lists +- Active state styling +- Hover effects + +## Module Parameters Supported +- `show_images` - Display category images +- `show_description` - Show category descriptions +- `show_product_count` - Display product counts +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-category-responsive` - Main container +- `.mod-vm-category__nav` - Navigation element +- `.mod-vm-category__list` - Main category list +- `.mod-vm-category__item` - Category item +- `.mod-vm-category__link` - Category link +- `.mod-vm-category__link--active` - Active category +- `.mod-vm-category__sublist` - Subcategory list +- `.mod-vm-category__sublink` - Subcategory link + +## Customization Example +```css +.mod-vm-category__link { + border-radius: 10px; + padding: 1rem; +} + +.mod-vm-category__image { + width: 50px; + height: 50px; +} +``` + +## Accessibility +- Semantic navigation element +- `aria-current="page"` on active items +- ARIA labels for navigation +- Keyboard navigation support + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_currencies/README.md b/src/templates/html/mod_virtuemart_currencies/README.md new file mode 100644 index 0000000..00f8ef4 --- /dev/null +++ b/src/templates/html/mod_virtuemart_currencies/README.md @@ -0,0 +1,50 @@ +# mod_virtuemart_currencies Mobile Responsive Override + +## Overview +Mobile-responsive currency selector with custom-styled dropdown, touch-friendly controls, and automatic form submission on change. + +## Key Features +- Custom styled select dropdown with icon +- 16px font size on mobile (prevents iOS zoom) +- Auto-submit on currency change (JavaScript) +- Fallback submit button for no-JS users +- Full keyboard accessibility + +## Responsive Features + +| Screen Size | Input Height | Font Size | +|------------|--------------|-----------| +| Mobile (< 576px) | 48px | 16px | +| Desktop (≥ 768px) | 44px | 1rem | + +## Module Parameters Supported +- `text_before` - Text displayed before selector +- `text_after` - Text displayed after selector +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-currencies-responsive` - Main container +- `.mod-vm-currencies__form` - Form element +- `.mod-vm-currencies__label` - Label text +- `.mod-vm-currencies__select-wrapper` - Select container +- `.mod-vm-currencies__select` - Dropdown element +- `.mod-vm-currencies__icon` - Chevron icon +- `.mod-vm-currencies__submit` - Submit button (no-JS) + +## Customization Example +```css +.mod-vm-currencies__select { + border-radius: 25px; + padding: 0.75rem 3rem 0.75rem 1.5rem; +} +``` + +## Accessibility +- Proper label association +- ARIA labels for screen readers +- Keyboard navigation support +- Focus indicators + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_manufacturer/README.md b/src/templates/html/mod_virtuemart_manufacturer/README.md new file mode 100644 index 0000000..045860f --- /dev/null +++ b/src/templates/html/mod_virtuemart_manufacturer/README.md @@ -0,0 +1,59 @@ +# mod_virtuemart_manufacturer Mobile Responsive Override + +## Overview +Mobile-responsive manufacturer display with grid/list layouts, logo images, and responsive card designs. + +## Key Features +- Grid or list display modes +- Responsive manufacturer cards +- Logo/image display with aspect ratio control +- Manufacturer descriptions +- Hover effects and transitions + +## Responsive Layouts + +| Screen Size | Grid Mode | List Mode | +|------------|-----------|-----------| +| Mobile (< 576px) | 1 column | 1 column | +| Tablet (576px - 767px) | 2 columns | 1 column | +| Desktop (768px - 991px) | 3 columns | 1 column | +| Large Desktop (≥ 992px) | 4 columns | 1 column | + +## Module Parameters Supported +- `show_images` - Display manufacturer logos +- `display_style` - Layout mode (list/grid) +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-manufacturer-responsive` - Main container +- `.mod-vm-manufacturer__container` - Grid/list container +- `.mod-vm-manufacturer__container--list` - List layout +- `.mod-vm-manufacturer__container--grid` - Grid layout +- `.mod-vm-manufacturer__item` - Manufacturer card +- `.mod-vm-manufacturer__link` - Clickable link +- `.mod-vm-manufacturer__image` - Logo container +- `.mod-vm-manufacturer__name` - Manufacturer name +- `.mod-vm-manufacturer__description` - Description text + +## Customization Example +```css +.mod-vm-manufacturer__image { + aspect-ratio: 1/1; + border-radius: 50%; +} + +.mod-vm-manufacturer__container--grid { + gap: 2rem; +} +``` + +## Accessibility +- Proper link structure +- Title attributes on links +- Semantic HTML +- Keyboard navigation +- Focus indicators + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later diff --git a/src/templates/html/mod_virtuemart_product/README.md b/src/templates/html/mod_virtuemart_product/README.md new file mode 100644 index 0000000..b6ad18e --- /dev/null +++ b/src/templates/html/mod_virtuemart_product/README.md @@ -0,0 +1,50 @@ +# mod_virtuemart_product Mobile Responsive Override + +## Overview +Mobile-responsive override for VirtueMart's product display module featuring grid/list layouts, responsive product cards, and touch-friendly controls. + +## Key Features +- Responsive grid layout (1-4 columns based on screen size) +- Product card with image, title, description, price +- Touch-friendly action buttons (48px mobile, 44px desktop) +- Availability badges +- Add to cart functionality + +## Responsive Layouts + +| Screen Size | Grid Columns | +|------------|--------------| +| Mobile (< 576px) | 1 column | +| Tablet (576px - 767px) | 2 columns | +| Desktop (768px - 991px) | 3 columns | +| Large Desktop (≥ 992px) | 4 columns | + +## Module Parameters Supported +- `headerText` - Header text above products +- `display_style` - Layout style (div, list) +- `moduleclass_sfx` - Custom CSS suffix + +## CSS Classes +- `.mod-vm-product-responsive` - Main container +- `.mod-vm-product__list` - Products grid +- `.mod-vm-product__item` - Product card +- `.mod-vm-product__image` - Product image +- `.mod-vm-product__title` - Product name +- `.mod-vm-product__description` - Short description +- `.mod-vm-product__price` - Price display +- `.mod-vm-product__actions` - Action buttons + +## Customization Example +```css +.mod-vm-product__list { + gap: 2rem; +} + +.mod-vm-product__item { + border-radius: 1rem; +} +``` + +## License +Copyright (C) 2025 Moko Consulting +GNU General Public License version 2 or later