Fix | script and login popup bugs fix

Fix | script and login popup bugs fix
pull/22/head
Andrei-10 3 months ago
parent 338d43724d
commit 3aa9b634b2
  1. 7
      wp-content/themes/cosmopet/functions.php
  2. 8
      wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css
  3. 5
      wp-content/themes/cosmopet/static/front-page/js/main.js
  4. 64
      wp-content/themes/cosmopet/templates/footer.twig
  5. 2
      wp-content/themes/cosmopet/templates/modal.twig
  6. 51
      wp-content/themes/cosmopet/templates/modal/login.twig
  7. 151
      wp-content/themes/cosmopet/templates/profile/profile.twig
  8. 502
      wp-content/themes/cosmopet/templates/where_to_buy/template_wtb.php
  9. 0
      wp-content/themes/cosmopet/templates/where_to_buy/wtb.twig

@ -1149,5 +1149,12 @@ function change_wbw_filter_button_text($text) {
add_filter('wbw_filter_reset_button_text', 'change_wbw_reset_button_text'); add_filter('wbw_filter_reset_button_text', 'change_wbw_reset_button_text');
function change_wbw_reset_button_text($text) { function change_wbw_reset_button_text($text) {
return 'Сбросить'; return 'Сбросить';
}
add_action('template_redirect', 'custom_redirect_cart_page');
function custom_redirect_cart_page() {
if (is_cart()) {
wp_redirect(home_url('/'));
exit;
}
} }

@ -744,8 +744,8 @@ width: 0px;
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 50%; border-radius: 50%;
right: 30px; right: 3px;
bottom: 20px; bottom: 2px;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 9px; font-size: 9px;
@ -756,3 +756,7 @@ width: 0px;
.mini-profile__button--counter.disabled{ .mini-profile__button--counter.disabled{
display: none; display: none;
} }
.mini-profile__button{
position: relative;
}

@ -467,7 +467,6 @@ document.addEventListener('DOMContentLoaded', function () {
}); });
}); });
<<<<<<< HEAD
// Находим все элементы с классом login-open // Находим все элементы с классом login-open
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const loginButtons = document.querySelectorAll('.login-open'); const loginButtons = document.querySelectorAll('.login-open');
@ -520,8 +519,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Сбрасываем ширину // Сбрасываем ширину
modalAside.style.width = ''; modalAside.style.width = '';
} }
}); });
=======
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Initialize Swiper // Initialize Swiper
@ -591,4 +589,3 @@ document.addEventListener('DOMContentLoaded', function() {
} }
}); });
}); });
>>>>>>> ec84500a88f048324cf2940bad3ba7528694953e

@ -55,73 +55,9 @@
<!-- Footer end --> <!-- Footer end -->
<div class="modal">
<aside class="modal__aside">
<div class="modal__item modal__login">
<button class="modal__close">
<img src="<?php bloginfo('template_url');?>/gp-include/assets/core/img/svg/main/black-x.svg" alt="">
</button>
<div class="login_wrap login_forms">
<div class="login_inner step active">
<h2 class="login_title">Войти или зарегистрироваться</h2>
<div class="login_subtitle">Подтвердите свой e-mail в письме</div>
<div class="login_input js-input-email">
<input type="text" name="email" placeholder="example@example.com"/>
<div class="login_error"></div>
</div>
<button class="login_btn btn_gradient js-get-code">Получить код</button>
{{ function('tgWidget') }}
</div>
<div class="login_inner step">
<div class="login_back">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#121212"/><path d="M8.5 16.3633H25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 16.3633L14.864 22.7272" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 16.3633L14.864 9.99932" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h2 class="login_title">Введите код</h2>
<div class="login_subtitle">Код отправленный на e-mail:<span class="sended_email"></span></div>
<div class="login_input js-input-code">
<input type="text" name="code" placeholder="0000"/>
<div class="login_error"></div>
</div>
<div class="login_timer">Запросить новый код: <span class="seconds">15</span> секунд</div>
<button class="login_btn btn_gradient js-repeat-code">Запросить новый код</button>
</div>
<div class="login_privacy">
Нажимая на кнопку «Получить код», я даю согласие на обработку моих персональных данных в соответствии с <a href="/privacy-policy">политикой обработки персональных данных</a>
</div>
</div>
<div class="login_wrap login_success hide">
<div class="login_inner active">
<h2 class="login_title">Спасибо<br />за авторизацию</h2>
<div class="login_subtitle">Теперь вы можете получать промокоды за покупки.</div>
<img src="<?php bloginfo('template_url');?>/images/people.png" alt=""/>
<a href="/my-account" class="login_btn account_link">Заполнить профиль</a>
</div>
</div>
<div class="login_wrap login_auth hide">
<div class="login_inner active">
<h2 class="login_title --text-center">
Вы вошли в систему</h2>
<img src="<?php bloginfo('template_url');?>/images/people.png" alt=""/>
<a href="/my-account" class="login_btn account_link">Профиль</a>
</div>
</div>
</div>
</aside>
</div>
{% verbatim %} {% verbatim %}
<div class="modal modal-success" style="display: none;">
<div class="modal-content">
<div class="close-button">&times;</div>
<h2 class="modal-title">ВАША ЗАЯВКА ПРИНЯТА!</h2>
<div class="modal-message">
<p>Спасибо! Сообщение успешно отправлено.</p>
<p>Наш менеджер скоро свяжемся с вами<br>для уточнения деталей.</p>
</div>
<div class="modal-button-container">
<a href="/" class="submit-button">Вернуться на сайт</a>
<div class="mform mform-success" style="display: none;"> <div class="mform mform-success" style="display: none;">
<div class="mform-content"> <div class="mform-content">

@ -62,5 +62,7 @@
</div> </div>
</div> </div>
{% include 'modal/login.twig' %}
</aside> </aside>
</div> </div>

@ -0,0 +1,51 @@
<div class="modal__item modal__login">
<button class="modal__close">
<img src="<?php bloginfo('template_url');?>/gp-include/assets/core/img/svg/main/black-x.svg" alt="">
</button>
<div class="login_wrap login_forms">
<div class="login_inner step active">
<h2 class="login_title">Войти или зарегистрироваться</h2>
<div class="login_subtitle">Подтвердите свой e-mail в письме</div>
<div class="login_input js-input-email">
<input type="text" name="email" placeholder="example@example.com"/>
<div class="login_error"></div>
</div>
<button class="login_btn btn_gradient js-get-code">Получить код</button>
{{ function('tgWidget') }}
</div>
<div class="login_inner step">
<div class="login_back">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#121212"/><path d="M8.5 16.3633H25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 16.3633L14.864 22.7272" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 16.3633L14.864 9.99932" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h2 class="login_title">Введите код</h2>
<div class="login_subtitle">Код отправленный на e-mail:<span class="sended_email"></span></div>
<div class="login_input js-input-code">
<input type="text" name="code" placeholder="0000"/>
<div class="login_error"></div>
</div>
<div class="login_timer">Запросить новый код: <span class="seconds">15</span> секунд</div>
<button class="login_btn btn_gradient js-repeat-code">Запросить новый код</button>
</div>
<div class="login_privacy">
Нажимая на кнопку «Получить код», я даю согласие на обработку моих персональных данных в соответствии с <a href="/privacy-policy">политикой обработки персональных данных</a>
</div>
</div>
<div class="login_wrap login_success hide">
<div class="login_inner active">
<h2 class="login_title">Спасибо<br />за авторизацию</h2>
<div class="login_subtitle">Теперь вы можете получать промокоды за покупки.</div>
<img src="<?php bloginfo('template_url');?>/images/people.png" alt=""/>
<a href="/my-account" class="login_btn account_link">Заполнить профиль</a>
</div>
</div>
<div class="login_wrap login_auth hide">
<div class="login_inner active">
<h2 class="login_title --text-center">
Вы вошли в систему</h2>
<img src="<?php bloginfo('template_url');?>/images/people.png" alt=""/>
<a href="/my-account" class="login_btn account_link">Профиль</a>
</div>
</div>
</div>

@ -1,26 +1,23 @@
<main class="wrapper"> <main class="wrapper">
<div class="cabinet-card cabinet-card--green-white cabinet__subscription-mobile"> <div class="cabinet-card cabinet-card--green-white cabinet__subscription-mobile">
<div class="cabinet-card__content"> <div class="cabinet-card__content">
<p class="cabinet-card__title"> <p class="cabinet-card__title">
{{ __('Feed subscription', 'woodmart')|esc_html }} {{ function('pll_e', 'Feed subscription') }}
</p> </p>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__text">{{ __('Weekly food delivery for your pet', 'woodmart')|esc_html }}</p> <p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<button class="button button--gradient button--high-46 form-sub__btn"> <button class="button button--gradient button--high-46 form-sub__btn">
{{ __('Get details', 'woodmart')|esc_html }} {{ function('pll_e', 'Get details') }}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="cabinet__control"> <div class="cabinet__control">
<button class="cabinet-control__button active start" data-cabinet="orders">{{ __('Orders', 'woodmart')|esc_html }}</button> <button class="cabinet-control__button active start" data-cabinet="orders">{{ function('pll_e', 'Orders') }}</button>
<button class="cabinet-control__button" data-cabinet="profile">{{ __('Profile', 'woodmart')|esc_html }}</button> <button class="cabinet-control__button" data-cabinet="profile">{{ function('pll_e', 'Profile') }}</button>
</div> </div>
<div class="cabinet"> <div class="cabinet">
@ -32,36 +29,36 @@
{% if first_name or last_name %} {% if first_name or last_name %}
{{ first_name }} {{ last_name }} {{ first_name }} {{ last_name }}
{% else %} {% else %}
{{ __('Name is not set', 'woodmart')|esc_html }} {{ function('pll_e', 'Name is not set') }}
{% endif %} {% endif %}
</p> </p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Phone', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Phone') }}:</p>
<p class="cabinet-card__text {% if not phone %}cabinet-card__text--grey{% endif %}"> <p class="cabinet-card__text {% if not phone %}cabinet-card__text--grey{% endif %}">
{% if phone %} {% if phone %}
{{ phone }} {{ phone }}
{% else %} {% else %}
{{ __('Not filled', 'woodmart')|esc_html }} {{ function('pll_e', 'Not filled') }}
{% endif %} {% endif %}
</p> </p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Email', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Email') }}:</p>
{% if email %} {% if email %}
<p class="cabinet-card__text">{{ email }}</p> <p class="cabinet-card__text">{{ email }}</p>
{% if activated %} {% if activated %}
<p class="cabinet-card__status cabinet-card__status--chek">{{ __('Email is verified', 'woodmart')|esc_html }}</p> <p class="cabinet-card__status cabinet-card__status--chek">{{ function('pll_e', 'Email is verified') }}</p>
{% else %} {% else %}
<p class="cabinet-card__status cabinet-card__status--cancelled">{{ __('Email is not verified', 'woodmart')|esc_html }}</p> <p class="cabinet-card__status cabinet-card__status--cancelled">{{ function('pll_e', 'Email is not verified') }}</p>
<form class="email_approve_form"> <form class="email_approve_form">
<input type="hidden" name="action" value="email_activate"> <input type="hidden" name="action" value="email_activate">
<button type="submit" class="cabinet-card__confirm">{{ __('Verify', 'woodmart')|esc_html }}</button> <button type="submit" class="cabinet-card__confirm">{{ function('pll_e', 'Verify') }}</button>
</form> </form>
{% if uuid %} {% if uuid %}
<p class="cabinet-card__status">{{ __('Email with verification link is sent to your email.', 'woodmart')|esc_html }}</p> <p class="cabinet-card__status">{{ function('pll_e', 'Email with verification link is sent to your email.') }}</p>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% else %} {% else %}
@ -71,14 +68,14 @@
<div class="cabinet-card_linked-email"> <div class="cabinet-card_linked-email">
<input class="form__input" type="text" name="email" placeholder="example@example.com" required> <input class="form__input" type="text" name="email" placeholder="example@example.com" required>
</div> </div>
<button class="cabinet-card__confirm" type="submit">{{ __('Link email', 'woodmart')|esc_html }}</button> <button class="cabinet-card__confirm" type="submit">{{ function('pll_e', 'Link email') }}</button>
</form> </form>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Linked accounts', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Linked accounts') }}:</p>
<p class="cabinet-card__text cabinet-accounts"> <p class="cabinet-card__text cabinet-accounts">
{% if tg_account %} {% if tg_account %}
<svg width="40px" height="40px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"> <svg width="40px" height="40px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
@ -97,8 +94,8 @@
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<div class="cabinet-card__block-buttons"> <div class="cabinet-card__block-buttons">
<button class="cabinet-card__button user-edit-open">{{ __('Edit', 'woodmart')|esc_html }}</button> <button class="cabinet-card__button user-edit-open">{{ function('pll_e', 'Edit') }}</button>
<a href="{{ fn('wp_logout_url', fn('home_url')) }}" class="cabinet-card__button">{{ __('Logout', 'woodmart')|esc_html }}</a> <a href="{{ fn('wp_logout_url', fn('home_url')) }}" class="cabinet-card__button">{{ function('pll_e', 'Logout') }}</a>
</div> </div>
</div> </div>
</div> </div>
@ -116,7 +113,7 @@
<div class="cabinet-card-add-pets__circle"> <div class="cabinet-card-add-pets__circle">
<img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/plus-grey.svg" alt=""> <img src="{{ theme.link }}/gp-include/assets/lk/img/svg/main/plus-grey.svg" alt="">
</div> </div>
<p class="cabinet-card-add-pets__text">{{ __('Add a pet', 'woodmart')|esc_html }}</p> <p class="cabinet-card-add-pets__text">{{ function('pll_e', 'Add a pet') }}</p>
</button> </button>
</div> </div>
</div> </div>
@ -125,12 +122,12 @@
<div class="cabinet__orders cabinet-content active hide"> <div class="cabinet__orders cabinet-content active hide">
<div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc"> <div class="cabinet-card cabinet-card--green-white cabinet__subscription-pc">
<div class="cabinet-card__content"> <div class="cabinet-card__content">
<p class="cabinet-card__title">{{ __('Feed subscription', 'woodmart')|esc_html }}</p> <p class="cabinet-card__title">{{ function('pll_e', 'Feed subscription') }}</p>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__text">{{ __('Weekly food delivery for your pet', 'woodmart')|esc_html }}</p> <p class="cabinet-card__text">{{ function('pll_e', 'Weekly food delivery for your pet') }}</p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<button class="button button--gradient button--high-46 form-sub__btn">{{ __('Get details', 'woodmart')|esc_html }}</button> <button class="button button--gradient button--high-46 form-sub__btn">{{ function('pll_e', 'Get details') }}</button>
</div> </div>
</div> </div>
</div> </div>
@ -144,11 +141,11 @@
<div class="cabinet-card__order"> <div class="cabinet-card__order">
<div class="cabinet-card-order__header"> <div class="cabinet-card-order__header">
<div class="cabinet-card-order__main"> <div class="cabinet-card-order__main">
<p class="cabinet-card-order-main__date">{{ __('Order from', 'woodmart')|esc_html }} {{ order.date_created|date('Y.m.d') }}</p> <p class="cabinet-card-order-main__date">{{ function('pll_e', 'Order from') }} {{ order.date_created|date('Y.m.d') }}</p>
<p class="cabinet-card-order-main__number">{{ order.id }}</p> <p class="cabinet-card-order-main__number">{{ order.id }}</p>
</div> </div>
<div class="cabinet-card-order__payment"> <div class="cabinet-card-order__payment">
<p class="cabinet-card-order-payment__title">{{ __('Summary', 'woodmart')|esc_html }}:</p> <p class="cabinet-card-order-payment__title">{{ function('pll_e', 'Summary') }}:</p>
<p class="cabinet-card-order-payment__price">{{ order.total }}</p> <p class="cabinet-card-order-payment__price">{{ order.total }}</p>
</div> </div>
</div> </div>
@ -158,11 +155,10 @@
<div class="cabinet-card-order__block-detail"> <div class="cabinet-card-order__block-detail">
<div class="cabinet-card-order__detail"> <div class="cabinet-card-order__detail">
<div class="cabinet-card-order-detail__address"> <div class="cabinet-card-order-detail__address">
<p class="cabinet-card-order-detail-address__title">{{ __('Delivery address', 'woodmart')|esc_html }}</p> <p class="cabinet-card-order-detail-address__title">{{ function('pll_e', 'Delivery address') }}</p>
<p class="cabinet-card-order-detail-address__text"> <p class="cabinet-card-order-detail-address__text">
{% if meta_data.office_code %} {% if meta_data.office_code %}
{{ __('CDEK shipping point', 'woodmart')|esc_html }}<br> {{ function('pll_e', 'CDEK shipping point') }}<br>
{# Предполагается, что API-запрос обрабатывается в PHP, добавляем в контекст #}
{{ office_name }} {{ office_name }}
{% else %} {% else %}
{{ shipping_address.city }} {{ shipping_address.address_1 }} {{ shipping_address.city }} {{ shipping_address.address_1 }}
@ -189,14 +185,14 @@
<div class="cabinet-card-order-detail-main__links"> <div class="cabinet-card-order-detail-main__links">
{% if order_track %} {% if order_track %}
<a href="https://www.cdek.ru/ru/tracking/?order_id={{ order_track }}" target="_blank" class="cabinet-card__button cabinet-card-order-detail-main__link"> <a href="https://www.cdek.ru/ru/tracking/?order_id={{ order_track }}" target="_blank" class="cabinet-card__button cabinet-card-order-detail-main__link">
{{ __('Track order', 'woodmart')|esc_html }} {{ function('pll_e', 'Track order') }}
</a> </a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<button class="cabinet-card-order__open-detail">{{ __('Order details', 'woodmart')|esc_html }}</button> <button class="cabinet-card-order__open-detail">{{ function('pll_e', 'Order details') }}</button>
</div> </div>
<div class="cabinet-card-order__detail-short"> <div class="cabinet-card-order__detail-short">
{% for item in order.get_items %} {% for item in order.get_items %}
@ -215,11 +211,11 @@
{% else %} {% else %}
<div class="cabinet-card__no-orders"> <div class="cabinet-card__no-orders">
<div class="cabinet-card-no-orders__element"> <div class="cabinet-card-no-orders__element">
<p class="cabinet-card-no-orders__title">{{ __('No orders yet', 'woodmart')|esc_html }}</p> <p class="cabinet-card-no-orders__title">{{ function('pll_e', 'No orders yet') }}</p>
</div> </div>
<div class="cabinet-card-no-orders__element"> <div class="cabinet-card-no-orders__element">
<a href="/shop/" class="to-know button--100-perc to-know--background-none"> <a href="/shop/" class="to-know button--100-perc to-know--background-none">
<p>{{ __('Catalog', 'woodmart')|esc_html }}</p> <p>{{ function('pll_e', 'Catalog') }}</p>
</a> </a>
</div> </div>
</div> </div>
@ -232,15 +228,15 @@
<div class="cabinet-card cabinet-card--green"> <div class="cabinet-card cabinet-card--green">
<div class="cabinet-card__content"> <div class="cabinet-card__content">
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Weight', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Weight') }}:</p>
<p class="cabinet-card__text">{{ pet.weight_text }}</p> <p class="cabinet-card__text">{{ pet.weight_text }}</p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Age', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Age') }}:</p>
<p class="cabinet-card__text">{{ pet.old_text }}</p> <p class="cabinet-card__text">{{ pet.old_text }}</p>
</div> </div>
<div class="cabinet-card__element"> <div class="cabinet-card__element">
<p class="cabinet-card__label">{{ __('Activity', 'woodmart')|esc_html }}:</p> <p class="cabinet-card__label">{{ function('pll_e', 'Activity') }}:</p>
<p class="cabinet-card__text">{{ pet.activity_text }}</p> <p class="cabinet-card__text">{{ pet.activity_text }}</p>
</div> </div>
</div> </div>
@ -251,33 +247,33 @@
<div class="popup-wrap"> <div class="popup-wrap">
<div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet active"> <div class="modal-form form__full-mobile modal-form--white modal-form--height-100-phone form-pet active">
<button class="modal-form__close"></button> <button class="modal-form__close"></button>
<p class="modal-form__title">{{ __('Edit pet', 'woodmart')|esc_html }} {{ pet.title }}</p> <p class="modal-form__title">{{ function('pll_e', 'Edit pet') }} {{ pet.title }}</p>
<form class="modal-form__content edit-pet-form" method="post" action=""> <form class="modal-form__content edit-pet-form" method="post" action="">
<input type="hidden" name="action" value="edit_pet"> <input type="hidden" name="action" value="edit_pet">
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<label class="label-name">{{ __('Pet type', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Pet type') }}</label>
<div class="form-input__tabs"> <div class="form-input__tabs">
<label class="form-input-tabs__button {% if pet.type == 'cat' %}active{% endif %}"> <label class="form-input-tabs__button {% if pet.type == 'cat' %}active{% endif %}">
{{ __('Dog', 'woodmart')|esc_html }} {{ function('pll_e', 'Dog') }}
<input come="true" inputtype="radio" value="cat" {% if pet.type == 'cat' %}checked{% endif %} name="pet" class="form-input-tabs__input" /> <input come="true" inputtype="radio" value="cat" {% if pet.type == 'cat' %}checked{% endif %} name="pet" class="form-input-tabs__input" />
</label> </label>
<label class="form-input-tabs__button {% if pet.type == 'dog' %}active{% endif %}"> <label class="form-input-tabs__button {% if pet.type == 'dog' %}active{% endif %}">
{{ __('Cat', 'woodmart')|esc_html }} {{ function('pll_e', 'Cat') }}
<input type="radio" value="dog" {% if pet.type == 'dog' %}checked{% endif %} name="pet" class="form-input-tabs__input" /> <input type="radio" value="dog" {% if pet.type == 'dog' %}checked{% endif %} name="pet" class="form-input-tabs__input" />
</label> </label>
</div> </div>
</div> </div>
<div class="modal-form-content__line sterilized" {% if pet.type == 'dog' %}style="display: none;"{% endif %}> <div class="modal-form-content__line sterilized" {% if pet.type == 'dog' %}style="display: none;"{% endif %}>
<label class="label-name">{{ __('Sterilized', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Sterilized') }}</label>
<div class="form-input__tabs"> <div class="form-input__tabs">
<label class="form-input-tabs__button {% if pet.sterilized %}active{% endif %}"> <label class="form-input-tabs__button {% if pet.sterilized %}active{% endif %}">
{{ __('Yes', 'woodmart')|esc_html }} {{ function('pll_e', 'Yes') }}
<input type="radio" value="1" {% if pet.sterilized %}checked{% endif %} name="sterilized" class="form-input-tabs__input" /> <input type="radio" value="1" {% if pet.sterilized %}checked{% endif %} name="sterilized" class="form-input-tabs__input" />
</label> </label>
<label class="form-input-tabs__button {% if not pet.sterilized %}active{% endif %}"> <label class="form-input-tabs__button {% if not pet.sterilized %}active{% endif %}">
{{ __('No', 'woodmart')|esc_html }} {{ function('pll_e', 'No') }}
<input type="radio" value="0" {% if not pet.sterilized %}checked{% endif %} name="sterilized" class="form-input-tabs__input" /> <input type="radio" value="0" {% if not pet.sterilized %}checked{% endif %} name="sterilized" class="form-input-tabs__input" />
</label> </label>
</div> </div>
@ -285,20 +281,20 @@
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">{{ __('Breed', 'woodmart')|esc_html }}</label> <label for="firstname" class="label-name">{{ function('pll_e', 'Breed') }}</label>
<input id="firstname" class="form__input" type="text" value="{{ pet.breed }}" name="breed" placeholder="Порода вашего питомца" required> <input id="firstname" class="form__input" type="text" value="{{ pet.breed }}" name="breed" placeholder="{{ function('pll_e', 'Breed of your pet') }}" required>
</div> </div>
</div> </div>
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<label class="label-name">{{ __('Gender of your pet', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Gender of your pet') }}</label>
<div class="form-input__tabs"> <div class="form-input__tabs">
<label class="form-input-tabs__button {% if pet.sex == 'male' %}active{% endif %}"> <label class="form-input-tabs__button {% if pet.sex == 'male' %}active{% endif %}">
{{ __('Boy', 'woodmart')|esc_html }} {{ function('pll_e', 'Boy') }}
<input type="radio" value="male" {% if pet.sex == 'male' %}checked{% endif %} name="sex" class="form-input-tabs__input" /> <input type="radio" value="male" {% if pet.sex == 'male' %}checked{% endif %} name="sex" class="form-input-tabs__input" />
</label> </label>
<label class="form-input-tabs__button {% if pet.sex != 'male' %}active{% endif %}"> <label class="form-input-tabs__button {% if pet.sex != 'male' %}active{% endif %}">
{{ __('Girl', 'woodmart')|esc_html }} {{ function('pll_e', 'Girl') }}
<input type="radio" value="female" {% if pet.sex != 'male' %}checked{% endif %} name="sex" class="form-input-tabs__input" /> <input type="radio" value="female" {% if pet.sex != 'male' %}checked{% endif %} name="sex" class="form-input-tabs__input" />
</label> </label>
</div> </div>
@ -306,13 +302,13 @@
<div class="modal-form-content__line modal-form-content__line--two"> <div class="modal-form-content__line modal-form-content__line--two">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label class="label-name">{{ __('Type of activity', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Type of activity') }}</label>
<div class="form-input__list"> <div class="form-input__list">
<div class="form-input-list__input">{{ pet.activity_text }}</div> <div class="form-input-list__input">{{ pet.activity_text }}</div>
<div class="form-input-list__block-content" style="height: 0px;"> <div class="form-input-list__block-content" style="height: 0px;">
<div class="form-input-list__content"> <div class="form-input-list__content">
<label class="form-input-list__item {% if pet.activity == 'low' %}active{% endif %}"> <label class="form-input-list__item {% if pet.activity == 'low' %}active{% endif %}">
<p class="form-input-list-item__text">{{ __('Low', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">{{ function('pll_e', 'Low') }}</p>
<input type="radio" required name="activity" {% if pet.activity == 'low' %}checked{% endif %} value="low" class="v-hidden"> <input type="radio" required name="activity" {% if pet.activity == 'low' %}checked{% endif %} value="low" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -321,7 +317,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.activity == 'moderate' %}active{% endif %}"> <label class="form-input-list__item {% if pet.activity == 'moderate' %}active{% endif %}">
<p class="form-input-list-item__text">{{ __('Moderate', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">{{ function('pll_e', 'Moderate') }}</p>
<input type="radio" required name="activity" {% if pet.activity == 'moderate' %}checked{% endif %} value="moderate" class="v-hidden"> <input type="radio" required name="activity" {% if pet.activity == 'moderate' %}checked{% endif %} value="moderate" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -330,7 +326,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.activity == 'high' %}active{% endif %}"> <label class="form-input-list__item {% if pet.activity == 'high' %}active{% endif %}">
<p class="form-input-list-item__text">{{ __('High', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">{{ function('pll_e', 'High') }}</p>
<input type="radio" required name="activity" {% if pet.activity == 'high' %}checked{% endif %} value="high" class="v-hidden"> <input type="radio" required name="activity" {% if pet.activity == 'high' %}checked{% endif %} value="high" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -344,13 +340,13 @@
</div> </div>
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label class="label-name">{{ __('Weight', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Weight') }}</label>
<div class="form-input__list"> <div class="form-input__list">
<div class="form-input-list__input">{{ pet.weight_text }}</div> <div class="form-input-list__input">{{ pet.weight_text }}</div>
<div class="form-input-list__block-content" style="height: 0px;"> <div class="form-input-list__block-content" style="height: 0px;">
<div class="form-input-list__content"> <div class="form-input-list__content">
<label class="form-input-list__item {% if pet.weight == 'below_1_5' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == 'below_1_5' %}active{% endif %}">
<p class="form-input-list-item__text">1-1.5 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">1-1.5 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == 'below_1_5' %}checked{% endif %} value="below_1_5" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == 'below_1_5' %}checked{% endif %} value="below_1_5" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -359,7 +355,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '1_5-3' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '1_5-3' %}active{% endif %}">
<p class="form-input-list-item__text">1.5-3 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">1.5-3 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '1_5-3' %}checked{% endif %} value="1_5-3" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '1_5-3' %}checked{% endif %} value="1_5-3" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -368,7 +364,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '3-5' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '3-5' %}active{% endif %}">
<p class="form-input-list-item__text">3-5 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">3-5 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '3-5' %}checked{% endif %} value="3-5" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '3-5' %}checked{% endif %} value="3-5" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -377,7 +373,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '5-8' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '5-8' %}active{% endif %}">
<p class="form-input-list-item__text">5-8 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">5-8 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '5-8' %}checked{% endif %} value="5-8" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '5-8' %}checked{% endif %} value="5-8" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -386,7 +382,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '8-11' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '8-11' %}active{% endif %}">
<p class="form-input-list-item__text">8-11 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">8-11 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '8-11' %}checked{% endif %} value="8-11" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '8-11' %}checked{% endif %} value="8-11" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -395,7 +391,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '11-15' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '11-15' %}active{% endif %}">
<p class="form-input-list-item__text">11-15 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">11-15 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '11-15' %}checked{% endif %} value="11-15" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '11-15' %}checked{% endif %} value="11-15" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -404,7 +400,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '15-20' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '15-20' %}active{% endif %}">
<p class="form-input-list-item__text">15-20 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">15-20 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '15-20' %}checked{% endif %} value="15-20" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '15-20' %}checked{% endif %} value="15-20" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -413,7 +409,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '20-25' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '20-25' %}active{% endif %}">
<p class="form-input-list-item__text">20-25 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">20-25 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '20-25' %}checked{% endif %} value="20-25" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '20-25' %}checked{% endif %} value="20-25" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -422,7 +418,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == '25-35' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == '25-35' %}active{% endif %}">
<p class="form-input-list-item__text">25-35 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">25-35 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == '25-35' %}checked{% endif %} value="25-35" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == '25-35' %}checked{% endif %} value="25-35" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -431,7 +427,7 @@
</div> </div>
</label> </label>
<label class="form-input-list__item {% if pet.weight == 'more_35' %}active{% endif %}"> <label class="form-input-list__item {% if pet.weight == 'more_35' %}active{% endif %}">
<p class="form-input-list-item__text">{{ __('More than', 'woodmart')|esc_html }} 35 {{ __('kg', 'woodmart')|esc_html }}</p> <p class="form-input-list-item__text">{{ function('pll_e', 'More than') }} 35 {{ function('pll_e', 'kg') }}</p>
<input type="radio" required name="weight" {% if pet.weight == 'more_35' %}checked{% endif %} value="more_35" class="v-hidden"> <input type="radio" required name="weight" {% if pet.weight == 'more_35' %}checked{% endif %} value="more_35" class="v-hidden">
<div class="form-input-list-item__box"> <div class="form-input-list-item__box">
<div class="form-input-list-item-box__content"> <div class="form-input-list-item-box__content">
@ -446,14 +442,14 @@
</div> </div>
<div class="modal-form-content__line"> <div class="modal-form-content__line">
<label class="label-name">{{ __('Pet\'s age', 'woodmart')|esc_html }}</label> <label class="label-name">{{ function('pll_e', 'Pet\'s age') }}</label>
<div class="form-input__tabs form-input__remote-control" data-content="modal__age"> <div class="form-input__tabs form-input__remote-control" data-content="modal__age">
<label class="form-input-tabs__button active" data-rm="0"> <label class="form-input-tabs__button active" data-rm="0">
{{ __('Exemplary', 'woodmart')|esc_html }} {{ function('pll_e', 'Exemplary') }}
<input type="radio" checked value="ex" name="old_type" required class="form-input-tabs__input"> <input type="radio" checked value="ex" name="old_type" required class="form-input-tabs__input">
</label> </label>
<label class="form-input-tabs__button" data-rm="1"> <label class="form-input-tabs__button" data-rm="1">
{{ __('Exact', 'woodmart')|esc_html }} {{ function('pll_e', 'Exact') }}
<input type="radio" value="acc" name="old_type" required class="form-input-tabs__input"> <input type="radio" value="acc" name="old_type" required class="form-input-tabs__input">
</label> </label>
</div> </div>
@ -466,42 +462,42 @@
<div class="form-input-radio__circle"> <div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <div class="form-input-radio-circle__content"></div>
</div> </div>
<p class="form-input-radio__title">{{ __('Baby <span>(from 0 to 1 year)</span>', 'woodmart')|raw }}</p> <p class="form-input-radio__title">{{ function('pll_e', 'Baby <span>(from 0 to 1 year)</span>')|raw }}</p>
</label> </label>
<label class="form-input-radio__item {% if pet.old == 'normal' %}active{% endif %}"> <label class="form-input-radio__item {% if pet.old == 'normal' %}active{% endif %}">
<input type="radio" name="old" value="normal" {% if pet.old == 'normal' %}checked{% endif %} class="v-hidden"> <input type="radio" name="old" value="normal" {% if pet.old == 'normal' %}checked{% endif %} class="v-hidden">
<div class="form-input-radio__circle"> <div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <div class="form-input-radio-circle__content"></div>
</div> </div>
<p class="form-input-radio__title">{{ __('Adult <span>(from 1 year to 7 years)</span>', 'woodmart')|raw }}</p> <p class="form-input-radio__title">{{ function('pll_e', 'Adult <span>(from 1 year to 7 years)</span>')|raw }}</p>
</label> </label>
<label class="form-input-radio__item {% if pet.old == 'old' %}active{% endif %}"> <label class="form-input-radio__item {% if pet.old == 'old' %}active{% endif %}">
<input type="radio" name="old" value="old" {% if pet.old == 'old' %}checked{% endif %} class="v-hidden"> <input type="radio" name="old" value="old" {% if pet.old == 'old' %}checked{% endif %} class="v-hidden">
<div class="form-input-radio__circle"> <div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <div class="form-input-radio-circle__content"></div>
</div> </div>
<p class="form-input-radio__title">{{ __('Elderly <span>(from 7 to 12 years)</span>', 'woodmart')|raw }}</p> <p class="form-input-radio__title">{{ function('pll_e', 'Elderly <span>(from 7 to 12 years)</span>')|raw }}</p>
</label> </label>
<label class="form-input-radio__item {% if pet.old == 'veryVvery_old' %}active{% endif %}"> <label class="form-input-radio__item {% if pet.old == 'veryVvery_old' %}active{% endif %}">
<input type="radio" name="old" value="very_old" {% if pet.old == 'very_old' %}checked{% endif %} class="v-hidden"> <input type="radio" name="old" value="very_old" {% if pet.old == 'very_old' %}checked{% endif %} class="v-hidden">
<div class="form-input-radio__circle"> <div class="form-input-radio__circle">
<div class="form-input-radio-circle__content"></div> <div class="form-input-radio-circle__content"></div>
</div> </div>
<p class="form-input-radio__title">{{ __('Aging <span>(12 years and older)</span>', 'woodmart')|raw }}</p> <p class="form-input-radio__title">{{ function('pll_e', 'Aging <span>(12 years and older)</span>')|raw }}</p>
</label> </label>
</div> </div>
<div data-rmcont="1" class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16"> <div data-rmcont="1" class="modal-form-content__line remote-control__item modal-form-content__line--three modal-form-content__line--margin-top-16">
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">{{ __('Day', 'woodmart')|esc_html }}</label> <label for="firstname" class="label-name">{{ function('pll_e', 'Day') }}</label>
<input id="firstname" class="form__input form__input--center" maxlength="2" type="text" name="day" placeholder="{{ __('DD', 'woodmart')|esc_html }}" value="{{ pet.day }}"> <input id="firstname" class="form__input form__input--center" maxlength="2" type="text" name="day" placeholder="{{ function('pll_e', 'DD') }}" value="{{ pet.day }}">
</div> </div>
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">{{ __('Month', 'woodmart')|esc_html }}</label> <label for="firstname" class="label-name">{{ function('pll_e', 'Month') }}</label>
<div class="form-input__list"> <div class="form-input__list">
{% if pet.month %} {% if pet.month %}
<div class="form-input-list__input">{{ months[pet.month - 1] }}</div> <div class="form-input-list__input">{{ months[pet.month - 1] }}</div>
{% else %} {% else %}
<div class="form-input-list__input">{{ __('Month', 'woodmart')|esc_html }}</div> <div class="form-input-list__input">{{ function('pll_e', 'Month') }}</div>
{% endif %} {% endif %}
<div class="form-input-list__block-content"> <div class="form-input-list__block-content">
<div class="form-input-list__content"> <div class="form-input-list__content">
@ -521,17 +517,16 @@
</div> </div>
</div> </div>
<div class="modal-form-content-line__element"> <div class="modal-form-content-line__element">
<label for="firstname" class="label-name">{{ __('Year', 'woodmart')|esc_html }}</label> <label for="firstname" class="label-name">{{ function('pll_e', 'Year') }}</label>
<input id="firstname" class="form__input form__input--center" maxlength="4" type="text" name="year" placeholder="{{ __('YYYY', 'woodmart')|esc_html }}" value="{{ pet.year }}"> <input id="firstname" class="form__input form__input--center" maxlength="4" type="text" name="year" placeholder="{{ function('pll_e', 'YYYY') }}" value="{{ pet.year }}">
</div> </div>
</div> </div>
</div> </div>
<input type="hidden" name="pet_id" value="{{ pet.ID }}"> <input type="hidden" name="pet_id" value="{{ pet.ID }}">
<div class="modal-form__buttons"> <div class="modal-form__buttons">
<button class="button button--gradient button--high button--100-perc" type="submit">{{ __('Save', 'woodmart')|esc_html }}</button> <button class="button button--gradient button--high button--100-perc" type="submit">{{ function('pll_e', 'Save') }}</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>

@ -0,0 +1,502 @@
<?php
/*
Template Name: Where to byu
Template Post Type: page
*/
wp_enqueue_style( 'gp-wtb-style', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-core.css?v=1.14' );
wp_enqueue_style( 'gp-wtb-style-dt', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-desktop.css?v=1.22' );
wp_enqueue_style( 'gp-wtb-style-tb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-tablet.css?v=1.22' );
wp_enqueue_style( 'gp-wtb-style-mb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-mobile?v=1.122' );
get_header('gp_eng');
// wp_head();
add_filter('wpcf7_autop_or_not', '__return_false');
?>
<div class="body-wrap">
<main class="wrapper" style="padding-top: 0;">
<!-- Where home -->
<section class="where-home">
<div class="container">
<h1>Where to Buy</h1>
<p>Looking for Cosmopet products in stores? You can find our premium pet treats in select pet shops and retail stores across the UAE.</p>
</div>
</section>
<!-- Where home end -->
<div class="container">
<?php
// Get marker data from ACF
$locations = get_field('location_markers');
?>
<div class="locations-map-container">
<div id="map" style="width: 100%; height: 600px; border-radius: 20px; overflow: hidden;"></div>
</div>
<script>
// Array of locations with predefined coordinates
const locationData = [
{
title: "Roots Supermarket",
address: "Waves Grande, Retail unit 1-2 Shobha Hartland, Dubai DU United Arab Emirates",
position: { lat: 25.1896, lng: 55.3662 },
url: ''
},
{
title: "Pawdy Neighbors",
address: "Souk Al Manzil - Old Town Downtown, Dubai, United Arab Emirates",
position: { lat: 25.1915, lng: 55.2758 },
url: ''
},
{
title: "The Pet Co",
address: "Tower A, Shop 01, Prime Business Centre, JVC, Dubai, UAE",
position: { lat: 25.0580, lng: 55.2282 },
url: ''
},
{
title: "Ivy Secret Garden",
address: "Al Wasl Warehouse Complex, Unit 14 - 26th St - Al Quoz Industrial Area 4 - Dubai",
position: { lat: 25.1416, lng: 55.2358 },
url: ''
},
{
title: "Petzone",
address: "Petzone Sheikh Zayed Road - Petzone Umm Suqeim",
position: { lat: 25.1530, lng: 55.2145 },
url: "https://petzone.com/uae/en/"
},
{
title: "Pet Corner",
address: "Pet Corner Sheikh Zayed Road, Al Fardan Building 1, Sheikh Zayed Road, Next to Deals on Wheels & Business Bay Metro Station",
position: { lat: 25.1868, lng: 55.2527 },
url: "https://petcornerdubai.com/"
},
{
title: "Pet Corner Motor City - Dubai",
address: "Unit R7, Fox Hill 8, Motor City, Opposite Arabian Ranches",
position: { lat: 25.0499, lng: 55.2350 },
url: ''
},
{
title: "Pet Corner Jumeirah Golf Estates - Dubai",
address: "Shop No. 7, The Fairway Mall Jumeirah Golf Estates Dubai",
position: { lat: 25.0394, lng: 55.2269 },
url: ''
},
{
title: "Pet Corner Khalifa City - Abu Dhabi",
address: "Shop No 5, Al Raha Gardens, Khalifa City Abu Dhabi",
position: { lat: 24.4243, lng: 54.5754 },
url: ''
},
{
title: "Pet Corner- Sharjah Al Mamsha",
address: "Al Sharjah, University Road",
position: { lat: 25.3126, lng: 55.4783 },
url: ''
},
{
title: "Pet Corner Fujairah- Lulu Mall",
address: "Al - Korthabah Road - Fujairah City Center - Fujairah",
position: { lat: 25.1221, lng: 56.3244 },
url: ''
},
{
title: "Tail Waggin Al Quoz",
address: "Warehouse 7, Street 8, Al Khail Road, Al Quoz 1, Dubai, United Arab Emirates",
position: { lat: 25.1368, lng: 55.2364 },
url: ''
},
{
title: "Tail Waggin' Pet Spa Dubai Hills",
address: "SWAY Residences, Retail 2 - near Kings College Hospital Dubai Hills Estate - Dubai - United Arab Emirates",
position: { lat: 25.1276, lng: 55.2714 },
url: ''
},
{
title: "Goofy Groom",
address: "Dubai, UAE Midtown Central Majan, Shop G-17",
position: { lat: 25.0834, lng: 55.1743 },
url: ''
}
];
// Get data from ACF with added latitude and longitude fields
const acfLocations = <?php
if ($locations && !empty($locations)) {
echo json_encode(array_map(function($location) {
return [
'title' => $location['title'],
'address' => $location['address'],
'url' => $location['website'],
'latitude' => isset($location['latitude']) ? (float)$location['latitude'] : null,
'longitude' => isset($location['longitude']) ? (float)$location['longitude'] : null
];
}, $locations));
} else {
echo 'null';
}
?>;
// Map initialization function
function initMap() {
console.log("Map is initializing");
// Map center - approximately Dubai center
const dubai = { lat: 25.2048, lng: 55.2708 };
// Create map
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: dubai,
styles: [
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#93d5eb"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
}
]
});
// Info window for markers
const infoWindow = new google.maps.InfoWindow();
// If ACF data exists, use it for markers
if (acfLocations && acfLocations.length > 0) {
console.log("Using ACF data:", acfLocations.length, "locations");
const geocoder = new google.maps.Geocoder();
// Create and place markers
acfLocations.forEach((location, i) => {
// Check if we have manual coordinates
if (location.latitude && location.longitude) {
console.log(`Using manual coordinates for: ${location.title}`);
const position = { lat: location.latitude, lng: location.longitude };
createMarker(location, position, map, infoWindow);
} else {
// No coordinates provided, try geocoding
console.log(`Geocoding address: ${location.address}`);
geocoder.geocode({ address: location.address }, (results, status) => {
if (status === "OK") {
console.log(`Geocoding successful for: ${location.title}`);
createMarker(location, results[0].geometry.location, map, infoWindow);
} else {
console.error(`Geocode failed for address: ${location.address}. Reason: ${status}`);
// If geocoding fails, try to find matching location in predefined data
const predefinedLocation = locationData.find(item =>
item.title.toLowerCase() === location.title.toLowerCase() ||
item.address.toLowerCase().includes(location.address.toLowerCase())
);
if (predefinedLocation) {
console.log(`Using predefined coordinates for: ${location.title}`);
createMarker(location, predefinedLocation.position, map, infoWindow);
}
}
});
}
});
} else {
// Use predefined data
console.log("Using predefined data:", locationData.length, "locations");
locationData.forEach((location) => {
createMarker(location, location.position, map, infoWindow);
});
}
// Marker creation function
function createMarker(location, position, map, infoWindow) {
// Create marker
const marker = new google.maps.Marker({
map: map,
position: position,
animation: google.maps.Animation.DROP,
icon: {
url: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
}
});
// Add click event handler for marker
marker.addListener("click", () => {
let content = `<div><h3>${location.title}</h3><p>${location.address}</p>`;
if (location.url) {
content += `<p><a href="${location.url}" target="_blank">Visit website</a></p>`;
}
content += `</div>`;
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
// Add slight delay for animation
setTimeout(() => {
marker.setAnimation(null);
}, 750);
}
}
// Check if Google Maps API is loaded
window.addEventListener('load', function() {
if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
console.error('Google Maps API failed to load');
document.getElementById('map').innerHTML = '<div style="padding: 20px; text-align: center;">Map loading error. Please check your internet connection and refresh the page.</div>';
} else {
console.log('Google Maps API loaded successfully');
}
});
</script>
<!-- Google Maps API connection with your key -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQVXQyGsqWmUdJ84UgKOPymFlISaKoiuw&callback=initMap&libraries=places">
</script>
</div>
<br><br>
<!-- Find us -->
<section class="find-us">
<div class="container">
<h2>📍 Find us at:</h2>
<ul>
<?php
$items = get_field('location_markers');
foreach($items as $item):
?>
<li>
<h3>
<?php if($item['website']): ?>
<a href="<?php echo $item['website'];?>"><?php echo $item['title'];?></a>
<?php endif; ?>
<?php if(!$item['website']): ?>
<?php echo $item['title'];?>
<?php endif; ?>
</h3>
<p><?php echo $item['address'];?></p>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>
<!-- Find us end -->
<style>
.sell-form-form:not(.submited) + .thx-text{
display:none;
}
.sell-form-form.submited{
display:none;
}
</style>
<!-- Sell form -->
<div class="container">
<?php
// Получаем изображения из галереи ACF
$images = get_field('partners_logos');
if ($images): ?>
<!-- Бегущая строка (слайдер) -->
<div class="partners-slider-section">
<h3 style="font-size:36px;">Our partners</h3>
<div class="partners-swiper swiper">
<div class="swiper-wrapper">
<?php
// Повторяем логотипы больше раз для создания эффекта бесконечности
for ($i = 0; $i < 5; $i++) {
foreach($images as $image): ?>
<div class="swiper-slide">
<a href="<?php echo esc_url($image['title']); ?>" target="_blank">
<img src="<?php echo esc_url($image['sizes']['medium']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
</a>
</div>
<?php endforeach;
} ?>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const swiper = new Swiper('.partners-swiper', {
slidesPerView: 'auto',
spaceBetween: 30,
loop: true,
loopedSlides: 999,
loopAdditionalSlides: 999,
centeredSlides: false,
autoplay: {
delay: 1, // Почти нулевая задержка
disableOnInteraction: false, // Автоплей не отключается при взаимодействии
},
speed: 8000, // Медленная скорость для плавности
allowTouchMove: false, // Отключаем свайп вручную
freeMode: false, // Свободный скроллинг
cssMode: false,
watchSlidesProgress: true,
simulateTouch: false,
observer: true,
observeParents: true,
resistanceRatio: 0,
breakpoints: {
320: {
slidesPerView: 2,
},
768: {
slidesPerView: 4,
},
1024: {
slidesPerView: 5,
}
}
});
// Принудительно перезапускаем автоплей после касания
swiper.el.addEventListener('touchend', function() {
if (!swiper.autoplay.running) {
swiper.autoplay.start(); // Перезапускаем автоплей, если он остановлен
}
});
});
</script>
<style>
/* Стили для слайдера */
.partners-slider-section,
.partners-grid-section {
margin: 50px 0;
}
.partners-slider-section {
overflow: hidden; /* Скрываем переполнение */
}
.partners-swiper {
width: 100%;
padding: 20px 0;
}
.swiper-slide {
text-align: center;
height: auto;
width: auto !important; /* Позволяем слайдам быть разной ширины */
}
.swiper-slide img {
max-height: 60px;
width: auto;
filter: grayscale(100%);
transition: filter 0.3s;
object-fit: contain;
}
.swiper-slide img:hover {
filter: grayscale(0%);
}
/* Убираем анимацию трансформации для устранения рывков */
.swiper-wrapper {
position: relative;
width: 100%;
height: 100px;
z-index: 1;
display: flex;
box-sizing: content-box;
transition-timing-function: linear !important;
}
/* Стили для плиток */
.partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.grid-item {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
/* border: 1px solid #eee; */
border-radius: 24px;
transition: 0.3s;
}
.grid-item:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.grid-item img {
max-height: 60px;
max-width: 100%;
filter: grayscale(100%);
transition: filter 0.3s;
}
.grid-item img:hover {
filter: grayscale(0%);
}
h3 {
font-size: 26px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
}
@media (max-width: 768px) {
.partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
width: 80%;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.partners-grid {
grid-template-columns: 1fr;
}
}
</style>
<?php endif; ?>
</div>
<section class="sell-form">
<div class="container sell-form__container">
<h2>Want to sell Cosmopet in your store?</h2>
<p>Join our growing network of retailers! Fill out the contact form below, and we’ll get in touch to discuss the details.</p>
<form action="" class="form--contact sell-form-form">
<input type="hidden" name="action" value="message" >
<input type="text" placeholder="Your Name" name="name" class="form-inp">
<input type="tel" placeholder="Your Phone" name="phone" class="form-inp" id="">
<input type="email" placeholder="E-mail" name="email" class="form-inp" id="">
<textarea placeholder="Message" class="form-textarea" name="msg" id=""></textarea>
<button type="submit">SUBMIT</button>
</form>
<div class="thx-text">
<h2>Thanks for request!</h2>
<p>We will answer your message as soon as possible</p>
</div>
</div>
</section>
<!-- Sell form end -->
</main>
</div>
<?php get_footer('gp_eng'); ?>
Loading…
Cancel
Save