Support » Plugin: AMP » When AMP plugin activated, shop not working in mobile

  • Resolved ssk2019

    (@ssk2019)


    Hi,
    In mobile version, right from menu, cart, checkout nothing is working. Though products are visible in their respective category, I’m not able to add them to cart. Initially, when I used Storefront theme, nothing worked in mobile including the formats.. then I switched to twenty twenty mobile friendly theme and also created a child theme aiming to solve the issue.. When I cldn’t now again switched back to Storefront theme. Formats and Product listing works fine now but not menu, cart and checkout..

    After Plugin Conflict Check
    1. It works fine – when all the plugins are deactivated except Woo Commerce, Store Customizer, Jetpack, Akismet Anti-spam, Blogger Imported Extended.(Site uploading was slow in mobile)
    2. It works fine – When CCAvenue Payment Gateway for WooCommerce is activated.
    3. It works fine – when Classic Editor, CoBlocks, Layout Grid, Easy Watermark, WP Recipe Maker are activated. (though site loading is slow)
    4. It works fine – When Code Snippets is activated.
    5. It works fine – when Creative Mail by Constant Contact is activated.
    6. It works fine – when Facebook for WooCommerce is activated.
    7. It works fine – When Google Ads & Marketing by Kliken, Google Listings and Ads are activated.
    8. It works fine – When Flexible Shipping is activated.
    9. It works fine – When Gutenberg, Page Optimize are activated.
    10. It works fine – When Sticky Add To Cart Bar For WooCommerce is activated.
    11. It works fine – When WordPress.com Editing Toolkit, WP AutoTerms are activated.
    12. It works fine – When WooCommerce PDF Invoices & Packing Slips is activated.
    13. It works fine – When Child Theme Wizard is activated.

    When AMP plugin activated, it wasn’t working in mobile..
    Kindly guide. Thanks in advance.

    Regards
    Shyamala Kumar

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 32 total)
  • Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    Thank you for the support topic,

    WooCommerce is not yet fully compatible, but it can be configured to work at a basic level.

    1) I will suggest disabling AMP on cart and checkout pages

    2) Update cart behavior settings to redirect on adding a product in cart and disabling Ajax add to cart check on from Archive.

    Additionally, I will suggest using the AMP Enhancer plugin, it can help you in addressing some Incompatibilities in WoCommerce.

    Additionally, to fix menus on the storefront please download the following plugin

    Plugin: https://github.com/milindmore22/amp-generic-compat

    Once the plugin is installed, active it and follow the next steps

    1. Goto AMP -> AMP Compatibility
    2. click Enable checkbox
    3. Add the details in input boxes in one row the final result will be someing like this screenshot
    4. Add nav below Element
    5. Add main-navigation below Element Class
    6. Add toggled below Element Toggle Class
    7. Add button below Action Element
    8. Add menu-toggle below Action Element class
    9. Add active below Action Element Toggle Class
    10. Once all inputs are in place click save

    Let me know if this helps!

    Thread Starter ssk2019

    (@ssk2019)

    Hi,
    Thanks much for your prompt guidance.. Followed your suggestions and its working in mobile now.
    1. Cart and Checkout pages working properly
    2. AMP Enhancer Plugin installed.
    3. AMP Compatibility plugin also installed and activated.

    Menu is working fine but the sub menu of ‘Shop’ (like cookies, muffins etc) and also sub menu of ‘Recipes’ not visible.. Kindly help.

    Thanks a bunch!
    regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    Can you please add the following CSS in AMP Compatibility -> CSS

    Enable the CSS option (checkbox) and copy-paste the following css, this will expand the hidden submenu.

    html[amp] handheld-navigation ul.menu .sub-menu {
        visibility: visible;
        opacity: 1;
        max-height: initial;
    }
    Thread Starter ssk2019

    (@ssk2019)

    Hi,
    Thanks for your prompt response.. I tried those codes in AMP Compatibility -> CSS
    But still the sub menu not visible.. Please find the screenshot attached
    https://snipboard.io/wCWsvf.jpg

    Thanks in advance
    Regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    I don’t see the CSS being applied can you please confirm that you have enabled it with the checkbox AMP Compatibility -> CSS page is checked, also please clear your site cache so changes can reflect on the frontend.

    if that didn’t worked please add CSS in Appearance->Customize->Addtional CSS

    Thread Starter ssk2019

    (@ssk2019)

    Hi
    yes, I had enabled CSS in AMP Compatibility -> CSS page and also copied the above given codes. Now, I have added them to Appearance->Customize->Addtional CSS too.

    After clearing the browser cache, I have installed W3 Total Cache plugin to clear site cache.
    Now the Sub Menu drop down list visible only from cart page. Its not working from any other page including Home page. I tried removing the popup in home page (AMP Enhancer -> Popup).. Still not visible. Please find the screenshot from cart page.
    https://snipboard.io/DycMCX.jpg.. plz guide

    Thanks in advance
    Regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    I am really sorry I made mistake when providing the CSS code snippet, the dot ( CSS class selector ) was missing in my previous snippet it should be .handheld-navigation instead of handheld-navigation, can you please update the previous CSS or replace the previous CSS using code the below, this should definitely resolve your issue

    html[amp] .handheld-navigation ul.menu .sub-menu {
        visibility: visible;
        opacity: 1;
        max-height: initial;
    }

    Sorry for the trouble

    Thread Starter ssk2019

    (@ssk2019)

    Hi,
    That’s fine no issues.. Thanks for your prompt response
    Now, it shows all the sub menu options without drop down list.. It would be nice if it is like a drop down list as previously it was. Kindly guide.

    PFA the home page screenshot https://snipboard.io/xJM82B.jpg

    Thanks in advance
    Regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    Please give me some time to prepare a code snippet, in the meantime please go through our guide to learn more about how you can make the navigation menu on AMP plugin work.

    Thread Starter ssk2019

    (@ssk2019)

    Hi,

    sure.. thanks

    regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    Thank you for the patience, please add the following code in your theme’s functions.php file or in a custom plugin

    /**
     * Filter the HTML output of a nav menu item to add the AMP dropdown button to reveal the sub-menu.
     *
     * This is only used for AMP since in JS it is added via initMainNavigation() in navigation.js.
     *
     * @param string $item_output   Nav menu item HTML.
     * @param object $item          Nav menu item.
     * @return string Modified nav menu item HTML.
     */
    function storefront_add_nav_sub_menu_buttons( $item_output, $item ) {
    
    	// Only add the buttons in AMP responses.
    	if ( ! is_amp_endpoint() ) {
    		return $item_output;
    	}
    
    	// Skip when the item has no sub-menu.
    	if ( ! in_array( 'menu-item-has-children', $item->classes, true ) ) {
    		return $item_output;
    	}
    
    	// Obtain the initial expanded state.
    	$expanded = in_array( 'current-menu-ancestor', $item->classes, true );
    
    	// Generate a unique state ID.
    	static $nav_menu_item_number = 0;
    	$nav_menu_item_number++;
    	$expanded_state_id = 'navMenuItemExpanded' . $nav_menu_item_number;
    
    	// Create new state for managing storing the whether the sub-menu is expanded.
    	$item_output .= sprintf(
    		'<amp-state id="%s"><script type="application/json">%s</script></amp-state>',
    		esc_attr( $expanded_state_id ),
    		wp_json_encode( $expanded )
    	);
    
    	/*
    	 * Create the toggle button which mutates the state and which has class and
    	 * aria-expanded attributes which react to the state changes.
    	 */
    	$dropdown_button  = '<button';
    	$dropdown_class   = 'dropdown-toggle';
    	$toggled_class    = 'toggled-on';
    	$dropdown_button .= sprintf(
    		' class="%s" [class]="%s"',
    		esc_attr( $dropdown_class . ( $expanded ? " $toggled_class" : '' ) ),
    		esc_attr( sprintf( "%s + ( $expanded_state_id ? %s : '' )", wp_json_encode( $dropdown_class ), wp_json_encode( " $toggled_class" ) ) )
    	);
    
    	$dropdown_button .= sprintf(
    		' aria-expanded="%s" [aria-expanded]="%s"',
    		esc_attr( wp_json_encode( $expanded ) ),
    		esc_attr( "$expanded_state_id ? 'true' : 'false'" )
    	);
    
    	$dropdown_button .= sprintf(
    		' on="%s"',
    		esc_attr( "tap:AMP.setState( { $expanded_state_id: ! $expanded_state_id } )" )
    	);
    
    	$dropdown_button .= '>';
    
    	// Let the screen reader text in the button also update based on the expanded state.
    	$dropdown_button .= sprintf(
    		'<span class="screen-reader-text" [text]="%s">%s</span>',
    		esc_attr(
    			sprintf(
    				"$expanded_state_id ? %s : %s",
    				wp_json_encode( __( 'collapse child menu', 'example' ) ),
    				wp_json_encode( __( 'expand child menu', 'example' ) )
    			)
    		),
    		esc_html( $expanded ? __( 'collapse child menu', 'example' ) : __( 'expand child menu', 'example' ) )
    	);
    
    	$dropdown_button .= '</button>';
    
    	$item_output .= $dropdown_button;
    	return $item_output;
    }
    
    add_filter( 'walker_nav_menu_start_el', 'storefront_add_nav_sub_menu_buttons', 10, 2 );

    Once added, please replace our previous CSS in AMP Compatability->CSS with the new one added below

    .handheld-navigation ul.menu button.toggled-on + ul.sub-menu,
    .handheld-navigation ul button.toggled-on + ul {
    	visibility:visible;
    	opacity:1;
    	max-height:initial;
    }

    Once both codes are added, please test AMP Page on the Mobile

    Hope this helps!

    Thread Starter ssk2019

    (@ssk2019)

    Hi @milindmore22

    Thanks so much for your effort to solve this issue.

    After adding the above given codes, the sub menu options are visible all the time in home page.. it doesn’t toggle On or Off with drop down button.. in sub menu pages (like Shop->cookies, Recipes->Cuisine etc) only the drop down button visible.. sub menu not showing up when it is toggled On..

    PFA the screen shots of Home page, sub menu pages..

    1. https://snipboard.io/0WB6VE.jpg
    2. https://snipboard.io/cvUBg8.jpg
    3. https://snipboard.io/zVfHbg.jpg
    4. https://snipboard.io/9WHxnj.jpg
    5. https://snipboard.io/G1fgtj.jpg

    Thanks for your guidance.

    regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    Can you please confirm the Previous CSS has been removed/replaced with new CSS from both AMP Compatability->CSS as well as from Appearance->Customize -> Additional CSS.

    Thread Starter ssk2019

    (@ssk2019)

    Hi @milindmore22

    Yes, I had removed the previous CSS from AMP Compatibility->CSS as well as from Appearance->Customize -> Additional CSS.. had added the new CSS in AMP Compatibility->CSS

    Now, just to check I have added the new CSS in Appearance->Customize -> Additional CSS as well.. but no change still the sub menu options visible all the time.

    Thanks for your guidance.

    regards
    Shyamala Kumar

    Plugin Support Milind More

    (@milindmore22)

    Hello @ssk2019

    I am still seeing the previous CSS being applied to the sub-menu (screenshot), can you please make sure that you have removed all traces of it. also please clear the site cache

Viewing 15 replies - 1 through 15 (of 32 total)
  • You must be logged in to reply to this topic.