Andrei | фикс каталога (работа формы сообщить о наличии товара в каталоге)

wp-content/themes/cosmopet/modules/forms/assets/js/form.js

@@ -73,6 +73,28 @@ jQuery(document).ready(function($) {
             });
         }
     });
+
+    $('.modal__form-sub').on('submit', function (e) {
+        e.preventDefault();
+        var email = $(this).find('input[name="email"]').val()
+        var data = $(this).serialize()
+        $.ajax({
+            type: 'post',
+            url: woocommerce_params.ajax_url,
+            data: data,
+            beforeSend: function (response) {
+                
+            },
+            complete: function (response) {
+                $('.modal__to-know').removeClass('active')
+                $('#sub-result-email').html(email)
+                $('.modal__to-know-submit').addClass('active').css('filter', 'blur(0px)')
+            },
+            success: function (response) {
+               
+            },
+        });
+  });
 });
 
 const metaLocale = document.querySelector('meta[property="og:locale"]');
@@ -141,3 +163,5 @@ const localeValue = metaLocale.getAttribute('content');
               errorMessage.remove();
           });
       }
+
+

wp-content/themes/cosmopet/modules/forms/module-ajax-controller.php

@@ -23,6 +23,17 @@ add_action('wp_ajax_nopriv_subscribe_form', function() {
 });
 
 
+add_action('wp_ajax_to_know_form', function() {
+    $enabledHandlers = ['b24']; 
+    process_form($enabledHandlers);
+});
+
+add_action('wp_ajax_nopriv_to_know_form', function() {
+    $enabledHandlers = ['b24'];
+    process_form($enabledHandlers);
+});
+
+
 function process_form($enabledHandlers) {
     $formData = $_POST['formData'];
     $handler = FormHandlerFactory::getHandler($enabledHandlers);

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -1352,7 +1352,7 @@ textarea{
 .checkbox.active .checkbox__state{
   background-color: var(--background-black);
 
-  background-image: url(../img/svg/main/arrow-selected-white.svg);
+  background-image: url(../../../../static/img/svg/main/arrow-selected-white.svg);
   background-repeat: no-repeat;
   background-position: center;
 }

wp-content/themes/cosmopet/modules/layout/module-controller.php

@@ -10,4 +10,5 @@ include_module('header');
 include_component('shop', 'cart');
 include_module('shop');
 include_module('popup');
+include_module('forms');
 include_module('footer');

wp-content/themes/cosmopet/modules/popup/assets/js/modal.js

@@ -92,5 +92,9 @@ window.addEventListener('resize', () => {
     modalOpen('.basket-open', '.modal__basket');
     modalOpen('.open-to-know', '.modal__to-know');
     modalOpen('.login-open', '.modal__login');
-    modalClose('.modal__close');
+    modalClose('.modal__close, .m__close');
 });
+
+jQuery('[data-pname]').on('click', function(){
+    jQuery('#sub_product_name').val(jQuery(this).data('pname'))
+})

wp-content/themes/cosmopet/templates/modal.twig

@@ -16,52 +16,7 @@
 
         {% include 'modal/basket.twig' %}
 
-        <div class="modal__item modal__to-know modal__item--no-title">
+        {% include 'modal/to_know.twig' %}
-            <button class="modal__close">
-                <img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
-            </button>
-            <div class="modal__header">
-                <p class="modal__small-title">{{ fn ('pll_e', 'Узнать о поступлении') }}</p>
-                <p class="modal__text">
-                    {{ fn ('pll_e', 'Оставьте свой e-mail, и мы оповестим вас, когда продукт появится') }}
-                </p>
-
-                <form action="" class="modal__form-sub">
-                    <div class="label">
-                        <label for="mail" class="label__title">
-                            {{ fn ('pll_e', 'mail') }}
-                        </label>
-                    </div>
-                    <input type="text" class="form__input" id="mail" placeholder="Email">
-                    <div class="checkbox checkbox--small">
-                        <div class="checkbox__state"></div>
-                        <input type="checkbox" name="" id="" class="checkbox__input">
-                        <label for="" class="checkbox__label">
-                            {{ fn ('pll_e', 'Я ознакомился с <a href="#">политикой обработки персональных данных</a> и <a href="#">пользовательским соглашением') }}</a>
-                        </label>
-                    </div>
-
-                    <input type="submit" value="Оставить почту" class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
-                </form>
-            </div>
-            
-        </div>
-
-        <div class="modal__item modal__to-know-submit modal__item--no-title">
-            <button class="modal__close">
-                <img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
-            </button>
-            <div class="modal__header">
-                <p class="modal__small-title">{{ fn ('pll_e', 'Подписка на товар оформлена') }}</p>
-                <p class="modal__text">
-                    {{ fn ('pll_e', 'На ваш e-mail <span id="email_current"></span> придет письмо, как только продукт появится в наличии.') }}
-                </p>
-                <button class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
-                   {{ fn ('pll_e', 'Продолжить покупки') }} 
-                </button>
-            </div>
-            
-        </div>
 
         {% include 'modal/login.twig' %}
     </aside>

wp-content/themes/cosmopet/templates/modal/to_know.twig

@@ -0,0 +1,48 @@
+        <div class="modal__item modal__to-know modal__item--no-title">
+            <button class="modal__close">
+                <img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
+            </button>
+            <div class="modal__header">
+                <p class="modal__small-title">{{ fn ('pll_e', 'Узнать о поступлении') }}</p>
+                <p class="modal__text">
+                    {{ fn ('pll_e', 'Оставьте свой e-mail, и мы оповестим вас, когда продукт появится') }}
+                </p>
+
+                <form action="" class="modal__form-sub">
+                    <div class="label">
+                        <label for="mail" class="label__title">
+                            {{ fn ('pll_e', 'mail') }}
+                        </label>
+                    </div>
+                    <input type="hidden" name="sub_product" value="" id="sub_product_name">
+                    <input type="hidden" name="action" value="to_know_form">
+                    <input type="text" class="form__input" id="mail" placeholder="Email">
+                    <div class="checkbox checkbox--small active">
+                        <div class="checkbox__state"></div>
+                        <input type="checkbox" name="" checked id="" class="checkbox__input">
+                        <label for="" class="checkbox__label">
+                            {{ fn ('pll_e', 'Я ознакомился с <a href="#">политикой обработки персональных данных</a> и <a href="#">пользовательским соглашением') }}</a>
+                        </label>
+                    </div>
+
+                    <input type="submit" value="Оставить почту" class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit">
+                </form>
+            </div>
+        
+        </div>
+
+        <div class="modal__item modal__to-know-submit modal__item--no-title">
+            <button class="modal__close">
+                <img src="/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg" alt="">
+            </button>
+            <div class="modal__header">
+                <p class="modal__small-title">{{ fn ('pll_e', 'Подписка на товар оформлена') }}</p>
+                <p class="modal__text">
+                    {{ fn ('pll_e', 'На ваш e-mail <span id="email_current"></span> придет письмо, как только продукт появится в наличии.') }}
+                </p>
+                <button class="button button--white button--red-48-px button--100-perc active modal-form-sub__submit m__close">
+                   {{ fn ('pll_e', 'Продолжить покупки') }} 
+                </button>
+            </div>
+            
+        </div>

wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-core.css

@@ -876,8 +876,7 @@ button{
 
   width: 16px;
   aspect-ratio: 1;
-
+  background-image: url(../../static/img/svg/main/arrow-selected-white.svg);
-  background-image: url(../img/svg/main/arrow-selected-white.svg);
   background-repeat: no-repeat;
   background-position: center;
 }
@@ -1258,7 +1257,7 @@ button{
 
 .wpfFilterContent ul li input[type="checkbox"]:checked {
   background-color: var(--background-black);
-  background-image: url(../img/svg/main/arrow-selected-white.svg);
+  background-image: url(../../static/img/svg/main/arrow-selected-white.svg);
   background-repeat: no-repeat;
   background-position: center;
 }