?
Solved

Selective "back" button in HTML JavaScript

Posted on 2012-09-14
12
Medium Priority
?
407 Views
Last Modified: 2012-10-02
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
Comment
Question by:BlearyEye
  • 7
  • 5
12 Comments
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38399688
Why even bother with history - why not make it go to the products page all the time?
0
 
LVL 1

Author Comment

by:BlearyEye
ID: 38399861
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38399980
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:BlearyEye
ID: 38400176
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38401127
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
 
LVL 1

Author Comment

by:BlearyEye
ID: 38401892
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
 
LVL 61

Expert Comment

by:Julian Hansen
ID: 38401941
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
 
LVL 1

Author Comment

by:BlearyEye
ID: 38406723
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
 
LVL 61

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 38408337
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
 
LVL 1

Author Comment

by:BlearyEye
ID: 38422969
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
 
LVL 1

Accepted Solution

by:
BlearyEye earned 0 total points
ID: 38441240
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
 
LVL 1

Author Closing Comment

by:BlearyEye
ID: 38453758
I included my comment in the solution since it shows the code I wound up with.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

569 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question