skills.rest
ProxiBlue
ProxiBlueCOMMUNITY
Explore all skills by this author →
Website𝕏@proxiblueGitHub

magento2-widget-creation

Create custom Magento 2 widgets for CMS pages and blocks.

15|1|Updated Oct 24, 2025
Search Tags:#frontend#widget#CMS#PHP#module#Magento#Magento 2
One-click install
npx skills add https://github.com/ProxiBlue/claude-skills --skill magento2-widget-creation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magento2-widget-creation
Source: https://github.com/ProxiBlue/claude-skills/tree/main/magento2-widget-creation
Command: npx skills add https://github.com/ProxiBlue/claude-skills --skill magento2-widget-creation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a complete, step-by-step guide to building custom Magento 2 widgets that can be embedded into CMS pages and blocks, reducing integration time and ensuring consistent widget patterns across themes.

Core Features & Use Cases

  • Module scaffolding: Registration, module.xml, and frontend routes for widget interaction.
  • Widget definition & rendering: widget.xml, Block classes, and template integration for frontend output.
  • Non-Hyvä theme compatibility: Guidance on creating widgets for standard Magento themes (Luma/Blank) and optional modal forms or AJAX endpoints.
  • Use Case: A store editor adds a promotional widget to a homepage block for a campaign.

Quick Start

Follow the guide to create a new widget module in app/code/Vendor/ModuleName with registration.php, etc. Then configure a widget in etc/widget.xml, implement a Block, a template, and an optional JS file.

Frequently Asked Questions about magento2-widget-creation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom Magento 2 widget for a CMS page?▼

You create a custom Magento 2 widget by scaffolding a module, defining parameters in widget.xml, implementing a Block class, and rendering output via frontend templates. This process embeds dynamic content into CMS pages and blocks.

What files are needed to build a Magento 2 widget module?▼

Building a Magento 2 widget module requires registration.php, module.xml, and widget.xml for configuration. You also need Block classes and frontend templates for rendering, with optional JavaScript and CSS for interactive elements.

Does this Magento 2 widget guide work with Luma and Blank themes?▼

Yes, this guide provides widget patterns specifically for standard Magento themes like Luma and Blank. It covers frontend rendering and includes optional modal forms or AJAX endpoints for non-Hyvä setups.

How do I add AJAX form handling to a Magento 2 widget?▼

You add AJAX form handling to a Magento 2 widget by implementing custom JavaScript and frontend routes within your module. This skill provides guidance on setting up these optional AJAX endpoints for non-Hyvä theme configurations.

Can I embed a promotional widget into a Magento 2 homepage block?▼

Yes, you can embed a promotional widget into a Magento 2 homepage block by configuring it via the CMS editor. The module defines widget parameters in widget.xml and renders the promotional content using Block classes and templates.

Related Skills

Explore More Software Engineering Skills→
hyva-themeshyva-themes
78

hyva-create-module

Generates Magento 2 module boilerplate files including registration.php, composer.json, and etc/module.xml.

Official
Intermediate
TheeCoderAhmedTheeCoderAhmed

managing-content

Integrate headless CMS platforms and generate type-safe frontend fetchers.

Community
Intermediate
InchooInchoo
18

Theme Development: Styling & JavaScript

Manage Magento theme styling and JavaScript customization.

Official
Advanced
magewirephpmagewirephp
262

magewire-theming

Create Magento 2 theme compatibility modules integrating Magewire with Hyvä, Luma, Breeze, or Backend themes.

Community
Advanced