Cómo crear un sistema de popups en Magento 2: Simple Popup Widget

Continuando con las publicaciones sobre programación en Magento 2,  hoy voy a explicar cómo crear un sencillo sistema de popups en Magento 2.

Las características que tiene que cumplir son:

1. que pueda gestionarse el contenido de los popups fácilmente desde el admin de Magento 2
2. que se puedan mostrar popups (iguales o diferentes) en cualquier página de Magento 2
3. que se pueda programar más de un popup en la misma página.
4. que sea sencillo de implementar

Para gestionar fácilmente el contenido de los popups, vamos a utilizar el sistema de static blocks de Magento 2, que va a permitirnos crear popups sencillos de una única imagen, o estructuras más complejas con html o includo contenido dinámico si lo deseamos.

Para cumplir el segundo requisito, necesitamos un sistema que nos permita crear un popup eligiendo su contenido (un static block) e indicando dónde queremos que se muestre. Podríamos implementar un modelo nuevo, con toda la lógica necesaria tanto para la asignación del contenido, como para la selección de las páginas donde queremos mostrar el popup, pero Magento 2 ofrece ya un sistema potente que nos permite mostrar contenido en cualquier página: los widgets!

El sistema de widgets es muy potente y flexible, y va a simplificarnos bastante el trabajo. Solo vamos a tener que crear un widget personalizado que mostrará el static content que deseemos en la página que deseemos.

Por último, dado que queremos poder mostrar más de un popup en la misma página, vamos a añadir a nuestro widget una variable que nos permita configurar cuándo queremos que se muestre el popup en cuestión.

¡Manos a la obra!

Creación del módulo SimplePopupWidget de Magento 2

Vamos a crear un módulo que va a contener todo el código de nuestro sistema de popups en Magento 2.

Abrimos un terminal, nos situamos en el document Root de nuestra instalación local de Magento y creamos la carpeta de nuestro módulo.

$ mkdir -p app/code/Pablobae/SimplePopupWidget

Creamos ahora el archivo etc/module.xml con el siguiente contenido:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Pablobae_SimplePopupWidget" setup_version="1.0.4">
        <sequence>
            <module name="Magento_Store"/>
            <module name="Magento_Theme"/>
            <module name="Magento_Widget"/>
        </sequence>
    </module>
</config>

A continuación, hacemos lo mismo con el archivo composer.json:

{
    "name": "pablobae/magento2-simplepopupwidget",
    "description": "This extension allows you to add popup windows on any Magento 2 frontend page.",
    "keywords": [
        "magento 2",
        "popup extension",
        "magento 2 popup",
        "multiple popup magento 2",
        "magento popup"
    ],
    "type": "magento2-module",
    "authors": [
        {
            "name": "Pablo Baenas",
            "email": "hi@pablobaenas.com",
            "homepage": "https://www.pablobaenas.com"
        }
    ],
    "repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/pablobae/magento2-simplepopupwidget"
        }
    ],
    "support": {
        "issues": "https://github.com/pablobae/magento2-simplepopupwidget/issues/"
    },
    "minimum-stability": "dev",
    "license": [
        "OSL-3.0"
    ],
    "autoload": {
        "psr-4": {
            "Pablobae\\SimplePopupWidget\\": ""
        },
        "files": [
            "registration.php"
        ]
    }
}

Y, ahora, creamos el archivo registration.php:

<?php
declare(strict_types=1);

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Pablobae_SimplePopupWidget',
    __DIR__
);

Con esto ya tendríamos un módulo Magento 2 creado.

Creación de las opciones configurables de la extensión

Aunque no se comenta en los requisitos, siempre resulta interesante  valorar si la extensión va a requerir algún tipo de configuración general. En este caso vamos a crear las siguientes opciones de configuración en el admin de Magento 2:

• Opción para habilitar y deshabilitar la extensión
• Opción para definir una clase CSS general a todos los popups para aplicarles los estilos que deseemos
• Opción para definir cúando se mostrará el popup (número de segundos después de cargarse la página)

Estas opciones se aplicarán a todos los popups de forma general, aunque posteriormente cuando creemos nuestro widget personalizado, añadiremos también la posibilidad de poder sobreescribir estos valores para un popup específico.

Para crear estas opciones de configuración en Magento 2 creamos el archivo etc/adminhtml/system.xml con el siguiente contenido:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="pablobae" translate="label" sortOrder="10">
            <label>Pablobae</label>
        </tab>
        <section id="simplepopupwidget" showInDefault="1" showInWebsite="1" showInStore="1" translate="label"
                 sortOrder="10">
            <label>Simple Popup Widget</label>
            <tab>pablobae</tab>
            <resource>Pablobae_SimplePopupWidget::simplepopupwidget_configuration</resource>

            <group id="pablobae_simplepopupwidget_status" translate="label comment" showInDefault="1" showInWebsite="1"
                   showInStore="1" sortOrder="10">
                <label>Module status</label>
                <comment>Config extension to be enabled or disabled</comment>

                <field id="pablobae_simplepopupwidget_status_status" type="select" translate="label comment"
                       showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="10">
                    <label>Status</label>
                    <comment>Enable or disable the extension</comment>
                    <source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model>
                    <validate>required-entry</validate>
                </field>
            </group>
            <group id="pablobae_simplepopupwidget_design" translate="label comment" showInDefault="1" showInWebsite="1"
                   showInStore="1"
                   sortOrder="20">
                <label>Design settings</label>
                <comment>Settings to define default custom CSS class...</comment>

                <field id="pablobae_simplepopupwidget_design_customcssclass" type="text" translate="label comment"
                       showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="10">
                    <label>Custom CSS class</label>
                    <comment>Enter your own css class to customize the popup css styles in your own CSS file.</comment>
                    <validate>letters-only</validate>
                </field>
            </group>
            <group id="pablobae_simplepopupwidget_behavior" translate="label comment" showInDefault="1"
                   showInWebsite="1" showInStore="1" sortOrder="30">
                <label>Behavior settings</label>
                <comment>In this section you can configure the behavior of the popups</comment>

                <field id="pablobae_simplepopupwidget_behavior_popupinittime" type="text" translate="label comment"
                       showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="10">
                    <label>Popup Init Time</label>
                    <comment>Enter the number of seconds after which the popup will be shown</comment>
                    <validate>required-entry integer</validate>
                </field>
            </group>
        </section>
    </system>
</config>

Si lo deseamos podemos definir un valor por defecto para nuestras opciones creando el archivo etc/config.xml con el siguiente contenido:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <simplepopupwidget>
            <pablobae_simplepopupwidget_status>
                <pablobae_simplepopupwidget_status_status>0</pablobae_simplepopupwidget_status_status>
            </pablobae_simplepopupwidget_status>
            <pablobae_simplepopupwidget_behavior>
                <pablobae_simplepopupwidget_behavior_popupinittime>6</pablobae_simplepopupwidget_behavior_popupinittime>
            </pablobae_simplepopupwidget_behavior>
        </simplepopupwidget>
    </default>
</config>

Hemos indicado que por defecto la extensión esté deshabilitada, y que el popupinittime (momento en el que se mostrarán los popups) sea de 6 segundos después de cargar la página.

Posteriormente vamos a necesitar consultar la configuración de la extensión, por lo que vamos vamos a crear un helper que nos va a servir para obtener los valores de configuración de la extensión. Creamos el archivo Helper/Configuration.php con el siguiente contenido:

<?php
declare(strict_types=1);

namespace Pablobae\SimplePopupWidget\Helper;

use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Framework\App\Helper\Context;
use Magento\Framework\Exception\NoSuchEntityException;
use Magento\Store\Model\ScopeInterface;
use Magento\Store\Model\StoreManagerInterface;

/**
 * Class Configuration provided  methods to retrieve the configuration of the extension
 */
class Configuration extends AbstractHelper
{
    const XML_PATH_SECTION = 'simplepopupwidget/';
    const XML_PATH_GROUP_STATUS = 'pablobae_simplepopupwidget_status/';
    const XML_PATH_GROUP_DESIGN = 'pablobae_simplepopupwidget_design/';
    const XML_PATH_GROUP_BEHAVIOR = 'pablobae_simplepopupwidget_behavior/';
    const XML_PATH_FIELD_STATUS_STATUS = 'pablobae_simplepopupwidget_status_status';
    const XML_PATH_FIELD_DESIGN_CSS_CUSTOM_CLASS = 'pablobae_simplepopupwidget_design_customcssclass';
    const XML_PATH_GROUP_BEHAVIOR_POPUPINITTIME = 'pablobae_simplepopupwidget_behavior_popupinittime';

    /**
     * @var StoreManagerInterface
     */
    private $storeManager;

    /**
     * Configuration constructor.
     * @param StoreManagerInterface $storeManager
     * @param Context $context
     */
    public function __construct(
        StoreManagerInterface $storeManager,
        Context $context
    )
    {
        parent::__construct($context);
        $this->storeManager = $storeManager;
    }

    /**
     * Retrieve config value
     *
     * @param string $fieldPath
     * @param int|null $storeId
     * @return mixed
     */
    public function getConfigValue(string $fieldPath, int $storeId = null)
    {
        return $this->scopeConfig->getValue(
            $fieldPath,
            ScopeInterface::SCOPE_STORE,
            $storeId
        );
    }

    /**
     * Retrieve if the extension is enabled
     *
     * @return bool
     */
    public function isEnabled(): bool
    {
        $isEnabled = false;
        $fieldPath = self::XML_PATH_SECTION . self::XML_PATH_GROUP_STATUS . self::XML_PATH_FIELD_STATUS_STATUS;

        try {
            $storeId = $this->storeManager->getStore()->getId();
            $value = $this->getConfigValue($fieldPath, (int)$storeId);
            if ($value !== null) {
                $isEnabled = (bool)$value;
            }
        } catch (NoSuchEntityException $e) {
            $this->_logger->critical($e->getMessage());
        }
        return $isEnabled;
    }

    /**
     * Retrieve custom CSS class
     *
     * @return string
     */
    public function getCustomCssClass(): string
    {
        $customCssClass = '';
        $fieldPath = self::XML_PATH_SECTION . self::XML_PATH_GROUP_DESIGN .
            self::XML_PATH_FIELD_DESIGN_CSS_CUSTOM_CLASS;

        try {
            $storeId = $this->storeManager->getStore()->getId();
            $value = $this->getConfigValue($fieldPath, (int)$storeId);
            if ($value !== null) {
                $customCssClass = $value;
            }
        } catch (NoSuchEntityException $e) {
            $this->_logger->critical($e->getMessage());
        }

        return $customCssClass;
    }

    /**
     * Retrieve popup init time
     *
     * @return string
     */
    public function getPopupInitTime(): string
    {
        $time = '';
        $fieldPath = self::XML_PATH_SECTION . self::XML_PATH_GROUP_BEHAVIOR
            . self::XML_PATH_GROUP_BEHAVIOR_POPUPINITTIME;

        try {
            $value = $this->getConfigValue($fieldPath, (int)$this->storeManager->getStore()->getId());
            if ($value !== null) {
                $time = $value;
            }
        } catch (NoSuchEntityException $e) {
            $this->_logger->critical($e->getMessage());
        }

        return $time;
    }
}

Por último, vamos a añdir el archivo etc/acl.xml que va a permitir inclulir la sección de configuración de la extensión como uno de los recursos disponibles en las políticas de privilegios de acceso por usuarios de Magento:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Pablobae_SimplePopupWidget::simplepopupwidget_configuration" title="Simple Popup Widget"/>
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

Creación de nuestro widget personalizado en Magento 2

Para añadir nuestro custom widget tenemos que crear el archivo etc/widget.xml. Este archivo incluye, entre otra información  la class Block que gestionará el widget, y la definición de los parámetros de configuración del propio widget.  En nuestro caso los parámetros que vamos a configurar cuando creemos un widget van a ser los siguientes:

• selector del static-content block que contendrá el contenido del popup
• campo para definir una clase CSS específica por popup
• campo para definir el popupInitTime específico por popup
• una opción para que el popup incluya o no un enlace a otra página
• campo para añadir la url del enlace (si procede)

Creamos el archivo etc/widget.xml con el siguiente contenido:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Pablobae\SimplePopupWidget\Block\Widget\SimplePopup" id="simplepopupwidget">
        <label>Simple PopUp</label>
        <description>Simple and Flexible popup widget</description>
        <parameters>
            <parameter name="block_id" xsi:type="block" visible="true" required="true" sort_order="20">
                <label translate="true">Block</label>
                <block class="Magento\Cms\Block\Adminhtml\Block\Widget\Chooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string" translate="true">Select Block...</item>
                        </item>
                    </data>
                </block>
            </parameter>
            <parameter name="specificCssClass" xsi:type="text" visible="true" sort_order="20">
                <label translate="true">Specific CSS Class</label>
                <description translate="true">Override the default CSS Class value</description>
            </parameter>
            <parameter name="specificPopupInitTime" xsi:type="text" visible="true" sort_order="20">
                <label translate="true">Specific Popup Init Time</label>
                <description translate="true">Override the default Popup Init Time value (seconds)</description>
            </parameter>
            <parameter name="addLink" xsi:type="select" visible="true" required="true" sort_order="30">
                <label translate="true">Add Link</label>
                <options>
                    <option name="no" value="0">
                        <label translate="true">No</label>
                    </option>
                    <option name="yes" value="1">
                        <label translate="true">Yes</label>
                    </option>
                </options>
            </parameter>
            <parameter name="linkText" xsi:type="text" visible="true" sort_order="40">
                <label translate="true">Link Text</label>
                <depends>
                    <parameter name="addLink" value="1"/>
                </depends>
            </parameter>
            <parameter name="link" xsi:type="text" visible="true" sort_order="50">
                <label translate="true">URL</label>
                <depends>
                    <parameter name="addLink" value="1"/>
                </depends>
            </parameter>

        </parameters>
    </widget>
</widgets>

En la linea tres hemos definido la class Block que gestionará el widget: Pablobae\SimplePopupWidget\Block\Widget\SimplePopup. Añadimos el archivo Block/WidgetSimplePopup.php con el siguiente contenido:

<?php
declare(strict_types=1);

namespace Pablobae\SimplePopupWidget\Block\Widget;

use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\View\Element\Template;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Widget\Block\BlockInterface;
use Pablobae\SimplePopupWidget\Helper\Configuration as HelperConfiguration;

/**
 * Class SimplePopup widget
 */
class SimplePopup extends Template implements BlockInterface
{
    const WIDGET_OPTION_BLOCK = 'block_id';

    protected $_template = "widget/simplepopup.phtml";
    /**
     * @var HelperConfiguration
     */
    private $helperConfiguration;

    /**
     * @var StoreManagerInterface
     */
    private $storeManager;

    /**
     * Constructor
     *
     * @param HelperConfiguration $helperConfiguration
     * @param StoreManagerInterface $storeManager
     * @param Template\Context $context
     * @param array $data
     */
    public function __construct(
        HelperConfiguration $helperConfiguration,
        StoreManagerInterface $storeManager,
        Template\Context $context,
        array $data = []
    )
    {
        $this->helperConfiguration = $helperConfiguration;
        $this->storeManager = $storeManager;
        parent::__construct($context, $data);
    }

    /**
     * Retrieve if the extension is enabled by configuration
     *
     * @return bool
     */
    public function isExtensionEnabled(): bool
    {
        return $this->helperConfiguration->isEnabled();
    }

    /**
     * Retrieve extension config value for CustomCSS Class
     * @return string
     */
    public function getDefaultCustomCSSClass(): string
    {
        return $this->helperConfiguration->getCustomCssClass();
    }

    /**
     * Retrieve extension config value for PopupInitTime
     * @return string
     */
    public function getDefaultPopupInitTime(): string
    {
        return $this->helperConfiguration->getPopupInitTime();
    }

    /**
     * Retrieve popup cms static block content
     * @return string
     */
    public function getPopupBlockContent(): string
    {
        $blockId = $this->getWidgetPopupBlockContentId();
        if ($blockId != '') {
            try {
                return $this->getLayout()
                    ->createBlock('Magento\Cms\Block\Block')
                    ->setBlockId($blockId)
                    ->toHtml();
            } catch (LocalizedException $e) {
                $this->_logger->error(__("Popup Block not found."));
            }
        }
        return '';
    }

    /**
     * Retrieve popup Block content ID
     * @return string
     */
    protected function getWidgetPopupBlockContentId(): string
    {
        return $this->getData(self::WIDGET_OPTION_BLOCK);
    }



}

Esta clase define la variable $_template con la ubicación del archivo phtml que utilizará como plantilla nuestro widget. También incluye los métodos necesarios para obtener los valores de configuración específicos de nuestro widget (blockId, clase CSS y popupInittime específico, …) y, a través de la clase Helper/Configuration.php, obtiene los valores de configuración por defecto de la extensión. Toda esta información será utilizada en la plantilla para mostrar nuestro widget.

Creamos el archivo de plantilla view/frontend/templates/widget/simplepopup.phtml con el siguiente código:

<?php
declare(strict_types=1);

use Pablobae\SimplePopupWidget\Block\Widget\SimplePopup;

/* @var SimplePopup $block */

if ($block->isExtensionEnabled()) {
    $popupInitTime = $block->escapeHtml($block->getData('specificPopupInitTime'));
    if ($popupInitTime === null || $popupInitTime == "") {
        $popupInitTime = $block->getDefaultPopupInitTime();
    }
    $staticBlockId = $block->getBlockId();
    $hasLink = false;
    if ($block->escapeHtml($block->getData('addLink')) == 1) {
        $hasLink = true;
    } ?>
    <!-- SIMPLE POPUP -->
    <div class="simplepopup <?= $staticBlockId;?>">
        <div class="simplepopup-content">
            <!-- CLOSING BUTTON-->
            <span class="close">&times;</span>
            <!-- END CLOSING BUTTON-->
            <?php if ($hasLink) { ?>
            <a class="simplepopup-link" href="<?= $block->escapeHtml($block->getData('link')) ?>"
               title="<?= $block->escapeHtml($block->getData('linkText')) ?>">
                <?php } ?>
                <div
                    class="simplepopup-block-content <?= $block->getDefaultCustomCSSClass() . ' ' . $block->escapeHtml($block->getData('specificCssClass')) ?>">
                    <!-- POPUP CONTENT -->
                    <?= $block->getPopupBlockContent(); ?>
                    <!-- END POPUP CONTENT -->
                </div>
                <?php if ($hasLink) { ?>
            </a>
        <?php } ?>
            <!-- DON'T SHOW AGAIN BUTTON -->
            <div class="dontShowFeature">
                <form>
                    <input type="checkbox" id="dontShow"/> <label
                        for="dontShow"><?php echo __("Don't show again"); ?></label>
                </form>
            </div>
            <!-- END DON'T SHOW AGAIN BUTTON -->
        </div>
    </div>
    <!-- END SIMPLE POPUP -->
    <div
        data-mage-init='{"simplepopup":  {"popupInitTime": "<?= $popupInitTime ?>", "blockId": "<?= $staticBlockId; ?>" }}'></div>
    <?php
} ?>

El template básicamente lo que hace comprobar que la extensión está activa y en caso de estarlo, obtiene el contenido del static content que se mostrará en el popup, las clases css, el valor de popupinittime, el enlace… y crea el código html de nuestro popup. La ventana del popup incluirá, además de nuestro contenido, un botón para cerrarlo, y un checkbox para permitir que el usuario decida si quiere o no seguir viendo el popup la próxima vez que visite la página.

Además, inicializa también el componente javascript simplepopup que se va a encargar de mostrar el popup en el momento configurado.

Añadimos a continuación el componente JS, creando el archivo view/frontend/web/requirejs-config.js con el siguiente contenido:

var config = {
    map: {
        '*': {
            simplepopup: 'Pablobae_SimplePopupWidget/js/simplepopup',
        }
    }
}

Y creamos ahora el archivo  view/frontend/web/js/simplepopup.js con el contenido:

define([
    "jquery",
    "jquery/jquery.cookie"
], function ($) {
    "use strict";
    return function (config, element) {
        let options = {
            blockId: config.blockId,
            cookieName: 'simplepopupblock' + config.blockId,
            popupInitTime: config.popupInitTime
        };

        function hidePopup() {
            $('.simplepopup.' + options.blockId).hide();
        }

        function showPopup() {
            $('.simplepopup.' + options.blockId).show();
        }

        function createCookie(cookieName) {
            $.cookie(cookieName, 'dontShow', {expires: 15, path: '/'});
        }

        function removeCookie(cookieName) {
            $.cookie(cookieName, 'dontShow', {expires: -1, path: '/'});
        }

        function initPopup() {
            let dontShowCookie = $.cookie(options.cookieName);

            if (!dontShowCookie) {
                $('.simplepopup.' + options.blockId + ' .close').on('click', hidePopup);
                $('#dontShow').change(function () {
                    if (this.checked) {
                        createCookie(options.cookieName);
                    } else {
                        removeCookie(options.cookieName);
                    }
                })

                setTimeout(showPopup, options.popupInitTime * 1000)
            }
        }

        initPopup();
    }
})

El componente javascript SimplePopup va a recibir el ID del bloque estático seleccionado en el widget, y el valor de popupinittime. Este último se utiliza para establecer la cuenta atrás que hará que se muestre el popup.

El ID del bloque se utiliza para poder tener más de un popup distinto en la misma página: permite crear el contenido de cada popup de forma independiente, y además, crear una cookie específica por cada uno de ellos.

Llegados a este punto solo nos queda crear dos archivos: view/frontend/layout/default.xml y view/frontend/web/css/simplepopup.css.

Creamos el primero con el siguiente contenido:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Pablobae_SimplePopupWidget::css/simplepopup.css"/>
    </head>
    <body>
        <referenceContainer name="before.body.end">
            <container name="simple.popup.container" label="Simple Popup Container"/>
        </referenceContainer>
    </body>
</page>

En este archivo lo que hacemos es decirle a Magento que incluya el archivo CSS básico de la extensión, con los ajustes de estilos necesarios para nuestro popup, y también se crea el contenedor Simple Popup Container:  cuando se crea un widget tenemos que asignarle un bloque o contenedor donde queremos que se muestre, y nosotros utilizaremos el que acabamos de crear.

Por último, creamos el archivo view/frontend/web/css/simplepopup.css con el siguiente contenido:

.simplepopup {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    display:none;
}

.simplepopup .simplepopup-content {
    background-color: #fefefe;
    margin: 15% auto;
    border: 1px solid #888;
    max-width: 80%;
    width: max-content;
    overflow: hidden;
    word-wrap: break-word;
    position: relative;
}


/* The Close Button */
.simplepopup .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: 0;
}

.simplepopup .close:hover,
.simplepopup .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* The block content */
.simplepopup .simplepopup-content .simplepopup-block-content {
    margin: 2rem;
}

/** The don't show checkbox  */
.simplepopup .dontShowFeature {
    position:absolute;
    bottom:0.5rem;
    left:2rem;
}

Instalación de la extensión SimplePopupWidget de Magento 2

Ya tenemos todo el código listo, y solo queda instalar la extensión. Abrimo un terminal, nos vamos a la carpeta raiz de Magento y ejecutamos los siguientes comandos:

bin/magento module:status:enable Pablobae_SimplePopupWidget
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy
bin/magento cache:clean
bin/magento cache:flush

Si todo ha ido bien ya solo queda acceder al admin de Magento 2, configurar la extensión y empezar a usarla.

Creación de popups

Accedemos al Admin de Magento 2 y vamos a Stores > Configuration, donde podremos encontrar la configuración de la extensión en la sección Pablobae > SimplePopupWidget:

Habilitamos la extensión cambiando el valor de Status a enabled y guardamos los cambios.

Vamos a crear ahora el contenido de nuestro popup. Para ello vamos a Content > Block, creamos un nuevo static block, añadimos el contenido que queremos mostrar en el popup (en nuestro caso una imagen), y guardamos el bloque.

A continuación vamos a Content > Widgets y hacemos click en el botón para añadir un nuevo widget.  En los ajustes del widget debemos seleccionar el tipo de nuestro widget y el tema que tenemos activo. En nuestro caso Simple Popup Widget, y Magento Luma respectivamente y pulsamos Continuar:

Introducimos ahora un título para nuestro widget (no se muestra en el popup), seleccionamos la tienda o tiendas donde queremos que se muestra, y pulsamos el botón Add  layout update. Esto último nos va a permitir elegir en qué página o páginas queremos mostrar nuestro popup. en nuestro caso vamos a seleccionar All Pages, y como Container seleccionamos Simple Popup Container.

Seleccionamos ahora el tab Widget Options, y ahora nos aparecerán las opciones específicas de nuestro widget: pulsamos Select Block y seleccionamos el bloque  creado anteriormente; podemos introducir una clase CSS específica para nuestro popup, y también podemos modificar el valor por defecto de PopupInitTime (por defecto 6 segundos). Por último, también podemos decidir si queremos que todo el popup contenga un enlace o no.

Y eso es todo. Guardamos los cambios del widget, limpiamos la cache de magento 2, y visitamos cualquier página del frontend de Magento 2 para comprobar que nuestro popup para Magento 2 funciona:

¡Esto es todo!

Si tienes cualquier pregunta, duda o sugerencia, te invito a que dejes un comentario!

¡Saludos!