34 lines
1.5 KiB
Markdown
34 lines
1.5 KiB
Markdown
# Interactive Cards
|
|
|
|
Reusable Magento Page Builder cards with optional carousel, hover overlay and click side-pull behavior.
|
|
|
|
## Page Builder usage
|
|
|
|
1. Drag **Interactive Cards** from the Media section into a CMS Page.
|
|
2. Open its settings and choose desktop/tablet columns, card height, gap and interaction options.
|
|
3. Use **Add Card** from the component toolbar for every card.
|
|
4. Open each card and maintain its desktop image, optional mobile image, title and detailed description.
|
|
5. Optionally enter a Magento product SKU. Product image, name, price and cart/product action are loaded from the catalog on click.
|
|
|
|
## Product Cards
|
|
|
|
Use **Product Cards** when the card should be maintained entirely from Magento catalog data.
|
|
|
|
1. Drag **Product Cards** onto the Page Builder stage.
|
|
2. Set the desktop, tablet and mobile cards-per-row values.
|
|
3. Use **Add Product Card** for each product.
|
|
4. Enter the product SKU and comma-separated tags.
|
|
|
|
The storefront automatically loads the product image and name. **Explore All** links to the product URL for the active store view.
|
|
6. Drag a card by its image area to reorder it.
|
|
|
|
When carousel is disabled, cards wrap into a normal grid. Clicking a card only expands its own row. When carousel is enabled, arrows, dots, autoplay and swipe follow the parent settings, and clicking expands the current visible group only.
|
|
|
|
## Deployment
|
|
|
|
```bash
|
|
php bin/magento module:enable Esun_InteractiveCards
|
|
php bin/magento setup:upgrade --keep-generated
|
|
php bin/magento cache:flush
|
|
```
|