wineater-bot 3.8.2 → 3.9.0

package/src/js/widget.js

@@ -1,567 +1,227 @@
 // widget.js
-import './widget-styles.js';
+import './widget/widget-styles.js';
 import { Api } from './api.js';
 import translator from './i18n.js';
+import { trackWidgetEvent } from './analytics.js';
+import { WIDGET_EVENTS } from './widget/widget-events.js';
+import { WidgetUI } from './widget/widget-ui.js';
+import { WidgetSearch } from './widget/widget-search.js';
+import { WidgetLanguage } from './widget/widget-language.js';
 
 export class WineWidget {
     constructor() {
-        // Определяем тип виджета: 'store' (старый) или 'bar' (новый)
-        this.widgetType = window?.wineaterData?.WIDGET_TYPE || 'store'; 
-        this.countryCode = window?.wineaterData?.COUNTRY_CODE || null; 
-        this.widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner'; 
+        // Widget configuration
+        this.widgetType = window?.wineaterData?.WIDGET_TYPE || 'store';
+        this.countryCode = window?.wineaterData?.COUNTRY_CODE || null;
+        this.widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner';
         this.titleText = window?.wineaterData?.TITLE_TEXT;
         this.subtitleText = window?.wineaterData?.SUBTITLE_TEXT;
-        this.api = new Api(); 
-        console.log(this.titleText);
+        this.storeId = null;
 
-        // Фильтры для store
+        // Initialize API
+        this.api = new Api();
+
+        // Initialize components
+        this.ui = new WidgetUI(this);
+        this.search = new WidgetSearch(this);
+        this.language = new WidgetLanguage(this);
+
+        // Filter configuration
         this.selectedFilters = {
             price: null,
             color: null,
-            intensity: null,
+            intensity: null
         };
 
-        // Инициализируем виджет
-        this.initializeWidget();
-        this.initializeSearchAnimation();
-        this.sendEvent('widgetInitialized', { widgetType: this.widgetType });
-        this.loadInstantRecommendations();
-        this.createLanguageSwitcher();
+        // Initialize widget
+        this.initialized = this.initialize();
     }
 
-    sendEvent(eventType, data) {
-      // Моковая реализация отправки событий в API
-      console.log('Event sent:', eventType, data);
-  }
+    async trackEvent(eventType, data = {}, meta = {}) {
+        await this.initialized; // <-- ждём, пока storeId будет получен
+        trackWidgetEvent(eventType, this.storeId, data, meta);
+      }
 
-    getTitle(title) {
-      return !!title ? `<h1 class="wine-widget-big-title">${title}</h1>` :`<h1 class="wine-widget-big-title">
-  ${translator.translate('headerLine1')} 
-  <span class="icon icon-meal"></span>
-  <span class="icon-label">${translator.translate('headerMeal')}</span>,
-  <span class="icon icon-mood"></span>
-  <span class="icon-label">${translator.translate('headerMood')}</span>
-  </br>
-<!--   <span class="icon icon-budget"></span>  -->
-<!--  <span class="icon-label">${translator.translate('headerBudget')}</span>,  -->
-  ${translator.translate('headerOr')} 
-  <span class="icon icon-occasion"></span>
-  <span class="icon-label">${translator.translate('headerOccasion')}</span>
-  ${translator.translate('headerLine2')}
-</h1>`
+    async initialize() {
+        await translator.fetchConfig('storeName');
+        this.storeId = translator.storeId;
+        this.ui.initializeWidget();
+        this.search.addEventListeners();
+        this.ui.initializeSearchAnimation();
+        this.search.loadInstantRecommendations();
+        this.language.createLanguageSwitcher();
     }
 
-    initializeWidget() {
-        const widgetContainer = document.getElementById(this.widgetWrapper);
-        const widgetHTML = `
-            <div id="wine-widget-container">
-            <div class="wine-widget-wrapper">
-                            <div id="wine-widget-header">
-                            ${this.getTitle(this.titleText)}
-</div>
-
-<div id="wine-widget-search">
-  <!-- Иконка поиска слева -->
-  <span class="search-icon"></span>
-  
-  <!-- Поле ввода -->
-  <input 
-    type="text" 
-    id="wine-search-input" 
-    placeholder="${translator.translate('searchPlaceholder')}">
-  
-  <!-- Кнопка -->
-  <button id="wine-search-button">
-    ${translator.translate('searchButton')}
-  </button>
-</div>
-                <div id="wine-widget-right">
-                    <div id="loading-indicator" class="hidden">
-                        <div id="typing-indicator" class="typing-indicator">
-                            <span></span><span></span><span></span>
-                        </div>
-                    </div>
-                    <div id="wine-placeholder"></div>
-            </div>
-                            <div id="powered-by-widget">
-  <div class="powered-by-center">
-    <a href="https://wineater.com" target="_blank">
-        <span>${translator.translate('poweredBy')}</span>
-        <img src="${this.countryCode === 'ru' ? 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/divino_logo.svg?x=5' : 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/logo_medium_gray.svg'}" alt="Wineater Logo">
-        <span class="powered-by-sommelier">${translator.translate('AI sommelier')}</span>
-    </a>
-  </div>
-  <div class="powered-by-lang"></div>
-</div>
-                </div>
-            </div>
-        `;
-        widgetContainer.insertAdjacentHTML('beforeend', widgetHTML);
-        this.addEventListenersStoreVersion();
-    }
-
-    addEventListenersStoreVersion() {
-      document
-      .getElementById('wine-search-button')
-      .addEventListener('click', () => {
-          this.sendEvent('searchButtonClicked', { query: document.getElementById('wine-search-input').value });
-          this.handleSearch();
-      });
-    
-        // Привязка фильтров
-        this.setupFilterButtons('price-buttons', 'price');
-        this.setupFilterButtons('color-buttons', 'color');
-        this.setupFilterButtons('intensity-buttons', 'intensity');
-    
-        // Обработчик Enter в поле ввода
-        document
-          .getElementById('wine-search-input')
-          .addEventListener('keydown', (event) => {
-            if (event.key === 'Enter') {
-                this.handleSearch();
-            }
-        });
-    }
+    displayResults(wines, isAnimated = false) {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        this.ui.hideLoadingIndicator();
+        resultsContainer.innerHTML = '';
 
-    setupFilterButtons(containerId, filterKey) {
-        const buttons = document.querySelectorAll(`#${containerId} button`);
-        buttons.forEach(button => {
-            button.addEventListener('click', (e) => {
-                buttons.forEach(btn => btn.classList.remove('selected'));
-                e.target.classList.add('selected');
-                this.selectedFilters[filterKey] = e.target.dataset.value;
-                this.handleSearch();
-            });
-        });
-    }
+        const getValue = (wine, key) => wine[key] || wine[key.charAt(0).toUpperCase() + key.slice(1)];
+        const joinParams = (wine, keys) => keys.map(key => getValue(wine, key)).filter(Boolean).join(' • ');
+        const createTagHTML = tags => Array.isArray(tags) ? tags.map(tag => `<span class="popup-tag">${tag}</span>`).join('') : '';
 
-    async handleSearch() {
-        const query = 'wine for dish:' + document.getElementById('wine-search-input').value.trim() + ';';
-    
-        // Учитываем текущие выбранные фильтры
-        const filters = this.selectedFilters;
-    
-        // Формируем органичную фразу с фильтрами
-        const filterPhrases = [];
-        if (filters.price) {
-            filterPhrases.push(`price: ${filters.price || 'any'};`);
-        }
-        if (filters.color) {
-            filterPhrases.push(`color: ${filters.color || 'any'}; `);
-        }
-        if (filters.intensity) {
-            filterPhrases.push(`intensity: ${filters.intensity || 'any'}; `);
-        }
-    
-        // Объединяем фильтры с основным запросом
-        const fullQuery = filterPhrases.length > 0 
-            ? `${query} ${filterPhrases.join(', ')}`
-            : query;
-    
-        // Логирование запроса
-        console.log('Searching for:', fullQuery);
-        console.log('Applied filters:', filters);
+        const createPopupHTML = (wine) => {
+            const tags = wine.tags || wine.Tags;
+            const text = wine.reason || wine['Short Description'];
+            if (!text && !tags) return '';
+            
+            return `
+                <div class="wine-hover-popup">
+                    ${text ? `<div class="popup-reason">${text}</div>` : ''}
+                    ${tags ? `<div class="popup-tags">${createTagHTML(tags)}</div>` : ''}
+                </div>`;
+        };
 
-        this.sendEvent('searchPerformed', { query: fullQuery, filters });
-    
-        // Показать эффект исчезновения карточек и индикатор загрузки
-        this.animateCardDisappearance();
-        
-        try {
-            // Вызываем API метод для получения рекомендаций
-            const results = await this.api.getWineRecommendationsSearch(fullQuery);
-    
-            // Проверяем, есть ли данные
-            if (results && results.length > 0) {
-                console.log('Recommendations:', results);
-                // Отображаем результаты
-                this.displayResults(results, true);
-            } else {
-                console.log('No recommendations found.');
-                this.displayNoResultsMessage();
+        const formatPrice = (price) => {
+            if (typeof price !== 'number') {
+                price = Number(price);
             }
-        } catch (error) {
-            console.error('Error fetching wine recommendations:', error.message);
-            this.displayErrorMessage();
-        }
-    }
-
-    enableHoverPopups() {
-      const tiles = document.querySelectorAll('.wine-recommendation-tile');
-      
-      tiles.forEach(tile => {
-        const popup = tile.querySelector('.wine-hover-popup');
-        if (!popup) return;
-        
-        tile.addEventListener('mouseenter', () => {
-          popup.style.display = 'block';
-          popup.classList.add('slide-in');
-        });
-        
-        tile.addEventListener('mouseleave', () => {
-          popup.classList.remove('slide-in');
-          popup.style.display = 'none';
-        });
-      });
-    }
+            return price.toLocaleString('en-US');
+        };
 
-    displayResults(wines, isAnimated = false) {
-      const resultsContainer = document.getElementById('wine-placeholder');
-      this.hideLoadingIndicator();
-      resultsContainer.innerHTML = '';
-    
-      this.sendEvent('resultsDisplayed', { resultsCount: wines.length });
-    
-      const getValue = (wine, key) => wine[key] || wine[key.charAt(0).toUpperCase() + key.slice(1)];
-      const joinParams = (wine, keys) =>
-        keys.map(key => getValue(wine, key)).filter(Boolean).join(' • ');
-    
-      const createTagHTML = tags =>
-        Array.isArray(tags)
-          ? tags.map(tag => `<span class="popup-tag">${tag}</span>`).join('')
-          : '';
-    
-      const createPopupHTML = (wine) => {
-        const tags = wine.tags || wine.Tags;
-        const text = wine.reason || wine['Short Description'];
-        if (!text && !tags) return '';
-        return `
-          <div class="wine-hover-popup">
-            ${text ? `<div class="popup-reason">${text}</div>` : ''}
-            ${tags ? `<div class="popup-tags">${createTagHTML(tags)}</div>` : ''}
-          </div>`;
-      };
+        wines.forEach(async (wine, index) => {
+            const title = getValue(wine, 'title');
+            const image = getValue(wine, 'image');
+            const price = getValue(wine, 'total');
+            const url = getValue(wine, 'url');
+            const tags = wine.tags || wine.Tags;
+            const line1 = joinParams(wine, ['type', 'country', 'region', 'grape']);
+            const tagsHTML = tags ? createTagHTML(tags) : '';
+            const reasonPopupHTML = createPopupHTML(wine);
+            const shortDescription = wine['Short Description'];
+            const pairing = wine.pairing_recommendation;
+            const isSomm = wine.isSommSelection;
+
+            const wineHTML = `
+                <div class="wine-recommendation-tile ${isSomm ? 'somm-selection' : ''}">
+                    ${isSomm ? `<div class="somm-selection-badge">${translator.translate('wineDetails.sommSelection')}</div>` : ''}
+
+                    <div class="tile-top">
+                        ${image ? `<img src="${image}" alt="${title}" class="wine-image" />` : ''}
+                        <div class="wine-price">${formatPrice(price)} ${translator.getCurrency('label')}</div>
+                        <h3 class="wine-title">${title}</h3>
+                    </div>
 
-      function formatPrice(price) {
-        if (typeof price !== 'number') {
-          price = Number(price);
-        }
-      
-        return price.toLocaleString('en-US'); // e.g., 1000 -> "1,000"
-      }
-    
-      wines.forEach(async (wine, index) => {
-        const title = getValue(wine, 'title');
-        const image = getValue(wine, 'image');
-        const price = getValue(wine, 'total');
-        const url = getValue(wine, 'url');
-        const tags = wine.tags || wine.Tags;
-        const line1 = joinParams(wine, ['type', 'country', 'region', 'grape']);
-        const tagsHTML = tags ? createTagHTML(tags) : '';
-        const reasonPopupHTML = createPopupHTML(wine);
-        const shortDescription = wine['Short Description'];
-        const pairing = wine.pairing_recommendation;
-        const isSomm = wine.isSommSelection;
-    
-        const wineHTML = `
-          <div class="wine-recommendation-tile ${isSomm ? 'somm-selection' : ''}">
-            ${isSomm ? `<div class="somm-selection-badge">${translator.translate('wineDetails.sommSelection')}</div>` : ''}
-    
-            <div class="tile-top">
-              ${image ? `<img src="${image}" alt="${title}" class="wine-image" />` : ''}
-              <div class="wine-price">${formatPrice(price)} ${translator.getCurrency('label')}</div>
-              <h3 class="wine-title">${title}</h3>
-            </div>
-    
-            ${line1 ? `<div class="wine-params">${line1}</div>` : ''}
-    
-            <div class="bottom-row">
-              ${url
-                ? `<a class="buy-btn" href="${url}" target="_blank">${translator.translate('wineDetails.buy')}</a>`
-                : `<button class="buy-btn" data-toggle-info>${translator.translate('moreInfo')}</button>`
-              }
-            </div>
-    
-            <div class="card-popup hidden" data-wine-index="${index}">
-  <div class="card-popup-header">
-    <h2>${title}</h2>
-    <span class="card-popup-close">&times;</span>
-  </div>
-  ${shortDescription ? `<p class="popup-short-desc" data-orig="${shortDescription}">${shortDescription}</p>` : ''}
-  ${wine.reason ? `<div class="popup-reason" data-orig="${wine.reason}">${wine.reason}</div>` 
-                : pairing ? `<p class="popup-pairing" data-orig="${pairing}">${pairing}</p>` : ''}
-  ${tagsHTML ? `<div class="popup-tags">${tagsHTML}</div>` : ''}
-</div>
-    
-            ${reasonPopupHTML}
-          </div>
-        `;
-    
-        resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
-        const currentCard = resultsContainer.children[index];
-    
-        if (!url) {
-          const buyBtn = currentCard.querySelector('[data-toggle-info]');
-          const popup = currentCard.querySelector('.card-popup');
-          const closeBtn = currentCard.querySelector('.card-popup-close');
-        
-          closeBtn?.addEventListener('click', (e) => {
-            e.stopPropagation();
-            popup.classList.add('hidden');
-          });
+                    ${line1 ? `<div class="wine-params">${line1}</div>` : ''}
 
-          document.addEventListener('click', (e) => {
-            const isInsideAnyPopup = 
-              e.target.closest('.card-popup') || 
-              e.target.closest('.mobile-fullscreen-popup') || 
-              e.target.closest('[data-toggle-info]');
-          
-            if (!isInsideAnyPopup) {
-              document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
-              document.querySelectorAll('.mobile-fullscreen-wrapper').forEach(wrapper => wrapper.remove());
-            }
-          });
+                    <div class="bottom-row">
+                        ${url
+                            ? `<a class="buy-btn" href="${url}" target="_blank">${translator.translate('wineDetails.buy')}</a>`
+                            : `<button class="buy-btn" data-toggle-info>${translator.translate('moreInfo')}</button>`
+                        }
+                    </div>
 
-          if (this.widgetType === 'store') {
-            // For store type, show popup on hover
-            currentCard.addEventListener('mouseenter', () => {
-              popup.classList.remove('hidden');
-            });
-            
-            currentCard.addEventListener('mouseleave', () => {
-              popup.classList.add('hidden');
-            });
-          } else {
-            // For bar type, show popup on click
-            buyBtn?.addEventListener('click', (e) => {
-              e.stopPropagation();
-          
-              // Close all open popups
-              document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
-              document.querySelectorAll('.mobile-fullscreen-wrapper').forEach(p => p.remove());
-          
-              if (window.innerWidth <= 768) {
-                const popupContent = popup.innerHTML;
-          
-                const overlay = document.createElement('div');
-                overlay.className = 'mobile-fullscreen-wrapper';
-                overlay.innerHTML = `
-                  <div class="mobile-fullscreen-overlay"></div>
-                  <div class="card-popup mobile-fullscreen-popup">${popupContent}</div>
-                `;
-          
-                overlay.querySelector('.card-popup-close')?.addEventListener('click', () => overlay.remove());
-          
-                document.body.appendChild(overlay);
-              } else {
-                popup.classList.remove('hidden');
-              }
-            });
-          }
-        }
-    
-        setTimeout(() => {
-          currentCard.style.opacity = '1';
-          currentCard.style.transform = 'translateY(0)';
-        }, isAnimated ? index * 200 : 0);
-      });
+                    <div class="card-popup hidden" data-wine-index="${index}">
+                        <div class="card-popup-header">
+                            <h2>${title}</h2>
+                            <span class="card-popup-close">&times;</span>
+                        </div>
+                        ${shortDescription ? `<p class="popup-short-desc" data-orig="${shortDescription}">${shortDescription}</p>` : ''}
+                        ${wine.reason 
+                            ? `<div class="popup-reason" data-orig="${wine.reason}">${wine.reason}</div>` 
+                            : pairing 
+                                ? `<p class="popup-pairing" data-orig="${pairing}">${pairing}</p>` 
+                                : ''
+                        }
+                        ${tagsHTML ? `<div class="popup-tags">${tagsHTML}</div>` : ''}
+                    </div>
 
-      this.translatePopupContent(wines); // переводы подгружаются после отрисовки
-    
-      if (this.widgetType === 'store') {
-        this.enableHoverPopups();
-      }
-    }
+                    ${reasonPopupHTML}
+                </div>
+            `;
+
+            resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
+            const currentCard = resultsContainer.children[index];
+
+            if (!url) {
+                const buyBtn = currentCard.querySelector('[data-toggle-info]');
+                const popup = currentCard.querySelector('.card-popup');
+                const closeBtn = currentCard.querySelector('.card-popup-close');
+
+                closeBtn?.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    popup.classList.add('hidden');
+                    this.trackEvent(WIDGET_EVENTS.WINE_DETAILS_CLOSED, {
+                        wine_id: wine.ID,
+                        wine_title: wine.title || wine.Title
+                    });
+                });
+
+                document.addEventListener('click', (e) => {
+                    const isInsideAnyPopup = 
+                        e.target.closest('.card-popup') || 
+                        e.target.closest('.mobile-fullscreen-popup') || 
+                        e.target.closest('[data-toggle-info]');
+
+                    if (!isInsideAnyPopup) {
+                        document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
+                        document.querySelectorAll('.mobile-fullscreen-wrapper').forEach(wrapper => wrapper.remove());
+                    }
+                });
+
+                if (this.widgetType === 'store') {
+                    currentCard.addEventListener('mouseenter', () => {
+                        popup.classList.remove('hidden');
+                        this.trackEvent(WIDGET_EVENTS.WINE_CARD_HOVER, {
+                            wine_id: wine.ID,
+                            wine_title: wine.title || wine.Title
+                        });
+                    });
+                    
+                    currentCard.addEventListener('mouseleave', () => {
+                        popup.classList.add('hidden');
+                    });
+                } else {
+                    buyBtn?.addEventListener('click', (e) => {
+                        e.stopPropagation();
+
+                        document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
+                        document.querySelectorAll('.mobile-fullscreen-wrapper').forEach(p => p.remove());
+
+                        if (window.innerWidth <= 768) {
+                            const popupContent = popup.innerHTML;
+                            const overlay = document.createElement('div');
+                            overlay.className = 'mobile-fullscreen-wrapper';
+                            overlay.innerHTML = `
+                                <div class="mobile-fullscreen-overlay"></div>
+                                <div class="card-popup mobile-fullscreen-popup">${popupContent}</div>
+                            `;
+
+                            overlay.querySelector('.card-popup-close')?.addEventListener('click', () => overlay.remove());
+                            document.body.appendChild(overlay);
+                        } else {
+                            popup.classList.remove('hidden');
+                        }
+
+                        this.trackEvent(WIDGET_EVENTS.WINE_DETAILS_VIEWED, {
+                            wine_id: wine.ID,
+                            wine_title: wine.title || wine.Title,
+                            is_mobile: window.innerWidth <= 768
+                        });
+                    });
+                }
+            } else {
+                const buyBtn = currentCard.querySelector('.buy-btn');
+                buyBtn?.addEventListener('click', () => {
+                    this.trackEvent(WIDGET_EVENTS.BUY_BUTTON_CLICKED, {
+                        wine_id: wine.ID,
+                        wine_title: wine.title || wine.Title,
+                        wine_url: wine.url || wine.URL
+                    });
+                });
+            }
 
-    animateCardDisappearance() {
-        const cards = document.querySelectorAll('.wine-recommendation-tile');
-        cards.forEach((card, index) => {
             setTimeout(() => {
-                card.style.opacity = '0';
-                card.style.transform = 'translateY(-20px)';
-            }, index * 100); // Задержка между карточками
+                currentCard.style.opacity = '1';
+                currentCard.style.transform = 'translateY(0)';
+            }, isAnimated ? index * 200 : 0);
         });
 
-        setTimeout(() => {
-            document.getElementById('wine-placeholder').innerHTML = ''; // Удалить все карточки после анимации
-            this.showLoadingIndicator();
-        }, cards.length * 100 + 300); // Дождаться завершения анимации
-    }
-
-    showLoadingIndicator() {
-        const loadingIndicator = document.getElementById('loading-indicator');
-        loadingIndicator.classList.remove('hidden');
-    }
-
-    hideLoadingIndicator() {
-        const loadingIndicator = document.getElementById('loading-indicator');
-        loadingIndicator.classList.add('hidden');
-    }
-
-    displayNoResultsMessage() {
-        const resultsContainer = document.getElementById('wine-placeholder');
-        resultsContainer.innerHTML = `
-            <div class="no-results">
-                <p>${translator.translate('noResultsMessage') || 'No recommendations found for your query.'}</p>
-            </div>
-        `;
-    }
-
-    displayErrorMessage() {
-        const resultsContainer = document.getElementById('wine-placeholder');
-        resultsContainer.innerHTML = `
-            <div class="error-message">
-                <p>${translator.translate('errorMessage') || 'Something went wrong. Please try again later.'}</p>
-            </div>
-        `;
-    }
-
-    async translatePopupContent(wines) {
-      console.log(translator.language, translator.storeLanguage);
-      if (translator.language === translator.storeLanguage || this.widgetType !== 'bar') {
-        return;
-      }
-    
-      const possibleFields = ['Short Description', 'reason', 'pairing_recommendation', 'Tags', 'tags'];
-      const firstWine = wines[0];
-    
-      const fieldsToTranslate = possibleFields.filter(field => field in firstWine);
-      const batchSize = 4;
-    
-      for (let i = 0; i < wines.length; i += batchSize) {
-        const batch = wines.slice(i, i + batchSize);
-    
-        const translationPromises = batch.map(async (wine, index) => {
-          const globalIndex = i + index;
-    
-          // Сбор оригинальных текстов в формате [{ key, text }]
-          const entries = fieldsToTranslate
-            .map(field => {
-              const val = wine[field] || wine[field.toLowerCase()];
-              if (!val) return null;
-              return { key: field, text: Array.isArray(val) ? val.join(', ') : val };
-            })
-            .filter(Boolean);
-    
-          if (entries.length === 0) return;
-    
-          // Перевод
-          const translatedArray = await translator.translateTexts(
-            Object.fromEntries(entries.map(entry => [entry.key, entry.text]))
-          );
-    
-          const popup = document.querySelector(`.card-popup[data-wine-index="${globalIndex}"]`);
-          if (!popup) return;
-    
-          // Применение перевода
-          if (translatedArray['Short Description']) {
-            const el = popup.querySelector('.popup-short-desc');
-            if (el) el.textContent = translatedArray['Short Description'];
-          }
-    
-          if (translatedArray.reason) {
-            const el = popup.querySelector('.popup-reason');
-            if (el) el.textContent = translatedArray.reason;
-          }
-    
-          if (translatedArray.pairing_recommendation) {
-            const el = popup.querySelector('.popup-pairing');
-            if (el) el.textContent = translatedArray.pairing_recommendation;
-          }
-    
-          const tags = translatedArray.tags || translatedArray.Tags;
-          if (tags) {
-            const tagArray = tags.split(',').map(tag => tag.trim());
-            const tagHTML = tagArray.map(tag => `<span class="popup-tag">${tag}</span>`).join('');
-            const tagsContainer = popup.querySelector('.popup-tags');
-            if (tagsContainer) tagsContainer.innerHTML = tagHTML;
-          }
-        });
-    
-        await Promise.all(translationPromises);
-      }
-    }
+        this.language.translatePopupContent(wines);
 
-    async loadInstantRecommendations() {
-        this.showLoadingIndicator();
-        try {
-            const recommendations = await this.api.getInstantRecommendations();
-            this.displayResults(recommendations); // Обновляем отображение рекомендаций
-        } catch (error) {
-            console.error('Error loading instant recommendations:', error.message);
+        if (this.widgetType === 'store') {
+            this.ui.enableHoverPopups();
         }
     }
-
-      initializeSearchAnimation() {
-    const searchInput = document.getElementById('wine-search-input');
-    const suggestions = translator.translate('placeholderSuggestions');
-    let index = 0;
-    let charIndex = 0;
-    let typingForward = true;
-    let isInputFocused = false;
-
-    const typeEffect = () => {
-        if (isInputFocused) return; // Если фокус в поле ввода, эффект останавливается
-        if (typingForward) {
-            searchInput.placeholder = suggestions[index].substring(0, charIndex++);
-            if (charIndex > suggestions[index].length) {
-                typingForward = false;
-                setTimeout(typeEffect, 2000); // Пауза после завершения строки
-            } else {
-                setTimeout(typeEffect, 100); // Скорость ввода
-            }
-        } else {
-            searchInput.placeholder = suggestions[index].substring(0, charIndex--);
-            if (charIndex < 0) {
-                typingForward = true;
-                index = (index + 1) % suggestions.length; // Переход к следующей подсказке
-                setTimeout(typeEffect, 500); // Пауза перед началом следующей строки
-            } else {
-                setTimeout(typeEffect, 50); // Скорость удаления
-            }
-        }
-    };
-
-    typeEffect();
-
-    // Очистка строки и остановка эффекта при фокусе
-    searchInput.addEventListener('focus', () => {
-        searchInput.placeholder = '';
-        isInputFocused = true; // Останавливаем эффект
-    });
-
-    // Возобновление эффекта при потере фокуса
-    searchInput.addEventListener('blur', () => {
-        isInputFocused = false; // Возобновляем эффект
-        charIndex = 0;
-        typingForward = true;
-        typeEffect();
-    });
-}
-
-createLanguageSwitcher() {
-  const langContainer = document.querySelector('#powered-by-widget .powered-by-lang');
-  const languages = translator.getSupportedLanguages();
-  if (!languages) return;
-
-  const currentLanguage = translator.language;
-
-  const dropdown = document.createElement('select');
-  dropdown.id = 'language-dropdown';
-  dropdown.className = 'language-dropdown';
-
-  languages.forEach(lang => {
-    const option = document.createElement('option');
-    option.value = lang;
-    option.textContent = lang.toUpperCase();
-    option.selected = lang === currentLanguage;
-    dropdown.appendChild(option);
-  });
-
-  dropdown.onchange = (event) => {
-    const selectedLang = event.target.value;
-
-    // Обновляем URL без перезагрузки страницы
-    const url = new URL(window.location.href);
-    url.searchParams.set('lang', selectedLang);
-
-    // Обновляем localStorage тоже, на всякий случай
-    localStorage.setItem('selectedLanguage', selectedLang);
-
-    // Перенаправляем пользователя с обновлённым URL
-    window.location.href = url.toString();
-  };
-
-  langContainer.appendChild(dropdown);
-}
 }