0

I'm having a bit of an issue figuring out a very simple interaction.

Some Context: I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:

<img id="1234" src=".../blah.jpg"></img>

$( img ).click(function() {
  // open (this) lightbox
  // etc. etc.
});

Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:

<a href="/parentCat/childCat/#1234">Product 1234</a>

So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.

My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?

This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!

Thanks!

mmarquez
  • 147
  • 3
  • 11

1 Answers1

1

So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.

reference: How can you check for a #hash in a URL using JavaScript?.

Something like this:

 if(window.location.hash) {
      var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
      alert (hash);
      // hash found
      // open (this) lightbox
  }

If it exists, get the product id from the hashtag and trigger the lightbox functionality

Community
  • 1
  • 1
partypete25
  • 4,353
  • 1
  • 17
  • 16