-
Notifications
You must be signed in to change notification settings - Fork 1
v1.3.0 Updates
Matt Zimmermann edited this page Sep 1, 2015
·
10 revisions
Updates and additions to support the new features released in Miva 9.4:
##IMPORTANT When installing the updated ReadyTheme, the new Client Dimensions item will be created and assigned to the site. If you are performing updates to an existing site, you will need to create the item and assign it yourself. DOCUMENTATION
####HEAD Tag Added new pages to "screenCheck" variable:
<mvt:assign name="g.screenCheck" value="'ABAL,ACAD,ACED,AFAD,AFCL,AFED,ACLN,BASK,CEML,CPWD,FPWD,GFTL,INVC,LOGN,LOGOUT,OCST,OPAY,OPRC,ORHL,ORDH,ORDL,ORDS,OSEL,OUS1,OUSL,OUSM,PLMT,PRINTP,RGFT,SFNT,UATM,UATR,WLAD,WLED,WISH,WLGN,WLST,WPCK'" />
Replaced existing canonical IF statement with:
<mvt:if expr="'CTGY' CIN l.settings:page:code">
<link rel="canonical" href="&mvte:category:link;" />
<mvt:elseif expr="l.settings:page:code EQ 'PROD' OR l.settings:page:code EQ 'PATR'">
<link rel="canonical" href="&mvt:product:link;" />
<mvt:else>
<link rel="canonical" href="&mvte:urls:_self:auto;" />
</mvt:if>
Replaced existing META IF statement with new prodctgy_meta item:
<mvt:item name="prodctgy_meta" param="combined" />
Added new clientdimensions item:
<mvt:item name="clientdimensions" />
####Global Footer Added Helpful Links item to mobile footer:
<nav id="js-mobile-footer-links" class="mobile-menu mobile-menu-bottom mobile-footer-links medium-hide">
<div class="mobile-menu-header">LINKS<a href="" class="silver close-mobile-menu">×</a></div>
<mvt:item name="readytheme" param="navigationset( 'helpful_links' )" />
</nav>
<!-- end mobile-footer-links -->
####../js/scripts.js Added support for forgot password on WLGN page:
},
jsWLGN: function () {
// ---- Open Forgot Password ---- //
cornerstoneUX.sharedFunctions.openForgotPassword();
Updated footerNavControl function for better iOS user experience and removed screen toggling:
Replace:
function footerNavControl () {
if ($(window).innerWidth() < 704) {
if ($('#js-mobile-footer-links ul').length == 0) {
$('#js-mobile-footer-links').append($('#js-footer-links').find('ul'));
};
}
else {
if ($('#js-footer-links ul').length == 0) {
$('#js-footer-links').append($('#js-mobile-footer-links').find('ul'));
};
};
/* Corrects positioning of virtual keyboard */
$(document).on('focus', 'input, select, textarea', function () {
$('#mobile-footer').css('position', 'static');
});
$(document).on('blur', 'input, select, textarea', function () {
$('#mobile-footer').css('position', 'fixed');
});
};
With:
function footerNavControl () {
/* Corrects positioning of virtual keyboard */
$(document).on('focus', 'input, select, textarea', function () {
$('#mobile-footer').hide();
});
$(document).on('blur', 'input, select, textarea', function () {
$('#mobile-footer').show();
});
};
Updated addToCart function to work with new URI function and other button text:
Replace:
function addToCart () {
$('#js-add-to-cart').on('click', function (e) {
var purchaseForm = $('#js-purchase-product');
// Check the form is not currently submitting
if (purchaseForm.data('formstatus') !== 'submitting') {
// Set up variables
var form = purchaseForm,
formData = form.serialize(),
randomNo = Math.ceil(Math.random() * 1000000), // IE Hack: Creating random number to refresh ajax call
formUrl = form.attr('action') + '&v=' + randomNo,
formMethod = form.attr('method'),
responseMessage = $('#js-purchase-message'),
miniBasket = $('#js-mini-basket-container'),
processingImage = $('#js-processing-purchase'),
purchaseButton = $(this);
// Add status data to form
form.data('formstatus', 'submitting');
// Show processing message
processingImage.show();
purchaseButton.toggleDisabled().val('Processing...');
responseMessage.html('').hide();
// Send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
$('html, body').animate({scrollTop: '0px'}, 250);
var responseMiniBasket = $(data).find('#js-mini-basket-container'),
miniBasketCount = responseMiniBasket.contents()[1].getAttribute('data-itemcount'),
miniBasketSubtotal = ' ' + responseMiniBasket.contents()[1].getAttribute('data-subtotal'),
miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
miniBasketLinkSubtotal = $('#js-mini-basket-subtotal');
miniBasketLinkCount.text(miniBasketCount); // Update basket quantity (display only)
miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)
miniBasket.html(responseMiniBasket.contents()).addClass('open');
setTimeout(function () {
miniBasket.removeClass('open');
}, 5000);
// Re-Initialize Attribute Machine (if it is active)
if (typeof attrMachCall !== 'undefined') {
attrMachCall.Initialize();
};
}
else if(data.search(/id="js-PATR"/i) != -1) {
var missingAttrs = [];
form.find('.required').each(function () {
missingAttrs.push(' ' + $(this).attr('title'));
});
responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn().delay(5000).fadeOut();
}
else if(data.search(/id="js-PLMT"/i) != -1) {
responseMessage.html('We do not have enough of the Size/Color you have selected.<br />Please adjust your quantity.').fadeIn().delay(3000).fadeOut();
}
else if(data.search(/id="js-POUT"/i) != -1) {
responseMessage.html('The Size/Color you have selected is out of stock.<br />Please review your options or check back later.').fadeIn().delay(3000).fadeOut();
}
else {
responseMessage.html('Please review options.').fadeIn().delay(3000).fadeOut();
};
// Hide processing message and reset formstatus
processingImage.hide();
purchaseButton.toggleDisabled().val('Add to Cart');
form.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
};
// Prevent form from submitting
e.preventDefault();
});
};
var addToCart = new addToCart;
With:
function addToCart () {
$('#js-add-to-cart').on('click', function (e) {
var purchaseForm = $('#js-purchase-product');
// Check the form is not currently submitting
if (purchaseForm.data('formstatus') !== 'submitting') {
// Set up variables
var form = purchaseForm,
formData = form.serialize(),
randomNo = Math.ceil(Math.random() * 1000000), // IE Hack: Creating random number to refresh ajax call
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMessage = $('#js-purchase-message'),
miniBasket = $('#js-mini-basket-container'),
processingImage = $('#js-processing-purchase'),
purchaseButton = $(this),
purchaseButtonText = purchaseButton.val();
if (/\?/.test(formUrl)) {
formUrl = formUrl + '&v=' + randomNo;
}
else {
formUrl = formUrl + '?v=' + randomNo;
};
// Add status data to form
form.data('formstatus', 'submitting');
// Show processing message
processingImage.show();
purchaseButton.toggleDisabled().val('Processing...');
responseMessage.html('').hide();
// Send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
$('html, body').animate({scrollTop: '0px'}, 250);
var responseMiniBasket = $(data).find('#js-mini-basket-container'),
miniBasketCount = responseMiniBasket.contents()[1].getAttribute('data-itemcount'),
miniBasketSubtotal = ' ' + responseMiniBasket.contents()[1].getAttribute('data-subtotal'),
miniBasketLinkCount = $('#js-mini-basket-count, #js-mobile-basket-button .notification'),
miniBasketLinkSubtotal = $('#js-mini-basket-subtotal');
miniBasketLinkCount.text(miniBasketCount); // Update basket quantity (display only)
miniBasketLinkSubtotal.text(miniBasketSubtotal); // Update basket subtotal (display only)
miniBasket.html(responseMiniBasket.contents()).addClass('open');
setTimeout(function () {
miniBasket.removeClass('open');
}, 5000);
// Re-Initialize Attribute Machine (if it is active)
if (typeof attrMachCall !== 'undefined') {
attrMachCall.Initialize();
};
}
else if(data.search(/id="js-PATR"/i) != -1) {
var missingAttrs = [];
form.find('.required').each(function () {
missingAttrs.push(' ' + $(this).attr('title'));
});
responseMessage.html('All <em class="red">Required</em> options have not been selected.<br />Please review the following options: <span class="red">' + missingAttrs + '</span>.').fadeIn().delay(5000).fadeOut();
}
else if(data.search(/id="js-PLMT"/i) != -1) {
responseMessage.html('We do not have enough of the Size/Color you have selected.<br />Please adjust your quantity.').fadeIn().delay(3000).fadeOut();
}
else if(data.search(/id="js-POUT"/i) != -1) {
responseMessage.html('The Size/Color you have selected is out of stock.<br />Please review your options or check back later.').fadeIn().delay(3000).fadeOut();
}
else {
responseMessage.html('Please review options.').fadeIn().delay(3000).fadeOut();
};
// Hide processing message and reset formstatus
processingImage.hide();
purchaseButton.toggleDisabled().val(purchaseButtonText);
form.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
};
// Prevent form from submitting
e.preventDefault();
});
};
var addToCart = new addToCart;
####../js/plugins.js
Updated Mobile Navigation Functions to make search box more performant:
Replace:
(function(f){if(Array.prototype.forEach){var b=document.body;f=document.querySelector("#js-site-overlay");var g=document.querySelectorAll(".toggle-slide-top"),h=document.querySelectorAll(".toggle-slide-right"),a=document.querySelectorAll(".toggle-slide-bottom"),c=document.querySelectorAll(".toggle-slide-left");document.querySelector(".mobile-menu-top");document.querySelector(".mobile-menu-right");document.querySelector(".mobile-menu-bottom");document.querySelector(".mobile-menu-left");var d;[].slice.call(g).forEach(function(a, c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-top-open";d="mobile-menu-active mobile-menu-top-open"})});[].slice.call(h).forEach(function(a,c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-right-open";d="mobile-menu-active mobile-menu-right-open"})});[].slice.call(a).forEach(function(a, c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-bottom-open";d="mobile-menu-active mobile-menu-bottom-open"})});[].slice.call(c).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-left-open";d="mobile-menu-active mobile-menu-left-open"})});f.addEventListener("click",function(a){a.stopPropagation(); a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""});[].slice.call(document.querySelectorAll(".close-mobile-menu")).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""})})}})(window); function mobileNavigation(){function f(){960>=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="d" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").append(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a>◄ Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;
With:
(function(f){if(Array.prototype.forEach){var b=document.body;f=document.querySelector("#js-site-overlay");var g=document.querySelectorAll(".toggle-slide-top"),h=document.querySelectorAll(".toggle-slide-right"),a=document.querySelectorAll(".toggle-slide-bottom"),c=document.querySelectorAll(".toggle-slide-left");document.querySelector(".mobile-menu-top");document.querySelector(".mobile-menu-right");document.querySelector(".mobile-menu-bottom");document.querySelector(".mobile-menu-left");var d;[].slice.call(g).forEach(function(a, c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-top-open";d="mobile-menu-active mobile-menu-top-open"})});[].slice.call(h).forEach(function(a,c){a.addEventListener("click",function(e){e.stopPropagation();e.preventDefault();e.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-right-open";d="mobile-menu-active mobile-menu-right-open"})});[].slice.call(a).forEach(function(a, c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-bottom-open";d="mobile-menu-active mobile-menu-bottom-open"})});[].slice.call(c).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className+=" mobile-menu-active mobile-menu-left-open";d="mobile-menu-active mobile-menu-left-open"})});f.addEventListener("click",function(a){a.stopPropagation(); a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""});[].slice.call(document.querySelectorAll(".close-mobile-menu")).forEach(function(a,c){a.addEventListener("click",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();b.className=b.className.replace(" "+d,"").replace(d,"");d=""})})}})(window);
function mobileNavigation(){function f(){960>=$(window).innerWidth()?0==$("#js-mobile-navigation ul").length&&(g.show(),$(b).append(h),$("#js-mobile-navigation ul li span").each(function(){if("0"!=$(this).next().length){$(this).addClass("parent");var a=$(this).children("a").text();$(this).parent("li").append('<span data-name="'+a+'" data-rt-icon="d" class="next"></span>')}})):0==$("#js-navigation-bar ul").length&&(g.hide(),$("#js-mobile-navigation").find($(".clone").remove()),$("#js-navigation-bar").prepend(h.removeClass("hide")), $(".next").remove())}var b=$("#js-mobile-navigation"),g=$("#js-mobile-menu-button"),h=$("#js-navigation-set");$(window).on("load resize",function(){f()});b.on("click","span.next",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).siblings("span").closest("ul").addClass("hide");$parent=$(this).text();$new=$(this).prev("ul").clone().addClass("clone").appendTo(b);a=$(this).attr("data-name");$('<li><span class="back"><a>◄ Back</a></span></li>').prependTo($new); if($(".navigation-trail").length)c=$(this).parent("li").siblings(".navigation-trail").clone(),$(c).children("span").append(" / "+a),c.prependTo($new);else{var c=$('<li class="navigation-trail"><span>Home</span></li>').prependTo($new);$(c).children("span").append(" / "+a)}});b.on("click","span.back",function(a){a.stopPropagation();a.preventDefault();a.stopImmediatePropagation();$(this).closest("ul").prev("ul").removeClass("hide");breadcrumb=$("a.root").text();last=breadcrumb.substr(breadcrumb.lastIndexOf(" / ")+ 1);$old=$(this).closest("ul");$old.remove();$("a.root").html(function(a,b){return b.replace(last,"")})})}mobileNavigation=new mobileNavigation;
####...css/forms.css
Updated vendor specific placeholder support:
Replace:
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #8a7b7b;
font-size: inherit;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #8a7b7b;
font-size: inherit;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #8a7b7b;
font-size: inherit;
line-height: inherit;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #8a7b7b;
font-size: inherit;
line-height: inherit;
}
With:
:-moz-placeholder {
color: #8a7b7b;
font-size: inherit;
}
::-moz-placeholder {
color: #8a7b7b;
font-size: inherit;
}
:-ms-input-placeholder {
color: #8a7b7b !important;
font-size: inherit !important;
line-height: inherit !important;
}
::-webkit-input-placeholder {
color: #8a7b7b;
font-size: inherit;
line-height: inherit;
}
####...css/structure.css Updated "main-header" at line 99 add:
overflow:hidden;
##Issue #5 ####Edit Page: PROD: Product Display Layout: Advanced Mode Replace:
<div class="column whole medium-all-hidden">
<h1 class="normal nm">&mvte:product:name;</h1>
<small>&mvte:product:code;</small>
<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">
<div id="js-mobile-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
<div id="js-mobile-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s></p>
</mvt:if>
<div id="js-product-discounts"></div>
</div>
With:
<mvt:if expr="l.settings:clientdimensions:width LT 768">
<div class="column whole medium-all-hidden">
<h1 class="nm"><span class="normal">&mvte:product:name;</span></h1>
<small>&mvte:product:code;</small>
<div class="breaker"></div>
<mvt:if expr="l.settings:product:price GT 0">
<div id="js-price-value" class="h3 charcoal nm" data-base-price="&mvt:product:price;">&mvt:product:formatted_price;</div>
<mvt:else>
<div id="js-price-value" class="all-hidden" data-base-price="&mvt:product:price;"></div>
</mvt:if>
<mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
<p>Normally: <s id="js-additional-price">&mvt:product:formatted_base_price;</s></p>
</mvt:if>
<div id="js-product-discounts"></div>
</div>
</mvt:if>
##Issue #6 ####Edit Page: PROD: Product Display Layout: Advanced Mode Replace:
<mvt:if expr="g.hasSwatches">
<div class="column whole product-swatches">
<label class="medium">Color</label>
<span id="js-swatch-name" class="bold swatch-name"> </span>
<hr noshade />
<div id="js-swatches"></div>
</div>
</mvt:if>
With:
<mvt:if expr="g.hasSwatches">
<div class="column whole product-swatches">
<label class="medium">&mvte:global:swatch_prompt;</label>
<span id="js-swatch-name" class="bold swatch-name"> </span>
<hr noshade />
<div id="js-swatches"></div>
</div>
</mvt:if>
##Issue #7 ####Edit Page: PROD: Product Display Layout: Advanced Mode Replace:
<span data-icon="T" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
With:
<mvt:if expr="l.settings:product:customfield_values:customfields:product_flag NE 'none'">
<mvt:assign name="l.settings:product:flag" value="'flag--' $ tolower(l.settings:product:customfield_values:customfields:product_flag)" />
</mvt:if>
<span class="flag &mvt:product:flag;">
<mvt:if expr="NOT ISNULL l.settings:product:customfield_values:productimagecustomfields:main">
<span data-icon="T" id="js-main-image-zoom" class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
<mvt:else>
<span class="main-image" data-index="0"><img src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" title="&mvte:product:name;" id="js-main-image" data-image="&mvt:product:customfield_values:productimagecustomfields:main;" /></span>
</mvt:if>
</span>
##Issue #8 ####Edit Page: PROD: Product Display Layout: Advanced Mode This has been addresses in the update for Issue #5
##Issue #9 ####Edit Page: PROD: Product Display Layout Image Machine Replace:
<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), ''')" />
<script>
var gallery = [],
thumbnailIndex = 0;
ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img;
thumbnail = document.createElement('div');
thumbnail.className = 'column one-third medium-one-fourth';
thumbnail.setAttribute('data-index', thumbnailIndex++);
if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;
thumbnail.appendChild(img);
gallery.push({
src: closeup_image,
title: '&mvt:clean:product:name;'
});
};
return thumbnail;
};
</script>
With:
<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), ''')" />
<script>
var gallery = [],
thumbnailIndex = 0;
ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
var thumbnail,
img;
thumbnail = document.createElement('div');
thumbnail.className = 'column one-third medium-one-fourth';
thumbnail.setAttribute('data-index', thumbnailIndex++);
if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
img = document.createElement('img');
img.src = thumbnail_image;
thumbnail.appendChild(img);
};
if (typeof(closeup_image) == 'string' && closeup_image.length > 0) {
gallery.push({
src: closeup_image,
title: '&mvt:clean:product:name;'
});
};
return thumbnail;
};
</script>
##Issue #10 ####../js/scripts.js Replace:
function outOfStock () {
var button = $('#js-add-to-cart');
if (button.is(':disabled') == true) {
button.addClass('bg-gray').val('Sold Out');
}
else {
button.removeClass('bg-gray').val('Add to Cart');
};
};
outOfStock ();
With:
function outOfStock () {
var button = $('#js-add-to-cart'),
buttonText = button.val();
if (button.is(':disabled') == true) {
button.addClass('bg-gray').val('Sold Out');
}
else {
button.removeClass('bg-gray').val(buttonText);
};
};
outOfStock ();