Magento 2 Edit wishlist modal footer

Question

The site I'm working on has changed the wishlist popup to a free samples popup.

I'm trying to edit the modal footer but I cannot find a template for it.

The developer before me has created a module to edit the content of the popup, but the footer and header is not included.

Is there another way around editing this modal popup?

Answer 1

Yes, you can override the template, but if you do it will change for all modal/pop up being triggered in your site. (Footer is not a different template, modals are a complete set of HTML per type)

You have two options:

1. Override directly the modal templating from Magento_Ui -> vendor/magento/module-ui/view/base/web/templates/modal folder has all the templates for every option of the modal, including header, wrapper and footer. You will need to override these templates on your theme (your custom theme under app/frontend) dir keeping same path structure, deploy and you will see your new changes. Like I said before, this will change all the modal templates across the site, not only the one you "need" to.

2. Extend the modal widget and create your own call to your new template path. This one is more complicated if you are not experienced with how Magento 2 development fallback works. For instance you will need to create your new widget for the new modal within your module, call the modal widget and extend it, change on the require path for a new template (depending on which type you want to change properly) and change the function _renderModal within your widget to call for the new template.

To give you the whole answer for the second option will take a lot, and requires for you to read more about how Magento development works and be familiar with it. More information check: https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/custom_js.html#extend_js_widget

Hope this helps.

Answer 2

You need to first find the js which trigger this modal popup and then you can modify the popup

Like you can remove footer

var options = {
                type: 'popup',
                responsive: true,
                title: 'Customer Details',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }],
                opened: function($Event) {
                    $(".modal-footer").hide();
                }
            };

You can also check this Magento devdoc link for more options https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_modal.html