Magento 2 Curso Helper e View

Neste artigo, dando continuidade a desenvolvimento do módulo ModalNewsletter, nós entenderemos como trabalhar com Helper e View, enviando os métodos da Helper de maneira certa para a nossa View.

Observação: Você também pode enviar os métodos PHP para a sua View usando o Block.

Helper

Faz a seguinte alteração no Helper/Data

<?php

namespace AbraaoMarques\NewsletterModal\Helper;

use Magento\Store\Model\ScopeInterface;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\App\Helper\AbstractHelper;

class Data extends AbstractHelper
{
    const MODULE_PATH = 'abraaomarques_newslettermodal/general/';

    /**
     * @var ScopeConfigInterface
     */
    protected $_scopeConfig;

    /**
     * Data constructor.
     * @param ScopeConfigInterface $scopeConfig
     */
    public function __construct(
        ScopeConfigInterface $scopeConfig
    )
    {
        $this->_scopeConfig = $scopeConfig;
    }

    /**
     * @return mixed
     */
    public function getIsModuleEnable()
    {
        return $this->_scopeConfig->getValue(self::MODULE_PATH.'enable',ScopeInterface::SCOPE_STORE);
    }

    /**
     * @return mixed
     */
    public function getModalTitle()
    {
        return $this->_scopeConfig->getValue(self::MODULE_PATH.'title',ScopeInterface::SCOPE_STORE);
    }

    /**
     * @return mixed
     */
    public function getModalDescription()
    {
        return $this->_scopeConfig->getValue(self::MODULE_PATH.'description',ScopeInterface::SCOPE_STORE);
    }
}

Note que demos um use na classe use Magento\Framework\App\Helper\AbstractHelper e a estendemos na nossa classe Data:

class Data extends AbstractHelper

View

Faça a seguinte alteração no view/templates/modal.phtml

<?php $helper = $this->helper('AbraaoMarques\NewsletterModal\Helper\Data')?>

<?php if($helper->getIsModuleEnable()):?>
<div id="modal-overlay" style="display:none;">
    <div class="overlay-content">
        <div class="title">
            <h2><?= $helper->getModalTitle();?></h2>
        </div>
        <p><?= $helper->getModalDescription();?></p>
        <form method="post" action="#" id="modal-overlay-form-validate" autocomplete="off" data-mage-init='{"validation":{}}'
              data-hasrequired="<?= /* @escapeNotVerified */
              __('* Required Fields') ?>">
            <div class="modal-overlay-form">
                <fieldset class="fieldset">
                    <div class="field required">
                        <label for="email_address" class="label"><span><?= __('Email') ?></span></label>
                        <div class="control">
                            <input type="email" name="email" id="email_address" value="" title="<?= __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
                        </div>
                    </div>
                </fieldset>

                <fieldset class="fieldset div-button">
                    <div class="primary">
                        <button class="action primary btn-place-order custom-final-checkout-btn" id="submit-button-modal-overlay">
                            <span><?= __('Save') ?></span>
                        </button>
                    </div>
                </fieldset>
            </div>
        </form>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "modal_overlay": {
                        "component": "AbraaoMarques_NewsletterModal/js/modal"
                    }
                 }
            }
        }
    }
</script>
<script type="text/javascript">
    require(
        [
            'jquery',
            'mage/validation'

        ], function(jQuery){
            jQuery(document).ready(function () {
                jQuery("#modal-overlay-form-validate").on('submit',function (e) {
                    e.preventDefault();

                    var dataForm = jQuery('#modal-overlay-form-validate');
                    dataForm.mage('validation', {});
                    var status = dataForm.validation('isValid');
                    var data = jQuery(this).serialize();
                    if(status){
                        jQuery.ajax({
                            url:  'url',
                            type: 'POST',
                            data: data,
                            success: function(response){
                                var modal_overlay_element = jQuery('#modal-overlay');
                                modal_overlay_element.modal('closeModal');

                            },
                            error: function(){
                            }
                        });
                    }
                });
            });
        }
    );
</script>
<?php endif;?>

Explicando a View

/* 
Armazenando o nosso helper na variável $helper.
Note que informamos o caminho completo da nossa classe no método ->helper()
*/
<?php $helper = $this->helper('AbraaoMarques\NewsletterModal\Helper\Data')?>

//O modal só exibirá se o módulo estiver ativo
<?php if($helper->getIsModuleEnable()):?>

//Chamando os nossos métodos getModalTitle() e getModalDescription()
<div class="title">
    <h2><?= $helper->getModalTitle();?></h2>
</div>
<p><?= $helper->getModalDescription();?></p>

Atualizando o conteúdo do nosso módulo no admin:

Testando o nosso modal o frontend:

Conseguimos! 😀

E aí, o que achou? Fácil? Difícil?

Dúvida? Posta aí!!!

No próximo artigo, aprenderemos a trabalhar com Model no Magento 2 e veremos como adicionar o e-mail capturado na Newsletter do Magento!

Aquele abraço!