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

[SamFP]

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

[Jason]

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.

[SamFP]

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]

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]

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