0

Got an odd one here,

Im using CMS made simple and basically I have a cart. By default it's hidden until someone clicks on the "view my cart" option and the cart slides in using jQuery toggle.

This is actually working fine.

The issue arises when the cart is updated. As its a form structure, you have to make your edits (to qty or 'check' item for removal) then click "update cart". The page refreshes and so the cart hides again.

Is there anyway to make it so that upon clicking this link (specifically), the page refreshes but the cart is showing by default?

Heres my code, I think I could attach a 'class' to the link maybe, but I'm not sure.

<script type="text/javascript" charset="utf-8">
  (function($) {
$('#show_basket').click(function() {
  $('#basket_box').toggle('slow');
  }); 

$('#lclose_basket').click(function() {
    $('#basket_box').hide('slow');
    }); 


$('#continue_shop').click(function() {
    $('#basket_box').hide('slow');
    }); 
$('#continue_shop2').click(function() {
    $('#basket_box').hide('slow');
    }); 
  }(jQuery));

N.B: There is 2 links each as I have a mobile and desktop version of the basket.

ALSO:

How do I make it so the basket closes when I click off of it? Is there a way to do that? At the moment, I need to click a "Continue shopping" link in order to close the basket.

AnthonyB
  • 37
  • 6

1 Answers1

0

For showing the cart on default, after a refresh you could do something like this:

$(document).ready(function(){  
    $('#basket_box').show('slow'); 
}

If you don't want to trigger this on every site-refresh you can for example add an GET-parameter to your link and check this parameter:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var param = getParameterByName('parameter-name');
if(param){
    //do stuff
}

Note: The function to retrive a parameter by its name can be found here

A second possibility can be, showing the Cart onlick on the link and refreshing the cart-content via AJAX.

$('#refresh_link').click(function() {
  $('#basket_box').show('slow');
  //do ajaxcall -> write callback-data to the cart
   $.ajax({
    url: "pathto/cart.php", /path to your script
    type: "POST",
    data: 'id='+id, // e.g. the ID of the cart or the customer
    success: function (data) {
         //data contains the data you get from "cart.php"
         //you can s.th. like:
         $('div').html(data); // this write the data into a specified div.
    }
    });
  });

For futher information about jQuery and Ajax try and read the manual (http://api.jquery.com/jquery.ajax/) or take a look on here: http://www.php4every1.com/tutorials/jquery-ajax-tutorial/

In jQuery you can use most off the CSS-selectors. So you can trigger the click-events you showed in your question when you click e.g. on the div were the cart is displayed:

$('div.cart').click(function(){
    $('#basket_box').hide('slow');
});

I hope I have it got right and this helped you.

Greetings

Community
  • 1
  • 1
empiric
  • 7,825
  • 7
  • 37
  • 48
  • Unfortunately, I seem unable to add a GET statement to the refresh URL as its contained deep within the CMSMS form builder module. I have no experience whatsoever with AJAX so I wou;dnt know how to implement that, and I'm not sure what you are getting at with regards to the 3rd part of your answer. Sorry! Could you please explain a little further? – AnthonyB May 27 '14 at 06:43
  • I added some additional Information to my answer. Instead of an GET-Parameter you can add a variable to your session via Ajax to check if the cart has to be showed. The 3rd part does the following: when someone click on the div with the class "cart" the div with id "basket_box" gets closed. – empiric May 28 '14 at 12:42
  • Hi, I have no experience with AJAX so I dont know what you mean when mentioning it. – AnthonyB Jun 04 '14 at 11:31