I need to show a popup when the store loads and need to ask users to select the city, then only products deliverable to these cities must show.
In the backend, I added some cities to a new attribute 'location'. So in the popup, I need to, maybe query those data in attribute and show them.
Previously I made modules for separate pages. Which has a route id and all? But here I need it on the main page.
Which template, layout should I extend? And all.
I used magnific popup you can download source from Link
VendorName: Prince
ModuleName: Popup
You can see my full Popup module Here: Github
app/code/Prince/Popup/view/frontend/layout/cms_index_index.xml
<?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">
<head>
<link src="Prince_Popup/js/jquery.magnific-popup.min.js"/>
<css src="Prince_Popup/css/magnific-popup.css"/>
<css src="Prince_Popup/css/magnific-animation.css"/>
</head>
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\Template" name="index.home" template="Prince_Popup::index/popup.phtml"/>
</referenceContainer>
</body>
</page>
app/code/Prince/Popup/view/frontend/requirejs-config.js
var config = {
map: {
'*': {
magnificPopup: 'Prince_Popup/js/jquery.magnific-popup.min',
popup: 'Prince_Popup/js/prince_popup'
}
},
shim: {
magnificPopup: {
deps: ['jquery']
}
}
};
app/code/Prince/Popup/view/frontend/templates/index/popup.phtml
<div id="popup-content" class="popup-content mfp-with-anim" style="display:none">
YOUR CONTENT HERE
</div>
<script type="text/javascript">
requirejs(['jquery', 'popup' ],
function ($, popup) {
$(document).ready(function(){
$.magnificPopup.open({
items: {
src: '#popup-content'
},
type: 'inline',
removalDelay: 500
});
$('#popup-content').css('display','inline block');
});
});
</script>
My upper answer is for magnify popup but if you want default magento 2 modal popup on homepage you need to create this files
app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_index_index.xml
<?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">
<head>
<link src="Magento_Cms/js/popup.js"/>
</head>
<body>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\template" name="index.home" template="Magento_Cms::popup.phtml"/>
</referenceContainer>
</body>
</page>
app/design/frontend/Vendor/theme/Magento_Cms/templates/popup.phtml
<div id="popup-content" class="popup-content" style="display:none">
YOUR CONTENT HERE
</div>
app/design/frontend/Vendor/theme/Magento_Cms/web/js/popup.js
require(
[ 'jquery', 'Magento_Ui/js/modal/modal' ],
function($, modal) {
modal({
autoOpen: true,
responsive: true,
clickableOverlay: false,
modalClass: 'modal-custom',
title: 'Popup'
}, $("#popup-content"));
}
);