Skip to content

Responsive Design Issue on Mobile with Magento 2.1.9 #10941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rishabhchd19 opened this issue Sep 18, 2017 · 24 comments
Closed

Responsive Design Issue on Mobile with Magento 2.1.9 #10941

rishabhchd19 opened this issue Sep 18, 2017 · 24 comments
Assignees
@slackerzz
Labels
Fixed in 2.2.x The issue has been fixed in 2.2 release line Fixed in 2.3.x The issue has been fixed in 2.3 release line Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development Reproduced on 2.1.x The issue has been reproduced on latest 2.1 release Reproduced on 2.2.x The issue has been reproduced on latest 2.2 release Reproduced on 2.3.x The issue has been reproduced on latest 2.3 release

Comments

@rishabhchd19
Copy link

rishabhchd19 commented Sep 18, 2017 •
edited by magento-engcom-team
Loading

Preconditions

Magento 2.1.7, 2.1.8, 2.1.9, php 5.6

Steps to reproduce

Open frontend on mobile device (Android)

Expected result

Expected that the Shop By is positioned correctly and nothing positioned incorrectly as shown in the screenshots.

Actual result

The Shop By and other contents positioned incorrectly and it happens only at the landing page i.e. the Main Page. It shows correctly and Shop By tab comes to correct position when any category or subcategory is selected as shown in the last image.
Everything showing OK on iPad, Laptop and Desktop website...having an issue on mobile layout.

Magento 2.1.7, 2.1.8 Mobile responsive layout
Magento 2.1.8, 2.1.9
Correctly showing only when a category is selected from Menu or Navigation Layer
@magento-engcom-team magento-engcom-team added Issue: Format is not valid Gate 1 Failed. Automatic verification of issue format is failed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed and removed Issue: Format is not valid Gate 1 Failed. Automatic verification of issue format is failed labels Sep 18, 2017
@magento-engcom-team
Copy link
Contributor

@rishabhchd19, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. Please provide more details in steps to reproduce, or try to reproduce this issue on a clean installation, another Android device or another browser.

@magento-engcom-team magento-engcom-team self-assigned this Sep 21, 2017
@jordanbrauer
Copy link

I have this as well @magento-engcom-team. Did you test it on an Android Device like he specified?

Version 2.1.5

@rishabhchd19
Copy link
Author

rishabhchd19 commented Sep 22, 2017 •
edited
Loading

You can please visit the website at catalogue.yogdiagnostics.com and can check yourself. I am getting the problem on each n every mobile device except iPad, iPhone(i didn't check), Laptop and Desktop.

@magento-engcom-team
Copy link
Contributor

@rishabhchd19, thank you for your answer.
We have reproduced this issue on the site you provided on a desktop browser by narrowing the browser window. But we cannot reproduce this issue on clean Magento installation even with a logo from your site.
It seems like you Magento theme is improperly configurated. Please provide more details in steps to reproduce, or try to reproduce this issue on a clean installation.

@rishabhchd19
Copy link
Author

It happens on Landing Page only, not on selecting any Category or Category Product. On Landing page under Content> Pages>>Landing Page I have edited shown in picture 1

and edited Custom XML under Design as Layout: 2 columns with left bar and Layout Update XML as shown in picture 2.

If keep Landing page clear and no Layout update, the NEW PRODUCTS "Items 1 to 4 of 16 total" shows at the top left corner and if we keep Layout update as shown in picture 2, Shop By and Items 1 to 4 of 16 total moved to corner. It happens only on the first page, not by selecting any category. I have already installed fresh magento copy 2.1.9 and now updated to 2.2.0.
picture 1
picture 2

@magento-engcom-team
Copy link
Contributor

@rishabhchd19, thank you for your response.
Can you please provide code from Content and Layout Update XML in text format?
If you provide some information about your custom widgets, it may be helpful too.

@rishabhchd19
Copy link
Author

Content>Widget

{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" show_pager="1" products_per_page="4" products_count="16" template="product/widget/new/content/new_grid.phtml" page_var_name="pipexq"}}

{{widget type="Magento\Catalog\Block\Widget\RecentlyViewed" uiComponent="widget_recently_viewed" page_size="4" show_attributes="name,image,price" show_buttons="add_to_cart,add_to_compare,add_to_wishlist" template="product/widget/viewed/grid.phtml"}}

@rishabhchd19
Copy link
Author

rishabhchd19 commented Oct 2, 2017 •
edited
Loading

layout update xml.txt
Layout Update Xml config is attached here. Please note that I have upgraded Magento 2.19. to 2.2.0 and other issues have now come to see under this version.
layout_responsive

@magento-engcom-team
Copy link
Contributor

@rishabhchd19, thank you for your report.
We've created internal ticket(s) MAGETWO-80668 to track progress on the issue.

@magento-engcom-team magento-engcom-team added 2.1.x Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Reproduced on 2.1.x The issue has been reproduced on latest 2.1 release Reproduced on 2.2.x The issue has been reproduced on latest 2.2 release Reproduced on 2.3.x The issue has been reproduced on latest 2.3 release labels Oct 3, 2017
@slackerzz
Copy link
Member

I'm working on it #SQUASHTOBERFEST

@slackerzz
Copy link
Member

@rishabhchd19 I'm trying to reproduce the issue on a clean installation with sample data.
I created a cms page with this content:

{{widget type="Magento\Catalog\Block\Product\Widget\NewWidget" display_type="all_products" show_pager="1" products_per_page="4" products_count="16" template="product/widget/new/content/new_grid.phtml" page_var_name="pipexq"}}
{{widget type="Magento\Catalog\Block\Widget\RecentlyViewed" uiComponent="widget_recently_viewed" page_size="4" show_attributes="name,image,price" show_buttons="add_to_cart,add_to_compare,add_to_wishlist" template="product/widget/viewed/grid.phtml"}}

The page layout is "2 Columns with left sidebar", is it right?
In the Layout Update XML box i've pasted:

<referenceContainer name="sidebar.main">
    <block class="Magento\LayeredNavigation\Block\Navigation\Category" name="catalog.leftnav" before="-" template="layer/view.phtml">
        <block class="Magento\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.state" as="state" />
        <block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="layer/filter.phtml"/>
    </block>
</referenceContainer>
<referenceContainer name="content">
    <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
        <container name="category.product.list.additional" as="additional" />
        <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
            <block class="Magento\Framework\View\Element\Template" as="default"/>
        </block>
        <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
            <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                   name="category.product.addto.compare" as="compare"
                   template="Magento_Catalog::product/list/addto/compare.phtml"/>
        </block>
        <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
            <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
        </block>
        <action method="setToolbarBlockName">
            <argument name="name" xsi:type="string">product_list_toolbar</argument>
        </action>
    </block>
</referenceContainer>

but the result is:

1 exception(s):
Exception #0 (Magento\Framework\Exception\StateException): Bucket does not exist

Are you sure that the layout update is the same you are using?

@slackerzz
Copy link
Member

I've removed this block

<referenceContainer name="sidebar.main">
    <block class="Magento\LayeredNavigation\Block\Navigation\Category" name="catalog.leftnav" before="-" template="layer/view.phtml">
        <block class="Magento\LayeredNavigation\Block\Navigation\State" name="catalog.navigation.state" as="state" />
        <block class="Magento\LayeredNavigation\Block\Navigation\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="layer/filter.phtml"/>
    </block>
</referenceContainer>

from the layout update and now i can render the page and the result is:

m2dev local-test-catalog nexus 5

This can be easily fixed

@slackerzz slackerzz mentioned this issue Oct 13, 2017
Merged
4 tasks
@rishabhchd19
Copy link
Author

@slackerzz Yes, it is 100% sure that I am using the same layout update reason being it is showing Navigation layer on adding that container. And removing that block is actually removing the Navigation layer. Also, you can notice that by removing the Navigation Layer as Shop By option not resolving the other issues. It would be good if users would able to use Navigation Layer by this block...Is it there any other Layout update that getting back the Navigation Layer properly?

@rishabhchd19
Copy link
Author

Also, it has started showing Show X per page at top and bottom of the main block...twice on the page after updating to 2.2.0

@magento-team
Copy link
Contributor

Internal ticket to track issue progress: MAGETWO-81986

@okorshenko
Copy link
Contributor

Hi @rishabhchd19 the issue has been fixed and delivered to 2.2-develop branch and will be available with 2.2.2 release soon

@okorshenko okorshenko added the Fixed in 2.2.x The issue has been fixed in 2.2 release line label Oct 17, 2017
@rishabhchd19
Copy link
Author

yaaaaaaay!!!! will be waiting for it to be released

@rishabhchd19
Copy link
Author

rishabhchd19 commented Dec 30, 2017 •
edited
Loading

quicksquare_20171221104044471
There's still a problem. Layered navigation SHOP BY not at correct position.

@magento-engcom-team
Copy link
Contributor

Hi @rishabhchd19. Thank you for your report.
The issue has been fixed in magento-engcom/magento2ce#1283 by @magento-engcom-team in 2.3-develop branch
Related commit(s):

The fix will be available with the upcoming patch release.

@magento-engcom-team magento-engcom-team added the Fixed in 2.3.x The issue has been fixed in 2.3 release line label Jan 30, 2018
@rishabhchd19
Copy link
Author

rishabhchd19 commented Jan 30, 2018 via email

@rishabhchd19
Copy link
Author

rishabhchd19 commented Feb 24, 2018 via email

@rishabhchd19
Copy link
Author

quicksquare_20171221104044471
This issue is still there.

@rishabhchd19 rishabhchd19 mentioned this issue Mar 1, 2018
Closed
@samanaveen
Copy link

I have added below code on above "Bucket does not exist" condition. Because we are showing subcategories on main category pages. So we don't need filters.

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
    
    if($category && $category->getIsAnchor() == '0'){
        return '';
    }

    if (!$bucket) {
        throw new StateException(new Phrase('Bucket does not exist'));
    }

@PawanKumarN
Copy link

PawanKumarN commented Apr 19, 2018 •
edited
Loading

hi @samanaveen .I have added above code \vendor\magento\module-catalog-search\Model\ResourceModel\Fulltext\Collection.php above below line

throw new StateException(__('Bucket does not exist'));
but i got error : Uncaught Error: Class 'Magento\CatalogSearch\Model\ResourceModel\Fulltext\Phrase' not found

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@slackerzz slackerzz

Labels
Fixed in 2.2.x The issue has been fixed in 2.2 release line Fixed in 2.3.x The issue has been fixed in 2.3 release line Issue: Clear Description Gate 2 Passed. Manual verification of the issue description passed Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development Reproduced on 2.1.x The issue has been reproduced on latest 2.1 release Reproduced on 2.2.x The issue has been reproduced on latest 2.2 release Reproduced on 2.3.x The issue has been reproduced on latest 2.3 release
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@magento-team @slackerzz @okorshenko @samanaveen @PawanKumarN @jordanbrauer @rishabhchd19 @magento-engcom-team