selects js

assets/css/gp-style-core.css

@@ -640,7 +640,7 @@ button{
 
   padding: 11px 47px 11px 13px;
 
-  pointer-events:none;
+  /* pointer-events:none; */
 
   border: 1px solid var(--background-black);
   border-radius: 20px;
@@ -651,6 +651,8 @@ button{
   line-height: 120%;
   color: var(--text-black);
 
+  cursor: pointer;
+
   position: relative;
 
   transition: opacity .2s ease-out;
@@ -671,6 +673,8 @@ button{
   background-image: url(../img/svg/main/arrow-black.svg);
   background-repeat: no-repeat;
   background-size: contain;
+
+  pointer-events: none;
 }
 .state__block{
   position: absolute;
@@ -681,6 +685,8 @@ button{
 
   height: 0;
   overflow: hidden;
+
+  transition: height .2s ease-out;
 }
 .state__content{
   padding: 8px;

assets/css/gp-style-desktop.css

@@ -487,20 +487,7 @@
 
     position: relative;
   }
-  .product-item-overlay__tags li:nth-child(n+2)::before{
+  .product-item-overlay__tags li:nth-child(n+1)::after{
-    content: '';
-
-    position: absolute;
-    top: 6px;
-    left: -8px;
-
-    width: 4px;
-    aspect-ratio: 1;
-
-    background-color: var(--text-3);
-    border-radius: 50%;
-  }
-  .product-item-overlay__tags li:nth-child(n+2)::after{
     content: '';
 
     position: absolute;

assets/js/gp-main.js

@@ -1,9 +1,80 @@
 'use strict';
 
 // header
-
+toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
 // header 
 
+// media
+modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
+modalClose('.modal__close');
+// media
+
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
+
+// select
+toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
+
+let selects = document.querySelectorAll('.select');
+
+selects.forEach(e => {
+    let state = e.querySelector('.select__state'),
+        buttons = e.querySelectorAll('.state__button');
+        
+    buttons.forEach(e => {
+        let button = e;
+
+        e.onclick = function (event) {
+            event.preventDefault();
+
+            buttons.forEach(element => {
+                if (element.classList.contains('active')) {
+                    element.classList.remove('active');
+                }
+            })          
+            
+            let text = e.textContent.trim();
+            state.value = text;
+
+            button.classList.add('active');
+        }        
+    })
+})
+// select
+
+// counter
+let counters = document.querySelectorAll('.counter');
+
+counters.forEach(e => {
+    let minus = e.querySelector('.minus'),
+        plus  = e.querySelector('.plus'),
+        input = e.querySelector('.counter__input');
+
+        minus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number >= 2){
+                input.value = Number(number) - 1;
+            }
+        }
+
+        plus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number <= 99) {
+                input.value = Number(number) + 1;
+            }
+        }
+})
+// counter
 
 // checkbox 
 let checkbox = document.querySelectorAll('.checkbox');
@@ -22,17 +93,6 @@ checkbox.forEach(e => {
 })
 // checkbox 
 
-// media
-modalOpen('.button--filter', '.modal__filter');
-modalOpen('.basket-open', '.modal__basket');
-modalClose('.modal__close');
-// media
-
-// toggle
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
-
-
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
@@ -124,3 +184,21 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement,
         
     });
 }
+
+function singleToggleOpenX(button, content, blockheight) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+        }
+    }
+}

index.html

@@ -297,7 +297,7 @@
                                         <p class="product-item-overlay-field__title">Объем</p>
 
                                         <div class="select">
-                                            <input type="text" class="select__state" value="2 кг">
+                                            <input type="text" class="select__state" value="2 кг" readonly>
                                             <div class="state__block">
                                                 <ul class="state__content">
                                                     <li>
@@ -323,11 +323,11 @@
                                         <p class="product-item-overlay-field__title">Количество</p>
 
                                         <div class="counter">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -630,11 +630,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -653,11 +653,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -676,11 +676,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -699,11 +699,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -722,11 +722,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>