All things Shopify and commerce
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
Solved! Go to the solution
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.
This is an accepted solution.
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.
Hope you're having a great day!
As specified here:
If you found this comment useful, hit the 'Like' and 'Accepted solution' buttons.
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".
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.
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.
This is an accepted solution.
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.
It helps to me.
Thank you.
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', '&'
-%}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024