Skip to content

Instantly share code, notes, and snippets.

@Dimls Dimls/Quick Buy js
Created Mar 17, 2018

Embed
What would you like to do?
PaloAlto.QuickBuyPopup = (function($selector) {
var container, product, sectionId;
var $mfpData;
$selector.magnificPopup({
type: 'ajax',
alignTop: true,
removalDelay: 300,
mainClass: 'popup-quick-buy mfp-fade',
callbacks: {
parseAjax: function(mfpResponse) {
var $mfpContent = $(mfpResponse.data);
$mfpData = $mfpContent.find('.product-single').add( $mfpContent.find('[id^="ProductJson-"]') )
var $productContainer = $mfpData.filter('.product-single');
sectionId = $productContainer.data('section-id');
product = JSON.parse($mfpData.filter('#ProductJson-' + sectionId )[0].innerHTML);
container = 'product-' + sectionId;
setTimeout(function() {
PaloAlto.initProductVariants($mfpData, product, sectionId);
}, 400);
return mfpResponse.data = $mfpData;
}
}
});
var magnificPopup = $.magnificPopup;
$(document).on('click', '.mfp-wrap .product-single .grid__item a', function(event) {
event.preventDefault();
var imageId = $(this)
.find('img')
.data('id');
$('.popup-gallery #' + imageId)
.removeClass('hide')
.siblings()
.addClass('hide');
});
$(document).on('submit', '.mfp-wrap .product-form', function(event) {
event.preventDefault();
var $form = $(this).closest('form');
$.ajax({
url: '/cart/add.js',
type: 'POST',
dataType: 'json',
data: $form.serialize()
})
.done(function() {
magnificPopup.close();
$.ajax({
url: '/cart',
})
.done(function(data) {
var $cartIcon = $(data).find('.site-header__cart-toggle');
$('.site-header__cart-toggle').html($cartIcon[0].innerHTML)
});
});
});
});
PaloAlto.Filters = (function() {
if($('body').hasClass('quick-buy-enabled')){
PaloAlto.QuickBuyPopup($('.quick_buy_button'));
}
var constants = {
SORT_BY: 'sort_by',
DEFAULT_SORT: 'title-ascending'
};
var selectors = {
filterSelection: '.filters-toolbar__input--filter',
sortSelection: '.filters-toolbar__input--sort',
defaultSort: '.filters-toolbar__default-sort'
};
function Filters(container) {
var $container = this.$container = $(container);
this.$filterSelect = $(selectors.filterSelection, $container);
this.$sortSelect = $(selectors.sortSelection, $container);
this.$selects = $(selectors.filterSelection, $container).add($(selectors.sortSelection, $container));
this.defaultSort = this._getDefaultSortValue();
this._resizeSelect(this.$selects);
this.$filterSelect.on('change', this._onFilterChange.bind(this));
this.$sortSelect.on('change', this._onSortChange.bind(this));
this.$selects.removeClass('hidden');
}
Filters.prototype = _.assignIn({}, Filters.prototype, {
_onSortChange: function(evt) {
var query = '';
this.sort = this._getSortValue();
if (this.sort !== this.defaultSort) {
query = [constants.SORT_BY + '=' + this.sort];
}
var search = document.location.search = query.length ? '?' + query : '';
document.location.href = this.$filterSelect.val() + search;
this._resizeSelect($(evt.target));
},
_onFilterChange: function(evt) {
document.location.href = this.$filterSelect.val();
this._resizeSelect($(evt.target));
},
_getSortValue: function() {
return this.$sortSelect.val() || this.defaultSort;
},
_getDefaultSortValue: function() {
return $(selectors.defaultSort, this.$container).val() || constants.DEFAULT_SORT;
},
_resizeSelect: function($selection) {
$selection.each(function() {
var $this = $(this);
var arrowWidth = 10;
// create test element
var text = $this.find('option:selected').text();
var $test = $('<span>').html(text);
// add to body, get width, and get out
$test.appendTo('body');
var width = $test.width();
$test.remove();
// set select width
$this.width(width + arrowWidth);
var newWidth = $this.outerWidth();
var label = $this.closest('.form-horizontal').children().first();
$(label).css('width',newWidth);
});
},
onUnload: function() {
this.$filterSelect.off('change', this._onFilterChange);
this.$sortSelect.off('change', this._onSortChange);
}
});
return Filters;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.