Our Work
200+ Enterprises across globally trust KTree for their Web & Mobile application Development needs.See What We Do
Updated today
In this article we will see how to add popup to Product view page.
Create module which is extended from Magento_Catalog module.Please refer this article for Module Creation.
https://ktree.com/create-magento-2-module-custom.html
File: app/code/KTree/Custom/view/frontend/layout/catalog_product_view.xml
<?xml version="1.0"?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="product.info.form.content">
<block name="product.info.post.requirements"
template="KTree_Custom::catalog/product/view/post_requirements.phtml"
after="product.info.addtocart" />
</referenceContainer>
</body>
</page>
File : app/code/KTree/Custom/view/frontend/web/js/mymodal-component.js
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: [{
text: $.mage.__('Continue'),
class: 'mymodal1',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#myModal'));
$("#popupButton").on('click',function(){
$("#myModal").modal("openModal");
});
});
Add above js-component to product view page. There are 2 ways to add custom js file to custom module.
2.1.1 Paths
Paths is used when you want to relate your base url path with custom module path.Path have the same properties as the baseUrl.If the path is started from “/” or any url “http://” then it will not relate to the base url.
var config = {
"baseUrl": "KTree/Custom",
"paths": {
"sample": "web/js"
},
};
require( ["sample/sample1"],
function(samplemodule) {
}
);
2.1.2 deps
If require js configurations depends upon some dependencies, i.e. you want to load some dependencies before your requires js called.
2.1.3 shim
It used when there are some scripts, to whome you want to declare globally, and those scripts not using define() to define values, if those scripts already used the define() then it will not work correctly.
In our example the final requirejs-config.js like below
FIle:app/code/KTree/Custom/view/frontend/requirejs-config.js
var config = {
paths: {
'mypopup': "KTree_Custom/js/mymodal-component"
},
shim: {
'mypopup': {
deps: ['jquery']
}
}
};
Here, we are loading mymodal-component js component to our custom module using requirejs configurations
Initialize or call custom js using mage-init attribute
<button data-mage-init='{"mypopup": {}}' type="button" class="btn btn-primary btn-lg" id="popupButton" data-toggle="modal"
data-target="#myModal"><?php
echo __('Post Requirement');
?></button>
Add following script to app/code/KTree/Custom/view/frontend/templates/catalog/product/view/post_requirements.phtml template file
<script>
require(['jquery', 'KTree_Custom/js/mymodal-component'],
function ($) {
return;
}
);
</script>
Note: In our example we added custom js file using Phtml file,the script like below
File: app/code/KTree/Custom/view/frontend/templates/catalog/product/view/post_requirements.phtml
<button type="button" class="btn btn-primary btn-lg" id="popupButton" data-toggle="modal"
data-target="#myModal"><?php echo __('Post Requirement')?></button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" style="display:none;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><?php echo __('Post Requirement')?></h4>
</div>
<div class="modal-body">
<form action="">
<div class="form-group">
<label for="name"><?php echo __('Name');?>:</label>
<input type="email" class="form-control" id="name" placeholder="<?php echo __('Enter name')?>" name="name">
</div>
<div class="form-group">
<label for="requirement"><?php echo __('Requirement') ?> :</label>
<textarea class="form-control" rows="5" id="requirement"></textarea>
</div>
<button type="submit" class="btn btn-default"><?php echo __('Submit')?></button>
</form>
</div>
</div>
</div>
</div>
<script>
require(['jquery', 'KTree_Custom/js/mymodal-component'],
function ($) {
return;
}
);
</script>
Please Contact us if you have any Magento Implementation requirements. Hire dedicated Magento developers or Magento Development services from KTree. KTree is Best offshore Magento E-commerce development company with extensive experience in E-commerce development and Magento Plugins.
Request For Quote
