Last active
August 29, 2015 14:25
-
-
Save msanigar/f5c9ee89891d04134641 to your computer and use it in GitHub Desktop.
Allow users to specify size preferences up-front, localstorage retains sizes for both male & female prefs.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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"); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment