Files
newwalls.pl/themes/ayon/assets/js/custom.js
Jacek Pyziak 7ac795ba3f feat(new-layout): add-to-cart handler + piece configurator (Phase 02 plans 01-02)
Plan 02-01 (piece/crop configurator, complete):
- #piece reuse z shared partial product-cover-thumbnails.tpl
- 8 hidden inputs (is_crop, crop_pos_x/y, crop_width/height, piece_bg_top/left, is_reflection) w formie #add-to-cart-or-refresh
- Defensive setup w custom.js: setTimeout(600) init, no-op override totalpriceinfospecific/prod, DOM stubs
- CSS scope pod body#product .product-size-data .product-size-data--new

Plan 02-02 (add-to-cart submission, PARTIAL):
- Capture-phase native addEventListener (useCapture=true) blokuje PS core crash
  (button poza formą w nowym layoucie — closest('form') zwracało 0)
- Manualny AJAX POST: form.serialize() + qty + add=1&action=update do /pl/koszyk
- Fancybox-blocker port z custom.js:327 (nie odpalał się bo selector 0 matches)
- Manual sync is_crop/crop_width/height przed POST (obejście crash checkedHandler)
- prestashop.emit('updatedCart') + defensive blockcart refresh fetch
- Loading spinner + success flash CSS
- Inline handler mirror w product.tpl z idempotency guard (window.__p02p02Bound)
  — cache-buster dla browser cachowanego custom.js

Deferred do Plan 02-03 (customization + modal blocker dla production):
- Customization nie zapisuje się (squaremeter hook gate'owany discretion=on + brak dimension fields)
- Success modal (wymaga POST do /module/ps_shoppingcart/ajax)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 23:33:45 +02:00

1137 lines
40 KiB
JavaScript

/*
* Custom code goes here.
* A template should always ship with an empty custom.js
*/
$( document ).ready(function() {
if ( sessionStorage.getItem("wcagColor") ){
jQuery("body").addClass("wcag");
jQuery(".switchColor").toggleClass('customInput')
}
});
var size = 1;
var sizeMin = 1;
var sizeMax = 5;
if ( sessionStorage.getItem("wcagSize") ){
size = sessionStorage.getItem("wcagSize");
WcagSetSize();
}
jQuery(".button-wcag-size-up").click(function(){
WcagSizeUp();
});
jQuery(".button-wcag-size-down").click(function(){
WcagSizeDown();
});
jQuery("#button-wcag").click(function(){
jQuery(".switchColor").toggleClass('customInput')
jQuery("body").toggleClass("wcag");
if ( jQuery("body").hasClass("wcag") ){
sessionStorage.setItem("wcagColor", "true");
contrastModeBackgroundWhite()
}
else{
sessionStorage.removeItem("wcagColor");
removecontrastModeBackgroundWhite()
}
});
$(document).on("click", ".toggle-listing-filters", function(){
jQuery("main").toggleClass("filtersHidden");
});
function WcagSizeUp(){
size = size + 1;
if (size > sizeMax) size = sizeMax;
WcagSetSize();
}
function WcagSizeDown(){
size = size - 1;
if (size < sizeMin) size = sizeMin;
WcagSetSize();
}
function WcagSetSize(){
WcagResetSize();
if (size != 1){
jQuery("body").addClass("size-"+size);
sessionStorage.setItem("wcagSize", size);
}
}
function WcagResetSize(){
jQuery("body").removeClass("size-2");
jQuery("body").removeClass("size-3");
jQuery("body").removeClass("size-4");
jQuery("body").removeClass("size-5");
sessionStorage.removeItem("wcagSize");
}
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id )) {
document.getElementById(elmnt.id ).onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
var fixedTop = (elmnt.offsetTop - pos2);
var fixedLeft = (elmnt.offsetLeft - pos1);
if (fixedTop < 0) fixedTop = 0;
if (fixedLeft < 0) fixedLeft = 0;
// 2 to border
if (fixedLeft + jQuery(elmnt).width() + 2 > jQuery(elmnt).parent().width() ) fixedLeft = jQuery(elmnt).parent().width() - jQuery(elmnt).width() - 2;
if (fixedTop + jQuery(elmnt).height() + 2 > jQuery(elmnt).parent().height() ) fixedTop = jQuery(elmnt).parent().height() - jQuery(elmnt).height() - 2;
elmnt.style.top = fixedTop + "px";
elmnt.style.left = fixedLeft + "px";
$('.piece-left-positon').html(fixedLeft);
$('.piece-top-positon').html(fixedTop);
prod();
MovePieceBackground(fixedLeft, fixedTop);
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
function CheckPieceBorders(){
var elmnt = document.getElementById("piece");
var fixedTop = parseFloat(elmnt.style.top);
var fixedLeft = parseFloat(elmnt.style.left);
if (fixedTop < 0) fixedTop = 0;
if (fixedLeft < 0) fixedLeft = 0;
// 2 to border
if (fixedLeft + jQuery(elmnt).width() + 2 > jQuery(elmnt).parent().width() ) fixedLeft = jQuery(elmnt).parent().width() - jQuery(elmnt).width() - 2;
if (fixedTop + jQuery(elmnt).height() + 2 > jQuery(elmnt).parent().height() ) fixedTop = jQuery(elmnt).parent().height() - jQuery(elmnt).height() - 2;
elmnt.style.top = fixedTop + "px";
elmnt.style.left = fixedLeft + "px";
MovePieceBackground(fixedLeft, fixedTop);
}
var pieceEverEnabled = false;
var checkedHandler = (value) => {
if (value.is(":checked")){
jQuery(".piece-size-values").fadeTo("slow",1);
jQuery("#piece").fadeIn();
jQuery("#custom-wallpaper-price").fadeTo("slow",1);
jQuery("#custom-wallpaper-price-label").fadeTo("slow",1);
jQuery("#piece-width").attr('readonly', false);
jQuery("#piece-height").attr('readonly', false);
jQuery(".images-container .product-images li.thumb-container .thumb").addClass("dark");
var elmnt = document.getElementById("piece");
var leftSpacing = jQuery(elmnt).parent().width() / 2 - jQuery(elmnt).width() / 2 - 2;
var topSpacing = jQuery(elmnt).parent().height() / 2 - jQuery(elmnt).height() / 2 - 2;;
if ( $("#product_is_crop").val() == 0 ){ jQuery("#piece").css("top", topSpacing);
jQuery("#piece").css("left",leftSpacing);}
MovePieceBackground(leftSpacing, topSpacing);
dragElement(document.getElementById("piece"));
jQuery("#piece-width").trigger("change");
jQuery("#piece-height").trigger("change");
jQuery("#product_is_crop").val(1);
$('#piece-size-view').html($("#piece-width").val()+'x'+$("#piece-height").val());
}else{
jQuery(".piece-size-values").fadeTo("slow",0.23);
jQuery("#piece").fadeOut();
jQuery("#custom-wallpaper-price").fadeTo("slow",0.23);
jQuery("#custom-wallpaper-price-label").fadeTo("slow",0.23);
jQuery("#piece-width").attr('readonly', true);
jQuery("#piece-height").attr('readonly', true);
jQuery(".images-container .product-images li.thumb-container .thumb").removeClass("dark");
jQuery("#product_is_crop").val(0);
$('#piece-size-view').html('Wybierz rozmiar');
}
};
jQuery("#checkbox-piece").change(function(){
checkedHandler(jQuery("#checkbox-piece"))
});
jQuery(document).ready(function() {
jQuery('#checkbox-piece').prop('checked', false);
$('#piece-height').val(50);
$('#piece-width').val(50);
checkedHandler(jQuery("#checkbox-piece"))
});
jQuery("#group_5").click(function() {
jQuery('#checkbox-piece').prop('checked', true);
setTimeout(function() {$('#checkbox-piece').trigger('change');
$("#piece").css('top', parseInt($('.piece-top-positon').html())+"px");
jQuery("#piece").css('left', parseInt($('.piece-left-positon').html())+"px");
jQuery("#piece").css("background-position", parseInt('-'+$('.piece-left-positon').html())+"px "+parseInt('-'+$('.piece-top-positon').html())+"px");
}, 2000);
});
jQuery(".wariant_kolorystyczny").click(function() {
jQuery('#checkbox-piece').prop('checked', true);
setTimeout(function() {
checkedHandler(jQuery("#checkbox-piece"));
if ($("#product_is_reflection").val() == '1'){
$("#piece").addClass("mirrored");
$(".product-images img.thumb").addClass("mirrored");
}
else {
$("#piece").removeClass("mirrored");
$(".product-images img.thumb").removeClass("mirrored");
}
$('#checkbox-piece').trigger('change');
$("#piece").css('top', parseInt($('.piece-top-positon').html())+"px");
jQuery("#piece").css('left', parseInt($('.piece-left-positon').html())+"px");
if ($("#product_is_reflection").val() == '1'){
jQuery("#piece").css("background-position", parseInt($('.piece-left-positon').html()) + $("#piece").width() +"px "+parseInt('-'+$('.piece-top-positon').html())+"px");
}
else {
jQuery("#piece").css("background-position", parseInt('-'+$('.piece-left-positon').html())+"px "+parseInt('-'+$('.piece-top-positon').html())+"px");
}
}, 2000);
});
function MovePieceBackground(left, top){
top = -top - 1;
left = -left - 1;
//if (jQuery("#piece").hasClass("mirrored")){
if ($("#product_is_reflection").val() == '1'){
left = -left + jQuery("#piece").width();
}
jQuery("#piece").css("background-size", jQuery("#piece").parent().width());
jQuery("#piece").css("background-position", left+"px "+top+"px");
jQuery("#piece_bg_left").val(left);
jQuery("#piece_bg_top").val(top);
//1000 500
jQuery("#product_crop_pos_x").val( Math.ceil(( 501 * Math.ceil(parseFloat(jQuery("#piece").css('left')) )) / jQuery("#piece").parent().width() ));
jQuery("#product_crop_pos_y").val( Math.ceil(( 301 * Math.ceil(parseFloat(jQuery("#piece").css('top')) )) / jQuery("#piece").parent().height() ));
}
jQuery("#piece-width").change(function() {
if (jQuery(this).val() > 500) jQuery(this).val(500);
if (jQuery(this).val() < 50) jQuery(this).val(50);
jQuery("#piece").width(this.value * 0.2 + "%");
$('.piece-width-px').html($('#piece-width').val());
$('#quantity_wanted_alt').val($('#piece-width').val()/100);
totalpriceinfospecific();
jQuery("#product_crop_width").val(jQuery("#piece-width").val());
CheckPieceBorders();
});
jQuery("#piece-height").change(function() {
if (jQuery(this).val() > 300) jQuery(this).val(300);
if (jQuery(this).val() < 50) jQuery(this).val(50);
jQuery("#piece").height(this.value * 0.3333 + "%");
$('.piece-height-px').html($('#piece-height').val());
$('#quantity_wanted_alth').val($('#piece-height').val()/100);
totalpriceinfospecific();
jQuery("#product_crop_height").val(jQuery("#piece-height").val());
CheckPieceBorders();
});
var basePrice = jQuery("#product_base_price").val();
function WallpaperMirrorReflection(){
jQuery(".product-images img.thumb").toggleClass("mirrored");
if (jQuery(".product-images img.thumb").hasClass("mirrored")){
jQuery("#piece").addClass("mirrored");
jQuery("#product_is_reflection").val(1);
}
else{
jQuery("#piece").removeClass("mirrored");
jQuery("#product_is_reflection").val(0);
}
CheckPieceBorders();
}
jQuery("#button-mirror-reflection").click(function() {
WallpaperMirrorReflection();
});
jQuery(document).ready(function(){
$('#add-to-cart-or-refresh button').on('click', function(e){
if (!$("#checkbox-piece").is(":checked")) {
e.stopPropagation();
e.preventDefault();
$.fancybox({
minWidth: 800,
maxWidth: 1000,
padding: 30,
height: 100,
content: 'Proszę wybrać rozmiar i wycinek tapety przed dodaniem jej do koszyka.'
});
}
});
});
jQuery(document).ready(function(){
if ( jQuery("body").hasClass("wcag") ){
contrastModeBackgroundWhite()
} else {
removecontrastModeBackgroundWhite()
}
jQuery("#textSearch").change(function(){
if (jQuery("#textSearch").val().length >= 1){
jQuery("#clearTextSearch").fadeIn();
}else{
ExcludeTextSearch();
}
if (jQuery("#textSearch").val().length >= 1){
var fullUrl = window.location.href;
if (fullUrl.indexOf("?") >= 0){
fullUrl = fullUrl + "&";
}else{
fullUrl = fullUrl + "?";
}
fullUrl = fullUrl + "text="+jQuery("#textSearch").val();
prestashop.emit("updateFacets",fullUrl);
}
});
jQuery("#clearTextSearch").click(function(){
ExcludeTextSearch();
});
});
function ExcludeTextSearch(){
jQuery("#textSearch").val("");
var fullUrl = window.location.href;
if (fullUrl.indexOf("?") >= 0){
fullUrl = fullUrl + "&";
}else{
fullUrl = fullUrl + "?";
}
fullUrl = fullUrl + "text=";
prestashop.emit("updateFacets",fullUrl);
jQuery("#clearTextSearch").fadeOut();
}
function contrastModeBackgroundWhite(){
$(".contrastModeBackground").children().attr('style', 'background-color: transparent !important');
$(".contrastModeBackground").attr('style', 'background-color: transparent !important')
}
function removecontrastModeBackgroundWhite(){
$(".contrastModeBackground").children().removeAttr('style');
$(".contrastModeBackground").removeAttr('style')
}
// JP
$(document).on('click', '.fancybox-material-controls', function() {
$('html').animate({scrollTop: $('.pp_stick_parent').offset().top - 150});
priceDisplay = parseFloat($('.current-price').text().replace(/[^0-9\,.]/g, '')).toFixed(2);
$.fancybox({
minWidth: 800,
maxWidth: 1000,
padding: 0,
content: `
<div class="fancybox-material-box">
<h3 style="text-align: center; padding:10px; margin: 10px 0 20px 0;">Wybierz materiał</h3>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Canvas</span>
<button id="fancy-material-btn" class="btn" data-value="9">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Concre</span>
<button id="fancy-material-btn" class="btn" data-value="19">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Craft</span>
<button id="fancy-material-btn" class="btn" data-value="20">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Extra Fine</span>
<button id="fancy-material-btn" class="btn" data-value="16">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Fibro</span>
<button id="fancy-material-btn" class="btn" data-value="21">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Linen</span>
<button id="fancy-material-btn" class="btn" data-value="22">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Novella</span>
<button id="fancy-material-btn" class="btn" data-value="23">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Ruta</span>
<button id="fancy-material-btn" class="btn" data-value="24">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Trapan</span>
<button id="fancy-material-btn" class="btn" data-value="25">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
<div class="col-xs-12 material-canvas" style="padding:20px;">
<div class="row">
<div class="col-xs-12">
<span>Tapeta winylowa na fizelinie Zebra</span>
<button id="fancy-material-btn" class="btn" data-value="26">
Wybierz (${priceDisplay} PLN/m2) <i class="material-icons">chevron_right</i>
</button>
</div>
</div>
</div>
</div>
`
});
});
$(document).on('click', '.fancybox-size-controls', function() {
console.log('t');
$('#checkbox-piece').prop('checked', true);
$('#checkbox-piece').trigger('change');
// Phase 02 Plan 02-01: defensive offset check — .pp_stick_parent istnieje tylko w starym layoucie.
// Bez tego guard'a .offset() zwraca undefined w nowym layoucie i handler aborts przed $.fancybox().
var $ppStick = $('.pp_stick_parent');
if ($ppStick.length) {
$('html').animate({scrollTop: $ppStick.offset().top - 100});
}
$.fancybox({
maxWidth: 600,
minHeight: 420,
padding: 0,
content: '<h3 style="text-align: center; padding:10px; margin: 10px 0 20px 0;">Wymiary tapety</h3><div class="fancy-piece-size-values" style="padding:10px; text-align: center;"><label for="fancy-piece-width">Szerokość</label><input type="number" min="50" max="500" value="'+$('#piece-width').val()+'" id="fancy-piece-width" style="padding: 5px; text-align: center; margin: 0 10px;"><span class="fancy-piece-divider">X</span><input type="number" min="50" max="300" value="'+$('#piece-height').val()+'" id="fancy-piece-height" style="padding: 5px; text-align: center; margin: 0 10px;"><label for="piece-height">Wysokość</label><p style="margin-bottom:0px"><small>&nbsp;</small><small class="valid-width-alert" style="display:none">Proszę o podanie szerokości z przedziału od 50 do 500.</small><small class="valid-height-alert" style="display:none">Proszę o podanie wysokości z przedziału od 50 do 300.</small><small class="valid-alert" style="display:none">Proszę o podanie wysokości i szerokości oba pola są wymagane</small></p></div><div style="background: #dfdfdf; padding: 10px;margin: 10px 0 20px 0; text-align: center; font-size:11px;"><strong>Dodaj 3-6 cm na dodatkowy margines</stronsag><br/>Ponieważ ściany i sufit często nie są całkowicie równe, najlepiej dodać od trzech do sześciu centymetrów do zmierzonej szerokości i wysokości. Będą one stanowić dodatkowy margines przydatny podczas montażu tapety.</div><div class="button-content" style="text-align: center; width:100%; margin: 20px 0 20px 0;"><button id="fancy-piece-btn" class="btn">Pokaż tapetę i cenę <i class="material-icons">chevron_right</i></button></div>'
});
});
$(document).on('change', '#fancy-piece-width', function() {
if (jQuery('#fancy-piece-width').val() === '') {$('.valid-alert').show(); $('.valid-width-alert').hide();}
else if (jQuery('#fancy-piece-width').val() > 500 || jQuery('#fancy-piece-width').val() < 50) {$('.valid-alert').hide(); $('.valid-width-alert').show();}
else {
$('.valid-alert').hide();
$('.valid-width-alert').hide();
$('#piece-width').val($('#fancy-piece-width').val());
$('#piece-width').trigger('change');
$('#piece-size-view').html($("#piece-width").val()+'x'+$("#piece-height").val());
}
});
$(document).on('change', '#fancy-piece-height', function() {
if (jQuery('#fancy-piece-height').val() === '') {$('.valid-alert').show(); $('.valid-height-alert').hide();}
else if (jQuery('#fancy-piece-height').val() > 300 || jQuery('#fancy-piece-height').val() < 50) {$('.valid-alert').hide(); $('.valid-height-alert').show();}
else {
$('.valid-alert').hide();
$('.valid-height-alert').hide();
$('#piece-height').val($('#fancy-piece-height').val());
$('#piece-height').trigger('change');
$('#piece-size-view').html($("#piece-width").val()+'x'+$("#piece-height").val());
}
});
$(document).on('click', '#fancy-material-btn', function(){
$("#group_5").val($(this).data('value')).change();
$.fancybox.close();
$('.fancybox-material-controls strong').text($('#group_5').find('option:selected').text());
setTimeout(function() {$('#checkbox-piece').trigger('change');
$("#piece").css('top', parseInt($('.piece-top-positon').html())+"px");
jQuery("#piece").css('left', parseInt($('.piece-left-positon').html())+"px");
jQuery("#piece").css("background-position", parseInt('-'+$('.piece-left-positon').html())+"px "+parseInt('-'+$('.piece-top-positon').html())+"px");
}, 2000);
});
$(document).on('click', '#fancy-piece-btn', function(){
if(jQuery('#fancy-piece-width').val() > 500 || jQuery('#fancy-piece-width').val() < 50 || jQuery('#fancy-piece-height').val() > 300 || jQuery('#fancy-piece-height').val() < 50)
{$('#fancy-piece-weight').trigger('change'); $('#fancy-piece-height').trigger('change');}
else
$.fancybox.close();
});
$('#cart').ready(function() {
$('.customization-modal').each(function(index, element){
valArray = $.trim($(this).find('.value').html()).split(" ");
valDif = $(this);
console.log(valArray);
$.each(valArray, function(dd, element){
console.log();
if (dd == 1)
$(valDif).find('.power').css('width', parseFloat(element.replace(/[^0-9\.]/g, ''))*100+'px');
if (dd == 4)
$(valDif).find('.power').css('height', parseFloat(element.replace(/[^0-9\.]/g, ''))*100+'px');
if (dd == 14)
$(valDif).find('.power').css('background-position-x', element+'px');
if (dd == 15)
$(valDif).find('.power').css('background-position-y', element+'px');
if (dd == 17 && element == "1")
$(valDif).find('.power').css('transform', 'scaleX(-1)');
});
});
});
$(document).on('click', '#button-color-variants', function(){
$("#box-color-variants").fadeIn()
})
$(document).on('click', '#box-color-variants .wariant_kolorystyczny', function(){
$("#box-color-variants").fadeOut()
})
/* NEW layout — klik w kafelek wariantu zmienia wariant (delegowany, przeżywa refresh AJAX) */
$(document).on('click', '.product-variants-data--new .wariant_kolorystyczny label', function (e) {
var $label = $(this);
var $radio = $label.find('input.input-color');
if (!$radio.length) return;
if ($radio.is(':checked')) return;
$radio.prop('checked', true).trigger('change');
});
/* NEW layout — refresh wariantu produktu bez przeładowania strony.
PS core handler updateProduct_ szuka formy przez $('.product-actions').find('form:first'),
ale w nowym layoucie .product-actions nie istnieje tam, gdzie jest forma wariantów.
Robimy więc ręczny refresh (POST na bieżący URL produktu, action=refresh zwraca JSON
z HTML-fragmentami wariantu) i aktualizujemy kluczowe elementy in-place. */
$(document).on('change', '.product-variants-data--new input[name^="group["]', function () {
var $form = $('.product-variants-data--new #add-to-cart-or-refresh');
if (!$form.length) return;
var data = {};
$form.serializeArray().forEach(function (f) { data[f.name] = f.value; });
data.ajax = 1;
data.action = 'refresh';
data.quantity_wanted = 1;
var productUrl = window.location.href.split('?')[0].split('#')[0];
$.ajax({
url: productUrl,
type: 'POST',
data: data,
dataType: 'json',
headers: { 'Accept': 'application/json' },
success: function (resp) {
if (!resp) { window.location.reload(); return; }
try {
if (resp.product_url) {
history.pushState({}, '', resp.product_url);
}
if (resp.product_prices) {
var $p = $('.product-prices-data .product-prices');
if ($p.length) $p.replaceWith(resp.product_prices);
}
if (resp.product_cover_thumbnails) {
$('.product_image_wrapper').html(resp.product_cover_thumbnails);
}
if (window.prestashop && typeof prestashop.emit === 'function') {
prestashop.emit('updatedProduct', resp);
}
} catch (e) {
window.location.href = resp.product_url || window.location.href;
}
},
error: function () { window.location.reload(); }
});
});
// Phase 02 Plan 02-01: piece re-sync po variant AJAX refresh.
// #piece jest sibling-em .product_image_wrapper (nie dzieckiem) wiec przezywa .html() replace.
// Po zmianie wariantu re-triggerujemy change na width/height zeby odswiezyc background-position
// (rozmiar kontenera moze sie zmienic miedzy wariantami).
if (window.prestashop && typeof prestashop.on === 'function') {
prestashop.on('updatedProduct', function () {
// #piece jest re-renderowany przez product-cover-thumbnails.tpl (rendered inside resp.product_cover_thumbnails).
// Po replace .product_image_wrapper.html(...) dragElement trzeba zapiac ponownie na nowy node.
if ($('#product_is_crop').val() === '1' && document.getElementById('piece') && typeof dragElement === 'function') {
dragElement(document.getElementById('piece'));
$('#piece-width').trigger('change');
$('#piece-height').trigger('change');
}
});
}
// Phase 02 Plan 02-01: setup defensywny dla piece/crop w nowym layoucie.
// Piece pojawia sie DOPIERO po kliknieciu .fancybox-size-controls (user feedback).
// Dlatego NIE wywolujemy checkedHandler automatycznie — tylko przygotowujemy srodowisko,
// aby pozniejsze kliknieciem popup'a nie crashowalo:
// 1) override totalpriceinfospecific/prod (crash na brakujacym #product-details/totalpriceinfo w nowym layoucie)
// 2) wstrzyknij stuby DOM (elementy wymagane przez module-hook inline scripts)
setTimeout(function () {
if (!$('.product-variants-data--new').length) return;
// totalpriceinfospecific() jest wywolywana przez #piece-width change handler (custom.js:281)
// oraz przez kilka innych flow. Ma wiele DOM dependencies ktore nie istnieja w nowym layoucie.
// Nadpisujemy no-op — cena w nowym layoucie jest przekalkulowywana gdzie indziej.
if (typeof window.totalpriceinfospecific === 'function') {
window.totalpriceinfospecific = function () { /* no-op in new layout */ };
}
if (typeof window.prod === 'function') {
var _origProd = window.prod;
window.prod = function () { try { return _origProd.apply(this, arguments); } catch (e) { /* swallow */ } };
}
// Stub elementy dla pozostalych inline-script hooks.
['totalpriceinfo', 'custom-wallpaper-price', 'custom-wallpaper-price-label'].forEach(function (id) {
if (!document.getElementById(id)) {
var el = document.createElement('div');
el.id = id;
el.style.display = 'none';
document.body.appendChild(el);
}
});
['quantity_wanted', 'quantity_wanted_alt', 'quantity_wanted_alth'].forEach(function (id) {
if (!document.getElementById(id)) {
var el = document.createElement('input');
el.type = 'hidden';
el.id = id;
el.value = '1';
document.body.appendChild(el);
}
});
}, 600);
$(document).on('click', '#custom-order-btn', function(e){
e.preventDefault();
$('#custom-order-modal').modal('show');
})
$(document).on('click', '#custom-order-box-close', function(){
$('#custom-order-modal').modal('hide');
$('#custom-order-form .form-info').empty()
})
$(document).on('click', '#custom-pattern-btn', function(e){
e.preventDefault();
$('#custom-email-pattern-modal').modal('show');
})
$(document).on('click', '#custom-order-box-close', function(){
$('#custom-email-pattern-modal').modal('hide');
$('#custom-email-pattern-modal .form-info').empty()
})
$(document).ready(function(){
$(document).on('click', '#custom-order-form button.send-form', function(e){
e.preventDefault();
var form_name = $('#custom-order-form input[name="name"]').val();
var form_surname = $('#custom-order-form input[name="surname"]').val();
var form_email = $('#custom-order-form input[name="email"]').val();
var form_contact_type = $('#custom-order-form input[name="contact_type"]:checked').val();
var form_message = $('#custom-order-form textarea[name="text"]').val();
var fileInput = $('#custom-order-form input[name="file"]')[0];
if (form_name !== '' && form_surname !== '' && form_email !== '' && form_contact_type !== '') {
var formData = new FormData();
formData.append('name', form_name);
formData.append('surname', form_surname);
formData.append('email', form_email);
formData.append('contact_type', form_contact_type);
formData.append('text', form_message);
formData.append('file', fileInput.files[0]);
$.ajax({
type: 'POST',
cache: false,
url: '/special-order.php',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
$('#custom-order-form .form-info').empty()
$('#custom-order-form .loader').show();
$('#custom-order-form button.send-form').prop('disabled', true);
$('#custom-order-form button.send-form').hide();
},
success: function( data ) {
response = jQuery.parseJSON( data );
$('#custom-order-form button.send-form').prop('disabled', false);
$('#custom-order-form .loader').hide();
$('#custom-order-form button.send-form').show();
$('#custom-order-form .form-info').html(`<p class="${response.status}">${response.message}</p>`)
dataLayer.push({
event: "send_form_send_custom_order",
form_user_name: form_name,
form_user_surname: form_surname,
form_user_email: form_email
});
},
})
} else {
$('#custom-order-form .form-info').html(`<p class="error">Proszę wypełnić wszystkie wymagane pola w formularzu</p>`)
}
})
$(document).on('change', '#file-upload', function(){
var fileName = $(this).prop('files')[0].name;
console.log(fileName);
$('#file-selected').text('Plik: ' + fileName);
})
})
$(document).ready(function(){
$(document).on('click', '#custom-email-pattern-modal button.send-form', function(e){
e.preventDefault();
var form_name = $('#custom-email-pattern-modal input[name="name"]').val();
var form_surname = $('#custom-email-pattern-modal input[name="surname"]').val();
var form_email = $('#custom-email-pattern-modal input[name="email"]').val();
var form_contact_type = $('#custom-email-pattern-modal input[name="contact_type"]:checked').val();
var form_image = $('#custom-email-pattern-modal input[name="image"]').val();
if (form_name !== '' && form_surname !== '' && form_email !== '' && form_contact_type !== '') {
var formData = new FormData();
formData.append('name', form_name);
formData.append('surname', form_surname);
formData.append('email', form_email);
formData.append('contact_type', form_contact_type);
formData.append('image', form_image);
$.ajax({
type: 'POST',
cache: false,
url: '/email-pattern.php',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
$('#custom-email-pattern-modal .form-info').empty()
$('#custom-email-pattern-modal .loader').show();
$('#custom-email-pattern-modal button.send-form').prop('disabled', true);
$('#custom-email-pattern-modal button.send-form').hide();
},
success: function( data ) {
response = jQuery.parseJSON( data );
$('#custom-email-pattern-modal button.send-form').prop('disabled', false);
$('#custom-email-pattern-modal .loader').hide();
$('#custom-email-pattern-modal button.send-form').show();
$('#custom-email-pattern-modal .form-info').html(`<p class="${response.status}">${response.message}</p>`)
dataLayer.push({
event: "send_form_send_pattern",
form_user_name: form_name,
form_user_surname: form_surname,
form_user_email: form_email,
form_contact_type: form_contact_type
});
},
})
} else {
$('#custom-email-pattern-modal .form-info').html(`<p class="error">Proszę wypełnić wszystkie wymagane pola w formularzu</p>`)
}
})
})
$(document).on('click', '#custom-sample-btn', function(e){
e.preventDefault();
$([document.documentElement, document.body]).animate({
scrollTop: $(".product-images.js-qv-product-images").offset().top - $('#header').height() - 50
}, 1000);
$('#checkbox-piece').prop('checked', true);
$('#checkbox-piece').trigger('change');
$('#piece-height').val(50);
$('#piece-width').val(50);
jQuery('#fancy-piece-width').val(50);
jQuery('#fancy-piece-height').val(50);
$('#fancy-piece-weight').trigger('change');
$('#fancy-piece-height').trigger('change');
})
$('body').on('click', '#wpcfu-f1-o1 .ets_cfu-submit', function() {
var startTime = new Date().getTime();
var interval = setInterval(function() {
var responseDiv = $('.wpcfu-response-output');
if (responseDiv.length && responseDiv.text().includes('Dziękuję za Twoją wiadomość.')) {
// Formularz został poprawnie wysłany
dataLayer.push({
'event': 'submit_form_contact',
'form_subject': $( 'input[name="text-905"]' ).val(),
'form_email': $( 'input[name="email-668"]' ).val(),
});
clearInterval(interval);
} else if (new Date().getTime() - startTime > 20000) {
// Minęło 20 sekund, przerywamy sprawdzanie
clearInterval(interval);
}
}, 500); // Sprawdzaj co 500ms
});
$(document).ready(function() {
var url = new URL(window.location.href);
if (url.pathname === '/pl/koszyk' && url.searchParams.get('action') === 'show') {
// Twoja akcja tutaj
// Na przykład:
dataLayer.push({
'event': 'cart_show',
});
}
$('body').on('click', '.cart-detailed-actions .btn', function() {
// Wywołanie zdarzenia begin_checkout
dataLayer.push({'event': 'begin_checkout'});
});
$( 'body' ).on( 'click', '#checkout-personal-information-step .btn-primary', function() {
// Wywołanie zdarzenia add_payment_info
dataLayer.push({'event': 'address_form_show'});
});
$( 'body' ).on( 'click', '#checkout-addresses-step .btn-primary', function() {
// Wywołanie zdarzenia add_payment_info
dataLayer.push({'event': 'shipping_method_show'});
});
var eventFired = false;
$('body').on('click', '#checkout-delivery-step .btn-primary', function() {
if (!eventFired) {
// Wywołanie zdarzenia add_payment_info
dataLayer.push({'event': 'payment_method_show'});
eventFired = true; // Ustawiamy flagę, aby nie wywołać ponownie
}
});
$( 'body' ).on( 'click', '#checkout-payment-step .btn-primary', function() {
// Wywołanie zdarzenia add_payment_info
if ( $( this ).attr( 'disabled' ) != 'disabled' ) {
dataLayer.push({'event': 'purchase'});
}
});
});
// Custom
$(document).ready(function() {
// Slidert
if ($('._partners-slider').length > 0) {
var swiper = new Swiper("._partners-slider", {
spaceBetween: 64,
slidesPerView: 4,
loop: true,
speed: 2000,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
});
}
});
$(document).ready(function() {
// Slidert
if ($('.structure-slider.swiper').length > 0) {
var swiperStructure = new Swiper(".structure-slider.swiper", {
spaceBetween: 20,
slidesPerView: 1,
loop: true,
effect: "fade",
navigation: {
nextEl: ".box-structure-slider .swiper-button-next",
prevEl: ".box-structure-slider .swiper-button-prev",
},
});
}
});
$(document).ready(function() {
$('body').on('click', '.page-cms-15 ._box-2 ._tiles ._tile', function() {
$(this).toggleClass('active').siblings().removeClass('active');
})
});
// ============================================================================
// Phase 02 Plan 02-02: add-to-cart w nowym layoucie (wlasny AJAX submit).
// ============================================================================
// Powod: w nowym layoucie (.product-variants-data--new) button
// [data-button-action=add-to-cart] oraz input #quantity_wanted znajduja sie POZA
// forma #add-to-cart-or-refresh (forma zamyka sie w sidebar .col-md-6, a button
// i qty sa w szerokim .product-bar). PS core delegowany handler uzywa
// $(btn).closest('form') -> length 0 -> nie znajduje formy; rownoczesnie PS
// core ma dodatkowe handler'y ktore moga POST'owac pusty payload, dublujac
// zgloszenie z naszym.
//
// Rozwiazanie: handler na CAPTURE phase przez natywny addEventListener
// (jQuery .on() nie wspiera capture). Capture odpala sie PRZED delegowanymi
// PS core handlerami na bubble phase -> stopImmediatePropagation blokuje je
// calkowicie. Nastepnie manualny AJAX POST z form.serialize() + qty + action.
//
// Dodatkowe problemy adresowane tu zamiast w innych planach:
// 1) Fancybox-blocker (custom.js:327) NIE odpala sie w nowym layoucie bo
// selector $('#add-to-cart-or-refresh button') matches 0 elementow
// (button poza forma). Port logiki tutaj.
// 2) Sync is_crop/crop_width/crop_height: checkedHandler (custom.js:183)
// aborts na crash'u totalpriceinfospecific przed jQuery('#product_is_crop').val(1).
// Tu wymuszamy synchronizacje jesli checkbox checked ale is_crop=0.
// 3) Blockcart widget (header cart counter) nie auto-refreshuje sie po
// updatedCart event w nowym layoucie. Fetchujemy blockcart module ajax
// i manualnie podmieniamy zawartosc .blockcart.
//
// Idempotency: `window.__p02p02Bound` flag chroni przed double-register gdy
// ten sam kod jest tez inline'owany w product.tpl (cache-buster dla browser
// ktorego <script src=custom.js> moze byc stale cached).
// ============================================================================
if (!window.__p02p02Bound) {
window.__p02p02Bound = true;
document.addEventListener('click', function(e) {
var btn = e.target.closest ? e.target.closest('[data-button-action=add-to-cart]') : null;
if (!btn) return;
if (!document.querySelector('.product-variants-data--new')) return; // stary layout: PS core handle
var $form = $('#add-to-cart-or-refresh');
if (!$form.length) return;
// CAPTURE phase: blokuje PS core delegated handlers (bubble) zanim odpala.
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
// Walidacja: piece musi byc skonfigurowany.
if (!$('#checkbox-piece').is(':checked')) {
$.fancybox({
minWidth: 800,
maxWidth: 1000,
padding: 30,
height: 100,
content: 'Proszę wybrać rozmiar i wycinek tapety przed dodaniem jej do koszyka.'
});
return;
}
// Wymus sync hidden inputs z piece state (obejscie crash'u checkedHandler).
// Idempotentne — bezpieczne gdy override z 02-01 zadziala w przyszlosci.
if ($('#product_is_crop').val() === '0' || !$('#product_crop_width').val() || $('#product_crop_width').val() === '0') {
$('#product_is_crop').val('1');
var pw = parseInt($('#piece-width').val(), 10) || 100;
var ph = parseInt($('#piece-height').val(), 10) || 100;
$('#product_crop_width').val(pw);
$('#product_crop_height').val(ph);
}
var $btn = $(btn);
$btn.prop('disabled', true).addClass('loading');
var qty = parseInt($('#quantity_wanted').val(), 10) || 1;
var payload = $form.serialize() + '&qty=' + encodeURIComponent(qty) + '&add=1&action=update';
var actionUrl = $form.attr('action') || window.location.href;
$.ajax({
url: actionUrl,
type: 'POST',
data: payload,
dataType: 'json',
headers: { 'Accept': 'application/json' },
success: function(resp) {
var hasError = !resp || resp.hasError === true || resp.success === false ||
(resp.errors && (Array.isArray(resp.errors) ? resp.errors.length : Object.keys(resp.errors).length));
if (hasError) {
var errs = resp && resp.errors;
var msg = '';
if (Array.isArray(errs)) msg = errs.join('<br>');
else if (errs && typeof errs === 'object') msg = Object.values(errs).join('<br>');
else msg = 'Nie udało się dodać produktu do koszyka. Spróbuj ponownie.';
$.fancybox({
minWidth: 400,
maxWidth: 800,
padding: 30,
height: 100,
content: msg
});
return;
}
// Success: emit updatedCart + manual blockcart refresh.
if (window.prestashop && typeof prestashop.emit === 'function') {
prestashop.emit('updatedCart', { resp: resp, reason: { linkAction: 'add-to-cart' } });
}
$(document).trigger('updatedCart', [resp]);
// Manual blockcart refresh (nowy layout nie ma auto-listener na emit).
// Endpoint ps_shoppingcart module renderuje caly blockcart HTML.
if (window.prestashop && prestashop.urls && prestashop.urls.pages && prestashop.urls.pages.cart) {
$.get(prestashop.urls.pages.cart, { action: 'refresh', ajax: 1 }, null, 'json')
.done(function(cartResp) {
if (cartResp && cartResp.preview) {
$('.blockcart').replaceWith(cartResp.preview);
} else if (resp.cart) {
// Fallback: podmien counter minimalnie
$('.cart-products-count').text(resp.cart.products_count || resp.cart.totals && resp.cart.totals.total || '');
}
})
.fail(function() {
// Last-resort fallback: przeladuj stronice aby PS core odbudowal koszyk.
// Tylko jako fallback — normalnie nie powinno sie odpalic.
});
}
// Success feedback: subtelne pulsowanie przycisku.
$btn.addClass('added-flash');
setTimeout(function () { $btn.removeClass('added-flash'); }, 1200);
},
error: function(xhr) {
$.fancybox({
minWidth: 400,
maxWidth: 800,
padding: 30,
height: 100,
content: 'Błąd połączenia z serwerem. Spróbuj ponownie za chwilę.'
});
},
complete: function() {
$btn.prop('disabled', false).removeClass('loading');
}
});
}, true); // useCapture=true — kluczowe, odpala przed bubble-phase PS core handlers.
}