Modular Block Architecture, Responsive CSS Grid, and Snippet Engine

1. Overview & Business Value#

Nehabi utilizes a component-based snippet architecture powered by QWeb templates and Bootstrap 5 responsive CSS grids.

1. Snippet Hierarchy & Inheritance#

Every visual component belongs to one of three functional categories:

• Structure Blocks: Full-width sections, multi-column container grids, hero banners, and sticky navigation headers.
• Feature Blocks: Pricing comparison tables, customer testimonial carousels, team member showcases, and interactive FAQ accordions.
• Dynamic ERP Blocks: Live product grids, blog feeds, event registration forms, and interactive Google Maps store locators.

2. Responsive Breakpoints#

Nehabi layouts automatically adapt across five standardized responsive viewport widths:

• Mobile Portrait: $< 576\text{px}$ (single-column stack, touch-friendly tap targets).
• Mobile Landscape: $576\text{px} - 767\text{px}$.
• Tablet: $768\text{px} - 991\text{px}$ (2-column layouts).
• Desktop: $992\text{px} - 1199\text{px}$ (standard 12-column grid).
• Ultra-Wide: $\ge 1200\text{px}$ (constrained container margins).

2. Prerequisites & Access Permissions#

• Required Modules: website, website_sale, smart_backend_theme
• Security Access Groups:
  • Website Designer (Technical ID: website.group_website_designer)
  • eCommerce Manager (Technical ID: website_sale.group_website_sale_manager)
• Master Data Dependencies: Established product catalog, defined multi-currency pricelists, and configured payment provider keys.

3. Step-by-Step UI Execution & Verification#

Step 1: Navigating to the Nehabi Management Interface#

1. Access your SmartERP portal at https://smarterp.et/odoo.
2. Open the main App Switcher and select Website.
3. Click the Go to Website button on the top-right control bar.

{screenshot:20-architecture-and-blocks-step1-navigation}

Step 2: Executing Configuration and Publishing#

1. Select the target page or e-commerce setting.
2. Apply layout adjustments or parameter modifications.
3. Verify live presentation across desktop and mobile viewports.

{screenshot:20-architecture-and-blocks-step2-verification}

4. Advanced Configuration Points#

• Scheduled Crons: website.ir_cron_sitemap_generator regenerates XML sitemaps every 24 hours.
• Multi-Website Support: SmartERP supports multiple independent websites running off a single database with dedicated domains.

5. Comprehensive Troubleshooting Matrix#