When AMP plugin activated, shop not working in mobile

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!

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

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;
}

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

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

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

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

• This reply was modified 3 years, 4 months ago by Milind More.
• This reply was modified 3 years, 4 months ago by Milind More.

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

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.

Hi,

sure.. thanks

regards
Shyamala Kumar

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!

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

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.

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

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