• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 411
  • Last Modified:

Selective "back" button in HTML JavaScript

Our site uses a separate shopping cart service. I can customize the HTML for each product. Typically, a user goes to our site and clicks the "buy" button, which goes to the shopping cart product page. There I'd like to put a "Return to shopping" button that will take them back.

I can use an ordinary back button
<form action=""><input type="button" value="Return to shopping" onclick="history.go(-1);return true;"/></form>

Open in new window

which works so long as the product page was accessed from our site. Sometimes, however, the user goes there directly from somewhere else and in that case I'd like the "Return to shopping" button to go instead to "mysite.com/products".

So I'm looking for sample code that will check the value of "history.go(-1)" and, if it contains "mysite.com", goes there; else goes to "mysite.com/products".
0
BlearyEye
Asked:
BlearyEye
  • 7
  • 5
2 Solutions
 
Julian HansenCommented:
Why even bother with history - why not make it go to the products page all the time?
0
 
BlearyEyeAuthor Commented:
There is a products "home page" and multiple individual product pages. I'd prefer to go back to the last page the user was on.
0
 
Julian HansenCommented:
So in your script that renders the page check the Server Variable HTTP_REFERRER - if it is not your domain then put in the link to the products page otherwise put in the javascript.

No need to do it on the client side.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
BlearyEyeAuthor Commented:
I don't get this, I'm afraid. Here's what I think you're saying.

Suppose the user is on mysite.com/products/productX and clicks Buy, taking them to theshop.com/productpurchaseX. There they click "Return to shopping" and go to mysite.com/products. Then mysite.com/products checks HTTP_REFERRER and makes the right decision. Right?

Then in this case, HTTP_REFERRER will contain "theshop.com/productpurchaseX" or something like that. I don't see how that helps me get the user back to mysite.com/products/productX. What am I missing?
0
 
Julian HansenCommented:
Suppose the user is on mysite.com/products/productX and clicks Buy, taking them to theshop.com/productpurchaseX. There they click "Return to shopping" and go to mysite.com/products. Then mysite.com/products checks HTTP_REFERRER and makes the right decision. Right?
No - when the visitor arrives at the page that has the back button on it before you render the page you check the value of HTTP_REFERRER and if it contains your domain then render the link as a javascript back button as you have it currently - if the the HTTP_REFFERER is not from your domain it means the page was hit from outside of your site in which case render the link back to your product page.
You have not said what your dev stack is so I can't provide you with sample code but as I understand the question this should solve it.
0
 
BlearyEyeAuthor Commented:
That makes sense ... and I can see HTTP_REFERRER can be used. So it looks like I need to use some JavaScript to test HTTP_REFERRER and generate onclick values depending on the value. Perhaps a JavaScript if statement in the onclick?

My environment: the website is Joomla. The shopping service is GoDaddy's Quick Shopping Cart. The HTML that I can modify on the cart's product page is in the body section.
0
 
Julian HansenCommented:
Ok your dev environment then is php and what you would want to do (which is preferable to the javascript approach) would be something like the code below. Put this on the page where the link / button is currently being generated)
Change the mysite.com to your domain name.
<?php
   if (strstr($_SERVER['HTTP_REFERER '], 'mysite.com')) : 
?>
<a href="javascript:history.go(-1);">Return to shopping</a>
<?php
   else :
?>
<a href="mysite.com/products">Return to shopping</a>
<?php
  endif;
?>

Open in new window

Note I have used an <a> here instead of a form - you can use a form but I feel it is easier to use an <a> and style it
To do it with a button
<?php
   if (strstr($_SERVER['HTTP_REFERER '], 'mysite.com')) : 
?>
<button onclick="history.go(-1);">Return to shopping</button>
<?php
   else :
?>
<button onclick="window.location='http://mysite.com/products'">Return to shopping</button>
<?php
  endif;
?>

Open in new window

Again remember to change http://mysite.com with your domain and remember the http
0
 
BlearyEyeAuthor Commented:
This code should be running on the shopping cart site, not on my website.

After doing some checking, I'm pretty sure that PHP is not available on the shopping cart; will have to stick to JavaScript I think.
0
 
Julian HansenCommented:
Ok, if you don't have access to anything but an HTML interface then you will have to use Javascript.

You can try something like this - change the domain name to your domain and if you need to distinguish the button give it an ID and replace the $('button') with $('#idofbutton')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var domainname = "http://mysite.com";
$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    var url = document.referrer;
    if (url.indexOf(domainname) > 0) {
      history.go(-1);
    }
    else {
      window.location = 'http://' + domainname + '/products';
    }
  });
});
</script>

Open in new window

0
 
BlearyEyeAuthor Commented:
Sorry, I've been under the weather this week ...

Looks like your code is jQuery; being unfamiliar with it, I'm doing some reading to try to understand it.
0
 
BlearyEyeAuthor Commented:
I sorted it through and it looks good, thanks. There were a couple of minor errors in the code, but basically it was correct. Here's what I came up with:
<button onclick="history.go(-1);">Return to shopping</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var domainname = "http://mysite.com";
$(document).ready (function() {
  $('button').click(function(e) {
    e.preventDefault();
    var url = document.referrer;
    if (url.indexOf(domainname) > -1) {
      history.go(-1);
    }
    else {
      window.location = domainname + '/products';
    }
  });
});
</script> 

Open in new window

0
 
BlearyEyeAuthor Commented:
I included my comment in the solution since it shows the code I wound up with.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now