Solved

How to get full current custom page url in liquid?

nazimkeser121
Tourist
6 0 2

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

Accepted Solutions (2)
Subhranil
Shopify Partner
41 8 54

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.

 

View solution in original post

Michal17
Shopify Partner
835 73 175

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.

View solution in original post

Replies 7 (7)

Michal17
Shopify Partner
835 73 175

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.

nazimkeser121
Tourist
6 0 2

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".

Subhranil
Shopify Partner
41 8 54

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.

 

nazimkeser121
Tourist
6 0 2

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.

Michal17
Shopify Partner
835 73 175

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.

nazimkeser121
Tourist
6 0 2

It helps to me.

Thank you.

StoneBridgeDigi
Shopify Partner
6 0 2

As of Aug 26 2023, the above code did not work correctly. However this code correctly provides the URL with query parameters:
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign parts = contentForQuerystring
| split: '"pageurl":"'
| last
| split: '"'
| first
| split: '://'
| last
| split: '/'
-%}
{% if parts.size > 1 %}
{%- assign domain_removed_parts = parts | slice: 1, parts.size -%}
{%- assign finalurl = domain_removed_parts | join: '/' | prepend: '/' -%}
{% else %}
{%- assign finalurl = "/" -%}
{% endif %}

{%- assign finalurl = finalurl
| replace: '\/', '/'
| replace: '%20', ' '
| replace: '\u0026', '&'
-%}