If you are looking for customization of the Magento 2 header content then you are on the right page. In this article, I am going to explain how we can add Custom Wishlist Button in the Magento 2 header content.
This button will add before the mini cart button in the top header bar so our order will be look something like catalog search, Wishlist, mini cart links in header content, now read all the files for what's the proper code to add that.
Magento 2 Add Custom Wishlist Button in Header Content
So we have to create a minimum of four files to add a custom wishlist button in header content
app/code/Wishusucess/CustomWishlist/registration.php
app/code/Wishusucess/CustomWishlist/etc/module.xml
app/code/Wishusucess/CustomWishlist/view/frontend/layout/default.xml
app/code/Wishusucess/CustomWishlist/templates/link.phtml
Step 1:
Now first we have to register our module so we have created a file which is registration.php
app/code/Wishusucess/CustomWishlist/registration.php
<?php /** * Copyright © 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_CustomWishlist', __DIR__ );
Step 2:
Now we have to create a file for module information which is module.xml
app/code/Wishusucess/CustomWishlist/etc/module.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="Wishusucess_CustomWishlist" setup_version="1.0.0" /> </config>
Step 3: Add Custom Wishlist Button
We have to create a default.xml file and through this layout XML, we can add and remove view elements and their data so we will add wishlist content here.
app/code/Wishusucess/CustomWishlist/view/frontend/layout/default.xml
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header-wrapper"> <block class="Magento\Wishlist\Block\Link" name="wish-list-link-custom" after="minicart" template="Wishusucess_CustomWishlist::link.phtml" /> </referenceContainer> </body> </page>
Step 4: Add Templates File
Here you can style your button as per your requirement.
app/code/Wishusucess/CustomWishlist/templates/link.phtml
<?php /* you can customize the wishlist here */ ?> <style> .custom.link.wishlist{ float: right; } .custom.link.wishlist .counter.qty { background: #ff5501; color: #fff; height: 24px; line-height: 24px; border-radius: 2px; display: inline-block; margin: 3px 0 0; min-width: 18px; overflow: hidden; padding: 0 3px; text-align: center; white-space: normal; } .wishlist-custom:before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 22px; line-height: 28px; color: #757575; content: '\e600'; font-family: 'luma-icons'; margin: 0; vertical-align: top; display: inline-block; font-weight: normal; overflow: hidden; speak: none; text-align: center; } .wishlist-custom .text{ border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } </style> <div class="custom link wishlist" data-bind="scope: 'wishlist'"> <a <?= /* @noEscape */ $block->getLinkAttributes() ?> class="wishlist-custom"> <span class="text"><?= $block->escapeHtml($block->getLabel()) ?></span> <!-- ko if: wishlist().counter --> <span data-bind="text: wishlist().counter" class="counter qty"></span> <!-- /ko --> </a> </div> <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "wishlist": { "component": "Magento_Wishlist/js/view/wishlist" } } } } } </script>
Now Run The Following Command to See Wishusucess Wish List Button:
php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deplpy -f php bin/magento cache:clean
Download This Extension:
Related Post:
Wishusucess AdminMenu: How to Create Magento 2 Admin Menu Module
HelloWorld Extension: How to Create Hello World Module
Recommended Post:
Magento 2.4 Installation Guide: How to Install Magento 2.4.2
Magento Store: Best 36 Magento Websites Example in The World