wineater-bot 3.1.7 → 3.1.9

package/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
-    <script>window.wineaterData = {CLIENT_TOKEN: 'MiRfsL8z0DBrQ70lHTZqGvveYYZwbC2lyteMShxwHEvhOPBjYWZHy7zsRbfcUqzf', TYPE: 'widget', WIDGET_TYPE: 'store',  WIDGET_WRAPPER: 'wineater-widget-conteiner'};</script>
+    <script>window.wineaterData = {CLIENT_TOKEN: 'MiRfsL8z0DBrQ70lHTZqGvveYYZwbC2lyteMShxwHEvhOPBjYWZHy7zsRbfcUqzf', TYPE: 'widget', WIDGET_TYPE: 'store',  WIDGET_WRAPPER: 'wineater-widget-conteiner', TITLE_TEXT: 'ghbdtn'};</script>
         <!-- <script type="module" src="./dist/wineater-chatbot.umd.js"></script> -->
     <script type="module" src="./src/index.js"></script>
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/js/widget-styles.js

@@ -37,11 +37,11 @@ body {
   box-sizing: border-box;
 }
 
-.wine-widget-wrapper {
+#wine-widget-container .wine-widget-wrapper {
   width: 100%;
 }
 
-#wine-widget-right {
+#wine-widget-container #wine-widget-right {
   position: relative;
   min-height: 300px;
 }
@@ -85,7 +85,7 @@ body {
 }
 
 /* ===================== 5) Иконки и цветные подписи (meal, mood...) ===================== */
-.icon {
+#wine-widget-container .icon {
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
@@ -95,37 +95,37 @@ body {
   background-size: contain;
 }
 
-.icon-meal {
+#wine-widget-container .icon-meal {
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal1.svg');
 }
-.icon-meal:hover {
+#wine-widget-container .icon-meal:hover {
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal3.svg');
 }
-.icon-mood {
+#wine-widget-container .icon-mood {
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//mood.svg');
 }
-.icon-budget {
+#wine-widget-container .icon-budget {
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//budget.svg');
 }
-.icon-occasion {
+#wine-widget-container .icon-occasion {
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//ocasion.svg');
 }
 
 /* Подпись к иконкам */
-.icon-label {
+#wine-widget-container .icon-label {
   color: var(--wineater-color);
   font-weight: 500;
 }
 
 /* ===================== 6) Поисковая строка (input + кнопка) ===================== */
-#wine-widget-search {
+#wine-widget-container #wine-widget-search {
   position: relative;
   margin: 20px auto;
   display: flex;
   justify-content: center;
 }
 
-.search-icon {
+#wine-widget-container .search-icon {
   position: absolute;
   left: 12px;
   top: 50%;
@@ -138,7 +138,7 @@ body {
   z-index: 2;
 }
 
-#wine-search-input {
+#wine-widget-container #wine-search-input {
   width: 100%;
   padding: 12px 60px 12px 40px; /* место под иконку и кнопку */
   font-size: 16px;
@@ -182,25 +182,25 @@ body {
 }
 
 /* ===================== 7) Фильтр-группы ===================== */
-.filter-group {
+#wine-widget-container .filter-group {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
 }
 
-.filter-label {
+#wine-widget-container .filter-label {
   font-size: 16px;
   font-weight: bold;
   color: #333;
   margin-bottom: 8px;
 }
 
-.filter-buttons {
+#wine-widget-container .filter-buttons {
   display: flex;
   gap: 8px;
 }
 
-.filter-buttons button {
+#wine-widget-container .filter-buttons button {
   padding: 10px 16px;
   border: 1px solid #ccc;
   border-radius: 8px;
@@ -209,18 +209,18 @@ body {
   font-size: 14px;
   transition: all 0.2s ease;
 }
-.filter-buttons button:hover {
+#wine-widget-container .filter-buttons button:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
 }
-.filter-buttons button.selected {
+#wine-widget-container .filter-buttons button.selected {
   background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
   color: white;
   border: none;
 }
 
 /* ===================== 8) Карточки рекомендаций (tiles) ===================== */
-.wine-recommendation-tile {
+#wine-widget-container .wine-recommendation-tile {
   display: flex;
   flex-direction: column;
   align-items: center; /* всё по центру */
@@ -232,11 +232,11 @@ body {
   transform: translateY(20px); /* чтобы анимация была заметна */
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
-.wine-recommendation-tile:last-child {
+#wine-widget-container .wine-recommendation-tile:last-child {
   border-right: none;
 }
 
-.tile-top {
+#wine-widget-container .tile-top {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -246,7 +246,7 @@ body {
 
 
 /* Картинка */
-.wine-image {
+#wine-widget-container .wine-image {
   width: 180px;   /* или 200px, на ваш вкус */
   height: auto;
   object-fit: contain; /* чтобы не обрезалось, если нужно */
@@ -255,7 +255,7 @@ body {
 }
 
 /* Детальный блок */
-.tile-details {
+#wine-widget-container .tile-details {
   /* Можно дополнительные отступы или нет */
   display: flex;
   flex-direction: column;
@@ -264,7 +264,7 @@ body {
 }
 
 /* Заголовок вина */
-.wine-title {
+#wine-widget-container .wine-title {
   font-size: 20px;  /* крупнее */
   font-weight: 700; 
   margin: 0 0 8px;
@@ -274,14 +274,14 @@ body {
   color: #000;
 }
 
-.wine-params {
+#wine-widget-container .wine-params {
   font-size: 14px;
   color: #666;
   white-space: normal; 
   text-align: center;
 }
 
-.param-chips-container {
+#wine-widget-container .param-chips-container {
   display: flex;
   flex-wrap: wrap;      /* чтобы чипсы переносились на новую строку при нехватке места */
   gap: 8px;             /* небольшой промежуток между чипсами */
@@ -289,7 +289,7 @@ body {
   margin-bottom: 12px;  /* отступ от нижнего блока */
 }
 
-.wine-chip {
+#wine-widget-container .wine-chip {
   display: inline-block;
   background: #fff;                /* белый фон */
   font-size: 14px;
@@ -307,7 +307,7 @@ body {
   
 
 
-.param-table {
+#wine-widget-container .param-table {
   display: grid;
   /* Две колонки, каждая 50% */
   grid-template-columns: 50% 50%;
@@ -322,7 +322,7 @@ body {
 }
 
 /* Каждая ячейка */
-.param-table .cell {
+#wine-widget-container .param-table .cell {
   padding: 8px;
   /* Горизонтальная линия */
   box-sizing: border-box;
@@ -332,17 +332,17 @@ body {
 
 /* Вертикальная граница между левым и правым столбцом —
    т.е. у всех ячеек, идущих в левой колонке */
-.param-table .cell:nth-child(2n+1) {
+#wine-widget-container .param-table .cell:nth-child(2n+1) {
   border-right: 1px solid #ddd;
 }
 
-.param-table .cell:nth-last-child(-n + 2) {
+#wine-widget-container .param-table .cell:nth-last-child(-n + 2) {
   border-bottom: none;
 }
 
 
 /* Нижняя строка (цена + кнопка) */
-.bottom-row {
+#wine-widget-container .bottom-row {
 margin-top: auto; /* прижимает .bottom-row к низу 
   display: flex;
   align-items: center;
@@ -353,14 +353,14 @@ margin-top: auto; /* прижимает .bottom-row к низу
 }
 
 /* Цена */
-.wine-price {
+#wine-widget-container .wine-price {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 8px;
   color: #333;
 }
 
-.buy-btn {
+#wine-widget-container .buy-btn {
   margin: 16px auto 0;    /* центрируем и отступ сверху */
   background-color: transparent;
   color: var(--wineater-color);
@@ -375,14 +375,14 @@ margin-top: auto; /* прижимает .bottom-row к низу
   transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
 }
 
-.buy-btn:hover {
+#wine-widget-container .buy-btn:hover {
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
   background-color: var(--wineater-color);
   color: #fff;
 }
 
 /* Аналогично для .more-info-btn (если хотите стилизовать её тоже как кнопку) */
-.more-info-btn {
+#wine-widget-container .more-info-btn {
   display: inline-block;
   background-color: var(--wineater-color);
   color: #fff;
@@ -395,20 +395,20 @@ margin-top: auto; /* прижимает .bottom-row к низу
   margin-right: 8px;
   transition: transform 0.2s, box-shadow 0.2s;
 }
-.more-info-btn:hover {
+#wine-widget-container .more-info-btn:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
 }
 
 
 /* ===================== 9) Стиль для Somm Selection ===================== */
-.somm-selection {
+#wine-widget-container .somm-selection {
   position: relative;
 //   border: 2px solid #FFD700;
 //   background: linear-gradient(white, #FFF8DC);
 //   box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
 }
-.somm-selection-badge {
+#wine-widget-container .somm-selection-badge {
   position: absolute;
   top: -10px;
   left: 10px;
@@ -449,7 +449,7 @@ margin-top: auto; /* прижимает .bottom-row к низу
 
 /* ===================== 12) Бар-версия (при необходимости) ===================== */
 /* Грид блюд бара */
-.dish-grid {
+#wine-widget-container .dish-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 12px;
@@ -457,7 +457,7 @@ margin-top: auto; /* прижимает .bottom-row к низу
 }
 
 /* Плитка блюда */
-.dish-tile {
+#wine-widget-container .dish-tile {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -470,11 +470,11 @@ margin-top: auto; /* прижимает .bottom-row к низу
   cursor: pointer;
   transition: all 0.2s ease;
 }
-.dish-tile:hover {
+#wine-widget-container .dish-tile:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
 }
-.dish-tile.selected {
+#wine-widget-container .dish-tile.selected {
   background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
   color: #fff;
 }
@@ -554,6 +554,9 @@ margin-top: auto; /* прижимает .bottom-row к низу
     padding: 16px;
     min-width: 100vw;
   }
+    #wine-widget-header h1 {
+    display: none;
+}
   #wine-placeholder {
     display: flex;
     gap: 8px;
@@ -566,13 +569,13 @@ margin-top: auto; /* прижимает .bottom-row к низу
   #wine-widget-header p {
     display: none; /* скрываем подзаголовок на мобильных, если не нужен */
   }
-  .wine-recommendation-tile {
+  #wine-widget-container .wine-recommendation-tile {
     flex: 0 0 auto;
     scroll-snap-align: center;
     width: 240px;
     text-align: center;
   }
-  .tile-details {
+  #wine-widget-container .tile-details {
     text-align: center;
   }
 }

package/src/js/widget.js

@@ -12,6 +12,7 @@ export class WineWidget {
         this.titleText = window?.wineaterData?.TITLE_TEXT;
         this.subtitleText = window?.wineaterData?.SUBTITLE_TEXT;
         this.api = new Api(); 
+        console.log(this.titleText);
 
         // Фильтры для store
         this.selectedFilters = {
@@ -39,14 +40,8 @@ export class WineWidget {
         }
     }
 
-    initializeWidget() {
-        const widgetContainer = document.getElementById(this.widgetWrapper);
-        if (this.widgetType === 'store') {
-        const widgetHTML = `
-            <div id="wine-widget-container">
-            <div class="wine-widget-wrapper">
-                            <div id="wine-widget-header">
-<h1 class="wine-widget-big-title">
+    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>,
@@ -59,7 +54,17 @@ export class WineWidget {
   <span class="icon icon-occasion"></span>
   <span class="icon-label">${translator.translate('headerOccasion')}</span>
   ${translator.translate('headerLine2')}
-</h1>
+</h1>`
+    }
+
+    initializeWidget() {
+        const widgetContainer = document.getElementById(this.widgetWrapper);
+        if (this.widgetType === 'store') {
+        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">