Ecommerce content features
Is there a way to achieve tabbed UI with the current set of AMP components? We have UI like below
The content for all the tabs are already available in the initial markup. In non-AMP scenario we will just use JS to hide/show the tabs. How should we do it for AMP? One option is to do a full page refresh when users click on a tab, the resulting page will have the corresponding tab opened. Is there a way to do it without a full page refresh?
Some thoughts on a couple possible ways to go with this:
On one hand, it's almost like an amp-accordion but with multiple headers to toggle between body content (and may lend itself toward markup like this, as a standalone component).
On the other, it functions a little bit like a radio button, with a lasting state change based on click (and may either lend itself to an underlying implementation like this, or a more general approach built on this mechanic).
I should add that at this time I'm not aware of a way to do this in AMP without a full-page refresh
Currently not possible AFAIK. However tabs are essentially an accordion with grouping functionality where only one item in the group is ever expanded.
Short term, we can consider adding grouping functionality to <amp-accordion> and authors can play with CSS to make the accordion look like tabs. Grouping functionality would be useful for <amp-accordion> anyway.
Long term, it may make sense to have a separate <amp-tabs> components ( which can use <amp-accordion> in its implementation )
I definitely think we should just add amp-tabs.
@dvoytenko @rudygalfi Is the decision made to create a new component amp-tabs or for now to enhance amp-accordion? Also has any work started on this or assigned to a particular release?
@senthilp At this point, the most likely path is a new amp-tabs component. We've done some initial exploration for this approach, but it hasn't been assigned to a particular release yet.
@ericlindley-g is there a documentation on how to create a new component in AMP? We have made changes to an existing component but not created a new one. We want to evaluate the effort involved in creating amp-tabs and see if we can contribute.
We found the doc Building an AMP Extension. Will evaluate and update back.
Hi @senthilp — I just wanted to follow up to make sure you have everything you need to evaluate an approach. We're happy to talk through some of our thoughts on this as needed.
Hi @senthilp - I wanted to ask if you have any updates on this?
@chenshay is starting to take a look at this.
Glad to see amp-tabs continue moving forward! Can I help in any way?
Thanks @rudygalfi and @chenshay
@joshcp If you have any additional examples, use-cases, or needs for the feature to share, it can help guide the plan for what to support. Thanks!
ONE of the WAY, I have included this is combining amp-list-> the new feature of nested navigation to fetch data into tabs. Somehow it worked clean on pure css Tabs thing I have created.
However some learning:
@ericlindley-g @chenshay it would be great to have broad support for different types of content. For example, the ability to include a form for submitting product reviews.