Creecion de archivo de configuración RequireJS personalizado

Requir.js es una biblioteca de javascript para administrar dependencias. Objetivo: crear un modulo pequeño con el cual por medio de JS ocultemos la sección de page-title-wrapper 1.- creamos nuestro require personalizado requieres-confié.js 2.- creamos nuestro componente con el alcance únicamente para frontend : fade-in-element.js 3.- creamos nuestro xml layout para definir nuestra plantilla 4.- creamos nuestra plantilla : block-promo-effects <- aqui llamamos a nuestro modulo js por medio del require 5.- limpiamos cache
PerezContrerasLuis · Jun 26, 2022 · b132296 · b132296
1 parent 3684342
commit b132296
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/code/JavaScriptDev/JsFun/view/frontend/layout/default.xml b/code/JavaScriptDev/JsFun/view/frontend/layout/default.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="content">
+            <block name="block.promo.effects" template="JavaScriptDev_JsFun::block-promo-effects.phtml"></block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/code/JavaScriptDev/JsFun/view/frontend/requirejs-config.js b/code/JavaScriptDev/JsFun/view/frontend/requirejs-config.js
@@ -0,0 +1,3 @@
+var config =  {
+
+}
diff --git a/code/JavaScriptDev/JsFun/view/frontend/templates/block-promo-effects.phtml b/code/JavaScriptDev/JsFun/view/frontend/templates/block-promo-effects.phtml
@@ -0,0 +1,9 @@
+<script>
+    require(['jquery','JavaScriptDev_JsFun/js/fade-in-element'],function($,fadeInElement){
+        'use strict'
+
+        $(function(){
+            fadeInElement('.page-title-wrapper');
+        })
+    })
+</script>
diff --git a/code/JavaScriptDev/JsFun/view/frontend/web/js/fade-in-element.js b/code/JavaScriptDev/JsFun/view/frontend/web/js/fade-in-element.js
@@ -0,0 +1,7 @@
+define(['jquery'],function($){
+    'use strict'
+
+    return function(className,duration){
+        $(className).hide().fadeIn(duration || 2000);
+    }
+})