(function (moduleId) { 'use-strict'; $(document).ready(function () { var context = {}; context.markingsByPosition = markingsByPosition; context.nbMarkings = 1; context.lastLoadedVariantId = initialVariant.id; context.products = []; context.logoFiles = []; var $productInput = $("input[name='product']"); var $variantInput = $("input[name='variant']"); var $markingLoader = $('#step-2-loader'); var $noColorOption = $('#noColorOption'); if(discountPrice == 0) { $('.show-for-discount').hide() } $markingLoader.hide(); // Clic thumbnail / Main img $('.sim-thumb').click(function () { $('#main-product-image').attr('src', $(this).data('image')); }) //Refresh when changing characteristics $('.attribute-filter-select').change(function (e) { var selectors = $('.attribute-filter-select') .map(function () { return this.value; }).get(); var values = []; for(var i=0; i < selectors.length; i++) { values.push(selectors[i].split(',')) } var result = values.reduce((a, b) => a.filter(c => b.includes(c))); if(result.length > 0) { window.location.href = window.location.href.split('?')[0] + '?variant=' + result[0]; } }) // shows and hides filtered items $('.filter-color-item').hide(); $('.filter-color-item').filter('.current-color-variant').show(); $('.filter-color-button').click(function () { var value = $(this).attr('data-filter'); $('.filter-color-item').not('.' + value).hide('3000'); $('.filter-color-item').filter('.' + value).show('3000'); }); // changes active class on filter buttons $('.filter-color-button').click(function () { $(this).siblings().removeClass('is-active'); $(this).addClass('is-active'); }); $('#description-redirect').click(function () { const contentWindow = $('#description-content'); $('html,body').animate({scrollTop: contentWindow.offset().top-($(window).height()/3)},'slow'); if(!contentWindow.hasClass('is-active')){ contentWindow.find('a').click(); } }) $('#characteristics-redirect').click(function () { const contentWindow = $('#characteristics-content'); $('html,body').animate({scrollTop: contentWindow.offset().top-($(window).height()/3)},'slow'); if(!contentWindow.hasClass('is-active')){ contentWindow.find('a').click(); } }) $('#decreasing-prices-redirect').click(function () { const contentWindow = $('#decreasing-prices-content'); $('html,body').animate({scrollTop: contentWindow.offset().top-($(window).height()/3)},'slow'); }) $('a.show-pdf').click(function () { $.get({ url: '/api/products/' + $productInput.val() +'/pdf', success: function (data) { const blob = b64toBlob(data.base64PDFValue, 'application/pdf'); const blobUrl = URL.createObjectURL(blob); window.open(blobUrl); } }) }) $('a.wishlist-toggle').click(function () { const element = $(this); const svg = $(this).children()[0]; if ($(svg).hasClass("detail-add-wishlist")) { const form = $('#wishList-add-form') const rowId = form.find("input[name='rowId']").val(); const variantId = form.find("input[name='variantId']").val(); $.ajax({ url: "/api/wishList", type: "PUT", data: { rowId: rowId, variantId: variantId }, success: function () { element.foundation("destroy") new Foundation.Tooltip(element, {tipText: element.attr("data-title-remove")}); $(svg).removeClass("detail-add-wishlist").addClass("detail-remove-wishlist"); $(svg).removeClass("far").addClass("fas"); } }); } else { const form = $('#wishList-remove-form') const rowId = form.find("input[name='rowId']").val(); $.ajax({ url: "/api/wishList", method: "DELETE", data: {rowId: rowId}, success: function (success) { element.foundation("destroy") new Foundation.Tooltip(element, {tipText: element.attr("data-title-add")}); $(svg).removeClass("detail-remove-wishlist").addClass("detail-add-wishlist"); $(svg).removeClass("fas").addClass("far"); } }); } }); const b64toBlob = (b64Data, contentType='', sliceSize=512) => { const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) { const slice = byteCharacters.slice(offset, offset + sliceSize); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } const blob = new Blob(byteArrays, {type: contentType}); return blob; } // Share social (function () { var popupCenter = function (url, title, popupWidth, popupHeight) { var popupWidth = 750; var popupHeight = 450; var windowLeft = window.screenLeft || window.screenX; var windowTop = window.screenTop || window.screenY; var windowWidth = window.innerWidth || document.documentElement.clientWidth; var windowHeight = window.innerHeight || document.documentElement.clientHeight; var popupLeft = windowLeft + windowWidth / 2 - popupWidth / 2; var popupTop = windowTop + windowHeight / 2 - popupHeight / 2; var popup = window.open(url, title, 'scrollbars=yes, width=' + popupWidth + ', height=' + popupHeight + ', top=' + popupTop + ', left=' + popupLeft); popup.focus(); return true; }; document.querySelector('.share_facebook').addEventListener('click', function (e) { e.preventDefault(); var url = this.getAttribute('data-url'); var title = this.getAttribute('data-title'); var shareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url); popupCenter(shareUrl, title); }); document.querySelector('.share_twitter').addEventListener('click', function (e) { e.preventDefault(); var url = this.getAttribute('data-url'); var title = this.getAttribute('data-title'); var shareUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.title) + "&url=" + encodeURIComponent(url); popupCenter(shareUrl, title); }); document.querySelector('.share_linkedin').addEventListener('click', function (e) { e.preventDefault(); var url = this.getAttribute('data-url'); var title = this.getAttribute('data-title'); var shareUrl = "https://www.linkedin.com/shareArticle?mini=true&url=" + encodeURIComponent(url); popupCenter(shareUrl, title); }); document.querySelector('.share_pinterest').addEventListener('click', function (e) { e.preventDefault(); var url = this.getAttribute('data-url'); var title = this.getAttribute('data-title'); var shareUrl = "http://pinterest.com/pin/create/button/?url=" + encodeURIComponent(url); popupCenter(shareUrl, title); }); })(); var finish = $('#personalization').data('finish'); var next = $('#personalization').data('next'); var previous = $('#personalization').data('previous'); // Step Wizard $("#personalization").steps({ headerTag: "h3", bodyTag: ".personalization-step", transitionEffect: "slideLeft", autoFocus: true, labels: { finish: finish, next: next, previous: previous }, onStepChanging: function (event, currentIndex, newIndex) { function loadVariantMarkings(productId, variantId) { if(variantId == null || variantId === "") { return false; } if(context.lastLoadedVariantId === variantId) { return true; } $markingLoader.show(); $.get({ url: '/api/products/' + productId +'/variant/' + variantId + '/markings', success: function (markingsByPosition) { context.markingsByPosition = markingsByPosition; let $markings = $('#markings'); $markings.empty(); var $markingBlock = emptyMarkingBlock.clone(true); var $selectBlock = $markingBlock.find('select.marking-position-select'); $selectBlock.find('option').not(':first').remove(); _.forEach(markingsByPosition, function (markingByPosition) { var $option = $(''); $selectBlock.append($option); }); $markings.append($markingBlock); addInputChangeTriggers() }, async: false }); context.lastLoadedVariantId = variantId; $markingLoader.hide(); return true; } if(currentIndex === 0 && newIndex === 1) { return loadVariantMarkings($productInput.val(), $variantInput.val()); } return true; }, onFinished: refreshSummaryBlock }); $("a[href='#finish']").click(function () { const estimatingWindow = $('#estimating'); $('html,body').animate({scrollTop: estimatingWindow.offset().top-95}, 'fast'); }); // Step 2 - Add picture $(".edit-marking, .marking-check").click(function () { var marking = $(this).closest('.marking'); marking.find('.marking-check').prop('checked', false); var markingArea = marking.find('.marking-area'); var btnCloseMarking = marking.find('.btn-close-marking'); var valideMarking = marking.find('.valid-marking'); var changeMarking = marking.find('.change-marking'); markingArea.removeClass('dpn'); markingArea.addClass('dpb'); btnCloseMarking.removeClass('dpn'); btnCloseMarking.addClass('dpb'); valideMarking.removeClass('dpn'); valideMarking.addClass('dpb'); changeMarking.removeClass('dpb'); changeMarking.addClass('dpn'); }); $(".btn-close-marking").click(function () { const marking = $(this).closest('.marking'); hideMarkingArea(marking) const length = marking.find('input[name="length"]').val(); const width = marking.find('input[name="width"]').val(); if (width && length && width !== "" && length !== "") { const estimatingWindow = $('#estimating'); $('html,body').animate({scrollTop: estimatingWindow.offset().top - 95}, 'fast'); marking.find('.marking-check').prop('checked', true); } refreshSummaryBlock() }); $(".valid-marking").click(function (e) { const marking = $(this).closest('.marking'); const length = marking.find('input[name="length"]').val(); const width = marking.find('input[name="width"]').val(); if (width && length && width !== "" && length !== "") { const estimatingWindow = $('#estimating'); hideMarkingArea(marking) $('html,body').animate({scrollTop: estimatingWindow.offset().top-95}, 'fast'); marking.find('.marking-check').prop('checked', true); refreshSummaryBlock() } }); $(".reset-marking").click(function () { const estimatingWindow = $('#estimating'); $('html,body').animate({scrollTop: estimatingWindow.offset().top-95}, 'fast'); const marking = $(this).closest('.marking'); const markingCheck = marking.find('.marking-check'); markingCheck.prop('checked', false); hideMarkingArea(marking) marking.find('[name=length]').val(null); marking.find('[name=width]').val(null); marking.find('[name=numberOfColor]').prop('selectedIndex', 0); marking.find('[name=comments]').val(null); marking.find('[name=logo]').val(null); marking.find('.logo-preview img').remove(); marking.find('.no-logo').show(); refreshSummaryBlock() }); function hideMarkingArea(source) { var markingArea = source.find('.marking-area'); var btnCloseMarking = source.find('.btn-close-marking'); var validMarking = source.find('.valid-marking'); var changeMarking = source.find('.change-marking'); markingArea.removeClass('dpb'); markingArea.addClass('dpn'); btnCloseMarking.removeClass('dpb'); btnCloseMarking.addClass('dpn'); validMarking.removeClass('dpb'); validMarking.addClass('dpn'); changeMarking.removeClass('dpn'); changeMarking.addClass('dpb'); } $(".valid-quantity").click(function (e) { refreshSummaryBlock() }); computeQuantityInput(); $(".quantity-input").change(function (e) { computeQuantityInput() }); function computeQuantityInput() { const value = parseInt($(".quantity-input").val()) const min = $(".quantity-input").attr('min') if(value < min || value == null || isNaN(value)) { $(".quantity-input").val(min) } refreshSummaryBlock() } $('.add-to-cart').click(function () { $('.cart-form').submit(); }); $('.cart-form').submit(function(e) { startAddToCartLoading() e.preventDefault() const form = $(this); const url = form.attr('action'); const method = form.attr('method'); const data = new FormData(this) $.ajax({ type:method, url: url, data: data, contentType: false, processData: false, success: function() { $(".toggleShoppingCartModalBtn").click(); toastr.success(addProductSuccess); }, complete: function () { endAddToCartLoading(); } }) }); function startAddToCartLoading() { $('.add-to-cart').attr("disabled", true) $('.add-to-cart-spinner').attr("hidden", false) } function endAddToCartLoading() { $('.add-to-cart').attr("disabled", false) $('.add-to-cart-spinner').attr("hidden", true) } $(document).foundation(); $('input.logo').on('change', function () { var $parent = $(this).closest('.step2-marking-parent'); $parent.find('.logo-preview img').remove(); var file = this.files[0]; if(file == null) { $parent.find('.no-logo').show(); } else { if(file.size >= 1000000) { file = null; $parent.find('.no-logo').show(); $parent.find('.max-size').addClass("text-red") $parent.find('.accepted_files').addClass("hide") } $parent.find('.no-logo').hide(); if(file != null){ if($parent.find('.max-size').hasClass("text-red")){ $parent.find('.max-size').removeClass("text-red"); } if(!$parent.find('.accepted_files').hasClass("hide")){ $parent.find('.accepted_files').addClass("hide"); } if($parent.find('.accepted_files').hasClass("text-red")){ $parent.find('.accepted_files').removeClass("text-red"); } if(file.type === "application/pdf" || file.type === "application/postscript" || file.type === "image/png" || file.type === "image/jpg" || file.type === "image/jpeg" || file.type === "image/webp" || file.type === "image/avif"){ if(file.type !== "application/pdf" && file.type !== "application/postscript"){ var $img = $(""); $img.attr('src', window.URL.createObjectURL(file)); $parent.find('.logo-preview').append($img); } else { $parent.find('.accepted_files').addClass("text-green"); $parent.find('.accepted_files').removeClass("hide"); } } else { file = null; const marking = $(this).closest('.marking'); marking.find('[name=logo]').val(null); $parent.find('.accepted_files').removeClass("text-green"); $parent.find('.accepted_files').addClass("text-red"); $parent.find('.accepted_files').removeClass("hide"); } } } }) function updateEditMarkingBlock($parent, marking) { const lengthInput = $parent.find('input[name="length"]') const widthInput = $parent.find('input[name="width"]') $parent.find('.marking-length').each(function () { this.innerText = marking.maxLength;}) $parent.find('.marking-width').each(function () {this.innerText = marking.maxWidth;}) $parent.find('.marking-name').text(marking.position); $parent.find('.marking-technology-label').text(marking.technology); lengthInput.attr('max', marking.maxLength) widthInput.attr('max', marking.maxWidth) lengthInput.val(marking.maxLength) widthInput.val(marking.maxWidth) $parent.find('.marking-check').prop('checked', false); const $numberOfColorSelect = $parent.find('select[name="numberOfColor"]'); $numberOfColorSelect.empty(); if(marking.maxNumberOfColor === 0 || marking.maxNumberOfColor == null) { $numberOfColorSelect.append($noColorOption); } else { for(var i = 1; i<=marking.maxNumberOfColor ; i++) { var $option = $(''); $numberOfColorSelect.append($option) } } refreshSummaryBlock() } $('.marking-position-select').on('change', function (change) { var $positionSelect = $(this); var $parent = $positionSelect.closest('.step2-marking-parent'); var $markingTechnologyBlock = $parent.find('.marking-technology-select-block'); var $markingAreaBlock = $parent.find('.marking-area-block').hide(); $markingTechnologyBlock.find('select').remove(); var positionSelectValue = $positionSelect.val(); if(positionSelectValue == null || positionSelectValue === "") { $markingAreaBlock.hide(); $markingTechnologyBlock.hide(); } else { $markingAreaBlock.show(); $markingTechnologyBlock.show(); if(positionSelectValue === 'onDemandPosition') { positionSelectValue = null; } var $technologySelect = $(''); var marking = _.find(context.markingsByPosition, function (markingByPosition) { return markingByPosition.position === positionSelectValue; }); _.forEach(marking.markings, function (marking, index) { var $option = $(''); $technologySelect.append($option); if (index === 0) { $technologySelect.val(marking.id) updateEditMarkingBlock($parent, marking); } }); $technologySelect.on('change', function () { var position = positionSelectValue; var markingId = $(this).val(); var markingByPosition = _.find(context.markingsByPosition, function (markingByPosition) { return markingByPosition.position === position }); var marking = _.find(markingByPosition.markings, function (marking) { return marking.id === markingId }); updateEditMarkingBlock($parent, marking); }); $markingTechnologyBlock.append($technologySelect); } }); var emptyMarkingBlock = $('.step2-marking-parent').clone(true); $('#add-marking').on('click', function (event) { event.preventDefault(); context.nbMarkings++; var $newMarkingBlock = emptyMarkingBlock.clone(true); var newId = "logo-" + context.nbMarkings; $newMarkingBlock.find('input[name="logo"]').attr('id', newId); $newMarkingBlock.find('label.icon-label').attr('for', newId); $('#markings').append($newMarkingBlock) addInputChangeTriggers() }); function hasValues(marking) { return (marking.markingId != null && marking.markingId != "") || (marking.length != null && marking.length != "") || (marking.width != null && marking.width != "") || (marking.numberOfColors != null && marking.numberOfColors != "") } function refreshSummaryBlock() { const $markings = $('.step2-marking-parent'); const productId = $('input[name=product]').val(); const variantId = $('[name=variant]').val(); const quantity = $('[name=quantity]').val(); const comment = $('[name=productComment]').val(); var cartRowMock = { productId: productId, variantId: variantId, quantity: quantity, markings: [], comment: comment }; context.logoFiles = [] $markings.each(function (index, element) { var $element = $(element); var markingElement = { markingId : $element.find('[name=marking]').val(), technology: $element.find('[name=marking]').text(), position: $element.find('[name=marking-position]').val(), length : $element.find('[name=length]').val(), width : $element.find('[name=width]').val(), numberOfColors : $element.find('[name=numberOfColor]').val(), comment: $element.find('[name=comments]').val() }; if (markingElement.width && markingElement.length && markingElement.width !== "" && markingElement.length !== "") { const logoFile = $element.find('input.logo')[0].files[0] cartRowMock.markings.push(markingElement); context.logoFiles.push(logoFile); } }); context.products = [cartRowMock]; $.ajax({ url: '/api/compute-cart-row', type: 'PUT', contentType : 'application/json', data: JSON.stringify(cartRowMock), dataType: 'json', success: function(result) { if (result.items && result.items.length > 0) { var item = result.items[0]; var grossUnitPrice = item.productUnitPrice ? item.productUnitPrice.gross : 0; var netUnitPrice = item.productUnitPrice ? item.productUnitPrice.net : 0; var grossUnitDiscountedPrice = item.productUnitDiscount; var grossTotal = item.totalPrice ? item.totalPrice.gross : 0; var netTotal = item.totalPrice ? item.totalPrice.net : 0; var vatValue = item.vat.value; var grossMarkingUnitPrice = item.markingUnitPrice ? item.markingUnitPrice.gross : 0; if(grossUnitDiscountedPrice > 0) { $('.show-for-discount').show() } else { $('.show-for-discount').hide() } if(item.markings.length > 0) { $(".aside-button-with-perso").removeClass('dpn'); $(".aside-button-with-perso").addClass('dpb'); $(".aside-button-without-perso").addClass('dpn'); } else { $(".aside-button-without-perso").removeClass('dpn'); $(".aside-button-without-perso").addClass('dpb'); $(".aside-button-with-perso").addClass('dpn'); } $('#summary-quantity').text(quantity); $('#summary-unit-price-gross').text(grossUnitPrice.toFixed(2)); $('#summary-unit-price-net').text(netUnitPrice.toFixed(2)); $('#summary-unit-price-discounted').text((grossUnitPrice - grossUnitDiscountedPrice).toFixed(2)); $('#summary-marking-block').removeClass('dpn'); $('#summary-marking-block-gross').text(grossMarkingUnitPrice.toFixed(2)); $('#summary-vat').text(vatValue.toFixed(2)); $('#summary-total-gross').text(grossTotal.toFixed(2)); $('#summary-total-net').text(netTotal.toFixed(2)); } } }); } function initializeSelectedAttributes() { _.forEach(initialVariant.attribute_groups, function (variantGroups) { var matchingAttribute = _.find(allAttributesGroup, function (attributeGroup) { return attributeGroup.id === variantGroups.id; }); var match = _.find(matchingAttribute.attributes, function (attributesByVariant) { return attributesByVariant.variantIds.indexOf(initialVariant.id) >= 0; }); $('select.attribute-filter-select[name=' + matchingAttribute.id + ']').val(match.stringedVariantIds) }) } function initializeSelectAttributeEvent() { $('select.attribute-filter-select').on('change', function() { 'use-strict'; var listOfPossibleVariantIds = _.map($('select.attribute-filter-select').toArray(), function(it) { return it.value.split(',') }) var variantIdMatchingAllCriterias = _.spread(_.intersection)(listOfPossibleVariantIds)[0]; if(variantIdMatchingAllCriterias != null) { $('.none-matching').hide(); $('.add-to-cart').prop('disabled', false); var variant = _.find(variants, function (variant) { return variant.id === variantIdMatchingAllCriterias }) replaceSearchCriteriaWithoutReload("variant", variant.id); $('span.stock-value').text(variant.stock); $variantInput.val(variant.id); } else { $variantInput.val(null); $('.none-matching').show(); $('.add-to-cart').prop('disabled', true); } }) } function initVariantColors() { distinctColorVariants.forEach(function (variant) { let background; let hexaCodes = variant.colorHexaCodes; if(hexaCodes.length === 1) { background = '#' + hexaCodes[0]; } else if(hexaCodes.length === 2) { background = 'linear-gradient(to right, #' + hexaCodes[0] + ' 50%, #' + hexaCodes[1] + ' 50%)'; } else { let gradientSizePercentage = Math.floor(100 / hexaCodes.length); const gradientSteps = hexaCodes.map(function (code, index) { if(index === 0 || index === hexaCodes.length - 1) { return '#' + code + ' ' + gradientSizePercentage + '% '; } else { return '#' + code + ' ' + gradientSizePercentage + '% ' + gradientSizePercentage * (index + 1) + '% '; } }).join(', '); background = 'conic-gradient(' + gradientSteps + ')'; } $('.variantWithId-' + variant.defaultColorId).css({'background': background}); }); } $('#0085_product_detail_express_quotation_button').on('click', function () { var promises = []; context.logoFiles.forEach((file, index) => { var formData = new FormData() formData.append('logo', file) promises.push($.ajax({ url: "/api/assets/marking-logo", type: 'POST', data: formData, processData: false, contentType: false, success: function (data) { context.products[0].markings[index].logoId = data } })); }) Promise.all(promises).then(_ => pushExpressQuotationProducts(context.products)); }); function addInputChangeTriggers() { $('input[name="logo"], input[name="length"], input[name="width"]').change(function(){ const markingArea = $(this).closest('.marking-area') const lengthInput = markingArea.find('[name=length]') const length = parseInt(lengthInput.val()) const lengthMax = parseInt(lengthInput.attr("max")) const widthInput = markingArea.find('[name=width]') const width = parseInt(widthInput.val()) const widthMax = parseInt(widthInput.attr("max")) if(length > lengthMax) { lengthInput.val(lengthMax) } if(width > widthMax) { widthInput.val(widthMax) } if(length && length <= 0) { lengthInput.val(1) } if(width && width <= 0) { widthInput.val(1) } if(length && width) { markingArea.find('.valid-marking').removeClass("disabled") } else { markingArea.find('.valid-marking').addClass("disabled") } }); } addInputChangeTriggers(); initializeSelectedAttributes(); initializeSelectAttributeEvent(); initVariantColors(); refreshSummaryBlock(); $('select[name="carrier-area"]').change(function () { var selectedCarrierArea = $('select[name="carrier-area"]').val(); var priceForSelectedCarrierArea = shippingPrices[selectedCarrierArea]; if(priceForSelectedCarrierArea != null && priceForSelectedCarrierArea.price != null) { $('.shipping-price-quoation').hide(); $('.shipping-price').show(); $('.shipping-price-value').text(priceForSelectedCarrierArea.price); $('input[name="shipping"]').val(priceForSelectedCarrierArea.zone); } else { $('.shipping-price-quoation').show(); $('.shipping-price').hide(); $('input[name="shipping"]').val(selectedCarrierArea); } }).change(); $('.img-extend').on('click', function () { var $orbitImages = $('.orbit-image'); if ($orbitImages.length > 1) { var $productImage = $('#main-product-image'); var $orbitImg = $('.orbit-image[src="' + $productImage.attr('src') + '"]').closest('.orbit-slide'); $('#zoomed-slide-orbit').foundation('changeSlide', true, $orbitImg); } $(window).trigger('resize'); }); $('.product-image-thumbnail-0085').slick({ dots: false, prevArrow: '', nextArrow: '', slidesToShow: 4, slidesToScroll: 1, touchMove: true, autoplay: false }); }); })('u-3d3a6af0-495b-4670-abde-4bdae6544709');