How to have 2 Shopping Carts on the home page? [closed]

Question

I'm using Venustheme - Yume theme , and what I want to do is to add another Shopping cart , in the top bar , and the normal one have it hidden on the desktop version , and when it goes mobile , hide the top bar one , and display the normal one. My problem is I'm new to Magento , and I don't know how to add, or where or what to call , to have another one in the top bar. Does anyone have any idea what I should do ?

Answer 1

Adding the block

The XML for adding the minicart can be found in vendor/magento/module-checkout/view/frontend/layout/default.xml, it is:

<block class="Magento\Checkout\Block\Cart\Sidebar" name="minicart.footer" as="minicart" template="cart/minicart.phtml">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="types" xsi:type="array"/>
            <item name="components" xsi:type="array">
                <item name="minicart_content" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Checkout/js/view/minicart</item>
                    <item name="config" xsi:type="array">
                        <item name="template" xsi:type="string">Magento_Checkout/minicart/content</item>
                    </item>
                    <item name="children" xsi:type="array">
                        <item name="subtotal.container" xsi:type="array">
                            <item name="component" xsi:type="string">uiComponent</item>
                            <item name="config" xsi:type="array">
                                <item name="displayArea" xsi:type="string">subtotalContainer</item>
                            </item>
                            <item name="children" xsi:type="array">
                                <item name="subtotal" xsi:type="array">
                                    <item name="component" xsi:type="string">uiComponent</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Magento_Checkout/minicart/subtotal</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                        <item name="extra_info" xsi:type="array">
                            <item name="component" xsi:type="string">uiComponent</item>
                            <item name="config" xsi:type="array">
                                <item name="displayArea" xsi:type="string">extraInfo</item>
                            </item>
                        </item>
                        <item name="promotion" xsi:type="array">
                            <item name="component" xsi:type="string">uiComponent</item>
                            <item name="config" xsi:type="array">
                                <item name="displayArea" xsi:type="string">promotion</item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</block>

You will need to add this to the relevant place in your theme, in my example I added it within <referenceContainer name="footer"> inside app/design/frontend/PartyShowroom/default/Magento_Theme/layout/default.xml

You will also need a unique name, so change name="minicart" to something else, like name="minicart.mobile" or whatever is suitable for you.

Screenshot

You can see my minicart in the usual place, and also in the footer (left of the newsletter signup)

Problems

This will render the minicart icon and dropdown, but there is extra work to get it looking good and fully functional. For example when I click on one minicart the other is also actived, this may not be a problem for you if you are completely hiding the other one.

Seems there's also some CSS issues as both the cart dropdowns appear in the same place.

So this isn't a full solution to your problem, but it answers your question and should hopefully provide you with enough to get what you're after.

Update - Fix the mobile cart dropdown appearing in the same place as the desktop cart dropdown.

This is down to line 39 ("appendTo":"[data-block=minicart]") of vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml.

As we need this template for the desktop we'll need to duplicate it and edit it. I duplicated it and renamed it to minicart-mobile.phtml and placed it in app/design/frontend/STORE-NAME/THEME-NAME/Magento_Checkout/templates/cart. Then change line 39 to the class/ID you want the dropdown to be appended to, for example "appendTo":".footer",

Then edit the XML that we added in the adding the block section above, change the template from minicart.phtml to minicart-mobile.phtml or whatever you choose to name the template. This will then render the dropdown separately to the desktop, and in a different location.