How to get full current custom page url in liquid?

Solved
nazimkeser121
Tourist
6 0 1

Hello Shopify exports,
I added new page called "support" on shopify store. ( For instance, url => store.website.com/pages/support ).
The page should be display the content of Vue app. I need to bind Vue app and liquid page.

For instance, if the url was "store.website.com/pages/support?123 and I wanted the entire URL, including the "?123".

This is custom page liquid code.

<vue-support  type="{{ url}}"> </vue-support>

{{ 'app.css' | asset_url | stylesheet_tag }}

{{ 'app.js' | asset_url | script_tag }}

<script>

var url = window.location.href;

</script>

As upi cam see from above liquid code, I need to bind "type" value with Vue app.

In script, I can get full url by window object. Then how can "url" variable bind with "type" attribue?

Best,

Nazim

0 Likes
Michal17
Shopify Partner
820 73 144

Hi @nazimkeser121 

Hope you're having a great day!

As specified here:

scrnli_7_24_2021_11-52-57 PM.png

If you found this comment useful, hit the 'Like' and 'Accepted solution' buttons.

0 Likes
nazimkeser121
Tourist
6 0 1

Thanks for your reply.

I already used "request.path" but I can't get the param.

I want "https://store.com/pages/support?123
But I'm getting "pages/support" with "request.path".

0 Likes
Subhranil
Shopify Partner
39 8 49

This is an accepted solution.

Hello @nazimkeser121 
Use the following code to get the full URL path of any page-

{% assign full_url = request.host | append: request.path %}
{{ full_url }}


If helpful then please Like and Accept as a Solution.

 

Michal17
Shopify Partner
820 73 144

This is an accepted solution.

Hi @nazimkeser121 

Hope you're having a great day!

Full URL:

 

{%- comment -%} Capture the content for header containing the tracking data {%- endcomment -%}

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

{% comment %} Use string splitting to pull the value from content_for_header and apply some string clean up {% endcomment %}

{%- assign pageUrlWithHost = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first |
   replace:'\/','/' | 
   replace:'%20',' ' | 
   replace:'\u0026','&'
-%}
Full URL:  {{ pageUrlWithHost }}

 

 

URL without request-host:

 

{%- comment -%} Capture the content for header containing the tracking data {%- endcomment -%}
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}

{% comment %} Use string splitting to pull the value from content_for_header and apply some string clean up {% endcomment %}
{%- assign pageUrlWithoutHost= contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' | 
   replace:'%20',' ' | 
   replace:'\u0026','&'
-%}

Page URL without request host: {{ pageUrlWithoutHost }}

 

If you found this comment useful, hit the 'Like' and 'Accepted solution' buttons.

0 Likes
nazimkeser121
Tourist
6 0 1

Thanks for your reply.

Seems I can't param with "request" object yet. ( I type url "store.website.com/pages/support?123" )

I'm getting "store.website.com/pages/support". I can't "?123" param.

 

If it's impossible in shopify, can I get it using javascript in liquid?
Please let me know the way.

Thanks.

0 Likes
nazimkeser121
Tourist
6 0 1

It helps to me.

Thank you.

0 Likes