cutom code
// Functions
//==========================
// Lettering Sidebar reset
function clearConfirmInputs(e) {
$(e).html("");
$confirmInputs.removeAttr("value").removeAttr("style");
};
//remove all option required
function removeRequired(e) {
e.find("input.product-option-required").removeClass("product-option-required");
};
// add option required
function addRequired(e) {
e.find("input.product_option_value").addClass("product-option-required");
};
// remove specifc option required
function rmRequired(e) {
e.find("input.product_option_value").removeClass("product-option-required");
};
// text input validation for lettering
function textConfirm(e,f) {
$(e).blur(function() {
//values
var inputTitle = $(this).parent().prev().find("span.option_label_text").text();
var inputValue1 = $(this).parent().prev().find("input.product_option_value").attr('value');
var inputValue2 = $(this).attr('value');
// //sidebar div container selector
var sbDivContainer = '
';
var sbDivContainerClass = '.'+f;
var $sbDivContainer = $(sbDivContainerClass);
// //warning messages
var textWarningMsg = 'Warning: Make sure the text is correct'
var textWarning = '
'+inputTitle+''+textWarningMsg+'';
//confirm text logic
if ( inputValue1 == inputValue2 ) {
var sbHtml = '
'+inputTitle+''+inputValue2+'';
$sbDivContainer.html(sbHtml);
$(this).css("border", "3px solid green").addClass("textConfirmed").removeClass("textFix");
$(this).parent().addClass("opt_selected");
$(this).parent().prev().addClass("opt_selected");
} else {
$sbDivContainer.html(textWarning);
$(this).css("border", "3px solid red").removeClass("textConfirmed").addClass("textFix");
$(this).parent().removeClass("opt_selected");
$(this).parent().prev().removeClass("opt_selected");
};
});
};
//additional character logic for adding a dollar for each additional character after 12 chars
function addChars(e,f,g,h) {
$(e).blur(function() {
// makes @ return as 2 characters to resemble a heart. -- unused, will use "<3" instead
// var inputLength = $(this).val().replace(/@/g,'@@').length;
var inputLength = $(this).val().length;
// if 13, 14, or 15 characters, trigger respective option set for price increase
if (inputLength === f) {
$("label[for='swatch-741144']").trigger("click");
} else if (inputLength === g){
$("label[for='swatch-741145']").trigger("click");
} else if (inputLength >= h){
$("label[for='swatch-741146']").trigger("click");
} else {
$('button[data-os-id="141248"]').trigger("click");
}
});
};
// Material Logic
//==========================
// Variables
// target all fabric option divs
var $optionDivAll = $("#option_set_138180,#option_set_141385,#option_set_141382,#option_set_138080,#option_set_138085,#option_set_138089,#option_set_138094,#option_set_138084,#option_set_138078,#option_set_138093,#option_set_138081,#option_set_138079,#option_set_138083,#option_set_138082,#option_set_138087,#option_set_138095,#option_set_138088,#option_set_138090,#option_set_138086,#option_set_138091,#option_set_138092,#option_set_141344,#option_set_138097,#option_set_138184,#option_set_138182,#option_set_138076,#option_set_138195,#option_set_138407,#option_set_138412,#option_set_138416,#option_set_138421,#option_set_138411,#option_set_138405,#option_set_138420,#option_set_138408,#option_set_138406,#option_set_138410,#option_set_138409,#option_set_138414,#option_set_138422,#option_set_138415,#option_set_138417,#option_set_138413,#option_set_138418,#option_set_138419,#option_set_138096,#option_set_138797,#option_set_138022,#option_set_138023,#option_set_138024,#option_set_138027,#option_set_138025,#option_set_138026");
// title of option
var optionH4 = 'h4.option_label > span.option_label_text';
// Wrap material option sets in a div
$optionDivAll.wrapAll( "
" );
// require material to be selected
addRequired($optionDivAll);
// Stuff done within each material option set
$optionDivAll.each(function(){
// get unique ID of div
var optionID = $(this).attr("id");
var optionIDWrap = optionID+'_wrap';
var optionIDTarget = '#'+optionIDWrap;
// cached selectors
// div wrap of entire option
var $optionWrap = $(this);
//option set title
var $optionTitle = $(this).find(optionH4);
// actual option sets container
var $optionMain = $(this).find(".option-set-inner");
// actual option sets themsleves
var $optionMainChild = $optionMain.children(".option-swatch");
// siblings of option set
var $optionSiblings = $(this).siblings();
// siblings actual option sets
var $optionMainSiblings = $optionSiblings.children(".option-set-inner");
// Assign unique ID to div that houses the option sets and set to visible state
$optionMain.attr("id", optionIDWrap).addClass("panel-collapse collapse in");
// Rename Reset Btn
$(this).find("button.option-reset").html('
Choose a different material');
// When clicking in an option area, close other material options divs
$optionMainChild.click(function(){
//sibling reset buttons
var $siblingResetBtns = $optionSiblings.find("button.option-reset");
//reset sidebar if another material was selected
if ($optionSiblings.hasClass("options_active")){
$siblingResetBtns.trigger('click');
};
//add class to option material div
$(this).closest("#option_materials").addClass("mat_selected");
// remove required from siblings
rmRequired($optionSiblings);
//main code
$optionMainSiblings.collapse('hide');
$optionSiblings.addClass("options_hidden").removeClass("options_active");
$optionWrap.removeClass("options_hidden").addClass("options_active");
});
//open siblings if reset is clicked
$optionWrap.find("button.option-reset").click(function(){
$optionWrap.removeClass("active options_active");
$optionSiblings.removeClass("options_hidden");
$optionMainSiblings.collapse('show').collapse({toggle: false});
$optionMain.collapse({toggle: false});
addRequired($optionSiblings);
//remove mat_selected from parent div
$(this).closest("#option_materials").removeClass("mat_selected");
});
});
// Embroidery Logic
//==========================
// variables
//option sets themslves
var opt1 = '#option_set_138033'; // 2.1 font style
var opt2 = '#option_set_138043'; // 2.2 enter text
var opt3 = '#option_set_138044'; // 2.3 text confirm
var opt4 = '#option_set_138038'; // 2.4 letter color
var opt5 = '#option_set_138050'; // 2.5 additional embroidery
var opt5a = '#option_set_138051'; // 2.5.1 additional text second row
var opt5b = '#option_set_138052'; // 2.5.2 additional text confirm
var opt6 = '#option_set_138040'; // 2.6 dash cover logo 1
var opt6a = '#option_set_138045'; // 2.6.1 Logo Position
var opt6b = '#option_set_138046'; // 2.6.2 Letter & Logo Orientation
var opt7 = '#option_set_138179'; // 2.7 additional logo
var opt7a = '#option_set_138041'; // 2.7.1 logo2
var opt7b = '#option_set_138047'; // 2.7.1 logo2 orientation
var $embroidDivs = $("#option_embroid > div");
var $embSelectorReset = $("#option_set_138029 button.option-reset");
// Change input text fields to not be hidden
var $embText = $("input[name*='138043'],input[name*='138044'],input[name*='138051'],input[name*='138052']");
$embText.attr("type", "text").attr("maxlength", "18");
// option set click selectors
// initial embroidery options
var $embLetter = $("#option-swatch-729163"); //Lettering Only
var $embLetterLogo = $("#option-swatch-813852"); //Lettering & logo
var $embLogo = $("#option-swatch-813855"); //Logo only
var $embNone = $("#option-swatch-729167"); //None
var $allEmbSelectors = $("#option-swatch-729163,#option-swatch-813852,#option-swatch-813855,#option-swatch-729167");
// additional embroidery
var $emb2None = $("#option-swatch-729498"); //none
var $emb2Letter = $("#option-swatch-729499"); //addi row letters
var $emb2Logo = $("#option-swatch-729500"); //additoinal logo in embroidery
// additional Logo
var $emb2ndLogo = $("#option-swatch-730093"); // second logo
var $emb2ndLogoNo = $("#option-swatch-730092"); // no thanks
var $embReset = $("#option_set_138029 .option-reset");
// Logic Selectors
//1. Lettering Only
var $selectLetter = $(opt1+','+opt2+','+opt3+','+opt4+','+opt5);
var $addtnlText = $(opt5a+','+opt5b);
var $addLogo = $(opt6+','+opt6b);
//2. Lettering & Single Logo
var $selectLetterAndLogo = $(opt1+','+opt2+','+opt3+','+opt4+','+opt6+','+opt6b);
//3. Logo
var $selectLogo = $(opt6+','+opt6a+','+opt7);
var $addtnlLogo = $(opt7a+','+opt7b);
// all embroid option set hidden inputs
var $allEmbInputs = $("#option_embroid").find("input.product_option_value");
//confirm inputs
var $confirmInputs = $("#option_set_138044_form,#option_set_1380443_form,#option_set_138051_form,#option_set_138052_form");
//confirm input code
$confirmInputs.addClass("confirm_inputs");
// Wrap embroidery option sets in a div
$("#option_materials").next().nextAll().wrapAll( "
" );
//reset all selected embroidery options when selecting another option
var $embResetBtns = $("#option_embroid").find("button.option-reset");
$allEmbSelectors.click(function(){
$embResetBtns.trigger('click');
clearConfirmInputs(".custom_text>div");
removeRequired($("#option_embroid"));
});
// make reset button for embroidery option function the same as clicking "none"
$embReset.click(function(){
$embNone.trigger("click");
});
// Stuff done within each embroidery option set
$("#option_embroid > div").each(function(){
//Variables
// get unique ID of div
var optionID = $(this).attr("id");
var optionIDWrap = optionID+'_wrap';
var optionIDTarget = '#'+optionIDWrap;
// General Cached selectors
// div wrap of entire option
var $optionWrap = $(this);
//option set title
var $optionTitle = $(this).find(optionH4);
// actual option sets
var $optionMain = $(this).find(".option-set-inner");
// siblings of option set
var $optionSiblings = $(this).siblings();
// siblings actual option sets
var $optionMainSiblings = $optionSiblings.children(".option-set-inner");
// Hide each of these option sets initially
$(this).addClass("panel-collapse collapse").collapse({'toggle': false});
// Assign unique ID to div that houses the option sets
$optionMain.attr("id", optionIDWrap);
// 0. Reset -- Hide all
$allEmbSelectors.add($embSelectorReset).click(function(){
$selectLetter.add($selectLetterAndLogo).add($selectLogo).hide();
clearConfirmInputs(".custom_text>div");
removeRequired($("#option_embroid"));
});
// 1. LOGIC -- User selects lettering only
// Show lettering only options
$embLetter.click(function(){
$selectLetter.fadeIn(200);
addRequired($selectLetter);
});
// LOGIC -- Additional embroidery logic
// Users Selects No Thanks
$emb2None.click(function(){
$addtnlText.add($addLogo).hide();
});
// Users Selects Second Row of lettering
$emb2Letter.click(function(){
$addtnlText.fadeIn(200);
$addLogo.hide();
addRequired($addtnlText);
rmRequired($addLogo);
});
// Users Selects Add a logo
$emb2Logo.click(function(){
$addtnlText.hide();
$addLogo.fadeIn(200);
addRequired($addLogo);
rmRequired($addtnlText);
});
// 2. LOGIC -- User selects Lettering & Single logo
//Show lettering and Logo options
$embLetterLogo.click(function(){
$selectLetterAndLogo.fadeIn(200);
addRequired($selectLetterAndLogo);
});
// 3. LOGIC -- User selects Logo
// Show Logo options
$embLogo.click(function(){
$selectLogo.fadeIn(200);
addRequired($selectLogo);
});
// LOGIC -- Additional logo logic
// Users Selects add a 2nd logo
$emb2ndLogo.click(function(){
$addtnlLogo.fadeIn(200);
addRequired($addtnlLogo);
});
$emb2ndLogoNo.click(function(){
$addtnlLogo.hide();
rmRequired($addtnlLogo);
});
// 4. LOGIC -- User selects None
// Hide all options
$embNone.click(function(){
//$selectLetter.add($selectLetterAndLogo).add($selectLogo).hide();
});
});
// embroidery required options borders
var $embOptionInput = $("#option_embroid .option-swatch > input");
var $embOptionReset = $("#option_embroid .option-reset");
$embOptionInput.click(function(){
var $optTopParent = $(this).parent().parent().parent();
var $optParentattr = $(this).parent().parent().prev("input").attr("value");
if( $optParentattr != 'undefined' ){
$optTopParent.addClass("opt_selected");
}
});
$embOptionReset.click(function() {
$(this).parent().parent().removeClass("opt_selected");
});
// collapse embroidery options on successful selection
var $embOptionSetInner = $('#option_embroid .option-set-inner, #option_set_32491 .option-set-inner');
var $embOptSelect = $("#option_embroid .wsmj-option-select, #option_set_32491 .wsmj-option-select");
var $embOptReset = $("#option_embroid .option-reset, #option_set_32491 .option-reset");
$embOptionSetInner.collapse({
toggle: true
})
$embOptSelect.click(function(){
$(this).parent().collapse('hide');
$(this).parent().parent().addClass("opt-success");
});
$embOptReset.click(function(){
$(this).parent().siblings(".option-set-inner").collapse('show');
$(this).parent().parent().removeClass("opt-success");
});
// bring back to top of section after collapse
$('#option_embroid .option-set-inner').on('hide.bs.collapse', function (e) {
var $panel = $(this).closest('.option_set_select');
$('html,body').animate({
scrollTop: $panel.offset().top
}, 500);
});
// Lettering scripts
//==========================
//place lettering container in sidebar
var customtextDiv = '
';
$(customtextDiv).insertBefore(".os-sum-price");
//additional character logic for adding a dollar for each additional character after 12 chars
addChars("#option_set_138044_form",13,14,15);
addChars("#option_set_138052_form",13,14,15);
//validation of first lettering
textConfirm("#option_set_138044_form", "custom_text1");
//validation of second lettering
textConfirm("#option_set_138052_form", "custom_text2");
//press enter to validate text
$('.confirm_inputs, #option_set_138051_form, #option_set_138043_form').keypress(function(e){
if(e.which == 13){
$(this).blur();
//return false;
e.preventDefault();
}
if (event.keyCode == 13) {
//event.preventDefault();
event.defaultPrevented;
}
});
// General Scripts
//==========================
// move h1 above everything
$("h1.wsm-prod-title").insertBefore("#wsm-prod-images-container").wrap('
');
//text only buttons -- resize to use wider col
var $textBtns = $("#option_set_138029 > .option-set-inner, #option_set_138033_wrap, #option_set_138050_wrap, #option_set_138046_wrap, #option_set_138179_wrap");
$textBtns.children(".option-swatch").removeClass("col-md-2").addClass("col-md-3");
// make color swatches 1 column
$("#option_set_138038_wrap > div").removeClass("col-md-2 col-xs-6").addClass("col-md-1 col-xs-4");
//reset all button
$("#options_summary_wrap").append("
Reset All Options");
var $resetAll = $(".product_form").find("button.option-reset");
$(".resetAllBtn").click(function(){
clearConfirmInputs(".custom_text>div");
$resetAll.trigger("click");
});
// Scroll to next div after selecting a material
var $lastMat = $("#option_materials > div:last-child > .option-set-inner");
$lastMat.on('hidden.bs.collapse', function () {
$('html, body').animate({
// scrollTop: $("#option_materials").offset().top
scrollTop: $("#option_materials").next().offset().top
}, 2000);
});
