Modulo en JavaScript

1.- Modulo de javaScript que realiza HOLA MUNDO 2.- creamos el nuevo modulo app/code/Learning/Js/registration.php app/code/Learning/Js/etc/module.xml 3.- Creamos un archivo de modulo JavaScript: requirejs-config.js hello.js 4.- Creamos LAYOUT que habilita del modulo de JavaScript catalog_product_view.xml 5.- Creamos template que contiene el mensaje hello.phtml 6.- finalmente actualizamos nuestra BDD y si es necesario recopilamos php bin/magento setup:upgrade bin/magento setup:di:compile chmod -R 777 var/ pub/ grep Learning_Js app/etc/config.php
PerezContrerasLuis · Jan 18, 2022 · 3569e15 · 3569e15
1 parent a4d78d0
commit 3569e15
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 0 deletions.
diff --git a/code/Learning/Js/etc/module.xml b/code/Learning/Js/etc/module.xml
@@ -0,0 +1,5 @@
+<?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="Learning_Js" setup_version="0.0.1">
+    </module>
+</config>
diff --git a/code/Learning/Js/registration.php b/code/Learning/Js/registration.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+use Magento\Framework\Component\ComponentRegistrar;
+
+ComponentRegistrar::register(
+    ComponentRegistrar::MODULE,
+    'Learning_Js',
+    __DIR__
+);
diff --git a/code/Learning/Js/view/frontend/layout/catalog_product_view.xml b/code/Learning/Js/view/frontend/layout/catalog_product_view.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<page layout="1column" 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="Magento\Framework\View\Element\Template" template="Learning_Js::hello.phtml" />
+        </referenceContainer>
+    </body>
+</page>
diff --git a/code/Learning/Js/view/frontend/requirejs-config.js b/code/Learning/Js/view/frontend/requirejs-config.js
@@ -0,0 +1,7 @@
+var config = {
+    map: {
+        '*': {
+            hello:           'Learning_Js/js/hello',
+        }
+    }
+};
diff --git a/code/Learning/Js/view/frontend/templates/hello.phtml b/code/Learning/Js/view/frontend/templates/hello.phtml
@@ -0,0 +1,3 @@
+<div data-mage-init='{"hello": {"message": "HELLO WORLD!"}}'>
+    Content
+</div>
diff --git a/code/Learning/Js/view/frontend/web/js/hello.js b/code/Learning/Js/view/frontend/web/js/hello.js
@@ -0,0 +1,9 @@
+define([
+    "jquery"
+], function($){
+        "use strict";
+        return function(config, element) {
+            alert(config.message);
+        }
+    }
+)
diff --git a/etc/config.php b/etc/config.php
@@ -296,6 +296,7 @@
         'Learning_ClothingMaterial' => 1,
         'Learning_FirstUnit' => 1,
         'Learning_HelloPage' => 1,
+        'Learning_Js' => 1,
         'Luisdev_Helloworld' => 1,
         'PayPal_Braintree' => 1,
         'PayPal_BraintreeGraphQl' => 1,