@thefittingroom/shop-ui 3.0.0-alpha-4 → 3.0.0-alpha-5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -38,7 +38,7 @@ export declare class SizeRecComponent {
|
|
|
38
38
|
private tfrToggleClosedElements;
|
|
39
39
|
private isCollapsed;
|
|
40
40
|
private redraw;
|
|
41
|
-
constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void, onTryOnClick: (styleId: number, sizeId: number) => void);
|
|
41
|
+
constructor(sizeRecMainDivId: string, onSignInClick: () => void, onSignOutClick: () => void, onFitInfoClick: () => void, onTryOnClick: (styleId: number, sizeId: number, shouldDisplay: boolean) => Promise<void>);
|
|
42
42
|
get sku(): string;
|
|
43
43
|
setSku(sku: string): void;
|
|
44
44
|
get styleId(): number;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v3.0.0-alpha-
|
|
2
|
+
* thefittingroom v3.0.0-alpha-5 (2025-04-18T16:10:37.729Z)
|
|
3
3
|
* Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
|
|
4
4
|
*/
|
|
5
5
|
function loadImageRecursive(imageURL, imageURLs) {
|
|
@@ -26697,7 +26697,7 @@ n(css$6,{});
|
|
|
26697
26697
|
var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto;margin:auto;width:100%}}@media screen and (max-width:599px){#tfr-size-recommendations{width:calc(100vw - 30px)!important}.tfr-mobile-small-text{font-size:12px}.tfr-mobile-hidden{display:none}.tfr-modal-content{overflow:hidden}.tfr-modal-content-container{max-height:none;max-width:100vw;min-height:100vh;min-width:100vw}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{overflow:auto}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}@media screen and (max-height:800px){.tfr-video-responsive{height:280px!important}}";
|
|
26698
26698
|
n(css$5,{});
|
|
26699
26699
|
|
|
26700
|
-
var css$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;text-align:right}.tfr-size-rec-table-cell-right{
|
|
26700
|
+
var css$4 = "#tfr-size-recommendations{align-items:center;background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;flex-direction:column;font-family:var(--tfr-main-font);justify-content:center;padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations-container{align-items:center;display:none;flex-direction:column;justify-content:center;position:relative;width:100%}#tfr-size-rec-select-container{align-items:center;display:none;flex-direction:column;font-size:13px;width:100%}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-title-toggle{color:var(--tfr-grey);cursor:pointer;position:absolute;right:0;top:0;transition:all .3s ease}.tfr-chevron-up{transform:rotate(180deg) scaleY(.6)}.tfr-chevron-down{transform:rotate(0deg) scaleY(.6)}#tfr-info-icon{cursor:pointer}#tfr-size-rec-subtitle{border-bottom:2px solid #000;font-size:18px;font-weight:700;text-align:center;width:100%}#tfr-size-rec-title{font-size:14px}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;padding:0 10px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:0}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);justify-content:center;min-height:40px}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{flex-grow:1;padding-left:8px;padding-right:8px;text-align:right}.tfr-size-rec-table-cell-right{flex-grow:1;padding-left:8px;padding-right:8px;text-align:left}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex;width:150px}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);display:none;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:var(--tfr-size-selector-button-height);justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active):not(.tfr-disabled){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-button-active-border-color);border-style:solid;border-width:var(--tfr-size-selector-button-active-border-width);height:var(--tfr-size-selector-button-active-height)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:var(--tfr-size-selector-button-radius);border-top-left-radius:var(--tfr-size-selector-button-radius)}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:var(--tfr-size-selector-button-radius);border-top-right-radius:var(--tfr-size-selector-button-radius)}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img,.tfr-powered-by-logo svg{height:24px;width:12px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}#tfr-sign-in-nav{margin-bottom:80px}.tfr-disabled{cursor:default}#tfr-login-to-view{cursor:pointer}.tfr-try-on-button{align-items:center;background-color:var(--tfr-size-selector-bg-color-active);border-color:var(--tfr-size-selector-border-color);border-radius:var(--tfr-size-selector-button-radius);border-style:solid;border-width:var(--tfr-size-selector-border-width);box-shadow:var(--tfr-size-selector-button-shadow);color:var(--tfr-size-selector-text-color);cursor:pointer;display:flex;font-size:var(--tfr-size-selector-font-size);font-weight:var(--tfr-size-selector-font-weight);height:var(--tfr-size-selector-button-height);justify-content:center;margin-bottom:10px;margin-top:20px;max-width:200px;position:relative;transition:all .15s ease-in;width:100%}.tfr-try-on-button.loading,.tfr-try-on-button:disabled{cursor:not-allowed;opacity:.7}.tfr-try-on-button.loading:after{animation:spin 1s linear infinite;border:2px solid var(--tfr-size-selector-text-color);border-radius:50%;border-top:2px solid transparent;content:\"\";height:16px;margin-left:8px;position:absolute;width:16px}@keyframes spin{to{transform:rotate(1turn)}}";
|
|
26701
26701
|
n(css$4,{});
|
|
26702
26702
|
|
|
26703
26703
|
var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px 10px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
|
|
@@ -27501,6 +27501,9 @@ class SizeRecComponent {
|
|
|
27501
27501
|
this.isCollapsed = false;
|
|
27502
27502
|
this.tfrSizeRecTitleToggle.classList.add('tfr-chevron-up');
|
|
27503
27503
|
this.tfrSizeRecTitleToggle.classList.remove('tfr-chevron-down');
|
|
27504
|
+
// Ensure the container is visible
|
|
27505
|
+
this.tfrSizeRecSelectContainer.style.display = 'flex';
|
|
27506
|
+
this.tfrSizeRecSelectContainer.style.opacity = '1';
|
|
27504
27507
|
}
|
|
27505
27508
|
else {
|
|
27506
27509
|
this.tfrSizeHowItFits.style.opacity = '0.4';
|
|
@@ -27577,6 +27580,48 @@ class SizeRecComponent {
|
|
|
27577
27580
|
this.tfrSizeRecTitleToggle.addEventListener('click', this.toggletSizeRecSelectContainer.bind(this));
|
|
27578
27581
|
this.tfrInfoIcon.addEventListener('click', this.onFitInfoClick);
|
|
27579
27582
|
this.tfrLoginToView.addEventListener('click', this.onSignInClick);
|
|
27583
|
+
const tryOnButton = document.getElementById('tfr-try-on-button');
|
|
27584
|
+
if (!tryOnButton)
|
|
27585
|
+
return;
|
|
27586
|
+
tryOnButton.addEventListener('click', async () => {
|
|
27587
|
+
// Prevent multiple clicks while loading
|
|
27588
|
+
if (tryOnButton.classList.contains('loading')) {
|
|
27589
|
+
return;
|
|
27590
|
+
}
|
|
27591
|
+
const activeButton = document.querySelector('.tfr-size-rec-select-button.active');
|
|
27592
|
+
if (!activeButton)
|
|
27593
|
+
return;
|
|
27594
|
+
const selectedSizeId = Number(activeButton.getAttribute('data-size-id'));
|
|
27595
|
+
if (Number.isNaN(selectedSizeId))
|
|
27596
|
+
return;
|
|
27597
|
+
// Set loading state
|
|
27598
|
+
tryOnButton.classList.add('loading');
|
|
27599
|
+
const originalText = tryOnButton.textContent;
|
|
27600
|
+
tryOnButton.textContent = ' ';
|
|
27601
|
+
tryOnButton.setAttribute('disabled', 'true');
|
|
27602
|
+
try {
|
|
27603
|
+
// Get all size buttons
|
|
27604
|
+
const allSizeButtons = Array.from(document.querySelectorAll('.tfr-size-rec-select-button'));
|
|
27605
|
+
// Request frames for all sizes
|
|
27606
|
+
for (const button of allSizeButtons) {
|
|
27607
|
+
const sizeId = Number(button.getAttribute('data-size-id'));
|
|
27608
|
+
if (Number.isNaN(sizeId))
|
|
27609
|
+
continue;
|
|
27610
|
+
// Only display the active size, others are just requested
|
|
27611
|
+
const shouldDisplay = button === activeButton;
|
|
27612
|
+
await this.onTryOnClick(this.styleId, sizeId, shouldDisplay);
|
|
27613
|
+
}
|
|
27614
|
+
}
|
|
27615
|
+
catch (error) {
|
|
27616
|
+
console.error('Error during try-on:', error);
|
|
27617
|
+
}
|
|
27618
|
+
finally {
|
|
27619
|
+
// Reset loading state
|
|
27620
|
+
tryOnButton.classList.remove('loading');
|
|
27621
|
+
tryOnButton.textContent = originalText;
|
|
27622
|
+
tryOnButton.removeAttribute('disabled');
|
|
27623
|
+
}
|
|
27624
|
+
});
|
|
27580
27625
|
}
|
|
27581
27626
|
onSizeRecSelectClick(e) {
|
|
27582
27627
|
const target = e.target;
|
|
@@ -27593,7 +27638,7 @@ class SizeRecComponent {
|
|
|
27593
27638
|
const selectedSizeId = Number(target.getAttribute('data-size-id'));
|
|
27594
27639
|
if (Number.isNaN(selectedSizeId))
|
|
27595
27640
|
return;
|
|
27596
|
-
this.onTryOnClick(this.styleId, selectedSizeId);
|
|
27641
|
+
this.onTryOnClick(this.styleId, selectedSizeId, true);
|
|
27597
27642
|
}
|
|
27598
27643
|
renderSizeRec(recommended, sizes) {
|
|
27599
27644
|
this.tfrSizeRecSize.innerHTML = ` ${recommended}`;
|
|
@@ -27601,8 +27646,6 @@ class SizeRecComponent {
|
|
|
27601
27646
|
this.redraw = (index) => this.renderSizeRecTable(sizes, index);
|
|
27602
27647
|
this.redraw(selectedSizeIndex);
|
|
27603
27648
|
this.renderSizeRecSelect(sizes, selectedSizeIndex);
|
|
27604
|
-
const selectedSizeId = sizes[selectedSizeIndex].size_id;
|
|
27605
|
-
this.onTryOnClick(this.styleId, selectedSizeId);
|
|
27606
27649
|
}
|
|
27607
27650
|
renderSizeRecTable(sizes, index) {
|
|
27608
27651
|
const { locations } = sizes[index];
|
|
@@ -27724,6 +27767,8 @@ class SizeRecComponent {
|
|
|
27724
27767
|
</div>
|
|
27725
27768
|
|
|
27726
27769
|
<div id="tfr-size-rec-table"></div>
|
|
27770
|
+
|
|
27771
|
+
<div id="tfr-try-on-button" class="tfr-try-on-button">Try On</div>
|
|
27727
27772
|
</div>
|
|
27728
27773
|
</div>
|
|
27729
27774
|
|
|
@@ -27955,10 +28000,8 @@ class FittingRoom {
|
|
|
27955
28000
|
this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
|
|
27956
28001
|
this.tfrShop = initShop(Number(this.shopId), env);
|
|
27957
28002
|
this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this), this.onTryOnClick.bind(this));
|
|
27958
|
-
|
|
28003
|
+
if (vtoMainDivId)
|
|
27959
28004
|
this.vtoComponent = new VtoComponent(vtoMainDivId);
|
|
27960
|
-
}
|
|
27961
|
-
catch (_a) { }
|
|
27962
28005
|
}
|
|
27963
28006
|
get shop() {
|
|
27964
28007
|
return this.tfrShop;
|
|
@@ -28057,10 +28100,19 @@ class FittingRoom {
|
|
|
28057
28100
|
onFitInfoClick() {
|
|
28058
28101
|
this.tfrModal.toFitInfo();
|
|
28059
28102
|
}
|
|
28060
|
-
async onTryOnClick(styleId, sizeId) {
|
|
28103
|
+
async onTryOnClick(styleId, sizeId, shouldDisplay = true) {
|
|
28104
|
+
if (!this.vtoComponent)
|
|
28105
|
+
return console.error('VtoComponent is not initialized');
|
|
28061
28106
|
const frames = await this.shop.tryOn(styleId, sizeId);
|
|
28062
|
-
|
|
28063
|
-
|
|
28107
|
+
if (shouldDisplay) {
|
|
28108
|
+
try {
|
|
28109
|
+
this.vtoComponent.init();
|
|
28110
|
+
this.vtoComponent.onNewFramesReady(frames);
|
|
28111
|
+
}
|
|
28112
|
+
catch (e) {
|
|
28113
|
+
console.error(e);
|
|
28114
|
+
}
|
|
28115
|
+
}
|
|
28064
28116
|
}
|
|
28065
28117
|
onUserProfileChange(userProfile) {
|
|
28066
28118
|
var _a, _b, _c, _d;
|