Getting requested URL on 404 pages. (use request.path?)

Sam92
Tourist
13 1 5

I'm trying something new with my 404 pages, and want to have it show different content based on the URL people try to go to.

Is there any way to get the full URL that someone requested in liquid? I can do it in jquery, but that's not what I want.

 

E.g. if someone tries to go to mysite.com/products/brokenproductlink, the 404 page would say: "that product you tried to go to doesn't exist. You may have a bad link, or the product has been discontinued. Try searching here..." but if the link contains /blog/ - say: "that post doesn't seem to exist, try the main blog page, or searching for the post title."

 

In theory {{ request.path }} should do it, but it now just returns "/404"

 

Found a guy that is trying to do something similar, but his code doesn't work either. https://freakdesign.com.au/blogs/news/could-multiple-404-pages-be-better-than-one

Replies 4 (4)
Jason
Shopify Expert
10438 168 2081

Hi. I might know that guy!

 

If that doesn't work anymore you're going to have to rely on JavaScript to parse the url and then show some appropriate content.

I'll have to look at my old post and see if it's time to call that wacky approach something more suitable - like outdated.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Sam92
Tourist
13 1 5

Heh, thanks. I have a pretty good idea of how to do it with javascript. I just would prefer it in liquid.

 

I've used request.path elsewhere, so I was wondering if i missing something. That 'something' may be 'shopify broke it.'

John-Carved
New Member
1 0 1

Yes it seems like they just recently changed this, I noticed it today on our site as well.

 

If anyone is interested, here is the quick JS we just wrote to make this still work at least on our products pages (assuming the url loading them was a collection url)...

 

<div class="grid-404"></div>

<script> $( document ).ready(function() { var collectionURLObject = generateCollectionURL() getProducts(collectionURLObject); }); function generateCollectionURL(){ var collectionsPrefix = "https://www.yourdomain.com/collections/"; var currentURL = window.location.href; var urlArray = currentURL.split("/"); if (urlArray.indexOf("collections") > -1){ var collectionsSuffix = urlArray[(urlArray.indexOf("collections") + 1)]; var collectionsPage = collectionsPrefix + collectionsSuffix + "/products.json"; collectionURLObject = { "collectionsSuffix" : collectionsSuffix, "collectionsPage" : collectionsPage }; return (collectionURLObject); } else{ } } function getProducts(collectionURLObject){ $.get(collectionURLObject.collectionsPage, function(products){ var itemLimit = 16; $(".grid-404").append(`<h2 class="text-center">These are available right now...</h2>`); for (var i = 0; i < itemLimit; i++){ var product = (products["products"][i]); //console.log(product) $(".grid-404").append(` <div class="grid__item one-quarter small--one-half"> <a href="/collections/${collectionURLObject.collectionsSuffix}/products/${product.handle}"> <img src="${product.images[0].src}"> <span class="short-title">${product.title}</span> </a> </div> `) } }) } </script>
Uniquekreatives
New Member
1 0 0

Getting this same issue, I have no old URL, not really techy either, how do I fix?