/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/**
* @api
*/
define([
'jquery',
'underscore',
'mage/template',
'mage/translate',
'priceUtils',
'priceBox',
'jquery/ui',
'jquery/jquery.parsequery',
'mgs/slick',
'mgs/owlcarousel',
'magnificPopup'
], function ($, _, mageTemplate, $t, priceUtils) {
'use strict';
console.log('PIXIE CONF PRODUCT');
let runOnce = false;
let existingLabel = false;
$.widget('mage.configurable', {
options: {
superSelector: '.super-attribute-select',
selectSimpleProduct: '[name="selected_configurable_option"]',
priceHolderSelector: '.price-box',
spConfig: {},
state: {},
priceFormat: {},
optionTemplate: '<%- data.label %>' +
'<% if (typeof data.finalPrice.value !== "undefined") { %>' +
' <%- data.finalPrice.formatted %>' +
'<% } %>',
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]',
mediaGalleryInitial: null,
slyOldPriceSelector: '.sly-old-price',
/**
* Defines the mechanism of how images of a gallery should be
* updated when user switches between configurations of a product.
*
* As for now value of this option can be either 'replace' or 'prepend'.
*
* @type {String}
*/
gallerySwitchStrategy: 'replace',
tierPriceTemplateSelector: '#tier-prices-template',
tierPriceBlockSelector: '[data-role="tier-price-block"]',
tierPriceTemplate: ''
},
/**
* Creates widget
* @private
*/
_create: function () {
// Initial setting of various option values
this._initializeOptions();
// Override defaults with URL query parameters and/or inputs values
this._overrideDefaults();
// Change events to check select reloads
this._setupChangeEvents();
// Fill state
this._fillState();
// Setup child and prev/next settings
this._setChildSettings();
// Setup/configure values to inputs
this._configureForValues();
$(this.element).trigger('configurable.initialized');
},
/**
* Initialize tax configuration, initial settings, and options values.
* @private
*/
_initializeOptions: function ()
{
var options = this.options,
gallery = $(options.mediaGallerySelector),
priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option').priceConfig || null;
if (priceBoxOptions && priceBoxOptions.optionTemplate) {
options.optionTemplate = priceBoxOptions.optionTemplate;
}
if (priceBoxOptions && priceBoxOptions.priceFormat) {
options.priceFormat = priceBoxOptions.priceFormat;
}
options.optionTemplate = mageTemplate(options.optionTemplate);
options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
options.settings = options.spConfig.containerId ?
$(options.spConfig.containerId).find(options.superSelector) :
$(options.superSelector);
options.values = options.spConfig.defaultValues || {};
options.parentImage = $('[data-role=base-image-container] img').attr('src');
this.inputSimpleProduct = this.element.find(options.selectSimpleProduct);
var currentImages = [];
$(".product.media .item-image").each(function( index ) {
var item = [];
var url_video = "";
var type = 'image';
if($(this).find('.popup-youtube').length){
url_video = $(this).find('.popup-youtube').attr('href');
}else if($(this).find('.lb.video-link').length){
url_video = $(this).find('.lb.video-link').attr('href');
}
if(url_video){
type = 'video';
}
item['zoom'] = $(this).attr('data-zoom');
item['full'] = $(this).find('.img-responsive').attr('src');
item['thumb'] = $(this).find('.img-responsive').attr('src');
item['type'] = type;
item['videoUrl'] = url_video;
currentImages.push(item);
});
options.mediaGalleryInitial = currentImages;
},
/**
* Override default options values settings with either URL query parameters or
* initialized inputs values.
* @private
*/
_overrideDefaults: function () {
var hashIndex = window.location.href.indexOf('#');
if (hashIndex !== -1) {
this._parseQueryParams(window.location.href.substr(hashIndex + 1));
}
if (this.options.spConfig.inputsInitialized) {
this._setValuesByAttribute();
}
},
/**
* Parse query parameters from a query string and set options values based on the
* key value pairs of the parameters.
* @param {*} queryString - URL query string containing query parameters.
* @private
*/
_parseQueryParams: function (queryString) {
var queryParams = $.parseQuery({
query: queryString
});
$.each(queryParams, $.proxy(function (key, value) {
this.options.values[key] = value;
}, this));
},
/**
* Override default options values with values based on each element's attribute
* identifier.
* @private
*/
_setValuesByAttribute: function () {
this.options.values = {};
$.each(this.options.settings, $.proxy(function (index, element) {
var attributeId;
if (element.value) {
attributeId = element.id.replace(/[a-z]*/, '');
this.options.values[attributeId] = element.value;
}
}, this));
},
/**
* Set up .on('change') events for each option element to configure the option.
* @private
*/
_setupChangeEvents: function () {
$.each(this.options.settings, $.proxy(function (index, element) {
$(element).on('change', this, this._configure);
}, this));
},
/**
* Iterate through the option settings and set each option's element configuration,
* attribute identifier. Set the state based on the attribute identifier.
* @private
*/
_fillState: function () {
$.each(this.options.settings, $.proxy(function (index, element) {
var attributeId = element.id.replace(/[a-z]*/, '');
if (attributeId && this.options.spConfig.attributes[attributeId]) {
element.config = this.options.spConfig.attributes[attributeId];
element.attributeId = attributeId;
this.options.state[attributeId] = false;
}
}, this));
},
/**
* Set each option's child settings, and next/prev option setting. Fill (initialize)
* an option's list of selections as needed or disable an option's setting.
* @private
*/
_setChildSettings: function () {
var childSettings = [],
settings = this.options.settings,
index = settings.length,
option;
while (index--) {
option = settings[index];
if (index) {
option.disabled = true;
} else {
this._fillSelect(option);
}
_.extend(option, {
childSettings: childSettings.slice(),
prevSetting: settings[index - 1],
nextSetting: settings[index + 1]
});
childSettings.push(option);
}
},
/**
* Setup for all configurable option settings. Set the value of the option and configure
* the option, which sets its state, and initializes the option's choices, etc.
* @private
*/
_configureForValues: function () {
if (this.options.values) {
this.options.settings.each($.proxy(function (index, element) {
var attributeId = element.attributeId;
element.value = this.options.values[attributeId] || '';
this._configureElement(element);
}, this));
}
},
/**
* Event handler for configuring an option.
* @private
* @param {Object} event - Event triggered to configure an option.
*/
_configure: function (event) {
event.data._configureElement(this);
},
/**
* Configure an option, initializing it's state and enabling related options, which
* populates the related option's selection and resets child option selections.
* @private
* @param {*} element - The element associated with a configurable option.
*/
_configureElement: function (element) {
this.simpleProduct = this._getSimpleProductId(element);
if (element.value) {
this.options.state[element.config.id] = element.value;
if (element.nextSetting) {
element.nextSetting.disabled = false;
this._fillSelect(element.nextSetting);
this._resetChildren(element.nextSetting);
} else {
if (!!document.documentMode) { //eslint-disable-line
this.inputSimpleProduct.val(element.options[element.selectedIndex].config.allowedProducts[0]);
} else {
this.inputSimpleProduct.val(element.selectedOptions[0].config.allowedProducts[0]);
}
}
} else {
this._resetChildren(element);
}
this._reloadPrice();
this._displayRegularPriceBlock(this.simpleProduct);
this._displayTierPriceBlock(this.simpleProduct);
this._changeProductImage();
},
/**
* Change displayed product image according to chosen options of configurable product
*
* @private
*/
_changeProductImage: function () {
var images,
imagesToUpdate,
initialImages = this.options.mediaGalleryInitial;
if (this.options.spConfig.images[this.simpleProduct]) {
images = $.extend(true, [], this.options.spConfig.images[this.simpleProduct]);
}
if (images) {
imagesToUpdate = images;
}else {
imagesToUpdate = initialImages;
}
/* Update Gallery */
if(imagesToUpdate){
if (this.options.onlyMainImg) {
this.updateOneImage(imagesToUpdate);
} else {
if(imagesToUpdate.length == 1){
this.updateOneImage(imagesToUpdate);
}else {
this.updateBaseImageVertical(imagesToUpdate);
}
}
}
this.lightBoxGallery();
this.videoPopup();
},
updateBaseImageVertical: function(imagesToUpdate) {
var img_change = "";
img_change = '<div class="vertical-gallery vertical-thumbnail">';
img_change = img_change + '<div id="vertical-thumbnail-wrapper" class="parent__gallery-thumbnail"><div id="vertical-thumbnails" class="product-gallery-carousel gallery-thumbnail slick-thumbnail">'+this.generateHtmlThumb(imagesToUpdate)+'</div></div>';
img_change = img_change + '<div class="product-main-media-product"><div id="owl-carousel-gallery" class="product-gallery-base-carousel owl-carousel gallery-vertical">'+this.generateHtmlImage(imagesToUpdate)+'</div></div>';
img_change = img_change + '</div>';
$(".product.media").html(img_change);
$('#owl-carousel-gallery').owlCarousel({
items: 1,
autoplay: false,
lazyLoad: false,
nav: true,
dots: false,
navText: ["<i class='pe-7s-angle-left'></i>","<i class='pe-7s-angle-right'></i>"],
rtl: false
});
$('#vertical-thumbnails img').load(function(){
setTimeout(function(){
$('#vertical-thumbnails').slick({
dots: false,
arrows: true,
vertical: true,
slidesToShow: 5,
slidesToScroll: 5,
verticalSwiping: true,
prevArrow: '<span class="pe-7s-angle-up"></span>',
nextArrow: '<span class="pe-7s-angle-down"></span>',
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 360,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
}, 200);
});
$('#owl-carousel-gallery').on('changed.owl.carousel', function(event) {
var index = event.item.index;
$('#vertical-thumbnails .item-thumb').removeClass('active');
$('#vertical-thumbnails .item-thumb[data-owl='+index+']').addClass('active');
var wdw = $(window).width();
var ci = imagesToUpdate.length;
if(wdw >= 1199 && ci > 5) {
$('#vertical-thumbnails').slick('slickGoTo', index);
}else if(wdw < 1199 && wdw >= 992 && ci > 3){
$('#vertical-thumbnails').slick('slickGoTo', index);
}else if(wdw < 992 && wdw >= 361 && ci > 2){
$('#vertical-thumbnails').slick('slickGoTo', index);
}else if(wdw <= 360){
$('#vertical-thumbnails').slick('slickGoTo', index);
}
});
$('#vertical-thumbnails .item-thumb').click(function(){
$('#vertical-thumbnails .item-thumb').removeClass('active');
var position = $(this).attr('data-owl');
$('#owl-carousel-gallery').trigger('to.owl.carousel', position);
$(this).addClass('active');
});
},
lightBoxGallery: function(){
$('.product.media').magnificPopup({
delegate: '.imgzoom .lb',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-gallery',
fixedContentPos: true,
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
},
callbacks: {
elementParse: function(item) {
if(item.el.context.className == 'lb video-link') {
item.type = 'iframe';
} else {
item.type = 'image';
}
}
}
});
},
videoPopup: function(){
$('.popup-youtube, .popup-vimeo, .popup-gmaps, .video-link').magnificPopup({
type: 'iframe',
preloader: false,
mainClass: 'mfp-img-gallery',
fixedContentPos: true
});
},
updateOneImage: function(imagesToUpdate) {
var img_change = "";
var href = imagesToUpdate[0].zoom;
var cla = 'lb';
if(imagesToUpdate[0].type == 'video' && imagesToUpdate[0].videoUrl != ""){
href = imagesToUpdate[0].videoUrl;
cla = 'lb video-link';
}
img_change = img_change + '<div class="product single-image item-image base-image"><a href="'+href+'" class="'+cla+'"><img class="img-responsive" src="'+imagesToUpdate[0].full+'" alt=""/></a></div>';
$(".product.media").height('auto');
$(".product.media").html(img_change);
},
generateHtmlImage: function(imagesToUpdate){
var html = "";
$.each(imagesToUpdate, function(index) {
var href = imagesToUpdate[index].zoom;
var cla = 'lb';
if(imagesToUpdate[index].type == 'video' && imagesToUpdate[index].videoUrl != ""){
href = imagesToUpdate[index].videoUrl;
cla = 'lb video-link';
}
html = html + '<div class="product item-image"><a href="'+href+'" class="'+cla+'"><img class="img-responsive" src="'+imagesToUpdate[index].full+'" alt=""/></a></div>';
});
return html;
},
generateHtmlThumb: function(imagesToUpdate){
var html = "";
$.each(imagesToUpdate, function(index) {
var classth = 'image-item item-thumb';
if(index == 0){ classth = 'image-item item-thumb active'; }
html = html + '<div class="'+classth+'" data-owl="'+index+'"><img class="img-responsive" src="'+imagesToUpdate[index].thumb+'" alt=""/>';
if(imagesToUpdate[index].type == 'video' && imagesToUpdate[index].videoUrl != ""){
html = html + '<a target="_blank" class="popup-youtube" href="'+imagesToUpdate[index].videoUrl+'"></a>';
}
html = html + '</div>';
});
return html;
},
/**
* Set correct indexes for image set.
*
* @param {Array} images
* @private
*/
_setImageIndex: function (images) {
var length = images.length,
i;
for (i = 0; length > i; i++) {
images[i].i = i + 1;
}
return images;
},
/**
* For a given option element, reset all of its selectable options. Clear any selected
* index, disable the option choice, and reset the option's state if necessary.
* @private
* @param {*} element - The element associated with a configurable option.
*/
_resetChildren: function (element) {
if (element.childSettings) {
_.each(element.childSettings, function (set) {
set.selectedIndex = 0;
set.disabled = true;
});
if (element.config) {
this.options.state[element.config.id] = false;
}
}
},
/**
* Populates an option's selectable choices.
* @private
* @param {*} element - Element associated with a configurable option.
*/
_fillSelect: function (element) {
var attributeId = element.id.replace(/[a-z]*/, ''),
options = this._getAttributeOptions(attributeId),
prevConfig,
index = 1,
allowedProducts,
i,
j;
this._clearSelect(element);
element.options[0] = new Option('', '');
element.options[0].innerHTML = this.options.spConfig.chooseText;
prevConfig = false;
if (element.prevSetting) {
prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
}
if (options) {
for (i = 0; i < options.length; i++) {
allowedProducts = [];
/* eslint-disable max-depth */
if (prevConfig) {
for (j = 0; j < options[i].products.length; j++) {
// prevConfig.config can be undefined
if (prevConfig.config &&
prevConfig.config.allowedProducts &&
prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
allowedProducts.push(options[i].products[j]);
}
}
} else {
allowedProducts = options[i].products.slice(0);
}
if (allowedProducts.length > 0) {
options[i].allowedProducts = allowedProducts;
element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
if (typeof options[i].price !== 'undefined') {
element.options[index].setAttribute('price', options[i].prices);
}
element.options[index].config = options[i];
index++;
}
/* eslint-enable max-depth */
}
}
},
/**
* Generate the label associated with a configurable option. This includes the option's
* label or value and the option's price.
* @private
* @param {*} option - A single choice among a group of choices for a configurable option.
* @return {String} The option label with option value and price (e.g. Black +1.99)
*/
_getOptionLabel: function (option) {
return option.label;
},
/**
* Removes an option's selections.
* @private
* @param {*} element - The element associated with a configurable option.
*/
_clearSelect: function (element) {
var i;
for (i = element.options.length - 1; i >= 0; i--) {
element.remove(i);
}
},
/**
* Retrieve the attribute options associated with a specific attribute Id.
* @private
* @param {Number} attributeId - The id of the attribute whose configurable options are sought.
* @return {Object} Object containing the attribute options.
*/
_getAttributeOptions: function (attributeId) {
if (this.options.spConfig.attributes[attributeId]) {
return this.options.spConfig.attributes[attributeId].options;
}
},
/**
* Reload the price of the configurable product incorporating the prices of all of the
* configurable product's option selections.
*/
_reloadPrice: function () {
$(this.options.priceHolderSelector).trigger('updatePrice', this._getPrices());
},
/**
* Get product various prices
* @returns {{}}
* @private
*/
_getPrices: function () {
var prices = {},
elements = _.toArray(this.options.settings),
hasProductPrice = false;
_.each(elements, function (element) {
var selected = element.options[element.selectedIndex],
config = selected && selected.config,
priceValue = {};
if (config && config.allowedProducts.length === 1 && !hasProductPrice) {
priceValue = this._calculatePrice(config);
hasProductPrice = true;
}
prices[element.attributeId] = priceValue;
}, this);
return prices;
},
/**
* Returns prices for configured products
*
* @param {*} config - Products configuration
* @returns {*}
* @private
*/
_calculatePrice: function (config) {
var displayPrices = $(this.options.priceHolderSelector).priceBox('option').prices,
newPrices = this.options.spConfig.optionPrices[_.first(config.allowedProducts)];
_.each(displayPrices, function (price, code) {
if (newPrices[code]) {
displayPrices[code].amount = newPrices[code].amount - displayPrices[code].amount;
}
});
return displayPrices;
},
/**
* Returns Simple product Id
* depending on current selected option.
*
* @private
* @param {HTMLElement} element
* @returns {String|undefined}
*/
_getSimpleProductId: function (element) {
// TODO: Rewrite algorithm. It should return ID of
// simple product based on selected options.
var allOptions = element.config.options,
value = element.value,
config;
config = _.filter(allOptions, function (option) {
return option.id === value;
});
config = _.first(config);
return _.isEmpty(config) ?
undefined :
_.first(config.allowedProducts);
},
/**
* Show or hide regular price block
*
* @param {*} optionId
* @private
*/
_displayRegularPriceBlock: function (optionId) {
// PIXIE EDITED - CHANGE THE PRICE.
// WE ARE GETTING THE LIST PRICES AND APPENDING THAT TEXT TO THE VARIOUS PARTS
if(!runOnce){
existingLabel = jQuery('.old-price.sly-old-price.no-display .price-label').text();
runOnce = true;
}
if(typeof optionId == 'undefined' ){
jQuery('.old-price.sly-old-price.no-display .price-label').text('Regular Price') // .text('Was');
}
if(typeof window.pixiePrices != 'undefined'){
if( optionId && typeof window.pixiePrices[optionId] != "undefined"
&& typeof window.pixiePrices[optionId]['price'] != "undefined"){
let newPrice = priceUtils.formatPrice(window.pixiePrices[optionId]['price']);
jQuery('.old-price.sly-old-price.no-display .price').text(newPrice);
jQuery('.old-price.sly-old-price.no-display .price-label').text('Regular Price') // .text('Was');
}
}
// PIXIE EDITED - END CHANGE THE PRICE.
if (typeof optionId != 'undefined' &&
this.options.spConfig.optionPrices[optionId].oldPrice.amount != //eslint-disable-line eqeqeq
this.options.spConfig.optionPrices[optionId].finalPrice.amount
) {
$(this.options.slyOldPriceSelector).show();
} else {
// PIXIE CHANGED IF DISPLAY OR NOT
// console.log( this.options.spConfig.prices.finalPrice.amount, this.options.spConfig.prices.oldPrice.amount, this.options.spConfig.prices.finalPrice.amount < this.options.spConfig.prices.oldPrice.amount )
if( this.options.spConfig.prices.finalPrice.amount < this.options.spConfig.prices.oldPrice.amount ){
$(this.options.slyOldPriceSelector).show();
}else{
$(this.options.slyOldPriceSelector).hide();
}
// PIXIE EDITED - CHANGE THE PRICE.
let shown = false;
if(typeof window.pixiePrices != 'undefined'){
if( optionId && typeof window.pixiePrices[optionId] != "undefined"
&& typeof window.pixiePrices[optionId]['listPrice'] != "undefined"){
let newPrice = priceUtils.formatPrice(window.pixiePrices[optionId]['listPrice']);
jQuery('.old-price.sly-old-price.no-display .price').text(newPrice);
shown = true;
}
}
if(shown){
jQuery('.old-price.sly-old-price.no-display .price-label').text('List Price');
$(this.options.slyOldPriceSelector).show();
}
// PIXIE EDITED - END CHANGE THE PRICE.
}
},
/**
* Callback which fired after gallery gets initialized.
*
* @param {HTMLElement} element - DOM element associated with gallery.
*/
_onGalleryLoaded: function (element) {
var galleryObject = element.data('gallery');
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
},
/**
* Show or hide tier price block
*
* @param {*} optionId
* @private
*/
_displayTierPriceBlock: function (optionId) {
var options, tierPriceHtml;
if (typeof optionId != 'undefined' &&
this.options.spConfig.optionPrices[optionId].tierPrices != [] // eslint-disable-line eqeqeq
) {
options = this.options.spConfig.optionPrices[optionId];
if (this.options.tierPriceTemplate) {
tierPriceHtml = mageTemplate(this.options.tierPriceTemplate, {
'tierPrices': options.tierPrices,
'$t': $t,
'currencyFormat': this.options.spConfig.currencyFormat,
'priceUtils': priceUtils
});
$(this.options.tierPriceBlockSelector).html(tierPriceHtml).show();
}
} else {
$(this.options.tierPriceBlockSelector).hide();
}
}
});
return $.mage.configurable;
});