Move Minicart responsive
Question
we are using Magento 2.2.6 an rebuilding the desing. We plan to move the minicart when the width is small (on smartphones). But we cant do this with css. When we initialize the minicart twice in phtml and working with css
($this->getChildHtml("minicart"); in phtml with visible-xs div around
...
($this->getChildHtml("minicart"); in phtml with hidden-xs div around
the minicart is not functional (while no errors in console).
Can we "copy" the minicart in the xml (default.xml) and work with minicart and minicart2 in the phtml?
$this->getChildHtml("minicart");
$this->getChildHtml("minicart2");
Solution
You can use jQuery to move minicart for small device (window width less than 768px ).
<script type="text/javascript">
require(['jquery'], function($) {
$(document).ready(function(){
if ($(window).width() < 768) {
$($('div[data-block="minicart"]').detach()).appendTo('.header.content');
}
});
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange