Request: "like" button example w/ amp-bind #575

Closed
ericlindley-g opened this Issue Jan 31, 2017 · 4 comments

Comments

3 participants
@ericlindley-g
Collaborator

ericlindley-g commented Jan 31, 2017

related to #574

This example would use amp-bind to simulate a "like" button or similar. Here's the general use-case:

  1. User sees content with associated heart icon (either solid non-red color or outline), along with count of total current "like"s
  2. User taps heart icon, triggering XHR (UI is optimistically updated to success state: heart is filled with solid red color, "like" count is incremented—though I'm not sure if incrementing is possible before the XHR(?))
    1.1 (success) When XHR returns response, UI stays the same with success
    1.2 (failure) When XHR returns response, UI is updated to reflect failure: heart returns to initial state of non-red color or outline. Message appears indicating failure.

WDYT?

/cc @kul3r4 @choumx

@sebastianbenz

This comment has been minimized.

Show comment
Hide comment
@sebastianbenz

sebastianbenz Jan 31, 2017

Collaborator
Collaborator

sebastianbenz commented Jan 31, 2017

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Feb 1, 2017

Collaborator

Good point — @sebastianbenz, (or @mkhatib) is it possible using just amp-form (not using amp-bind) to display an optimistic UI update, followed by an accurate update to the UI on XHR response (along with notification in the case of failure?)

Collaborator

ericlindley-g commented Feb 1, 2017

Good point — @sebastianbenz, (or @mkhatib) is it possible using just amp-form (not using amp-bind) to display an optimistic UI update, followed by an accurate update to the UI on XHR response (along with notification in the case of failure?)

@ericlindley-g

This comment has been minimized.

Show comment
Hide comment
@ericlindley-g

ericlindley-g Feb 1, 2017

Collaborator

Also forgot a key point of using amp-bind for this, which is to update a "like" count on the page as well (if possible). Edited above to reflect

Collaborator

ericlindley-g commented Feb 1, 2017

Also forgot a key point of using amp-bind for this, which is to update a "like" count on the page as well (if possible). Edited above to reflect

@sebastianbenz sebastianbenz added the sample label Feb 2, 2017

@ericlindley-g ericlindley-g added this to Shortlist in Sample requests Jul 3, 2017

@sebastianbenz sebastianbenz self-assigned this Oct 26, 2017

@sebastianbenz sebastianbenz moved this from Shortlist to Sprint Candidates in Sample requests Oct 26, 2017

@sebastianbenz sebastianbenz moved this from Sprint Candidates to Done in August ABE sprint in Sample requests Oct 27, 2017

@kul3r4

This comment has been minimized.

Show comment
Hide comment
@kul3r4

kul3r4 May 14, 2018

Collaborator
Collaborator

kul3r4 commented May 14, 2018

@kul3r4 kul3r4 closed this May 14, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment