Add comprehensive documentation for all VirtueMart module overrides
Co-authored-by: jmiller-moko <230051081+jmiller-moko@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
205
src/templates/html/mod_virtuemart_cart/README.md
Normal file
205
src/templates/html/mod_virtuemart_cart/README.md
Normal file
@@ -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 <hello@mokoconsulting.tech>
|
||||
Licensed under GNU General Public License version 2 or later
|
||||
57
src/templates/html/mod_virtuemart_category/README.md
Normal file
57
src/templates/html/mod_virtuemart_category/README.md
Normal file
@@ -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
|
||||
50
src/templates/html/mod_virtuemart_currencies/README.md
Normal file
50
src/templates/html/mod_virtuemart_currencies/README.md
Normal file
@@ -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
|
||||
59
src/templates/html/mod_virtuemart_manufacturer/README.md
Normal file
59
src/templates/html/mod_virtuemart_manufacturer/README.md
Normal file
@@ -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
|
||||
50
src/templates/html/mod_virtuemart_product/README.md
Normal file
50
src/templates/html/mod_virtuemart_product/README.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user