345 lines
10 KiB
JavaScript
345 lines
10 KiB
JavaScript
/**
|
|
* 2007-2019 PrestaShop
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Academic Free License 3.0 (AFL-3.0)
|
|
* that is bundled with this package in the file LICENSE.txt.
|
|
* It is also available through the world-wide-web at this URL:
|
|
* https://opensource.org/licenses/AFL-3.0
|
|
* If you did not receive a copy of the license and are unable to
|
|
* obtain it through the world-wide-web, please send an email
|
|
* to license@prestashop.com so we can send you a copy immediately.
|
|
*
|
|
* DISCLAIMER
|
|
*
|
|
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
|
* versions in the future. If you wish to customize PrestaShop for your
|
|
* needs please refer to http://www.prestashop.com for more information.
|
|
*
|
|
* @author PrestaShop SA <contact@prestashop.com>
|
|
* @copyright 2007-2018 PrestaShop SA
|
|
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
|
* International Registered Trademark & Property of PrestaShop SA
|
|
*/
|
|
import $ from 'jquery';
|
|
import prestashop from 'prestashop';
|
|
import { flickity } from "../node_modules/flickity/dist/flickity.pkgd.min";
|
|
import * as PhotoSwipe from 'photoswipe';
|
|
import * as PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';
|
|
|
|
$(document).ready(function () {
|
|
createProductSpin();
|
|
createInputFile();
|
|
coverImage();
|
|
thumbsInit();
|
|
ppzoom();
|
|
whiteborder();
|
|
shareclick();
|
|
|
|
prestashop.on('updatedProduct', function (event) {
|
|
|
|
createProductSpin()
|
|
createInputFile();
|
|
coverImage();
|
|
if (event && event.product_minimal_quantity) {
|
|
const minimalProductQuantity = parseInt(event.product_minimal_quantity, 10);
|
|
const quantityInputSelector = '#quantity_wanted';
|
|
let quantityInput = $(quantityInputSelector);
|
|
|
|
// @see http://www.virtuosoft.eu/code/bootstrap-touchspin/ about Bootstrap TouchSpin
|
|
quantityInput.trigger('touchspin.updatesettings', {min: minimalProductQuantity});
|
|
}
|
|
$($('.tabs .nav-link.active').attr('href')).addClass('active').removeClass('fade');
|
|
$('.js-product-images-modal').replaceWith(event.product_images_modal);
|
|
whiteborder();
|
|
updateCounters();
|
|
shareclick();
|
|
slideqv();
|
|
|
|
var $uiEl = $('.tip_inside');
|
|
$('body').append('<div id="ui_tip"><div class="ui_wrapper"><span class="ui_title"></span></div></div>');
|
|
var $uiTip = $('#ui_tip');
|
|
var $uiTipTitle = $uiTip.find('.ui_title');
|
|
|
|
$uiEl.on('mousemove', function(e) {
|
|
$uiTip.css({
|
|
top: e.clientY,
|
|
left: e.clientX
|
|
});
|
|
|
|
var winwidth = $(window).width(),
|
|
tipwidth = $('#ui_tip').width(),
|
|
tiprightdot = e.clientX + tipwidth + 14 + 40; // plus 40 padding compensation
|
|
|
|
if (tiprightdot > winwidth) {
|
|
$('#ui_tip').addClass('align-right');
|
|
} else {
|
|
$('#ui_tip').removeClass('align-right');
|
|
}
|
|
});
|
|
|
|
$uiEl.on('mouseover', function(e) {
|
|
$uiTipTitle.text($(this).find('.tip').text());
|
|
setTimeout(function() {
|
|
$uiTip.addClass('active')
|
|
}, 10);
|
|
}).on('mouseout', function(e) {
|
|
setTimeout(function() {
|
|
$uiTip.removeClass('active');
|
|
}, 10);
|
|
});
|
|
|
|
setTimeout( function(){
|
|
thumbsInit();
|
|
ppzoom();
|
|
},200);
|
|
|
|
});
|
|
|
|
function thumbsInit() {
|
|
|
|
var thumbs_count_lis = $('#main .product-thumbs-wrapper li.thumb-container');
|
|
|
|
if (thumbs_count_lis.length == 1) {
|
|
$('#main .product-thumbs-wrapper').addClass('hide_it_pls');
|
|
} else if (thumbs_count_lis.length == 2) {
|
|
$('#main .product-thumbs-wrapper').addClass('w50');
|
|
} else if (thumbs_count_lis.length == 3) {
|
|
$('#main .product-thumbs-wrapper').addClass('w33');
|
|
} else if (thumbs_count_lis.length >= 4) {
|
|
$('#main .product-thumbs-wrapper').addClass('w25');
|
|
}
|
|
|
|
setTimeout( function(){
|
|
|
|
initslidepp();
|
|
$('.product-thumbs-wrapper').addClass('thumbs_go');
|
|
|
|
$(window).on('load resize', function(){
|
|
initslidepp();
|
|
});
|
|
|
|
function slidepp() { // Product page lay sliders
|
|
$('.images-container .product-images').flickity({
|
|
draggable:1,
|
|
pageDots: false,
|
|
cellAlign: 'left',
|
|
contain: true,
|
|
imagesLoaded: true,
|
|
arrowShape: {
|
|
x0: 30,
|
|
x1: 60, y1: 50,
|
|
x2: 70, y2: 50,
|
|
x3: 40
|
|
}
|
|
});
|
|
$('.images-container .product-thumbs').flickity({
|
|
asNavFor: '.images-container .product-images',
|
|
draggable:1,
|
|
prevNextButtons: false,
|
|
pageDots: false,
|
|
cellAlign: 'center',
|
|
imagesLoaded: true,
|
|
contain: true
|
|
});
|
|
|
|
}
|
|
function initslidepp() {
|
|
if (window.matchMedia('(max-width: 767px)').matches) { // slide it for mobile for all lays
|
|
slidepp();
|
|
} else if ($('#product .images-container').hasClass('pp_lay1')) { // slide it for 1 lay on desktop
|
|
slidepp();
|
|
} else { // destroy sliders here for 2 and 3 on resize to bigger resolution
|
|
if ($('.images-container .product-images').hasClass('flickity-enabled'))
|
|
$('.images-container .product-images').flickity('destroy');
|
|
if ($('.images-container .product-thumbs').hasClass('flickity-enabled'))
|
|
$('.images-container .product-thumbs').flickity('destroy');
|
|
}
|
|
}
|
|
},100);
|
|
|
|
|
|
}
|
|
|
|
function ppzoom() {
|
|
if ($('.images-container').hasClass('pp_lay1')) {
|
|
$('.images-container .product-images').on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
|
|
// Photoswipe functions
|
|
var openPhotoSwipe = function() {
|
|
var pswpElement = document.querySelectorAll('.pswp')[0];
|
|
|
|
// build items array
|
|
var items = $.map($('.images-container .product-images').find("img"), function(el) {
|
|
return {
|
|
"src": el.getAttribute('src'),
|
|
"w": el.width,
|
|
"h": el.height
|
|
}
|
|
});
|
|
|
|
var options = {
|
|
history: false,
|
|
shareEl: false,
|
|
zoomEl: true,
|
|
index: cellIndex
|
|
};
|
|
|
|
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
|
|
gallery.init();
|
|
|
|
};
|
|
|
|
openPhotoSwipe();
|
|
});
|
|
|
|
} else {
|
|
|
|
$('.images-container .product-images li img').click(function(event) {
|
|
|
|
|
|
// build items array
|
|
var items = $.map($('.images-container.pp_lay2 .product-images').find("img"), function(el) {
|
|
return {
|
|
"src": el.getAttribute('src'),
|
|
"w": el.width,
|
|
"h": el.height
|
|
}
|
|
});
|
|
|
|
// Define object and gallery options
|
|
var $pswp = $('.pswp')[0],
|
|
options = {
|
|
index: $(this).parent('.thumb-container').index(),
|
|
bgOpacity: 0.85,
|
|
zoomEl: true,
|
|
showHideOpacity: true
|
|
};
|
|
|
|
var gallery = new PhotoSwipe( $pswp, PhotoSwipeUI_Default, items, options);
|
|
gallery.init();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function slideqv() {
|
|
$('.quickview .product-images').flickity({
|
|
draggable:1,
|
|
pageDots: false,
|
|
cellAlign: 'left',
|
|
contain: true,
|
|
imagesLoaded: true,
|
|
arrowShape: {
|
|
x0: 30,
|
|
x1: 60, y1: 50,
|
|
x2: 70, y2: 50,
|
|
x3: 40
|
|
}
|
|
});
|
|
}
|
|
|
|
function coverImage() {
|
|
$('.js-thumb').on(
|
|
'click',
|
|
(event) => {
|
|
$('.js-modal-product-cover').attr('src',$(event.target).data('image-large-src'));
|
|
$('.selected').removeClass('selected');
|
|
$(event.target).addClass('selected');
|
|
$('.js-qv-product-cover').prop('src', $(event.currentTarget).data('image-large-src'));
|
|
}
|
|
);
|
|
}
|
|
|
|
function createInputFile()
|
|
{
|
|
$('.js-file-input').on('change', (event) => {
|
|
let target, file;
|
|
|
|
if ((target = $(event.currentTarget)[0]) && (file = target.files[0])) {
|
|
$(target).prev().text(file.name);
|
|
}
|
|
});
|
|
}
|
|
|
|
function createProductSpin()
|
|
{
|
|
const $quantityInput = $('#quantity_wanted');
|
|
|
|
$quantityInput.TouchSpin({
|
|
verticalbuttons: false,
|
|
verticalupclass: 'material-icons touchspin-up',
|
|
verticaldownclass: 'material-icons touchspin-down',
|
|
buttondown_class: 'btn btn-touchspin js-touchspin',
|
|
buttonup_class: 'btn btn-touchspin js-touchspin',
|
|
min: parseInt($quantityInput.attr('min'), 10),
|
|
max: 1000000
|
|
});
|
|
|
|
$('body').on('change keyup', '#quantity_wanted', (e) => {
|
|
$(e.currentTarget).trigger('touchspin.stopspin');
|
|
prestashop.emit('updateProduct', {
|
|
eventType: 'updatedProductQuantity',
|
|
event: e
|
|
});
|
|
});
|
|
}
|
|
|
|
// reviews click
|
|
$('.goreviews').click(function(e) {
|
|
e.preventDefault;
|
|
var reviewstab = $('#productCommentsBlock').parent();
|
|
var reviewstabid = reviewstab.attr('id');
|
|
var reviewstablink = $('a[href="#' + reviewstabid + '"]');
|
|
|
|
$("body,html").animate( {
|
|
scrollTop: $("#tabsection").offset().top - 170
|
|
}, 600 );
|
|
setTimeout( function() {
|
|
reviewstablink.click();
|
|
}, 200 );
|
|
|
|
|
|
});
|
|
|
|
|
|
// white color
|
|
function whiteborder()
|
|
{
|
|
$('.color').each(function() {
|
|
if( $(this).css('background-color') === 'rgb(255, 255, 255)') {
|
|
$(this).addClass('white');
|
|
}
|
|
});
|
|
}
|
|
|
|
// share
|
|
function shareclick() {
|
|
$('.share_text').click(function(e) {
|
|
e.preventDefault;
|
|
var share_dad = $('.share_text').parent('.social-sharing');
|
|
if (!share_dad.hasClass('click')) {
|
|
|
|
share_dad.addClass('click');
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateCounters() {
|
|
$(".countcontainer").each(function(e) {
|
|
var $roycountdown = $(this).find(".roycountdown");
|
|
var $roycount = $roycountdown.find(".roycount");
|
|
var $dataspecificpriceto = $roycount.attr('data-specific-price-to');
|
|
if ($roycountdown.length) {
|
|
$roycountdown.county({
|
|
endDateTime: new Date($dataspecificpriceto.replace(/-/g, "/")) , reflection: false, animation: 'none', theme: 'black',
|
|
titleDays:$roycount.data('days'),titleHours:$roycount.data('hours'),titleMinutes:$roycount.data('minutes'),titleSeconds:$roycount.data('seconds')
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|