Magento 2 Custom variables HTML Editor

Overview

Custom Variables are a handy little feature Magento 2. Magento allows you to create custom variables and then use them in e-mail templates, the WYSIWYG editor, or even code expressions. These are particularly useful when creating re-usable content across the store. The custom variables themselves are managed in System -> Other settings -> Custom variables and while stuff seems easy at first, there is a cumbersome process of managing HTML content through plain textarea. We have addressed this issue with this little extension for Magento 2.x. It adds WYSIWYG editor to Variable HTML Value in Custom Variables allowing for more user-friendly and robust content management.

Key features

• Adds rich editor to Custom Variables in Magento 2
• Adds a dependency allowing for inserting custom variables in .phtml files quickly
• Improves HTML editing in custom variables
• Ability to use/insert custom variables in product detail pages in both short and long description ^NEW
• Allows for inserting variables and widgets inside other variables
• Does not rewrite existing blocks, models and controllers
• No monthly fees

Preview

Once installed, the extension will automatically convert the Variable HTML Value textarea into user-friendly rich editor allowing for quick and visually appealing content management.

Creating custom variables in Magento 2.x

To create re-usable custom variables in Magento, checkout the steps below.

1. 1. On the Admin sidebar, tap System. Then under Other Settings, choose Custom Variables.
2. 2. Tap Add New Variable.
3. 3. Enter an identifier in the Variable Code field. Use all lowercase characters, without spaces.
4. 4. Enter a Variable Name, which is used for internal reference. Then, do one of the following:

In the Variable HTML Value text field, enter any content you want to include, using basic HTML tags. This option allows you to format the value. In the Variable Plain Value field, enter the variable value as plain text

Using custom variables in static blocks, pages and emails

Once variable is created, you can use the following simple structure to insert it in any static block or page e.g. {{customVar code=variable}} where "variable" is the Custom variable code set under Variable code field

Using custom variables in .PHTML templates

When installed, the module exposes 2 methods available in every .pthtml file e.g.

1. 1. <?php echo $block->getVariableValue('variable') ?> - Renders the variable plain text value
2. 2. <?php echo $block->getVariableHtmlValue('variable') ?> - Renders the variable HTML value