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 ?
-
I wouldn't advise duplicating code to achieve this, is there no way you could do it with CSS? How come you need two checkouts?– Ben CrookApr 21, 2016 at 19:00
-
Cause I need it in different parts of the website , on desktop should be in the top bar , and on mobile should be inline with the menu.. so I hide the one for desktop and I display the one for mobile when I go mobile , and reverese when desktop..– alexcrApr 22, 2016 at 8:19
-
You will need to find where the block is defined, and use the same code to create the block with another name. If you have any problems let me know and I'll provide a full answer with examples.– Ben CrookApr 22, 2016 at 12:37
-
I have tryed to copy the content from the .phtml cart file , into the header.phtml , but it doesn't show up.. An example would be great ! Thank you for your time !– alexcrApr 22, 2016 at 13:48
-
It will need to be the XML block that is copied. No problem, I will hopefully have it over to you in a few hours. If I haven't got back to you by Monday please give me a reminder– Ben CrookApr 22, 2016 at 14:32
1 Answer
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.
-
Thank you for the example Ben , I will try it out and let you know ! Just one more question , I posted it yesterday , but haven't got any result , tryed many ways to fix it , but no result , I will link it to you here magento.stackexchange.com/questions/111910/… Best regards, Alex C– alexcrApr 22, 2016 at 15:48
-
I've answered that question now, I hope both answers work for you :D Apr 22, 2016 at 19:08
-
Hi Ben , as you said , this solve part of what I'm trying to get , thank you for your time again ! One issue I'm having is that the search and cart is working properly only on one , what I mean is that when I click the cart on the mobile version , it doesn't popup the window because the other one is hidden , do you have any ideea to get that working ?– alexcrApr 25, 2016 at 23:06
-
If it's hidden with CSS you may be able to display again by targeting an active class? Or possibly write some JS along the lines of when the mobile cart is clicked, display the dropdown. You may need to add some classes/IDs to the markup to target it this way. Apr 26, 2016 at 7:06
-
The problem is that it also comes out in the first form place , and not in the second's form place..– alexcrApr 26, 2016 at 8:11