Finalmente, chegamos a nossa camada de View! Vamos entender o seu funcionamento no Magento 2 e como trabalhar com ele!
Trabalhando com a View
O diretório view é a área em que armazenamos os nossos arquivos phtml, js e css, é a nossa camada de exibição de conteúdo.
Importante: Por questões de boas práticas, vale lembrar que não devemos trabalhar com lógica de negócio dentro da view. Nós fazemos a nossa lógica em nosso Model e depois passamos os métodos já tratados para a view.
No diretório view, você precisa informar ao Magento 2 em qual escopo você estará trabalhando, se admin ou frontend. Em nosso caso, trabalharemos no frontend. Para isso, crie a estrutura de diretórios no seu projeto de acordo com a imagem abaixo:
Entendendo os Diretórios da View
view/frontend Informamos ao Magento que estamos trabalhando no frontend.
view/frontend/layout Aqui ficarão os arquivos .xml responsáveis por fazer a chamada de Blocks e carregamento de .phtmls do seu módulo.
view/frontend/templates Onde ficam os arquivos .phtml
view/frontend/web Nesse diretório ficam os arquivos CSS e JS, separados pelos seus respectivos diretórios, css e js, conforme exemplo da imagem acima.
Layout
Neste diretório, crie o arquivo cms_index_index.xml e insira o seguinte conteúdo:
<?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">
<body>
<referenceContainer name="content">
<block class="AbraaoMarques\NewsletterModal\Block\Modal" template="AbraaoMarques_NewsletterModal::modal.phtml" name="newsletter-modal" as="newsletter-modal"/>
</referenceContainer>
</body>
</page>
Estamos trabalhando com o arquivo cms_index_index.xml pois assim dizemos para o Magento 2 que o carregamento do phtml que ele fará deverá ser exibido somente na homepage da loja virtual.
<referenceContainer name="content"> informa que o carregamento deverá ser dentro do content principal.
<block class="AbraaoMarques\NewsletterModal\Block\Modal" nossa classe block. Para trabalhar com layout xml, é necessário trabalhar com Blocks.template="AbraaoMarques_NewsletterModal::modal.phtml" arquivo .phtml que terá o conteúdo que será exibido.
Block
Crie a classe Block/Modal.php, conforme abaixo:
<?php
namespace AbraaoMarques\NewsletterModal\Block;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
class Modal extends Template
{
public function __construct(
Context
$context,
array $data = [])
{
parent::__construct($context, $data);
}
}
Em nosso Block não faremos mais do que isso. Apenas estendemos a classe Magento\Framework\View\Element\Template e carregamos o nosso __construct()
No Magento 2, podemos usar o Block e o Helper para enviar os métodos do PHP para o .phtml. Neste minicurso, faremos uso do Helper apenas.
Templates
Crie o arquivo modal.phtml e insira o conteúdo abaixo:
<div id="modal-overlay" style="display:none;">
<div class="overlay-content">
<div class="title">
<h2>My modal title here</h2>
</div>
<p>My description title here</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>
Para a explicação desse script, por favor, assista ao vídeo no topo desse artigo.
Web
Neste diretório, crie o arquivo js/modal.js com o script abaixo:
define([
'uiComponent',
'jquery',
'Magento_Ui/js/modal/modal',
'Magento_Customer/js/customer-data'
], function (Component, $, modal, storage) {
'use strict';
var cacheKey = 'modal-overlay';
var getData = function () {
return storage.get(cacheKey)();
};
var saveData = function (data) {
storage.set(cacheKey, data);
};
if ($.isEmptyObject(getData())) {
var modal_overlay = {
'modal_overlay': false
};
saveData(modal_overlay);
}
return Component.extend({
initialize: function () {
this._super();
var options = {
type: 'popup',
responsive: true,
innerScroll: false,
title: false,
buttons: false,
modalClass: 'modal-overlay-container'
};
var modal_overlay_element = $('#modal-overlay');
modal_overlay_element.modal(options);
if (!localStorage.getItem('modalPopupDisplayed')) {
setTimeout(function(){
modal_overlay_element.modal('openModal');
localStorage.setItem('modalPopupDisplayed', true);
},5000);
}
},
openModalOverlayModal:function(){
},
setModalOverlay: function (data) {
var obj = getData();
obj.modal_overlay = data;
saveData(obj);
},
getModalOverlay: function () {
return getData().modal_overlay;
}
});
});
Para entendimento do funcionamento desse arquivo, por favor, veja o vídeo no topo desse artigo.
Após feito isso, execute no seu terminal:
php bin/magento cache:flush php bin/magento setup:di:compile php bin/magento setup:static-content:deploy -f
Tendo executado os comandos acima, acesse a homepage da sua loja:
Nossa modal já está funcionando na homepage!!!
E aí? Ficou alguma dúvida? Veja o vídeo no topo desse artigo! Ainda com dúvidas? Posta aí!!!
Aquele abraço!