ampproject / ampproject/amphtml

AMP Binds not functioning correctly

Open
#33,793 3 comments 0 reactions 0 assignees View on GitHub
P2: Soon Stale Type: Bug
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

## What's the issue?

Adding as a GH issue as per a thread on Slack.

We've encountered an issue where some functionality does not work for amp binds. Specifically on our basket page the binds we attach to our 'Delivery Method' selector and 'Discount Code' box aren't opening the relevant sections. For example clicking the discount code does correctly set the state for `basketDiscountCode` (toggles true/fals), however the `[hidden]="!basketDiscountCode"` we use to show the discount input in the DOM doesn't trigger, even though the state seems correct.

- If I first interact with the 'Delivery To' amp-selector and select a country, then everything else kicks in and works.
- If I remove the 'Delivery To' completely (before it's rendered in the DOM) then the other aspects will work
- If I remove either the binded `[class]` or `[hidden]` from each button within the 'Delivery To' amp-selector it'll work (**see SS below**)
- AMP validates for me and other than an ampdoc issue for analytics (which I've tested disabling) I don't have any console errors with `#development=1`
- @sebastianbenz did find a `[CustomElement] Cannot resize element and overflow is not available` error but I'm not getting that in my console

We have several AMP-only sites all with very similar code but none showing this issue. The example this is an issue on is www.panemirates.com/uae/en, but this site has some near identical fascia sites for different locales that do not have this issue. If you need to compare between them then you'll need to set your `locale_prefix` cookie to `uae%2Fen` for the site with the issue, or to `ksa%2Fen` for a site without the issue (which should take you to www.panemirates/ksa/en).

## How do we reproduce the issue?

1. Go to https://www.panemirates.com/uae/en/pan-beryl-garden-sign-wall-deco-multi-12x12cm-p15447 and add the product to your basket
2. Go to the basket page at https://www.panemirates.com/uae/en/basket
3. Try to open the 'Delivery Method' select or the 'Discount Code' toggle on the right side of the page
4. If you then open the 'Deliver To' select and select a country everything will begin working correctly

## What browsers are affected?

All.

## Which AMP version is affected?

2103261048002

I'm unsure how long this issue has been present but I suspect it has occurred within the last two months.

Contributor guide

Open the contributing guide

Research direction

Reproduce the problem using the basket and product URLs in the issue, with AMP version 2103261048002, and compare the uae/en and ksa/en locales via the documented locale_prefix cookie. Start by checking the Delivery Method, Discount Code, and Deliver To AMP binds and the reported validation and console behavior. Done means the affected binds work before selecting a country without introducing AMP validation or console errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.