DC Product Grid Expand – New Dimension of Product UX in OpenCart

DC Product Grid Expand transforms the standard OpenCart product listing into a fully interactive sales interface.

Instead of forcing users to open each product page, the module allows them to view details, select options and add products to cart directly from the grid — without page reload.

Key Features

✔ Inline product expansion (no redirect, no layout breaking)
✔ Full product details inside listing (image, description, price)
✔ 100% support for product options (select, radio, checkbox, text)
✔ AJAX Add to Cart / Wishlist / Compare
✔ Works without leaving the product list
✔ Fully responsive and mobile-friendly
✔ Multi-language support
✔ Smart cache & CSS/JS minification

---

How It Works

When user clicks a product, it expands directly inside the grid.

- No page reload
- No AJAX delay
- No loss of context

All product data (options, price, description) is preloaded in HTML, which makes expansion instant and smooth.

The module uses a single active expander — opening one product automatically closes another, keeping performance stable even with many products.

---

Product Options – Full OpenCart Compatibility

The module uses native OpenCart data structure:

- option[ID]
- option[ID][]

This means:
- same behavior as product page
- same backend processing
- no compatibility issues

Users can select options directly inside the grid and proceed to purchase immediately.

---

AJAX Add to Cart

DC Product Grid Expand replaces default OpenCart behavior:

✔ No redirects
✔ No page reload
✔ Errors displayed inline
✔ Cart updates instantly

User stays in the listing while completing the purchase process.

---

Performance & Optimization

Built-in optimization system:

✔ CSS minification
✔ JS minification
✔ Smart cache (rebuild only when files change)

Result:
- fewer HTTP requests
- faster loading
- better Core Web Vitals

---

Installation

1. Go to Admin → Extensions → Installer
2. Upload module ZIP file
3. Install in Extensions → Modules
4. Enable and configure
5. Assign module in Design → Layouts

No core modifications required.

---

Configuration

✔ Product source:
- Latest
- Specials
- Bestsellers

✔ Category filter

✔ Product limit

✔ Image size

✔ Module title & description (multi-language)

✔ Option filtering (advanced)

✔ Unique module ID (multiple instances support)

---

Best Use Cases

⭐ Landing pages (promotions, campaigns)
⭐ Product collections (fashion, cosmetics, electronics)
⭐ Brand pages
⭐ Blog + product integration
⭐ Premium product presentation
⭐ Variant-heavy products

---

Summary

DC Product Grid Expand is not just another product module.

It transforms a static product list into a fully interactive shopping experience — faster, smoother and more effective.

Users browse, configure and buy products without leaving the page.

This is where UI/UX directly impacts sales.
Author: Paweł Nosko
Project Page & Documentation & Demo video: DC Product Grid Expand – Documentation