Allow users to specify size preferences up-front, localstorage retains sizes for both male & female prefs.

sizePrefs.js

/*
* size prefs up-front filter
*/

/*
* test current category to establish gender, prevent test running on excluded categories 
*/
var testString = '|' + $( '#js-cattree' ).text() + '|',
    maleTerms = /\|mens clothing\|/i,
    femaleTerms = /\|clothing\|/i,
    excludeTerms = /\|footwear\||\|mens footwear\||\|mens accessories\||\|accessories\||\|clearance\||\|sale\||\|shoes\||\|mens sale\||\|men's slearance\||\|aus_new_in\||\|mens new in\||\|new in\||\|features\||\|collections\|/i,
    gender = '',
    runTest = false;

$( document ).one("url_sizePrefs", function() {

    if (maleTerms.test(testString)) {
        gender = 'male';
    }
    if (femaleTerms.test(testString)) {
        gender = 'female';
    }
    if (!excludeTerms.test(testString)) {
        runTest = true;
    }
    if (excludeTerms.test(testString)) {
        runTest = false;
    }
    if (window.location.href.indexOf("/clothing/icat/clothing") > -1  || window.location.href.indexOf("/mens-clothing/icat/mens-clothing") > -1 ) {
        runTest = false;
    }

    setUp();

    $('#prefSize').addClass(gender + 'parent');

});

/*
* setup function to load full filter if no sizes saved, or partial filter with preview if saved
* pqartial filter preview to function similar to full, able to remove prefs and clear all
*/

function setUp(){

if ($('#tag-pageType').text() == 'category' && runTest === true ) {

$( "#prefSize" ).show();

  if (gender == 'male' ){
    isMale();
  }

  if (localStorage['sizeprefs' + gender]) {
        var prefs = localStorage.getItem('sizeprefs' + gender),
            prefsObj = $.parseJSON(prefs),
            prefsG = prefsObj._gender,
            prefsCsizes = [];

            if( prefsG == gender ) {
                prefsObj._sizes.forEach(function( elm, ind, arr ){
                    var elms = $( '[data-gender="' + prefsG + '"] [data-size=' + elm + ']' );
                    elms.addClass("selected");
                    var savedPrefs = '<span class="savedPref" data-gender="' + prefsG + '" data-size="' + elm + '">Size ' + elm + '</span>';
                    $('.sizeInsert').prepend(savedPrefs);
                });
            }
            showFilters();
         sizesSaved(); 

        $(window).load(function() {
            setParams(); 
        });
  } else {
        dontShowFilters();
  }

  /*
  * clickMe/ClickMe2 are open/closed buttons 
  * titleone/titleTwo are welcome messages
  * title displays success text if saved sizes found
  */

  $('.clickMe').click(function(){
        showMsgTwo();
        hideFilters();
    if($('.titleOne').hasClass('prefHidden')){
        showMsgOne();
    }
});

  $('.clickMe2').click(function(){
        hideSection();
        if (localStorage['sizeprefs' + gender]) {
            showFilters();
            sizesSaved();  
        } else {
            hideFilters();
            showMsgOne(); 
        }

});

  $('[data-gender] li').click(function(){
    $(this).toggleClass('selected');
  });

  /*
  * set empty hash to force attraqt LM.zone to reload without page refresh on reset
  */

  $('.clickReset, .prefsClear').click(function(){
    $('[data-gender] li.selected').removeClass('selected');
    $('.sizes .savedPref[data-gender][data-size]').remove();
    localStorage.removeItem('sizeprefs' + gender);
    window.location.hash="";
    if (localStorage['sizeprefs' + gender]) {

    showFilters();

} else {
    dontShowFilters();
    showMsgOne();
}
  });

  /*
  * data-gender required to ensure correct elms have classes applied
  */

$('#prefSize').on("click", ".sizes .savedPref", function() {
    var remSize = $(this).attr("data-size"),
        remGend = $(this).attr("data-gender");

        $('[data-gender="' + remGend + '"] [data-size="' + remSize + '"].selected').removeClass('selected');
        $('.sizes .savedPref[data-gender="' + remGend + '"][data-size="' + remSize + '"]').remove();


        localStorage.removeItem('sizeprefs' + gender); 

/*
* could do with seperating this array and object to prevent repetition
*/ 

        var cSizes = [],
            prefObj = {
                _gender : gender,
                _sizes : cSizes
            };

        $('[data-size].selected').each(function() {
            cSizes.push($(this).attr("data-size"));
        });

        var prefs = localStorage.getItem('sizeprefs' + gender),
            prefsObj = $.parseJSON(prefs);

        if (cSizes.length !== 0) {
        localStorage.setItem('sizeprefs' + gender, JSON.stringify(prefObj));
        }

        if (cSizes.length !== 0) {
        setParams();
        } else {
           window.location.hash="";
        }

        if (localStorage['sizeprefs' + gender]) {

    showFilters();

} else {

    dontShowFilters();
    showMsgOne();
}

  });

/*
* on save remove before re-saving, prevents adding to existing localStorage, could use sessionID to enable multiple users in one browser
* TO DO : add this if monetate test is successful 
*/


  $( '.clickGo' ).click(function(){

    localStorage.removeItem('sizeprefs' + gender); 
    $('.sizes .savedPref').remove();

    var cSizes = [],
        prefObj = {
            _gender : gender,
            _sizes : cSizes
        };

    $('[data-size].selected').each(function() {
        cSizes.push($(this).attr("data-size"));
    });


    localStorage.setItem('sizeprefs' + gender, JSON.stringify(prefObj));

    cleanUp();

    var prefs = localStorage.getItem('sizeprefs' + gender),
            prefsObj = $.parseJSON(prefs),
            prefsG = prefsObj._gender,
            prefsCsizes = [];

    prefsObj._sizes.forEach(function( elm, ind, arr ){
                    var savedPrefs = '<span class="savedPref" data-gender="' + prefsG + '" data-size="' + elm + '">Size ' + elm + '</span>';
                    $('.sizeInsert').prepend(savedPrefs);
                });


    setParams();

    if (localStorage['sizeprefs' + gender]) {

    showFilters();

    } else {
        hideFilters();
}

  });

}
}

/* 
* general functions for showing/hiding elements for events
* TO DO: remove repeated actions
*/

function hideFilters(){
    $('.sizes').addClass('prefHidden'); 
    $('.editMe').addClass('prefHidden');
}

function dontShowFilters(){
    $('.openMe').removeClass('prefHidden');
    $('.clickMe').addClass('prefHidden');
    $('.sizes').addClass('prefHidden');
    $('.editMe').addClass('prefHidden');
    $('.clickMe2').removeClass('prefHidden');
}

function showFilters(){
    $('.sizes').removeClass('prefHidden'); 
    $('.editMe').removeClass('prefHidden');
}

function sizesSaved(){
    $('.titleOne').addClass('prefHidden'); 
    $('.titleTwo').removeClass('prefHidden'); 
}

function isMale(){
    $('.women').removeClass('selected');
    $('.women').hide();
    $('.men').addClass('selected');
    $('.men').show();
    $('[data-gender="male"]').show();
    $('[data-gender="female"]').hide();
}

function cleanUp(){
    $('.openMe').addClass('prefHidden');
    $('.clickMe2').addClass('prefHidden');
    $('.clickMe').removeClass('prefHidden');
    $('.sizes').removeClass('prefHidden');
    $('.titleOne').addClass('prefHidden');
    $('.titleTwo').removeClass('prefHidden');
}

function showMsgTwo(){
    $('.clickMe').addClass('prefHidden');
    $('.clickMe2').removeClass('prefHidden');
    $('.openMe').removeClass('prefHidden');
}

function showMsgOne(){
    $('.titleOne').removeClass('prefHidden');
    $('.titleTwo').addClass('prefHidden');
}

function hideSection(){
    $('.openMe').addClass('prefHidden');
    $('.clickMe2').addClass('prefHidden');
    $('.clickMe').removeClass('prefHidden');
}

/*
* url hash for attraqt 
* prefix ALWAYS required
* TO DO: remove dependancy on attraqt
* TO DO: enable support for fallback Magento default merchandising if test runs on Magento
*/

  function setParams(){

    var _isset = false,
        prefs = localStorage.getItem('sizeprefs' + gender),
        prefsObj = $.parseJSON(prefs),
        prefsCsizes = prefsObj._sizes, 
        prefsGender = prefsObj._gender,
        prefix = '#esp_cf=m_sizerational', 
        suffix = '',
        emptyS = '',
        $tempElm = 0;

    if (localStorage['sizeprefs' + gender]) {
        _isset = true;
    }

    if (_isset === true && prefsGender === gender ) {

    prefsCsizes.forEach(function(elm) {
        $tempElm += $('[data-gender="' + prefsGender + '"] [data-size="' + elm + '"]').length;
    });
        if ($tempElm) {
            var filters = {
                m_sizerational: prefsCsizes
            };
                LM.setFilters( filters, "m_sizerational");
            }
        }
  }