Skip to content

Commit cfb0bc4

Browse files
SharkJohnySharkJohny
committed
Add next-step navigation and scroll behavior
Introduce unified navigation helpers and improved step handling in productPage.js and luxuryCar.js. Replaced the previous upsale-button selection check to treat any active upsale as valid, added getNavigableWraps (exclude .box-config), isCartStepWrap, getStepButtonText, scrollToStep, and proceedToCartFromStep to centralize logic for next-step buttons and scrolling. Next-step buttons now use localized text, mark cart-step wraps as finish buttons, and trigger add-to-cart when appropriate. Scrolling behavior was refined for desktop and mobile to keep the active step comfortably visible. Updated button text update and insertion routines to use the new helpers.
1 parent 94ec343 commit cfb0bc4

File tree

2 files changed

+134
-35
lines changed

2 files changed

+134
-35
lines changed

‎assets/js/components/productPage.js‎

Lines changed: 79 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -430,8 +430,7 @@ function priplatky(setupData, texts) {
430430

431431
if ($wrap.find(".upsale-button").length) {
432432
hasSelectable = true;
433-
// consider '.none' as no selection
434-
if ($wrap.find(".upsale-button.active").length && !$wrap.find(".upsale-button.active.none").length) valid = true;
433+
if ($wrap.find(".upsale-button.active").length) valid = true;
435434
}
436435

437436
if ($wrap.find("select.surcharge-parameter").length) {
@@ -450,6 +449,71 @@ function priplatky(setupData, texts) {
450449
return !hasSelectable || valid;
451450
}
452451

452+
function getNavigableWraps() {
453+
return $(".position-wrap, .parameter-wrap").filter(function () {
454+
return !$(this).closest(".box-config").length;
455+
});
456+
}
457+
458+
function isCartStepWrap($wrap) {
459+
return $wrap.hasClass("upsale-buttons") && $wrap.hasClass("boxs");
460+
}
461+
462+
function getStepButtonText($wrap, isLast) {
463+
if (isCartStepWrap($wrap)) {
464+
return language === "sk" ? "Prejsť do košíka" : "Přejít do košíku";
465+
}
466+
467+
if (language === "sk") {
468+
return isLast ? "Dokončiť konfiguráciu" : "Prejsť k ďalšiemu kroku";
469+
}
470+
471+
return isLast ? "Dokončit konfiguraci" : "Přejít k dalšímu kroku";
472+
}
473+
474+
function scrollToStep($wrap) {
475+
if (!$wrap.length) return;
476+
477+
const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
478+
const wrapTop = $wrap.offset().top;
479+
480+
if (window.matchMedia("(min-width: 992px)").matches) {
481+
const rect = $wrap[0].getBoundingClientRect();
482+
const comfortableTop = 120;
483+
const comfortableBottom = viewportHeight * 0.72;
484+
485+
if (rect.top >= comfortableTop && rect.top <= comfortableBottom) {
486+
return;
487+
}
488+
489+
const wrapHeight = Math.min($wrap.outerHeight() || 0, viewportHeight * 0.7);
490+
const targetScrollTop = Math.max(0, wrapTop - Math.max((viewportHeight - wrapHeight) / 2, 120));
491+
492+
$("html, body").stop(true).animate({ scrollTop: targetScrollTop }, 400);
493+
return;
494+
}
495+
496+
$("html, body").stop(true).animate({ scrollTop: Math.max(wrapTop - 80, 0) }, 400);
497+
}
498+
499+
function proceedToCartFromStep() {
500+
const $addToCartButton = $("button.btn.btn-lg.btn-conversion.add-to-cart-button")
501+
.filter(function () {
502+
const style = window.getComputedStyle(this);
503+
return style.display !== "none" && style.visibility !== "hidden" && this.offsetParent !== null;
504+
})
505+
.first();
506+
507+
$(".upsale-Banner.showConf").removeClass("showConf");
508+
509+
if ($addToCartButton.length) {
510+
$addToCartButton.trigger("click");
511+
return;
512+
}
513+
514+
$(".position-wrap, .parameter-wrap").removeClass("active");
515+
}
516+
453517
$(document).on("click", ".next-step-button", function (e) {
454518
e.preventDefault();
455519
e.stopPropagation();
@@ -464,7 +528,12 @@ function priplatky(setupData, texts) {
464528
return; // nepokračuj dál
465529
}
466530

467-
const allWraps = $(".position-wrap, .parameter-wrap");
531+
if (isCartStepWrap(currentWrap)) {
532+
proceedToCartFromStep();
533+
return;
534+
}
535+
536+
const allWraps = getNavigableWraps();
468537
const currentIndex = allWraps.index(currentWrap);
469538

470539
// Najdi následující wrap element
@@ -474,7 +543,7 @@ function priplatky(setupData, texts) {
474543
currentWrap.removeClass("active");
475544
openNextAccordion(nextWrap);
476545
setTimeout(() => {
477-
$("html, body").animate({ scrollTop: nextWrap.offset().top - 80 }, 400);
546+
scrollToStep(nextWrap);
478547
}, 600);
479548

480549
console.log("Přechod k dalšímu kroku:", nextWrap.find(".variant.name, h5").first().text() || "Unnamed");
@@ -492,7 +561,7 @@ function priplatky(setupData, texts) {
492561

493562
// Přidání tlačítek "Přejít k dalšímu kroku" do všech wrap elementů
494563
function addNextStepButtons() {
495-
const allWraps = $(".position-wrap, .parameter-wrap");
564+
const allWraps = getNavigableWraps();
496565

497566
allWraps.each(function (index) {
498567
const $wrap = $(this);
@@ -504,11 +573,8 @@ function priplatky(setupData, texts) {
504573

505574
// Určí text tlačítka podle pozice
506575
const isLast = index === allWraps.length - 1;
507-
let buttonText = isLast ? "Dokončit konfiguraci" : "Přejít k dalšímu kroku";
508-
if (language === "sk") {
509-
buttonText = isLast ? "Dokončiť konfiguráciu" : "Prejsť k ďalšiemu kroku";
510-
}
511-
const buttonClass = isLast ? "next-step-button finish-button" : "next-step-button";
576+
const buttonText = getStepButtonText($wrap, isLast);
577+
const buttonClass = isLast || isCartStepWrap($wrap) ? "next-step-button finish-button" : "next-step-button";
512578

513579
// Přidej tlačítko na konec wrap elementu
514580
$("<button>", {
@@ -521,24 +587,19 @@ function priplatky(setupData, texts) {
521587

522588
// Funkce pro aktualizaci textů tlačítek
523589
function updateButtonTexts() {
524-
const allWraps = $(".content-wrap .parameter-wrap.parameter-undefined");
590+
const allWraps = getNavigableWraps();
525591

526592
allWraps.each(function (index) {
527593
const $wrap = $(this);
528594
const $button = $wrap.find(".next-step-button");
529595

530596
if ($button.length > 0) {
531597
const isLast = index === allWraps.length - 1;
532-
console.log(index);
533-
console.log(isLast);
534-
let buttonText = isLast ? "Dokončit konfiguraci" : "Přejít k dalšímu kroku";
535-
if (language === "sk") {
536-
buttonText = isLast ? "Dokončiť konfiguráciu" : "Prejsť k ďalšiemu kroku";
537-
}
598+
const buttonText = getStepButtonText($wrap, isLast);
538599

539600
// Aktualizuj text a třídu
540601
$button.text(buttonText);
541-
$button.toggleClass("finish-button", isLast);
602+
$button.toggleClass("finish-button", isLast || isCartStepWrap($wrap));
542603
}
543604
});
544605
}

‎assets/js/luxuryCar.js‎

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1053,7 +1053,7 @@ function priplatky(setupData2, texts) {
10531053
}
10541054
if ($wrap.find(".upsale-button").length) {
10551055
hasSelectable = true;
1056-
if ($wrap.find(".upsale-button.active").length && !$wrap.find(".upsale-button.active.none").length) valid = true;
1056+
if ($wrap.find(".upsale-button.active").length) valid = true;
10571057
}
10581058
if ($wrap.find("select.surcharge-parameter").length) {
10591059
hasSelectable = true;
@@ -1067,40 +1067,74 @@ function priplatky(setupData2, texts) {
10671067
if ($wrap.find("input[type='radio']:checked, input[type='checkbox']:checked").length) valid = true;
10681068
}
10691069
return !hasSelectable || valid;
1070+
}, getNavigableWraps = function() {
1071+
return $(".position-wrap, .parameter-wrap").filter(function() {
1072+
return !$(this).closest(".box-config").length;
1073+
});
1074+
}, isCartStepWrap = function($wrap) {
1075+
return $wrap.hasClass("upsale-buttons") && $wrap.hasClass("boxs");
1076+
}, getStepButtonText = function($wrap, isLast) {
1077+
if (isCartStepWrap($wrap)) {
1078+
return language2 === "sk" ? "Prejs\u0165 do ko\u0161\xEDka" : "P\u0159ej\xEDt do ko\u0161\xEDku";
1079+
}
1080+
if (language2 === "sk") {
1081+
return isLast ? "Dokon\u010Di\u0165 konfigur\xE1ciu" : "Prejs\u0165 k \u010Fal\u0161iemu kroku";
1082+
}
1083+
return isLast ? "Dokon\u010Dit konfiguraci" : "P\u0159ej\xEDt k dal\u0161\xEDmu kroku";
1084+
}, scrollToStep = function($wrap) {
1085+
if (!$wrap.length) return;
1086+
const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
1087+
const wrapTop = $wrap.offset().top;
1088+
if (window.matchMedia("(min-width: 992px)").matches) {
1089+
const rect = $wrap[0].getBoundingClientRect();
1090+
const comfortableTop = 120;
1091+
const comfortableBottom = viewportHeight * 0.72;
1092+
if (rect.top >= comfortableTop && rect.top <= comfortableBottom) {
1093+
return;
1094+
}
1095+
const wrapHeight = Math.min($wrap.outerHeight() || 0, viewportHeight * 0.7);
1096+
const targetScrollTop = Math.max(0, wrapTop - Math.max((viewportHeight - wrapHeight) / 2, 120));
1097+
$("html, body").stop(true).animate({ scrollTop: targetScrollTop }, 400);
1098+
return;
1099+
}
1100+
$("html, body").stop(true).animate({ scrollTop: Math.max(wrapTop - 80, 0) }, 400);
1101+
}, proceedToCartFromStep = function() {
1102+
const $addToCartButton = $("button.btn.btn-lg.btn-conversion.add-to-cart-button").filter(function() {
1103+
const style = window.getComputedStyle(this);
1104+
return style.display !== "none" && style.visibility !== "hidden" && this.offsetParent !== null;
1105+
}).first();
1106+
$(".upsale-Banner.showConf").removeClass("showConf");
1107+
if ($addToCartButton.length) {
1108+
$addToCartButton.trigger("click");
1109+
return;
1110+
}
1111+
$(".position-wrap, .parameter-wrap").removeClass("active");
10701112
}, addNextStepButtons = function() {
1071-
const allWraps = $(".position-wrap, .parameter-wrap");
1113+
const allWraps = getNavigableWraps();
10721114
allWraps.each(function(index) {
10731115
const $wrap = $(this);
10741116
if ($wrap.find(".next-step-button").length > 0) {
10751117
return;
10761118
}
10771119
const isLast = index === allWraps.length - 1;
1078-
let buttonText = isLast ? "Dokon\u010Dit konfiguraci" : "P\u0159ej\xEDt k dal\u0161\xEDmu kroku";
1079-
if (language2 === "sk") {
1080-
buttonText = isLast ? "Dokon\u010Di\u0165 konfigur\xE1ciu" : "Prejs\u0165 k \u010Fal\u0161iemu kroku";
1081-
}
1082-
const buttonClass = isLast ? "next-step-button finish-button" : "next-step-button";
1120+
const buttonText = getStepButtonText($wrap, isLast);
1121+
const buttonClass = isLast || isCartStepWrap($wrap) ? "next-step-button finish-button" : "next-step-button";
10831122
$("<button>", {
10841123
class: buttonClass,
10851124
text: buttonText,
10861125
type: "button"
10871126
}).appendTo($wrap);
10881127
});
10891128
}, updateButtonTexts2 = function() {
1090-
const allWraps = $(".content-wrap .parameter-wrap.parameter-undefined");
1129+
const allWraps = getNavigableWraps();
10911130
allWraps.each(function(index) {
10921131
const $wrap = $(this);
10931132
const $button = $wrap.find(".next-step-button");
10941133
if ($button.length > 0) {
10951134
const isLast = index === allWraps.length - 1;
1096-
console.log(index);
1097-
console.log(isLast);
1098-
let buttonText = isLast ? "Dokon\u010Dit konfiguraci" : "P\u0159ej\xEDt k dal\u0161\xEDmu kroku";
1099-
if (language2 === "sk") {
1100-
buttonText = isLast ? "Dokon\u010Di\u0165 konfigur\xE1ciu" : "Prejs\u0165 k \u010Fal\u0161iemu kroku";
1101-
}
1135+
const buttonText = getStepButtonText($wrap, isLast);
11021136
$button.text(buttonText);
1103-
$button.toggleClass("finish-button", isLast);
1137+
$button.toggleClass("finish-button", isLast || isCartStepWrap($wrap));
11041138
}
11051139
});
11061140
};
@@ -1246,14 +1280,18 @@ function priplatky(setupData2, texts) {
12461280
setTimeout(() => currentWrap.removeClass("selection-required"), 1200);
12471281
return;
12481282
}
1249-
const allWraps = $(".position-wrap, .parameter-wrap");
1283+
if (isCartStepWrap(currentWrap)) {
1284+
proceedToCartFromStep();
1285+
return;
1286+
}
1287+
const allWraps = getNavigableWraps();
12501288
const currentIndex = allWraps.index(currentWrap);
12511289
if (currentIndex < allWraps.length - 1) {
12521290
const nextWrap = allWraps.eq(currentIndex + 1);
12531291
currentWrap.removeClass("active");
12541292
openNextAccordion(nextWrap);
12551293
setTimeout(() => {
1256-
$("html, body").animate({ scrollTop: nextWrap.offset().top - 80 }, 400);
1294+
scrollToStep(nextWrap);
12571295
}, 600);
12581296
console.log("P\u0159echod k dal\u0161\xEDmu kroku:", nextWrap.find(".variant.name, h5").first().text() || "Unnamed");
12591297
} else {

0 commit comments

Comments
 (0)