2

I have been trying to move the cart within the top header, though its appearing in the incorrect sequence. I would like this to appear after Create Account

<move element="minicart" destination="header.panel" after="top.links"/>

enter image description here

Boss Nass
  • 264
  • 1
  • 15

1 Answers1

1

Referense Link

You can either create a module or customize the code in the theme, I have used custom module as follows,

app/code/VendorName/ModuleName/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_ModuleName',
    __DIR__
);

app/code/VendorName/ModuleName/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="VendorName_ModuleName" setup_version="1.0.0">
    </module>
</config>

app/code/VendorName/ModuleName/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="VendorName_ModuleName::link.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/VendorName/ModuleName/view/frontend/templates/link.phtml

Note: The below css styles can be added in a new less file

<?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>

run commands

bin/magento setup:upgrade

bin/magento setup:static-content:deploy

give permission to the magento 2 files

after creating this we can able to see the customization as shown in the below screen shot

enter image description here

Ronak Rathod
  • 6,322
  • 17
  • 42