I'm trying to add some Javascript and Jquery in the core theme file which is located in
magento\pub\static\frontend\magento\luma\en_US\Magento_Checkout\template\payment+methods\list.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="myJazz">
<label for="show_hide_jazz">
<input type="radio" name="payment[methods]" id="show_hide_jazz">JazzCash
</label>
</div>
<script type="text/javascript">window.alert("ASadssss")</script>
<div if="isPaymentMethodsAvailable()" class="items payment-methods">
<div repeat="foreach: paymentGroupsList, item: '$group'"class="payment-group">
<div if="getRegion($group().displayArea)().length"
translate="getGroupTitle($group)"
class="step-title"
data-role="title">
</div>
<each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
<h2>Testing</h2>
<script>
window.alert("running");
require(['jquery', "jquery/ui" ], function($){
'use strict';
window.alert("running");
$("#custom_jazz_s").hide();
$("#custom_jazz_m").hide();
$("#custom_jazz_c").hide();
$("#show_hide_jazz").on('change',function(){
if($("#show_hide_jazz").attr('checked'))
{
$("#custom_jazz_s").show();
$("#custom_jazz_m").show();
$("#custom_jazz_c").show();
}else{
$("#custom_jazz_s").hide();
$("#custom_jazz_m").hide();
$("#custom_jazz_c").hide();
}
});
});
</script>
</div>
<div ifnot="isPaymentMethodsAvailable()"
class="no-payments-block"
translate="'No Payment Methods'">
</div>
In the code I separate my code by giving space... on the top two lines and at the end Jquery code is mine but it is not working.. even in the above I checked the simple Javascript is also not working... and second question can we code in pub folder??? if not then how can we make changes in pub files?
My Extension code
CheckoutJazz/Radio/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'CheckoutJazz_Radio',
__DIR__
);
CheckoutJazz/Radio/etc/Module.xml
<?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="CheckoutJazz_Radio" setup_version="1.0.0" />
</config>
CheckoutJazz/Radio/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payments-list" xsi:type="array">
<item name="component" xsi:type="string">CheckoutJazz_Radio/js/view/payment/list</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
CheckoutJazz/Redio/view/frontend/web/js/view/papyment/list.js
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'underscore',
'ko',
'mageUtils',
'uiComponent',
'Magento_Checkout/js/model/payment/method-list',
'Magento_Checkout/js/model/payment/renderer-list',
'uiLayout',
'Magento_Checkout/js/model/checkout-data-resolver',
'mage/translate',
'uiRegistry'
], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t, registry) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/payment-methods/list',
visible: paymentMethods().length > 0,
configDefaultGroup: {
name: 'methodGroup',
component: 'Magento_Checkout/js/model/payment/method-group'
},
paymentGroupsList: [],
defaultGroupTitle: $t('Select a new payment method')
},
/**
* Initialize view.
*
* @returns {Component} Chainable.
*/
initialize: function () {
this._super().initDefaulGroup().initChildren();
paymentMethods.subscribe(
function (changes) {
checkoutDataResolver.resolvePaymentMethod();
//remove renderer for "deleted" payment methods
_.each(changes, function (change) {
if (change.status === 'deleted') {
this.removeRenderer(change.value.method);
}
}, this);
//add renderer for "added" payment methods
_.each(changes, function (change) {
if (change.status === 'added') {
this.createRenderer(change.value);
}
}, this);
}, this, 'arrayChange');
return this;
},
/** @inheritdoc */
initObservable: function () {
this._super().
observe(['paymentGroupsList']);
return this;
},
/**
* Creates default group
*
* @returns {Component} Chainable.
*/
initDefaulGroup: function () {
layout([
this.configDefaultGroup
]);
return this;
},
/**
* Create renders for child payment methods.
*
* @returns {Component} Chainable.
*/
initChildren: function () {
var self = this;
_.each(paymentMethods(), function (paymentMethodData) {
self.createRenderer(paymentMethodData);
});
return this;
},
/**
* @returns
*/
createComponent: function (payment) {
var rendererTemplate,
rendererComponent,
templateData;
templateData = {
parentName: this.name,
name: payment.name
};
rendererTemplate = {
parent: '${ $.$data.parentName }',
name: '${ $.$data.name }',
displayArea: payment.displayArea,
component: payment.component
};
rendererComponent = utils.template(rendererTemplate, templateData);
utils.extend(rendererComponent, {
item: payment.item,
config: payment.config
});
return rendererComponent;
},
/**
* Create renderer.
*
* @param {Object} paymentMethodData
*/
createRenderer: function (paymentMethodData) {
var isRendererForMethod = false,
currentGroup;
registry.get(this.configDefaultGroup.name, function (defaultGroup) {
_.each(rendererList(), function (renderer) {
if (renderer.hasOwnProperty('typeComparatorCallback') &&
typeof renderer.typeComparatorCallback == 'function'
) {
isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
} else {
isRendererForMethod = renderer.type === paymentMethodData.method;
}
if (isRendererForMethod) {
currentGroup = renderer.group ? renderer.group : defaultGroup;
this.collectPaymentGroups(currentGroup);
layout([
this.createComponent(
{
config: renderer.config,
component: renderer.component,
name: renderer.type,
method: paymentMethodData.method,
item: paymentMethodData,
displayArea: currentGroup.displayArea
}
)]);
}
}.bind(this));
}.bind(this));
},
/**
* Collects unique groups of available payment methods
*
* @param {Object} group
*/
collectPaymentGroups: function (group) {
var groupsList = this.paymentGroupsList(),
isGroupExists = _.some(groupsList, function (existsGroup) {
return existsGroup.alias === group.alias;
});
if (!isGroupExists) {
groupsList.push(group);
groupsList = _.sortBy(groupsList, function (existsGroup) {
return existsGroup.sortOrder;
});
this.paymentGroupsList(groupsList);
}
},
/**
* Returns payment group title
*
* @param {Object} group
* @returns {String}
*/
getGroupTitle: function (group) {
var title = group().title;
if (group().isDefault() && this.paymentGroupsList().length > 1) {
title = this.defaultGroupTitle;
}
return title + ':';
},
/**
* Checks if at least one payment method available
*
* @returns {String}
*/
isPaymentMethodsAvailable: function () {
return _.some(this.paymentGroupsList(), function (group) {
return this.getRegion(group.displayArea)().length;
}, this);
},
/**
* Remove view renderer.
*
* @param {String} paymentMethodCode
*/
removeRenderer: function (paymentMethodCode) {
var items;
_.each(this.paymentGroupsList(), function (group) {
items = this.getRegion(group.displayArea);
_.find(items(), function (value) {
if (value.item.method.indexOf(paymentMethodCode) === 0) {
value.disposeSubscriptions();
value.destroy();
}
});
}, this);
}
});
});
CheckoutJazz/Radio/view/frontend/web/template/payment-methods/list.html
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<h2>Techlets</h2>
<div if="isPaymentMethodsAvailable()"
class="items payment-methods">
<div repeat="foreach: paymentGroupsList, item: '$group'"
class="payment-group">
<div if="getRegion($group().displayArea)().length"
translate="getGroupTitle($group)"
class="step-title"
data-role="title">
</div>
<each args="data: getRegion($group().displayArea), as: 'method'" render=""/>
</div>
</div>
<div ifnot="isPaymentMethodsAvailable()"
class="no-payments-block"
translate="'No Payment Methods'">
</div>
list.htmlwhich is in pub folder @Ranganathanlist.htmlfile that I mentioned above and also how can I add js code