tessguefen
8/4/2015 - 2:34 PM
editable attributes v2
editable attributes v2
jsEDITOPTIONS: function () {
// Edit Options iframe
$('#close-change-options').on('click', function() {
if (window.parent == window.top) {
window.parent.$.magnificPopup.close();
}
});
var message = $('#ajax-status-message');
// --- Check if currently selected options were the previous ones --- //
function checkCurselected(form) {
var options = $(form).find('select option:selected'),
totalOptions = 0,
totalCurselected = 0,
differentChoices = 1;
// Check each Option against each curselected.
$(options).each(function(){
if ( $(this).attr('data-curselected') == 1 ){
totalCurselected++;
}
totalOptions++;
});
if (totalCurselected == totalOptions) {
differentChoices = 0;
}
return differentChoices;
}
$('#js-purchase-product').on('change', function() {
var differentChoices = checkCurselected($(this));
// show a message???
});
$('#change-options').on('click', function(e) {
var errors = 0,
btnText = $('#change-options').html();
$('#close-change-options').hide();
$(this).html('Processing...');
$(this).attr('disabled', 'disabled');
var cform = $('#js-purchase-product'),
quantity = $(cform).find('[name=Quantity]').val(),
originalQuantity = $(cform).find('[name=OriginalQuantity]').val(),
cformData = cform.serialize();
cformUrl = cform.attr('action'),
cformMethod = cform.attr('method'),
console.log(quantity + '~' + originalQuantity );
var remove = 1;
// ADPR or QTYG
if (quantity == originalQuantity && checkCurselected(cform) !== 0) {
} else if (checkCurselected(cform) === 0) {
var keyValuePair = cformData.split('&');
for (var i = 0; i < keyValuePair.length; i++) {
var key = keyValuePair[i].split('=')[0];
var value = keyValuePair[i].split('=')[1];
if (key === 'Action') {
keyValuePair.splice(i, 1);
keyValuePair.push('Action=QTYG');
break;
}
};
cformData = keyValuePair.join('&');
var remove = 0;
}
if (checkCurselected(cform) === 0 && quantity == originalQuantity) {
message.html('Please Select different options than what you currently have in your basket.').fadeIn().delay(3000).fadeOut();
$('#change-options').html(btnText);
$('#change-options').removeAttr('disabled');
$('#close-change-options').show();
} else {
// Not the same options -- proceed.
$.ajax({
url: cformUrl + '&request=AJAX',
type: cformMethod,
data: cformData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
// Re-Initialize Attribute Machine (if it is active)
if (typeof attrMachCall !== 'undefined') {
attrMachCall.Initialize();
}
} else if(data.search(/id="js-PLMT"/i) != -1) {
message.html('We do not have enough of the Size/Color you have selected. Please review your options.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else if(data.search(/id="js-POUT"/i) != -1) {
message.html('The Size/Color you have selected is out of stock. Please review your options or check back later.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else if(data.search(/id="ERROR"/i) != -1) {
message.html('Please select another options than what you currently have in your basket.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else {
message.html('Unable to add to cart. Please review options.').fadeIn().delay(3000).fadeOut();
errors = 1;
}
cform.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
}).done(function() {
if (errors == 1) {
$('#change-options').html(btnText);
$('#change-options').removeAttr('disabled');
$('#close-change-options').show();
} else {
if (remove == 1) {
$('#remove-form').submit();
} else {
console.log($('#remove-form').attr('action'));
window.parent.location.href= $('#remove-form').attr('action');
}
}
});
}
});
}<mvt:item name="attributemachine" param="head" />
<small>Edit Choices</small>
<h4 class="normal nm product-name-title">&mvt:product:name;</h4>
<div class="modal-body">
<form method="post" action="&mvt:global:sessionurl;Screen=BASK" class="form-inline remove-form" role="form" id="remove-form">
<input type="hidden" name="Action" value="RPRD" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Basket_Line" value="&mvt:global:bask_editoptions;" />
</form>
<form method="post" action="&mvt:global:sessionurl;Screen=BASK" class="form-horizontal" role="form" id="js-purchase-product" class="purchase-form">
<input type="hidden" name="Action" value="ADPR" />
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="Product_Code" value="&mvte:product:code;" />
Quantity: <input type="tel" name="Quantity" value="&mvt:global:qty;" />
<input type="hidden" name="OriginalQuantity" value="&mvt:global:qty;" />
<div id="ajax-status-message"></div>
<div id="swatches" class="swatches"></div>
<div class="product-attributes">
<mvt:item name="product_attributes" param="product:id" />
</div>
</form>
<mvt:item name="attributemachine" param="body" />
<button class="edit-options-change btn edit-options-btn" id="change-options">Save My Changes</button>
<button class="edit-options-jk btn edit-options-btn" id="change-cancel">Cancel</button>
<div id="ajax-message" class="red error"></div>
</div><mvt:if expr="l.settings:group:options">
<a class="btn edit-options-btn edit-options-btn-click" href="&mvte:urls:PROD:auto_sep;&Product_Code=&mvt:group:code;&bask_editoptions=&mvt:group:group_id;&qty=&mvt:group:quantity;"><span data-icon="" class="edit-icon"></span> <span class="edit-text">Edit My Choices</span></a>
</mvt:if>$('.edit-options').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.magnificPopup.open({
items: {
src: url
},
type: 'iframe',
mainClass: 'edit-options-iframe'
});
});
// --- Check if currently selected options were the previous ones --- //
function checkCurselected(form) {
var options = $(form).find('select option:selected'),
totalOptions = 0,
totalCurselected = 0,
differentChoices = 1;
// Check each Option against each curselected.
$(options).each(function(){
if ( $(this).attr('data-curselected') == 1 ){
totalCurselected++;
}
totalOptions++;
});
if (totalCurselected == totalOptions) {
differentChoices = 0;
}
return differentChoices;
}
function changeOptions() {
// Edit Options iframe
$('#close-change-options').on('click', function() {
if (window.parent == window.top) {
window.parent.$.magnificPopup.close();
} else {
$.magnificPopup.close();
}
});
var message = $('#ajax-status-message');
$('#js-purchase-product').on('change', function() {
var differentChoices = checkCurselected($(this));
// show a message???
});
$('#change-options').on('click', function(e) {
var errors = 0,
btnText = $('#change-options').html();
$('#close-change-options').hide();
$(this).html('Processing...');
$(this).attr('disabled', 'disabled');
var cform = $('#js-purchase-product'),
quantity = $(cform).find('[name=Quantity]').val(),
originalQuantity = $(cform).find('[name=OriginalQuantity]').val(),
cformData = cform.serialize();
cformUrl = cform.attr('action'),
cformMethod = cform.attr('method'),
console.log(quantity + '~' + originalQuantity );
var remove = 1;
// ADPR or QTYG
if (quantity == originalQuantity && checkCurselected(cform) !== 0) {
} else if (checkCurselected(cform) === 0) {
var keyValuePair = cformData.split('&');
for (var i = 0; i < keyValuePair.length; i++) {
var key = keyValuePair[i].split('=')[0];
var value = keyValuePair[i].split('=')[1];
if (key === 'Action') {
keyValuePair.splice(i, 1);
keyValuePair.push('Action=QTYG');
break;
}
};
cformData = keyValuePair.join('&');
var remove = 0;
}
if (checkCurselected(cform) === 0 && quantity == originalQuantity) {
message.html('Please Select different options than what you currently have in your basket.').fadeIn().delay(3000).fadeOut();
$('#change-options').html(btnText);
$('#change-options').removeAttr('disabled');
$('#close-change-options').show();
} else {
// Not the same options -- proceed.
$.ajax({
url: cformUrl + '&request=AJAX',
type: cformMethod,
data: cformData,
success: function(data, textStatus, jqXHR) {
if (data.search(/id="js-BASK"/i) != -1) {
// Re-Initialize Attribute Machine (if it is active)
if (typeof attrMachCall !== 'undefined') {
attrMachCall.Initialize();
}
} else if(data.search(/id="js-PLMT"/i) != -1) {
message.html('We do not have enough of the Size/Color you have selected. Please review your options.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else if(data.search(/id="js-POUT"/i) != -1) {
message.html('The Size/Color you have selected is out of stock. Please review your options or check back later.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else if(data.search(/id="ERROR"/i) != -1) {
message.html('Please select another options than what you currently have in your basket.').fadeIn().delay(3000).fadeOut();
errors = 1;
} else {
message.html('Unable to add to cart. Please review options.').fadeIn().delay(3000).fadeOut();
errors = 1;
}
cform.data('formstatus', 'idle');
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
}
}).done(function() {
if (errors == 1) {
$('#change-options').html(btnText);
$('#change-options').removeAttr('disabled');
$('#close-change-options').show();
} else {
if (remove == 1) {
$('#remove-form').submit();
} else {
console.log($('#remove-form').attr('action'));
window.parent.location.href= $('#remove-form').attr('action');
}
}
});
}
});
}// --- Editable Options v2.0 --- //
$('.edit-options-btn-click').on('click', function(e) {
e.preventDefault();
var editURL = $(this).attr('href'),
btn = $(this),
btnText = $(btn).find('span.edit-text').html();
$(btn).find('span.edit-icon').attr('data-icon', 'î€');
$(btn).addClass('clicked');
$(btn).find('span.edit-text').html('Loading...');
$.get(editURL, function(data) {
$('#edit-options').html(data);
}).done(function() {
$.magnificPopup.open({
items: {
src: $('#edit-options')
},
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
mainClass: 'my-mfp-slide-bottom'
});
$(btn).removeClass('clicked');
$(btn).find('span.edit-icon').attr('data-icon', '');
$(btn).find('span.edit-text').html(btnText);
changeOptions();
});
});