Simplify component.php to minimal layout with conditional analytics #82
17
CHANGELOG.md
17
CHANGELOG.md
@@ -61,6 +61,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|||||||
- **After**: 17 module overrides (added mod_menu "Main Menu")
|
- **After**: 17 module overrides (added mod_menu "Main Menu")
|
||||||
- **Component overrides**: Still 7 (unchanged)
|
- **Component overrides**: Still 7 (unchanged)
|
||||||
|
|
||||||
|
### Removed - Documentation Cleanup
|
||||||
|
|
||||||
|
**Documentation policy**: Removed all markdown files from `src/templates/html/` directory. All documentation belongs in `docs/` folder only.
|
||||||
|
|
||||||
|
#### Files Removed (9 markdown files)
|
||||||
|
- `src/templates/html/STANDARD_MODULES_README.md`
|
||||||
|
- `src/templates/html/INDUSTRY_MODULES_README.md`
|
||||||
|
- `src/templates/html/VIRTUEMART_MODULES_README.md`
|
||||||
|
- `src/templates/html/mod_virtuemart_cart/README.md`
|
||||||
|
- `src/templates/html/mod_virtuemart_category/README.md`
|
||||||
|
- `src/templates/html/mod_virtuemart_currencies/README.md`
|
||||||
|
- `src/templates/html/mod_virtuemart_manufacturer/README.md`
|
||||||
|
- `src/templates/html/mod_virtuemart_product/README.md`
|
||||||
|
- `src/templates/html/mod_search/README.md`
|
||||||
|
|
||||||
|
**Note**: All module override documentation is consolidated in `docs/MODULE_OVERRIDES.md`. The `src/templates/html/` directory now contains only PHP override files and `index.html` security files.
|
||||||
|
|
||||||
**Note**: Unlike the previously removed mod_menu override (v03.08.01), this new "Main Menu" override is properly structured based on Joomla core layouts and Bootstrap 5, ensuring language strings load correctly and menu functionality works as expected.
|
**Note**: Unlike the previously removed mod_menu override (v03.08.01), this new "Main Menu" override is properly structured based on Joomla core layouts and Bootstrap 5, ensuring language strings load correctly and menu functionality works as expected.
|
||||||
|
|
||||||
## [03.08.02] - 2026-02-27
|
## [03.08.02] - 2026-02-27
|
||||||
|
|||||||
@@ -1,306 +0,0 @@
|
|||||||
# Industry Extension Module Mobile Responsive Overrides
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
This directory contains mobile-responsive overrides for popular industry Joomla extensions, designed specifically for the MokoCassiopeia template.
|
|
||||||
|
|
||||||
## Industry Extension Modules
|
|
||||||
|
|
||||||
### 1. mod_k2_content (K2)
|
|
||||||
K2 content display module featuring:
|
|
||||||
- Responsive article/content cards
|
|
||||||
- Optional images with hover effects
|
|
||||||
- Metadata display (author, date, category, hits)
|
|
||||||
- Introtext support
|
|
||||||
- Read more links
|
|
||||||
- Custom link support
|
|
||||||
- Touch-friendly interactions
|
|
||||||
|
|
||||||
### 2. mod_acymailing (AcyMailing)
|
|
||||||
AcyMailing newsletter subscription module with:
|
|
||||||
- Mobile-responsive form inputs
|
|
||||||
- Touch-friendly form controls (48px on mobile)
|
|
||||||
- 16px input font (prevents iOS zoom)
|
|
||||||
- Intro and outro text support
|
|
||||||
- Custom form styling that overrides inline styles
|
|
||||||
- Accessible form structure
|
|
||||||
|
|
||||||
### 3. mod_hikashop_cart (HikaShop)
|
|
||||||
HikaShop shopping cart module offering:
|
|
||||||
- Product list with images
|
|
||||||
- Cart summary with item count and total
|
|
||||||
- Touch-friendly remove buttons
|
|
||||||
- Mobile-optimized cart display
|
|
||||||
- Flexible action buttons layout
|
|
||||||
- Empty cart state
|
|
||||||
|
|
||||||
### 4. mod_kunenalatest (Kunena Forum)
|
|
||||||
Kunena latest posts module with:
|
|
||||||
- User avatars
|
|
||||||
- Post metadata (author, date, category, hits, replies)
|
|
||||||
- Post excerpts
|
|
||||||
- Forum navigation links
|
|
||||||
- Responsive card layouts
|
|
||||||
- Touch-friendly post links
|
|
||||||
|
|
||||||
### 5. mod_kunenalogin (Kunena Forum)
|
|
||||||
Kunena login module featuring:
|
|
||||||
- Login and logout states
|
|
||||||
- User profile with avatar
|
|
||||||
- Post count and karma display
|
|
||||||
- Profile and private messages links
|
|
||||||
- Touch-friendly form controls
|
|
||||||
- Password recovery links
|
|
||||||
|
|
||||||
### 6. mod_kunenasearch (Kunena Forum)
|
|
||||||
Kunena forum search module with:
|
|
||||||
- Configurable button positions (top/right/bottom/left)
|
|
||||||
- Touch-friendly search input (48px on mobile)
|
|
||||||
- 16px input font (prevents iOS zoom)
|
|
||||||
- Icon-only or text button options
|
|
||||||
- Accessible search form
|
|
||||||
|
|
||||||
### 7. mod_kunenastats (Kunena Forum)
|
|
||||||
Kunena statistics module offering:
|
|
||||||
- Member count with icon
|
|
||||||
- Latest member display
|
|
||||||
- Message and topic counts
|
|
||||||
- Today/yesterday topic counts
|
|
||||||
- Responsive grid layout (1-3 columns)
|
|
||||||
- Visual stat cards with icons
|
|
||||||
|
|
||||||
### 8. mod_osmembership (OS Membership Pro)
|
|
||||||
Membership Pro plans module with:
|
|
||||||
- Responsive pricing cards
|
|
||||||
- Plan images and descriptions
|
|
||||||
- Feature lists with checkmarks
|
|
||||||
- Pricing display with periods
|
|
||||||
- Free plan highlighting
|
|
||||||
- Touch-friendly subscribe buttons
|
|
||||||
- Grid layout (1-3 columns)
|
|
||||||
|
|
||||||
## Component Overrides
|
|
||||||
|
|
||||||
### com_kunena (Kunena Forum)
|
|
||||||
- Category list view with responsive cards
|
|
||||||
- Mobile-optimized forum navigation
|
|
||||||
- Touch-friendly category links
|
|
||||||
|
|
||||||
### com_osmembership (OS Membership Pro)
|
|
||||||
- Plans list with pricing table layout
|
|
||||||
- Featured plan highlighting
|
|
||||||
- Responsive grid (1-4 columns)
|
|
||||||
- Touch-friendly subscription buttons
|
|
||||||
|
|
||||||
## Mobile Responsive Features
|
|
||||||
|
|
||||||
### Touch Target Sizes (WCAG 2.1 Compliant)
|
|
||||||
- **Mobile (< 576px):** 48px minimum height
|
|
||||||
- **Desktop (≥ 768px):** 44px minimum height
|
|
||||||
|
|
||||||
### Font Sizes (iOS Zoom Prevention)
|
|
||||||
- **Mobile:** 16px base font for inputs (prevents auto-zoom)
|
|
||||||
- **Desktop:** 1rem (16px typically)
|
|
||||||
|
|
||||||
### Responsive Breakpoints
|
|
||||||
Using Bootstrap-aligned breakpoints:
|
|
||||||
- `< 576px` - Mobile (xs)
|
|
||||||
- `576px - 767px` - Tablet (sm-md)
|
|
||||||
- `768px+` - Desktop (md+)
|
|
||||||
|
|
||||||
### Layout Adaptations
|
|
||||||
|
|
||||||
#### Mobile (< 576px)
|
|
||||||
- Stacked content layouts
|
|
||||||
- Full-width images
|
|
||||||
- Vertical metadata lists
|
|
||||||
- Larger touch targets (48px)
|
|
||||||
- Stacked action buttons
|
|
||||||
|
|
||||||
#### Desktop (≥ 768px)
|
|
||||||
- Horizontal layouts where appropriate
|
|
||||||
- Side-by-side image and content
|
|
||||||
- Inline metadata
|
|
||||||
- Enhanced hover effects
|
|
||||||
- Horizontal button groups
|
|
||||||
|
|
||||||
## CSS Architecture
|
|
||||||
|
|
||||||
### BEM Naming Convention
|
|
||||||
All modules use Block-Element-Modifier naming:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.mod-k2-content /* Block */
|
|
||||||
.mod-k2-content__title /* Element */
|
|
||||||
.mod-k2-content__item--featured /* Modifier */
|
|
||||||
```
|
|
||||||
|
|
||||||
### CSS Variables Integration
|
|
||||||
Styles integrate with template's color system:
|
|
||||||
|
|
||||||
```css
|
|
||||||
--body-color
|
|
||||||
--link-color
|
|
||||||
--color-primary
|
|
||||||
--secondary-bg
|
|
||||||
--border-color
|
|
||||||
--border-radius
|
|
||||||
--gray-600
|
|
||||||
--success
|
|
||||||
--danger
|
|
||||||
```
|
|
||||||
|
|
||||||
## Accessibility Features
|
|
||||||
|
|
||||||
All modules include:
|
|
||||||
- ✅ Semantic HTML5 elements
|
|
||||||
- ✅ ARIA labels and landmarks
|
|
||||||
- ✅ Proper heading hierarchy
|
|
||||||
- ✅ Keyboard navigation support
|
|
||||||
- ✅ Screen reader friendly
|
|
||||||
- ✅ Focus indicators
|
|
||||||
- ✅ Touch-optimized controls
|
|
||||||
- ✅ Alternative text for images
|
|
||||||
|
|
||||||
## Browser Compatibility
|
|
||||||
|
|
||||||
- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
||||||
- ✅ iOS Safari (no zoom on input focus)
|
|
||||||
- ✅ Android browsers
|
|
||||||
- ✅ Touch and mouse input
|
|
||||||
- ✅ All screen sizes (320px+)
|
|
||||||
- ✅ Portrait and landscape orientations
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
src/templates/html/
|
|
||||||
├── mod_k2_content/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
├── mod_acymailing/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
├── mod_hikashop_cart/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
└── mod_kunenalatest/
|
|
||||||
├── default.php
|
|
||||||
└── index.html
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
These overrides are automatically used when:
|
|
||||||
1. The MokoCassiopeia template is active
|
|
||||||
2. The respective extensions are installed
|
|
||||||
3. The modules are published
|
|
||||||
|
|
||||||
No additional configuration required beyond standard module settings.
|
|
||||||
|
|
||||||
## Extension Parameters
|
|
||||||
|
|
||||||
All standard extension module parameters are fully supported. Each override respects the module's configuration options.
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Override CSS Variables
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
--border-radius: 0.5rem;
|
|
||||||
--color-primary: #your-color;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Add Custom Styles
|
|
||||||
```css
|
|
||||||
.mod-k2-content-responsive {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Modify Templates
|
|
||||||
Each PHP file can be modified to adjust HTML structure while maintaining mobile responsiveness.
|
|
||||||
|
|
||||||
## Security
|
|
||||||
|
|
||||||
- ✅ index.html security files in all directories
|
|
||||||
- ✅ Proper input escaping with `htmlspecialchars()`
|
|
||||||
- ✅ XSS prevention
|
|
||||||
- ✅ Joomla security best practices (`_JEXEC` check)
|
|
||||||
- ✅ No SQL injection vectors
|
|
||||||
|
|
||||||
## Extension Compatibility
|
|
||||||
|
|
||||||
### K2
|
|
||||||
- Compatible with K2 2.x and 3.x
|
|
||||||
- Supports all K2 module parameters
|
|
||||||
- Image handling for various sizes
|
|
||||||
- BBCode/HTML content support
|
|
||||||
|
|
||||||
### AcyMailing
|
|
||||||
- Compatible with AcyMailing 6.x+
|
|
||||||
- Form styling overrides inline styles
|
|
||||||
- Supports custom form layouts
|
|
||||||
- Newsletter list integration
|
|
||||||
|
|
||||||
### HikaShop
|
|
||||||
- Compatible with HikaShop 4.x and 5.x
|
|
||||||
- Product image display
|
|
||||||
- Price formatting support
|
|
||||||
- Tax calculations
|
|
||||||
- Cart operations via AJAX
|
|
||||||
|
|
||||||
### Kunena
|
|
||||||
- Compatible with Kunena 5.x and 6.x
|
|
||||||
- Avatar integration
|
|
||||||
- BBCode parsing
|
|
||||||
- Forum routing support
|
|
||||||
- User profile links
|
|
||||||
|
|
||||||
## Testing Checklist
|
|
||||||
|
|
||||||
### General Testing
|
|
||||||
- [ ] 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
|
|
||||||
- [ ] Verify ARIA labels
|
|
||||||
|
|
||||||
### Extension-Specific Testing
|
|
||||||
- [ ] K2: Test with/without images, various metadata options
|
|
||||||
- [ ] AcyMailing: Test form submission, validation
|
|
||||||
- [ ] HikaShop: Test add/remove items, cart update
|
|
||||||
- [ ] Kunena: Test avatar display, post links, forum navigation
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
Each module follows the same pattern established by:
|
|
||||||
- mod_search override
|
|
||||||
- VirtueMart module overrides
|
|
||||||
- Standard Joomla module overrides
|
|
||||||
- Mobile-first responsive design
|
|
||||||
- BEM naming convention
|
|
||||||
|
|
||||||
## Related Documentation
|
|
||||||
|
|
||||||
- `STANDARD_MODULES_README.md` - Standard Joomla module overrides
|
|
||||||
- `VIRTUEMART_MODULES_README.md` - VirtueMart module overrides
|
|
||||||
- `docs/CSS_VARIABLES.md` - Complete CSS variables reference
|
|
||||||
- `docs/ROADMAP.md` - Template development roadmap
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
|
||||||
Licensed under GNU General Public License version 2 or later
|
|
||||||
|
|
||||||
## Support
|
|
||||||
|
|
||||||
For issues or questions:
|
|
||||||
- Review extension-specific documentation
|
|
||||||
- Check CSS variables documentation
|
|
||||||
- Consult extension and Joomla documentation
|
|
||||||
- Verify module configuration in Joomla admin
|
|
||||||
- Check extension compatibility versions
|
|
||||||
@@ -1,213 +0,0 @@
|
|||||||
# Standard Joomla & Community Builder Module Mobile Responsive Overrides
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
This directory contains mobile-responsive overrides for Community Builder modules, designed specifically for the MokoCassiopeia template.
|
|
||||||
|
|
||||||
**Important**: Following Cassiopeia template best practices, standard Joomla core modules (mod_breadcrumbs, mod_login, mod_articles_latest, mod_menu) are NOT overridden. These use Joomla's default layouts to ensure proper language loading and compatibility. Apply custom styling via CSS.
|
|
||||||
|
|
||||||
## Community Builder Modules
|
|
||||||
|
|
||||||
### 1. mod_cblogin
|
|
||||||
Community Builder login module with:
|
|
||||||
- Avatar display in logged-in state
|
|
||||||
- Profile link button
|
|
||||||
- Touch-friendly form controls
|
|
||||||
- Remember me checkbox
|
|
||||||
- Password/username recovery links
|
|
||||||
- Registration link
|
|
||||||
- Pre/post text support
|
|
||||||
|
|
||||||
### 2. mod_comprofilerOnline
|
|
||||||
Community Builder online users module featuring:
|
|
||||||
- Online user count display
|
|
||||||
- Members vs. guests breakdown
|
|
||||||
- User list with avatars
|
|
||||||
- Profile links
|
|
||||||
- Online status indicators
|
|
||||||
- Responsive card layouts
|
|
||||||
|
|
||||||
## Mobile Responsive Features
|
|
||||||
|
|
||||||
### Touch Target Sizes (WCAG 2.1 Compliant)
|
|
||||||
- **Mobile (< 576px):** 48px minimum height
|
|
||||||
- **Desktop (≥ 768px):** 44px minimum height
|
|
||||||
|
|
||||||
### Font Sizes (iOS Zoom Prevention)
|
|
||||||
- **Mobile:** 16px base font for inputs (prevents auto-zoom)
|
|
||||||
- **Desktop:** 1rem (16px typically)
|
|
||||||
|
|
||||||
### Responsive Breakpoints
|
|
||||||
Using Bootstrap-aligned breakpoints:
|
|
||||||
- `< 576px` - Mobile (xs)
|
|
||||||
- `576px - 767px` - Tablet (sm-md)
|
|
||||||
- `768px+` - Desktop (md+)
|
|
||||||
|
|
||||||
### Layout Adaptations
|
|
||||||
|
|
||||||
#### Mobile (< 576px)
|
|
||||||
- Stacked form layouts
|
|
||||||
- Full-width buttons
|
|
||||||
- Larger touch targets (48px)
|
|
||||||
- 16px input font size
|
|
||||||
- Vertical link lists
|
|
||||||
|
|
||||||
#### Tablet & Desktop (≥ 768px)
|
|
||||||
- Inline button layouts where appropriate
|
|
||||||
- Horizontal action groups
|
|
||||||
- Enhanced hover effects
|
|
||||||
- Optimized spacing
|
|
||||||
|
|
||||||
## CSS Architecture
|
|
||||||
|
|
||||||
### BEM Naming Convention
|
|
||||||
All modules use Block-Element-Modifier naming:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.mod-login /* Block */
|
|
||||||
.mod-login__input /* Element */
|
|
||||||
.mod-login__btn--submit /* Modifier */
|
|
||||||
```
|
|
||||||
|
|
||||||
### CSS Variables Integration
|
|
||||||
Styles integrate with template's color system:
|
|
||||||
|
|
||||||
```css
|
|
||||||
--body-color
|
|
||||||
--link-color
|
|
||||||
--link-hover-color
|
|
||||||
--color-primary
|
|
||||||
--secondary-bg
|
|
||||||
--border-color
|
|
||||||
--border-radius
|
|
||||||
--gray-600
|
|
||||||
--success
|
|
||||||
```
|
|
||||||
|
|
||||||
## Accessibility Features
|
|
||||||
|
|
||||||
All modules include:
|
|
||||||
- ✅ Semantic HTML5 elements
|
|
||||||
- ✅ ARIA labels and landmarks
|
|
||||||
- ✅ Proper form labeling
|
|
||||||
- ✅ Keyboard navigation support
|
|
||||||
- ✅ Screen reader friendly
|
|
||||||
- ✅ Focus indicators
|
|
||||||
- ✅ Touch-optimized controls
|
|
||||||
- ✅ Schema.org structured data (where applicable)
|
|
||||||
|
|
||||||
## Browser Compatibility
|
|
||||||
|
|
||||||
- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
||||||
- ✅ iOS Safari (no zoom on input focus)
|
|
||||||
- ✅ Android browsers
|
|
||||||
- ✅ Touch and mouse input
|
|
||||||
- ✅ All screen sizes (320px+)
|
|
||||||
- ✅ Portrait and landscape orientations
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
src/templates/html/
|
|
||||||
├── mod_breadcrumbs/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
├── mod_login/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
├── mod_articles_latest/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
├── mod_cblogin/
|
|
||||||
│ ├── default.php
|
|
||||||
│ └── index.html
|
|
||||||
└── mod_comprofilerOnline/
|
|
||||||
├── default.php
|
|
||||||
└── index.html
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
These overrides are automatically used when:
|
|
||||||
1. The MokoCassiopeia template is active
|
|
||||||
2. The respective modules are published
|
|
||||||
3. No additional configuration required beyond standard module settings
|
|
||||||
|
|
||||||
## Module Parameters
|
|
||||||
|
|
||||||
All standard Joomla and Community Builder module parameters are fully supported. Each override respects the module's configuration options.
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
### Override CSS Variables
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
--border-radius: 0.5rem;
|
|
||||||
--color-primary: #your-color;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Add Custom Styles
|
|
||||||
```css
|
|
||||||
.mod-login-responsive {
|
|
||||||
max-width: 400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Modify Templates
|
|
||||||
Each PHP file can be modified to adjust HTML structure while maintaining mobile responsiveness.
|
|
||||||
|
|
||||||
## Security
|
|
||||||
|
|
||||||
- ✅ index.html security files in all directories
|
|
||||||
- ✅ Proper input escaping with `htmlspecialchars()`
|
|
||||||
- ✅ XSS prevention
|
|
||||||
- ✅ Joomla security best practices (`_JEXEC` check)
|
|
||||||
- ✅ Form token validation
|
|
||||||
|
|
||||||
## Testing Checklist
|
|
||||||
|
|
||||||
### General Testing
|
|
||||||
- [ ] 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
|
|
||||||
- [ ] Verify ARIA labels
|
|
||||||
|
|
||||||
### Module-Specific Testing
|
|
||||||
- [ ] mod_breadcrumbs: Test breadcrumb trail on nested pages
|
|
||||||
- [ ] mod_breadcrumbs: Verify breadcrumb trail accuracy
|
|
||||||
- [ ] mod_login: Test login/logout flows, 2FA
|
|
||||||
- [ ] mod_articles_latest: Check various parameter combinations
|
|
||||||
- [ ] mod_cblogin: Test CB login/logout with avatar
|
|
||||||
- [ ] mod_comprofilerOnline: Verify user list display
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
Each module follows the same pattern established by:
|
|
||||||
- mod_search override
|
|
||||||
- VirtueMart module overrides
|
|
||||||
- Comprehensive documentation
|
|
||||||
- BEM naming convention
|
|
||||||
- Mobile-first responsive design
|
|
||||||
|
|
||||||
## Related Documentation
|
|
||||||
|
|
||||||
- `VIRTUEMART_MODULES_README.md` - VirtueMart module overrides
|
|
||||||
- `docs/CSS_VARIABLES.md` - Complete CSS variables reference
|
|
||||||
- `docs/ROADMAP.md` - Template development roadmap
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
|
||||||
Licensed under GNU General Public License version 2 or later
|
|
||||||
|
|
||||||
## Support
|
|
||||||
|
|
||||||
For issues or questions:
|
|
||||||
- Review module-specific parameters
|
|
||||||
- Check CSS variables documentation
|
|
||||||
- Consult Joomla and Community Builder documentation
|
|
||||||
- Verify module configuration in Joomla admin
|
|
||||||
@@ -1,228 +0,0 @@
|
|||||||
# VirtueMart Module Mobile Responsive Overrides
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
This directory contains mobile-responsive overrides for VirtueMart e-commerce modules, designed specifically for the MokoCassiopeia template.
|
|
||||||
|
|
||||||
## Modules Included
|
|
||||||
|
|
||||||
### 1. mod_virtuemart_cart
|
|
||||||
Shopping cart display module with:
|
|
||||||
- Responsive product list with images
|
|
||||||
- Touch-friendly remove buttons
|
|
||||||
- Mobile-optimized cart summary
|
|
||||||
- Flexible action buttons layout
|
|
||||||
|
|
||||||
### 2. mod_virtuemart_product
|
|
||||||
Product display module featuring:
|
|
||||||
- Grid/list layout options
|
|
||||||
- Responsive product cards
|
|
||||||
- Mobile-optimized images
|
|
||||||
- Touch-friendly action buttons
|
|
||||||
|
|
||||||
### 3. mod_virtuemart_currencies
|
|
||||||
Currency selector module with:
|
|
||||||
- Custom styled select dropdown
|
|
||||||
- Mobile-friendly touch targets
|
|
||||||
- Accessible form controls
|
|
||||||
- Icon indicators
|
|
||||||
|
|
||||||
### 4. mod_virtuemart_category
|
|
||||||
Category navigation module offering:
|
|
||||||
- Hierarchical category display
|
|
||||||
- Optional product counts
|
|
||||||
- Image support for categories
|
|
||||||
- Active state highlighting
|
|
||||||
|
|
||||||
### 5. mod_virtuemart_manufacturer
|
|
||||||
Manufacturer display module with:
|
|
||||||
- Grid and list display modes
|
|
||||||
- Logo/image display
|
|
||||||
- Responsive card layouts
|
|
||||||
- Hover effects
|
|
||||||
|
|
||||||
## Mobile Responsive Features
|
|
||||||
|
|
||||||
### Touch Targets
|
|
||||||
- **Mobile (< 576px):** 48px minimum height
|
|
||||||
- **Desktop (≥ 768px):** 44px minimum height
|
|
||||||
- WCAG 2.1 AA compliant
|
|
||||||
|
|
||||||
### Font Sizes
|
|
||||||
- **Mobile:** 16px base (prevents iOS auto-zoom)
|
|
||||||
- **Desktop:** 1rem (16px typically)
|
|
||||||
|
|
||||||
### Responsive Breakpoints
|
|
||||||
Using Bootstrap-aligned breakpoints:
|
|
||||||
- `< 576px` - Mobile (xs)
|
|
||||||
- `576px` - Small (sm)
|
|
||||||
- `768px` - Medium (md)
|
|
||||||
- `992px` - Large (lg)
|
|
||||||
- `1200px` - Extra Large (xl)
|
|
||||||
- `1400px` - Extra Extra Large (xxl)
|
|
||||||
|
|
||||||
### Layout Adaptations
|
|
||||||
|
|
||||||
#### Mobile (< 576px)
|
|
||||||
- Single column layouts
|
|
||||||
- Stacked action buttons
|
|
||||||
- Full-width elements
|
|
||||||
- Larger touch targets (48px)
|
|
||||||
|
|
||||||
#### Tablet (576px - 767px)
|
|
||||||
- 2-column grids for products/manufacturers
|
|
||||||
- Inline action buttons where appropriate
|
|
||||||
- 44px touch targets
|
|
||||||
|
|
||||||
#### Desktop (≥ 768px)
|
|
||||||
- 3-4 column grids
|
|
||||||
- Horizontal button layouts
|
|
||||||
- Optimized spacing
|
|
||||||
- Enhanced hover effects
|
|
||||||
|
|
||||||
## CSS Architecture
|
|
||||||
|
|
||||||
### CSS Variables Integration
|
|
||||||
All styles integrate with template's VirtueMart CSS variables:
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* Surfaces & Colors */
|
|
||||||
--vm-surface
|
|
||||||
--vm-surface-2
|
|
||||||
--vm-text
|
|
||||||
--vm-text-strong
|
|
||||||
--vm-text-muted
|
|
||||||
--vm-border
|
|
||||||
--vm-price-color
|
|
||||||
|
|
||||||
/* Layout */
|
|
||||||
--vm-block-radius
|
|
||||||
--vm-block-shadow
|
|
||||||
--vm-section-gap
|
|
||||||
|
|
||||||
/* Buttons */
|
|
||||||
--vm-btn-primary-bg
|
|
||||||
--vm-btn-primary-text
|
|
||||||
--vm-btn-secondary-bg
|
|
||||||
--vm-btn-secondary-text
|
|
||||||
```
|
|
||||||
|
|
||||||
### BEM Naming Convention
|
|
||||||
All modules use Block-Element-Modifier naming:
|
|
||||||
|
|
||||||
```css
|
|
||||||
.mod-vm-cart /* Block */
|
|
||||||
.mod-vm-cart__header /* Element */
|
|
||||||
.mod-vm-cart__item--active /* Modifier */
|
|
||||||
```
|
|
||||||
|
|
||||||
## Accessibility Features
|
|
||||||
|
|
||||||
All modules include:
|
|
||||||
- ✅ ARIA labels on interactive elements
|
|
||||||
- ✅ Semantic HTML5 structure
|
|
||||||
- ✅ Proper heading hierarchy
|
|
||||||
- ✅ Keyboard navigation support
|
|
||||||
- ✅ Screen reader friendly
|
|
||||||
- ✅ Focus indicators
|
|
||||||
- ✅ Touch-optimized controls
|
|
||||||
|
|
||||||
## Browser Compatibility
|
|
||||||
|
|
||||||
- ✅ Modern browsers with flexbox/grid support
|
|
||||||
- ✅ iOS Safari (no auto-zoom issues)
|
|
||||||
- ✅ Android browsers
|
|
||||||
- ✅ Chrome, Firefox, Safari, Edge
|
|
||||||
- ✅ Responsive on all device sizes
|
|
||||||
- ✅ Touch and mouse input
|
|
||||||
|
|
||||||
## File Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
src/templates/html/
|
|
||||||
├── mod_virtuemart_cart/
|
|
||||||
│ ├── default.php
|
|
||||||
│ ├── index.html
|
|
||||||
│ └── README.md
|
|
||||||
├── mod_virtuemart_product/
|
|
||||||
│ ├── default.php
|
|
||||||
│ ├── index.html
|
|
||||||
│ └── README.md
|
|
||||||
├── mod_virtuemart_currencies/
|
|
||||||
│ ├── default.php
|
|
||||||
│ ├── index.html
|
|
||||||
│ └── README.md
|
|
||||||
├── mod_virtuemart_category/
|
|
||||||
│ ├── default.php
|
|
||||||
│ ├── index.html
|
|
||||||
│ └── README.md
|
|
||||||
└── mod_virtuemart_manufacturer/
|
|
||||||
├── default.php
|
|
||||||
├── index.html
|
|
||||||
└── README.md
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
These overrides are automatically used when:
|
|
||||||
1. The MokoCassiopeia template is active
|
|
||||||
2. VirtueMart is installed and configured
|
|
||||||
3. The respective modules are published
|
|
||||||
|
|
||||||
No additional configuration is required beyond standard VirtueMart module settings.
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
To customize the appearance, you can:
|
|
||||||
|
|
||||||
1. **Override CSS variables** in `user.css`:
|
|
||||||
```css
|
|
||||||
:root {
|
|
||||||
--vm-btn-primary-bg: #your-color;
|
|
||||||
--vm-block-radius: 0.5rem;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
2. **Add custom styles** targeting module classes:
|
|
||||||
```css
|
|
||||||
.mod-vm-cart-responsive {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **Modify PHP templates** in the respective module directories
|
|
||||||
|
|
||||||
## Testing
|
|
||||||
|
|
||||||
All overrides have been designed to work across:
|
|
||||||
- Mobile devices (320px+)
|
|
||||||
- Tablets (768px+)
|
|
||||||
- Desktop screens (1200px+)
|
|
||||||
- Touch and click interactions
|
|
||||||
- Portrait and landscape orientations
|
|
||||||
|
|
||||||
## Security
|
|
||||||
|
|
||||||
- ✅ index.html security files included
|
|
||||||
- ✅ Proper input escaping in PHP
|
|
||||||
- ✅ XSS prevention
|
|
||||||
- ✅ Follows Joomla security best practices
|
|
||||||
|
|
||||||
## Documentation
|
|
||||||
|
|
||||||
Each module directory contains a detailed README.md with:
|
|
||||||
- Module-specific features
|
|
||||||
- Configuration options
|
|
||||||
- Customization examples
|
|
||||||
- Usage guidelines
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
|
||||||
Licensed under GNU General Public License version 2 or later
|
|
||||||
|
|
||||||
## Support
|
|
||||||
|
|
||||||
For issues or questions:
|
|
||||||
- Check individual module README files
|
|
||||||
- Review CSS_VARIABLES.md for available CSS variables
|
|
||||||
- Consult VirtueMart and Joomla documentation
|
|
||||||
@@ -1,126 +0,0 @@
|
|||||||
# mod_search Mobile Responsive Override
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
This directory contains a mobile-responsive override for Joomla's `mod_search` module, designed specifically for the MokoCassiopeia template.
|
|
||||||
|
|
||||||
## Features
|
|
||||||
|
|
||||||
### Mobile Responsiveness
|
|
||||||
- **Flexible Layout**: Adapts to different screen sizes automatically
|
|
||||||
- **Touch-Friendly**: Minimum 44px touch targets (48px on mobile)
|
|
||||||
- **Readable Text**: 16px font size on mobile to prevent auto-zoom on iOS
|
|
||||||
- **Proper Spacing**: Adequate padding and gaps for easy interaction
|
|
||||||
|
|
||||||
### Responsive Breakpoints
|
|
||||||
- **Mobile (< 576px)**: Stacked layout, full-width buttons, larger touch targets
|
|
||||||
- **Tablet (576px - 767px)**: Inline search field and button
|
|
||||||
- **Desktop (≥ 768px)**: Optimized horizontal layout
|
|
||||||
|
|
||||||
### Button Position Support
|
|
||||||
The override supports all standard mod_search button positions:
|
|
||||||
- **Left**: Search button appears to the left of input field
|
|
||||||
- **Right**: Search button appears to the right of input field (default)
|
|
||||||
- **Top**: Search button appears above input field
|
|
||||||
- **Bottom**: Search button appears below input field
|
|
||||||
|
|
||||||
### Icon Button Support
|
|
||||||
Supports both text and icon-only search buttons:
|
|
||||||
- Text buttons display customizable button text
|
|
||||||
- Icon buttons show search icon (icon-search)
|
|
||||||
|
|
||||||
## Files
|
|
||||||
|
|
||||||
### default.php
|
|
||||||
The main template override file that renders the search module with responsive HTML structure.
|
|
||||||
|
|
||||||
**Key Classes:**
|
|
||||||
- `.mod-search-responsive`: Main wrapper class
|
|
||||||
- `.mod-search__form`: Form container with flex layout
|
|
||||||
- `.mod-search__input-wrapper`: Input field wrapper
|
|
||||||
- `.mod-search__input`: Search input field
|
|
||||||
- `.mod-search__button`: Search button
|
|
||||||
- `.mod-search__button--icon`: Icon-only button variant
|
|
||||||
|
|
||||||
## CSS Styling
|
|
||||||
|
|
||||||
The mobile-responsive styles are defined in `/src/media/css/template.css` under the section:
|
|
||||||
```
|
|
||||||
/* ===== MOD_SEARCH MOBILE RESPONSIVE STYLES ===== */
|
|
||||||
```
|
|
||||||
|
|
||||||
### Key CSS Features:
|
|
||||||
1. **Flexbox Layout**: Uses modern flexbox for flexible, responsive layouts
|
|
||||||
2. **CSS Variables**: Integrates with template's color scheme system
|
|
||||||
3. **Mobile-First**: Base styles target mobile, with progressive enhancement
|
|
||||||
4. **Accessible**: Proper focus states and ARIA labels
|
|
||||||
5. **Touch-Optimized**: Appropriate sizing for touch interaction
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
This override is automatically used when:
|
|
||||||
1. The MokoCassiopeia template is active
|
|
||||||
2. A mod_search module is published on the site
|
|
||||||
|
|
||||||
No additional configuration is required beyond standard mod_search module settings.
|
|
||||||
|
|
||||||
## Module Parameters
|
|
||||||
|
|
||||||
All standard mod_search parameters are supported:
|
|
||||||
- **Width**: Input field width (in characters) - note: overridden by responsive CSS
|
|
||||||
- **Button Text**: Custom text for the search button
|
|
||||||
- **Button Position**: left, right, top, or bottom
|
|
||||||
- **Image Button**: Use icon instead of text button
|
|
||||||
- **Max Length**: Maximum search query length
|
|
||||||
- **Menu Item**: Target search results page
|
|
||||||
|
|
||||||
## Accessibility Features
|
|
||||||
|
|
||||||
- Hidden label for screen readers
|
|
||||||
- ARIA labels on input and button
|
|
||||||
- Proper focus indicators
|
|
||||||
- Semantic HTML structure
|
|
||||||
- Keyboard navigation support
|
|
||||||
|
|
||||||
## Browser Support
|
|
||||||
|
|
||||||
- Modern browsers with flexbox support
|
|
||||||
- Responsive on all device sizes
|
|
||||||
- Works with iOS Safari (no auto-zoom on input focus)
|
|
||||||
- Compatible with touch and mouse input
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
To customize the appearance, you can:
|
|
||||||
1. Override CSS variables in `user.css`
|
|
||||||
2. Modify classes in `default.php`
|
|
||||||
3. Add custom styles targeting `.mod-search-responsive`
|
|
||||||
|
|
||||||
Example custom CSS:
|
|
||||||
```css
|
|
||||||
.mod-search-responsive {
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mod-search__input {
|
|
||||||
border-radius: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mod-search__button {
|
|
||||||
border-radius: 25px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Testing
|
|
||||||
|
|
||||||
The override has been designed to work across:
|
|
||||||
- Mobile devices (320px+)
|
|
||||||
- Tablets (768px+)
|
|
||||||
- Desktop screens (1200px+)
|
|
||||||
- Touch and click interactions
|
|
||||||
- Portrait and landscape orientations
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
|
||||||
Licensed under GNU General Public License version 2 or later
|
|
||||||
@@ -1,205 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
# 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
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
# 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