Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Trying to amp-bind [href] on <a> tag #12610

Closed
leonahliang90 opened this issue Dec 27, 2017 · 15 comments
Closed

Trying to amp-bind [href] on <a> tag #12610

leonahliang90 opened this issue Dec 27, 2017 · 15 comments
Assignees
@dreamofabear
Labels
P1: High Priority Type: Bug
Milestone
Sprint H1 January

Comments

@leonahliang90
Copy link
Contributor

Hi @choumx , I am facing another issue again with amp-bind, we do have requirement to dynamically set the [href] on <a> tag. By default behavior, [href] does prepend 'https://domain.name' BUT amp.bind does not recognize ':' colon symbol. I personally dont see any chance that [href] will work in any case because of the conflicting of preprend colon symbol from [href] while amp.bind is not recognizing colon symbol. I tried to google around and couldn't find any example with the use of [href], while there is a guy on [stackoverflow]
(https://stackoverflow.com/questions/46286976/how-can-i-perform-string-manipulations-inside-an-amp-list-template) is facing the same issue as I am. Please advise how can I achieve amp-bind with [href], appreciate your help on this , much thanks.

dingtalk20171227210317

dingtalk20171227210531
@dreamofabear
Copy link

Thanks for filing this. You need to wrap the URL in quotes to make it a string (similar to JS).

<a [href]="'example.com'">

You can also use amp-state to save the URL in a variable which is a bit cleaner.

@dreamofabear dreamofabear self-assigned this Dec 27, 2017
@leonahliang90
Copy link
Contributor Author

I did try based on your suggestion and it is still not working. Based on my understanding, I think the root cause here is the [href] will prepend https:// and amp-bind cant recognize those characters.
image
image
image

May I know is there any method to remove the prefix for [href] ?

@dreamofabear dreamofabear reopened this Dec 28, 2017
@dreamofabear
Copy link

Weird, I'll take a look. Thanks!

@dreamofabear dreamofabear added this to the H1 January milestone Dec 28, 2017
@leonahliang90
Copy link
Contributor Author

To be frank, our website launching date is around the corner, can I privately chat you through slack on this and also any other urgent issues that I am not too sure it only happens to us or it is the nature behavior? I know this request is a bit ridiculous, but commenting on github is a bit inefficient and slow for us.

@dreamofabear
Copy link

Sure, my Slack handle is the same. I'll be online only intermittently until next Tuesday.

@grahamle
Copy link

our demo is here， @choumx @micyeung

@leonahliang90
Copy link
Contributor Author

leonahliang90 commented Dec 28, 2017 •
edited
Loading

We found the root cause, the [href] will be prepended with https://domain only if the <a [href]> is located inside <amp-list>, hope it helps

@leonahliang90
Copy link
Contributor Author

still appreciate ur guys to investigate into this. Thx William.

@leonahliang90
Copy link
Contributor Author

leonahliang90 commented Jan 2, 2018 •
edited
Loading

Besides a [href] method, I have also tried several other methods :

Method 1 : By using <form>

using <form> to perform navigation, I did try to override the <form>'s action with

    <input name="action" [value]="foo.bar">

More info please visit here

Result : http://domain/currentpage.html?action=https%3A%2F%2Fdomain%2Fcurrentpage.html

Reason : I notice the action is not being overridden as expected, in fact, the action is being encoded and appended into the URL, and not navigation as what I am expecting if on normal <html> environment.

Method 2 : By using AMP.navigateTo(url = string)

<button on="tap: AMP.navigateTo(url= 'http://www.google.com?categoryId='+foo.bar)">google.com</button>

Result:
dingtalk20180102162643

Reason: I think this method doesn't support string concatenation.

Method 3: By Appending Parameters to the href

By referring to this [documentation] (https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#appending-parameters-to-the-href)

I am visting link : https://localhost/example.html?productId=999

<button><a href="http://www.google.com?productId=QUERY_PARAM(productId)" data-amp-replace="QUERY_PARAM" data-amp-addparams="'categoryId='+(foo.bar)">This is a new Button</a></button>

Result:

I dont really know how to use this, based on my understanding, when i click on the button, it supposed to navigate the page to www.google.com?productId=999? and also, the how can I value to a amp-state on the <amp-amp-replace> & <data-amp-addparams> ?

Appreciate your help on this, not too sure which one is the easiest and most achievable to us. Please advise.

@micyeung
Copy link

micyeung commented Jan 5, 2018

Demo page up at https://randomtestapp-a5a6f.firebaseapp.com/dynamic-href-in-amp-list.html
You'll see in Dev Tools console log that the domain of the URL is prepended to [href].

@dreamofabear
Copy link

Ah, this is probably due to the resolveRelativeUrl() call in sanitizer.js. The amp-bind brackets are stripped during sanitation and [href] is processed the same way as href attribute, which rewrites relative URLs as absolute URLs (hence the domain prefixing). This can be fixed.

@dreamofabear dreamofabear mentioned this issue Jan 7, 2018
Merged
@dreamofabear
Copy link

@leonalicious Verified this is fixed on version 1515455265699.

@AndrewKGuan
Copy link

I'm interested to see method 2 to work. Right now it doesn't seem to be able to take in amp-state or allow concatenation of parameters.
Thanks

@IshanFx
Copy link

IshanFx commented Dec 20, 2019

Is there a way to concat dynamic value to end of the url?

@vipulphysiofirst
Copy link

Is there a way to concat dynamic value to end of the url? yes i also want to know like how to use dynamic url tag after static url like my domain is same but id is different after static , so how will i use it in navigate to

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

@dreamofabear dreamofabear

Labels
P1: High Priority Type: Bug
Projects
None yet
Milestone
Sprint H1 January
Development

No branches or pull requests
7 participants
@leonahliang90 @grahamle @IshanFx @micyeung @dreamofabear @AndrewKGuan @vipulphysiofirst