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

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

  • this example isnt any different to the default, we want the cart moved next to the top links – Paul 'Whippet' McGuane May 29 at 10:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.