[TheQuint] CSV Content is not rendering on AMP pages

quintype / quintype-amp

Quintype's AMP component library for publisher apps to create amp layouts

0 stars 1 forks source link

[TheQuint] CSV Content is not rendering on AMP pages #318

Open SpandanaPatnam opened 3 years ago

SpandanaPatnam commented 3 years ago

Zendesk ticket https://quintype.zendesk.com/agent/tickets/12307

Publisher URL : thequint.com Client Type: Custom CMS: thequint.quintype.com

Tested on other Instance : No

Issue: CSV Content is not rendering on AMP pages

They need help on AMP Pages to handle .csv content on FrontEnd. Right now the CSV content is not rendering on AMP Pages for TQ.

Eg Link:- https://www.thequint.com/amp/story/tech-and-auto/bsnl-prepaid-recharge-plans-2020-list-of-all-packs-offers-combo

Screenshot of CSV content from API in story cards array

Tried https://developers.quintype.com/quintype-amp/module-Text.html from AMP DOCs But I wasn't able to receive this through storyElement props.

Screenshot or Video

thequint

ags1773 commented 3 years ago

CSV tables are currently not supported by AMP lib. This is a feature request which can be added to our roadmap

SpandanaPatnam commented 3 years ago

Thanks @ags1773 We will let the client know about this, please let us know if there's an ETA on this to communicate to them

ags1773 commented 3 years ago

@sramalin would be able to answer that

SpandanaPatnam commented 3 years ago

@sramalin @ags1773 Client has come back on this as this feature is required, please let us know the ETA to share it with the client.

Client's response:

Hi team,

As a news publisher we make use of tables within our content while filing schedules which range from elections to key sports events like IPL to showcasing different plans for ISP providers. All this collectively helps bring traffic to the website.

As a News Publisher, The Quint is focusing towards AMP pages and the same has become our key source of traffic. Unavailability of tables on AMP pages affects us adversely.

Requesting your team to add a support for this.

cc: @sinimerlin @Sowbagya-lakshmi @Rachana-t

sanju296 commented 3 years ago

Devbox scenarios - 28 Jan 2021

[x] Adding a CSV element to the story; An aXa matrix. Expected Result: The table should not overflow and break the layout.
[x] Adding a CSV element to the story; An aXb matrix. Expected Result: The table should not overflow and break the layout.
[x] Checking for other elements. Expected Result: The story page should not break with the table element and other elements.
[x] Adding multiple table elements to the same story.
[x] Adding an empty table with only header and no data

sanju296 commented 3 years ago

Staging scenarios:

[x] AMP Cross Browser testing.
- [x] Chrome.
- [x] Firefox.
- [x] Safari
- [x] iOS Safari
- [x] iOS Chrome
[x] Check for structured data. Expected Result: Should not throw any error.
[x] Should not throw any amp error.

sanju296 commented 3 years ago

Definition of Done

[x] All ACs are passing during the dev-box and in staging.
[x] All Test cases are passing.
[x] All High and medium bugs are closed.
[x] Automate the test cases.

sanju296 commented 3 years ago

Issues:

[x] The margin on the header fails to display on the Firefox browser. https://amplib-web.qtstage.io/amp/story/health-and-well-being/cycling/story-with-table?reload.
[x] If the size of the CSV is too huge, the page hangs; https://amplib-web.qtstage.io/amp/story/health-and-well-being/testing-the-table-element

ags1773 commented 3 years ago

Platform dependancies:

limit the upload size of table element (it crashes the browser tabJavaScript heap out of memory if table size is in MBs)
don't set is-amp-supported:false in story API when there is a table element present