save variables to session with jquery/ajax - MODX Revolution

Question

I have 2 options user can change on page made in modx rev 2.2.0
* background
* font-size

To change background and font size i used jquery, so i think the best way would be use ajax. So i would have to create 1/2 pages which add those variables to session, so if user go to a different page, background and font size stay the same. And if user visit page after few days, background and font size would stay the same.

Here is my javascript code:

<script type="text/javascript">
 $(document).ready(function () {
  background5();
    var originalFontSize = $('html').css('font-size');
 });

 function background1() { $('.wrap').css("background","url(assets/templates/default/images/bg1.jpg)"); return false; }
 function background2() { $('.wrap').css("background","url(assets/templates/default/images/bg2.jpg)"); return false; }
 function background3() { $('.wrap').css("background","url(assets/templates/default/images/bg3.png)"); return false; }
 function background4() { $('.wrap').css("background","url(assets/templates/default/images/bg4.jpg)"); return false; }
 function background5() { $('.wrap').css("background","url(assets/templates/default/images/bg5.jpg)"); return false; }
 function background6() { $('.wrap').css("background","url(assets/templates/default/images/bg6.jpg)"); return false; }
 function background7() { $('.wrap').css("background","url(assets/templates/default/images/bg7.jpg)"); return false; }
 function background8() { $('.wrap').css("background","url(assets/templates/default/images/bg8.jpg)"); return false; }
 function background9() { $('.wrap').css("background","url(assets/templates/default/images/bg9.jpg)"); return false; }
 function big_font() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.1;
  $('html').css('font-size', newFontSize);
  return false;
 }
 function small_font() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.9;
  $('html').css('font-size', newFontSize);
  return false;
 }
</script>

My question is how to add variables to session in modx, and what is the best way of doing this?

Answer 1

Create a resource to be used as an Ajax stub, and on it place an uncached snippet containing your 'add to session' code. The snippet could be as simple as:

<?php
// example only, be sure to sanitize and add some sensible defaults here
$background = $_POST['background'];
$fontSize   = $_POST['font_size'];

// write to user's session
$_SESSION['background'] = $background;
$_SESSION['fontSize'] = $fontSize;

return '';

Then use jQuery to create an Ajax call to the stub, passing the background and font_size params to it:

var background = 6,
    fontSize = 2;
// let's assume your Ajax stub resource id is 7
$.post("[[~7]]", { background: background, font_size: fontSize } );

Note: you could tidy up all those background() functions by using just one, something like this:

function background(n) {
    var url = "assets/templates/default/images/bg"+parseInt(n)+".jpg";
    $('.wrap').css("background","url("+url+")"); 
    return false; 
}