How to Implement Shopping Cart in Magento AMP Pages

A shopping cart is an essential part of every online store. Magento 2 AMP Extension by Plumrocket allows AMP pages to interact with Magento Shopping Cart, making it possible to proceed to checkout directly from AMP pages. A shopping cart icon is embedded in the right corner of the header and is displayed on every page in AMP mode.

Our extension creates separate AMP pages for Homepage, Category Pages, Product Pages, Search Results Page, and CMS Pages based on your desktop site version. Although AMP technology restricts the integration of some components, the Plumrocket AMP extension has managed to overcome these limitations. For instance, when visitors enter the AMP version of your website and go to the non-AMP pages, they are redirected to the responsive Magento theme. This is what ensures a seamless customer journey for users. 

How Shopping Cart Works in AMP Mode

An Add to Cart button gives your customers an opportunity to make purchases when the AMP mode is turned on. After a user adds products to the cart, a green "add-to-cart" message appears at the bottom of the page. In addition, the number of products on the cart icon is updated every time a user adds a new product.

Once a buyer clicks the cart icon in AMP mode, the extension redirects one to the Shopping Cart in responsive Magento theme, where they can proceed to checkout.

Can I See the Number of Items in the Shopping Cart From Any Page

Yes, the number of items is always shown on the badge next to the shopping cart icon on both AMP and regular Magento pages. The badge appears in the header of a website, so it can be accessed from any page. Moreover, it is automatically updated when new products are added to the cart in AMP mode.

All in all, users do not need to go to the shopping cart to check the number of items added to it, as it is always displayed in the header of your site.

How to Change the Duration of Add-to-Cart Messages

After a user has added an item to the cart in the AMP mode, the add-to-cart message remains for a default time period. Please take the following steps to change the default time:

1. Open the file in the following directory:
   
   

   Plumrocket/Amp/view/frontend/templates/page/form/message/template.phtm

2. Check line #35 for the following:
   
   

   "duration": "8s"

3. Enter the needed amount of time instead of "8s"
4. Save the file
5. Clear the cache

Please note that these steps only apply to the Plumrocket AMP extension v2.x.

We hope this article was helpful to you. In case any other questions arise, feel free to contact us.