diff --git a/.well-known/apple-developer-merchantid-domain-association b/.well-known/apple-developer-merchantid-domain-association new file mode 100644 index 0000000..2ff95c9 --- /dev/null +++ b/.well-known/apple-developer-merchantid-domain-association @@ -0,0 +1 @@ +7B227073704964223A2239373943394538343346343131343044463144313834343232393232313734313034353044314339464446394437384337313531303944334643463542433731222C2276657273696F6E223A312C22637265617465644F6E223A313536363233343735303036312C227369676E6174757265223A22333038303036303932613836343838366637306430313037303261303830333038303032303130313331306633303064303630393630383634383031363530333034303230313035303033303830303630393261383634383836663730643031303730313030303061303830333038323033653333303832303338386130303330323031303230323038346333303431343935313964353433363330306130363038326138363438636533643034303330323330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333031653137306433313339333033353331333833303331333333323335333735613137306433323334333033353331333633303331333333323335333735613330356633313235333032333036303335353034303330633163363536333633326437333664373032643632373236663662363537323264373336393637366535663535343333343264353035323466343433313134333031323036303335353034306230633062363934663533323035333739373337343635366437333331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333035393330313330363037326138363438636533643032303130363038326138363438636533643033303130373033343230303034633231353737656465626436633762323231386636386464373039306131323138646337623062643666326332383364383436303935643934616634613534313162383334323065643831316633343037653833333331663163353463336637656233323230643662616435643465666634393238393839336537633066313361333832303231313330383230323064333030633036303335353164313330313031666630343032333030303330316630363033353531643233303431383330313638303134323366323439633434663933653465663237653663346636323836633366613262626664326534623330343530363038326230363031303530353037303130313034333933303337333033353036303832623036303130353035303733303031383632393638373437343730336132663266366636333733373032653631373037303663363532653633366636643266366636333733373033303334326436313730373036633635363136393633363133333330333233303832303131643036303335353164323030343832303131343330383230313130333038323031306330363039326138363438383666373633363430353031333038316665333038316333303630383262303630313035303530373032303233303831623630633831623335323635366336393631366536333635323036663665323037343638363937333230363336353732373436393636363936333631373436353230363237393230363136653739323037303631373237343739323036313733373337353664363537333230363136333633363537303734363136653633363532303666363632303734363836353230373436383635366532303631373037303663363936333631363236633635323037333734363136653634363137323634323037343635373236643733323036313665363432303633366636653634363937343639366636653733323036663636323037353733363532633230363336353732373436393636363936333631373436353230373036663663363936333739323036313665363432303633363537323734363936363639363336313734363936663665323037303732363136333734363936333635323037333734363137343635366436353665373437333265333033363036303832623036303130353035303730323031313632613638373437343730336132663266373737373737326536313730373036633635326536333666366432663633363537323734363936363639363336313734363536313735373436383666373236393734373932663330333430363033353531643166303432643330326233303239613032376130323538363233363837343734373033613266326636333732366332653631373037303663363532653633366636643266363137303730366336353631363936333631333332653633373236633330316430363033353531643065303431363034313439343537646236666435373438313836383938393736326637653537383530376537396235383234333030653036303335353164306630313031666630343034303330323037383033303066303630393261383634383836663736333634303631643034303230353030333030613036303832613836343863653364303430333032303334393030333034363032323130306265303935373166653731653165373335623535653561666163623463373266656234343566333031383532323263373235313030326236316562643666353530323231303064313862333530613564643664643665623137343630333562313165623263653837636661336536616636636264383338303839306463383263646461613633333038323032656533303832303237356130303330323031303230323038343936643266626633613938646139373330306130363038326138363438636533643034303330323330363733313162333031393036303335353034303330633132343137303730366336353230353236663666373432303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330316531373064333133343330333533303336333233333334333633333330356131373064333233393330333533303336333233333334333633333330356133303761333132653330326330363033353530343033306332353431373037303663363532303431373037303663363936333631373436393666366532303439366537343635363737323631373436393666366532303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330353933303133303630373261383634386365336430323031303630383261383634386365336430333031303730333432303030346630313731313834313964373634383564353161356532353831303737366538383061326566646537626165346465303864666334623933653133333536643536363562333561653232643039373736306432323465376262613038666437363137636538386362373662623636373062656338653832393834666635343435613338316637333038316634333034363036303832623036303130353035303730313031303433613330333833303336303630383262303630313035303530373330303138363261363837343734373033613266326636663633373337303265363137303730366336353265363336663664326636663633373337303330333432643631373037303663363537323666366637343633363136373333333031643036303335353164306530343136303431343233663234396334346639336534656632376536633466363238366333666132626266643265346233303066303630333535316431333031303166663034303533303033303130316666333031663036303335353164323330343138333031363830313462626230646561313538333338383961613438613939646562656264656261666461636232346162333033373036303335353164316630343330333032653330326361303261613032383836323636383734373437303361326632663633373236633265363137303730366336353265363336663664326636313730373036633635373236663666373436333631363733333265363337323663333030653036303335353164306630313031666630343034303330323031303633303130303630613261383634383836663736333634303630323065303430323035303033303061303630383261383634386365336430343033303230333637303033303634303233303361636637323833353131363939623138366662333563333536636136326266663431376564643930663735346461323865626566313963383135653432623738396638393866373962353939663938643534313064386639646539633266653032333033323264643534343231623061333035373736633564663333383362393036376664313737633263323136643936346663363732363938323132366635346638376137643162393963623962303938393231363130363939306630393932316430303030333138323031386233303832303138373032303130313330383138363330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533303230383463333034313439353139643534333633303064303630393630383634383031363530333034303230313035303061303831393533303138303630393261383634383836663730643031303930333331306230363039326138363438383666373064303130373031333031633036303932613836343838366637306430313039303533313066313730643331333933303338333133393331333733313332333333303561333032613036303932613836343838366637306430313039333433313164333031623330306430363039363038363438303136353033303430323031303530306131306130363038326138363438636533643034303330323330326630363039326138363438383666373064303130393034333132323034323062303731303365313430613462386231376262613230316130336163643036396234653431366232613263383066383661383338313435633239373566633131333030613036303832613836343863653364303430333032303434363330343430323230343639306264636637626461663833636466343934396534633035313039656463663334373665303564373261313264376335666538633033303033343464663032323032363764353863393365626233353031333836363062353730373938613064643731313734316262353864626436613138363633353038353431656565393035303030303030303030303030227D \ No newline at end of file diff --git a/wp-content/.cdekdelivery.php b/wp-content/.cdekdelivery.php new file mode 100644 index 0000000..c88bb2a --- /dev/null +++ b/wp-content/.cdekdelivery.php @@ -0,0 +1,18 @@ + + array ( + 'wordpress' => 'v4.local.nalowbOW6cLbDpvTkpTnMOVG_1PGHdZKveVTUIbgUv2hUvQGr5zQ-B97k1oykPdIiLx0D0EZ0xlOdhwqgV_DcPsmh3eOrZ9mLJOlmxL0Ciq1Lkhewhj3h1H4FQuiSmfg1oylejDCLtbzfWil8GNxrzGOiBoiiY2XALTxBT0ZDcCZNAGmKQTElV9Lzw5TxDYEm9ELTLCaFj3rTN3Vq8bMQy8aHK-Mgq2QvaD3YYEJiTxcgTl97df6rJQnGtYiG9dvhVFhShNdUj1sWh9vIzoXiUbZbByLwe5ZUwaDzE3G7xosGlTyQJ3WIle3ywsfnjgNxRQwOz--XcEYGUJ_nhR3oJscW7SJXdi-ziE5dnDi6k2XpaIbTbppIUvdeyzRDpC2VajiSvb3jg5kcxHL_3bFo-7D4Rjmtr2ZEr8uS4-xwt8uhLiSBLcRsLSGSCq0yMlNmgsxxUdySDu2Q5P5pDX3_5hBdg-4DuBH.eyJlbmRwb2ludCI6Imh0dHBzOlwvXC9hcGkuY2Rlay5ydVwvY21zIn0', + '@cdek-it/order' => 'v4.local.-h0jllL5iFSEWHkSBGY1TfzpFIQGYeCif9pGrZorJtWeZ1mUew3VjChFhXL60cVcN5LCXw9d_ui-XG1kIzjrx-UzDfK4fS-l4OznAhLWp7ZT1M3-X-uQiVJk5lzCJ2rNGQ-TJudeOlqL4kDKcqaPLgDzq5MQEqvloGAvviatPL-Y9ifTI183xVxcL6O7J700dFcQEhhSIcYfVnQVG2L1d93gxaUUH-OIMk1hxF1LCdnNIy6F6Zjt9yswXDEfEGWfE8OJysQQJhTj1IIOcf4_AZ-gGrSaXMMcG-J6GfDIjoU-uFrXhpI10grwgmY5Xka3-SPj2fyVV_e5WVuOew5HK0oDyHWqnlE37dWbQTBNPMqUNL50fQxviTzDYHplbM_CUq8YlNx2O_7FMt7b2w2sZMHLZBaWtH4zmOj8T2v-rY_MLeVwPuAfZPKnHqZMoGBL312Zh-tCyqVIp8gZ2jXJvKXnzMgumJv_uxA6Sdgk.eyJlbmRwb2ludCI6Imh0dHBzOlwvXC9hcGkuY2Rlay5ydVwvY21zIn0', + '@cdek-it/settings' => 'v4.local.Dbb69cuN8PIE7d1_5w3bD5OZI0Z5_K9w_UbnCJGJlM5jLLWkdkKf4d_svhJySz-NMm8xVJsEMEnCOSRVZZZIlcRaOlNqi7bsIDYXmpcnVCKL5v8cUWn9nKRSNvKUuiSqU_1aJl2pi7ZvxpII6STV4xxkcMXdtfYF9AZAOD0b6gtd7v8OdXjBzeKwbsilj7bToUv4mrmAlgMhd_MG3rKRP5-INo0B-rkwK78Ul88YjCgf0ooPyRICdQzLAgD7x42FJ3vYI9UA8g3wffx5kJxbRWrKUEfwZ1zJp-NQKAcyK5KGLIu9OUoFcQN4U_KdnnZqdqwwkovB0JIbqz-HKQcdi1Xrq5wKk5lIF-HdJteYn2t8Refd9soVGmN67O_V2K1b09Jw4v973C4rOxvw4WZNXHTm9a0mTI0pTk3Y5Dv1tJuN23zH73G_kNN_TSLUenE1iTGPdSnGXxIcfBG-sBoS1Au62QbzUY7lhftD6Bq6T6-6.eyJlbmRwb2ludCI6Imh0dHBzOlwvXC9hcGkuY2Rlay5ydVwvY21zIn0', + ), + 'endpoints' => + array ( + 'wordpress' => 'https://api.cdek.ru/cms', + '@cdek-it/order' => 'https://api.cdek.ru/cms', + '@cdek-it/settings' => 'https://api.cdek.ru/cms', + ), + 'keyring' => + array ( + 'k4.pid.jwGFnADDct9ZphWj1tZslqzRDXQIgEjvyVx8LI6MJR7d' => 'TDOjk4smnqY5AYE-aGdmFJIescdcJb26nThfAK3AVPU', + ), +); diff --git a/wp-content/themes/cosmopet/archive-blog_author.php b/wp-content/themes/cosmopet/archive-blog_author.php new file mode 100644 index 0000000..bfd7e5e --- /dev/null +++ b/wp-content/themes/cosmopet/archive-blog_author.php @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/comments.php b/wp-content/themes/cosmopet/comments.php new file mode 100644 index 0000000..386d6c1 --- /dev/null +++ b/wp-content/themes/cosmopet/comments.php @@ -0,0 +1,211 @@ + get_the_ID(), + 'status' => 'approve', + 'parent' => $comment_id, + 'order' => 'ASC' + )); + + if ($replies) { + $count += count($replies); + foreach ($replies as $reply) { + $count += count_nested_replies($reply->comment_ID); + } + } + + return $count; +} + +if (post_password_required()) { + return; +} + +if (!is_user_logged_in()) { + ?> +
+

+ , +

+
+ get_the_ID(), + 'status' => 'approve', + 'parent' => 0, + 'order' => 'ASC' +)); + +if ($top_level_comments) { + echo '
'; + + foreach ($top_level_comments as $comment) { + ?> +
+
+ +
+
+ +
+
+

+
+ + + pll__('Ответить'), + 'depth' => 1, + 'max_depth' => get_option('thread_comments_depth'), + 'before' => '', + 'after' => '', + ), $comment->comment_ID, get_the_ID()); + ?> +
+ +
+ comment_ID); + + if (!empty($all_nested_replies)) { + $total_reply_count = count($all_nested_replies); + ?> + + +
+
+ +
+
+ +
+
+

+
+ + + pll__('Ответить'), + 'depth' => 2, + 'max_depth' => get_option('thread_comments_depth'), + 'before' => '', + 'after' => '', + ), $reply->comment_ID, get_the_ID()); + ?> +
+ +
+ '; +} + +function get_all_nested_replies($comment_id) { + $all_replies = array(); + + $direct_replies = get_comments(array( + 'post_id' => get_the_ID(), + 'status' => 'approve', + 'parent' => $comment_id, + 'order' => 'ASC' + )); + + $all_replies = array_merge($all_replies, $direct_replies); + + foreach ($direct_replies as $reply) { + $deeper_replies = get_all_nested_replies_recursive($reply->comment_ID); + $all_replies = array_merge($all_replies, $deeper_replies); + } + + return $all_replies; +} + +function get_all_nested_replies_recursive($comment_id) { + $replies = get_comments(array( + 'post_id' => get_the_ID(), + 'status' => 'approve', + 'parent' => $comment_id, + 'order' => 'ASC' + )); + + $all_replies = $replies; + + foreach ($replies as $reply) { + $deeper_replies = get_all_nested_replies_recursive($reply->comment_ID); + $all_replies = array_merge($all_replies, $deeper_replies); + } + + return $all_replies; +} + +if (is_user_logged_in()) { + $commenter = wp_get_current_commenter(); + $args = array( + 'fields' => array( + 'author' => '', + 'email' => '', + 'url' => '', + 'cookies' => '', + ), + 'comment_field' => '
', + 'title_reply' => pll__('Оставить комментарий'), + 'title_reply_to' => pll__('Ответить %s'), + 'class_submit' => 'comment-submit-btn', + 'submit_button' => '', + 'submit_field' => '
%1$s %2$s
', + 'cancel_reply_link' => pll__('Отменить'), + 'id_form' => 'commentform', + 'id_submit' => 'submit', + 'title_reply_before' => '

', + 'title_reply_after' => '

', + ); + + comment_form($args); +} +?> \ No newline at end of file diff --git a/wp-content/themes/cosmopet/functions.php b/wp-content/themes/cosmopet/functions.php index 45aaca8..036e840 100644 --- a/wp-content/themes/cosmopet/functions.php +++ b/wp-content/themes/cosmopet/functions.php @@ -42,6 +42,14 @@ function theme_add_woocommerce_support() add_action('after_setup_theme', 'theme_add_woocommerce_support'); add_theme_support('post-thumbnails'); +add_action('after_setup_theme', function() { + add_theme_support('comments'); + + update_option('default_comment_status', 'open'); +}); + + + //Подруключение всех ajax controller если запрос сделан по ajax @@ -144,7 +152,7 @@ add_action('wp_enqueue_scripts', function() use ($module_name, $module_dir) { $css_files = scandir($css_dir); // Приоритетные файлы - $priority_files = [ + $priority_files = [ 'normalize.css', 'gp-style-core.css', 'gp-style-desktop.css', @@ -415,9 +423,33 @@ requireShortcodes(get_template_directory() . '/modules'); require_once('modules/blog/module-ajax-controller.php'); require_once('modules/forms/module-ajax-controller.php'); +require_once('modules/shop/module-ajax-controller.php'); + + + +add_action('wp', 'my_custom_checkout_code'); +function my_custom_checkout_code() { + if (function_exists('is_checkout') && is_checkout() && !is_order_received_page()) { + include_component('shop', 'checkout'); + } +} + +require_once('modules/author/module-ajax-controller.php'); + include_module('forms'); include_module('layout'); +add_action('wp_enqueue_scripts', 'disable_woocommerce_css', 999); +function disable_woocommerce_css() { + wp_dequeue_style('woocommerce-general'); + wp_dequeue_style('woocommerce-layout'); + wp_dequeue_style('woocommerce-smallscreen'); + wp_dequeue_style('woocommerce_frontend_styles'); + wp_dequeue_style('woocommerce_fancybox_styles'); + wp_dequeue_style('woocommerce_chosen_styles'); + wp_dequeue_style('woocommerce_prettyPhoto_css'); +} + class WooProduct extends Timber\Post { protected $wc_product; @@ -472,7 +504,7 @@ function get_products() { $context['get_category_type'] = isset($_POST['get_category_type']) ? $_POST['get_category_type'] : NULL; // Задаем количество постов для подзагрузки Ajax - $posts_per_page = 1; + $posts_per_page = 12; $args = array( 'post_type' => 'product', @@ -517,7 +549,9 @@ function get_products() { $context['count'] = count(Timber::get_posts($count_args)); - if ($context['count'] <= $context['get_page'] * 1) $context['ended'] = true; + if ($context['count'] <= $context['get_page'] * $posts_per_page) { + $context['ended'] = true; + } Timber::render( 'woocommerce/archive-product/archive-product-ajaxload.twig', $context ); @@ -525,12 +559,19 @@ function get_products() { } function get_product_info ($id, $type) { - $product = wc_get_product( $id ); + if (!$id) { + return ''; + } + $product = wc_get_product($id); + if (!$product) { + return ''; + } if ($type == 'price') { return $product->get_price(); } elseif ($type == 'weight') { - return $product->get_weight() . ' кг'; + return $product->get_weight() ? $product->get_weight() . ' кг' : ''; } + return ''; } function get_add_to_cart_button ($id) { @@ -540,6 +581,10 @@ function get_add_to_cart_button ($id) { } function get_collection_siblings ($term) { + if (!$term) { + return []; + } + $args = array( 'posts_per_page' => -1, 'post_type' => 'product', @@ -574,6 +619,7 @@ register_sidebar( array( 'after_title' => '', ) ); + // Define encryption secret key define('SECRET', 'fT54ehYtt87@q1A'); @@ -739,4 +785,369 @@ add_action('wp_logout', 'logout_redirect'); function logout_redirect() { wp_redirect('/'); exit(); +} + +add_filter( 'woocommerce_price_trim_zeros', '__return_true' ); + +function add_comment_like() { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + $wpdb->show_errors(); + if (!is_user_logged_in()) { + wp_send_json_error('Необходимо авторизоваться'); + die(); + } + $comment_id = isset($_POST['comment_id']) ? intval($_POST['comment_id']) : 0; + $user_id = get_current_user_id(); + if ($comment_id) { + $comment_exists = get_comment($comment_id); + if (!$comment_exists) { + echo '0'; + die(); + } + $existing_like = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE comment_id = %d AND user_id = %d", + $comment_id, $user_id + )); + if (!$existing_like) { + $result = $wpdb->insert( + $table_name, + array( + 'user_id' => $user_id, + 'comment_id' => $comment_id, + 'date_added' => current_time('mysql') + ), + array('%d', '%d', '%s') + ); + } else { + $result = $wpdb->delete( + $table_name, + array( + 'user_id' => $user_id, + 'comment_id' => $comment_id + ), + array('%d', '%d') + ); + } + $likes = get_comment_likes_count($comment_id); + wp_send_json(array( + 'count' => $likes, + 'is_liked' => !$existing_like + )); + } else { + wp_send_json(array('count' => 0, 'is_liked' => false)); + } + die(); +} +add_action('wp_ajax_add_comment_like', 'add_comment_like'); + +function add_post_like() { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + if (!is_user_logged_in()) { + wp_send_json_error('Необходимо авторизоваться'); + die(); + } + $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0; + $user_id = get_current_user_id(); + if ($post_id) { + $existing_like = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND user_id = %d", + $post_id, $user_id + )); + if (!$existing_like) { + $wpdb->insert( + $table_name, + array( + 'user_id' => $user_id, + 'post_id' => $post_id, + 'date_added' => current_time('mysql') + ), + array('%d', '%d', '%s') + ); + } else { + $wpdb->delete( + $table_name, + array( + 'user_id' => $user_id, + 'post_id' => $post_id + ), + array('%d', '%d') + ); + } + $likes = get_post_likes_count($post_id); + wp_send_json(array( + 'count' => $likes, + 'is_liked' => !$existing_like + )); + } + die(); +} +add_action('wp_ajax_add_post_like', 'add_post_like'); + +function check_user_likes() { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + if (!is_user_logged_in()) { + wp_send_json_error('Необходимо авторизоваться'); + die(); + } + $user_id = get_current_user_id(); + $liked_posts = $wpdb->get_col($wpdb->prepare( + "SELECT post_id FROM $table_name WHERE user_id = %d AND post_id > 0", + $user_id + )); + $liked_comments = $wpdb->get_col($wpdb->prepare( + "SELECT comment_id FROM $table_name WHERE user_id = %d AND comment_id > 0", + $user_id + )); + $response = array( + 'posts' => $liked_posts, + 'comments' => $liked_comments + ); + echo json_encode($response); + die(); +} +add_action('wp_ajax_check_user_likes', 'check_user_likes'); + + + +function get_post_likes_count($post_id) { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + $count = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE post_id = %d", + $post_id + )); + return $count ? $count : 0; +} + +function get_comment_likes_count($comment_id) { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + $count = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE comment_id = %d", + $comment_id + )); + return $count ? $count : 0; +} + +function is_user_liked_post($post_id) { +if (!is_user_logged_in()) { + return false; +} +global $wpdb; +$table_name = $wpdb->prefix . 'cosmopet_likes'; +$user_id = get_current_user_id(); +$result = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE post_id = %d AND user_id = %d", + $post_id, $user_id +)); +return $result > 0; +} + + +function is_user_liked_comment($comment_id) { +if (!is_user_logged_in()) { + return false; +} +global $wpdb; +$table_name = $wpdb->prefix . 'cosmopet_likes'; +$user_id = get_current_user_id(); +$result = $wpdb->get_var($wpdb->prepare( + "SELECT COUNT(*) FROM $table_name WHERE comment_id = %d AND user_id = %d", + $comment_id, $user_id +)); +return $result > 0; +} + + +add_filter('comment_form_logged_in', '__return_empty_string'); + + + // Создание таблицы +function create_likes_table() { + global $wpdb; + $table_name = $wpdb->prefix . 'cosmopet_likes'; + $charset_collate = $wpdb->get_charset_collate(); + $sql = "CREATE TABLE IF NOT EXISTS $table_name ( + id bigint(20) NOT NULL AUTO_INCREMENT, + user_id bigint(20) NOT NULL, + post_id bigint(20) DEFAULT '0', + comment_id bigint(20) DEFAULT '0', + date_added datetime DEFAULT CURRENT_TIMESTAMP, + PRIMARY KEY (id), + KEY post_id (post_id), + KEY comment_id (comment_id), + KEY user_id (user_id), + UNIQUE KEY user_post (user_id, post_id, comment_id) + ) $charset_collate;"; + require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); + dbDelta($sql); +} +add_action('after_switch_theme', 'create_likes_table'); + + + +add_filter('woocommerce_product_data_tabs', function($tabs) { + $tabs['composition_tab'] = array( + 'label' => 'Состав', + 'target' => 'composition_product_data', + 'class' => array('composition_tab'), + 'priority' => 60, + ); + $tabs['feeding_tab'] = array( + 'label' => 'Рекомендации по кормлению', + 'target' => 'feeding_product_data', + 'class' => array('feeding_tab'), + 'priority' => 61, + ); + $tabs['important_tab'] = array( + 'label' => 'Важно', + 'target' => 'important_product_data', + 'class' => array('important_tab'), + 'priority' => 62, + ); + return $tabs; +}); + + +add_action('woocommerce_product_data_panels', function() { + global $post; + $composition = get_post_meta($post->ID, '_composition', true); + echo '
'; + woocommerce_wp_textarea_input([ + 'id' => '_composition', + 'label' => 'Состав', + 'desc_tip' => true, + 'description' => 'Введите состав товара', + 'value' => $composition + ]); + echo '
'; +}); + + +add_action('woocommerce_product_data_panels', function() { + global $post; + $feeding = get_post_meta($post->ID, '_feeding_recommendations', true); + echo '
'; + woocommerce_wp_textarea_input([ + 'id' => '_feeding_recommendations', + 'label' => 'Рекомендации по кормлению', + 'desc_tip' => true, + 'description' => 'Введите рекомендации по кормлению', + 'value' => $feeding + ]); + echo '
'; +}); + + +add_action('woocommerce_product_data_panels', function() { + global $post; + $important = get_post_meta($post->ID, '_important', true); + echo '
'; + woocommerce_wp_textarea_input([ + 'id' => '_important', + 'label' => 'Важно', + 'desc_tip' => true, + 'description' => 'Введите важную информацию', + 'value' => $important + ]); + echo '
'; +}); + +add_action('woocommerce_process_product_meta', function($post_id) { + if (isset($_POST['_composition'])) { + update_post_meta($post_id, '_composition', sanitize_textarea_field($_POST['_composition'])); + } + if (isset($_POST['_feeding_recommendations'])) { + update_post_meta($post_id, '_feeding_recommendations', sanitize_textarea_field($_POST['_feeding_recommendations'])); + } + if (isset($_POST['_important'])) { + update_post_meta($post_id, '_important', sanitize_textarea_field($_POST['_important'])); + } +}); +// Добавление поля для выбора рекомендуемых товаров +function register_recommended_products_acf_field() { + if (function_exists('acf_add_local_field_group')) { + acf_add_local_field_group(array( + 'key' => 'group_recommended_products', + 'title' => 'Рекомендуемые товары', + 'fields' => array( + array( + 'key' => 'field_recommended_products', + 'label' => 'Выберите рекомендуемые товары', + 'name' => 'recommended_products', + 'type' => 'relationship', + 'instructions' => 'Выберите товары, которые будут отображаться в секции "вашему питомцу может понравиться"', + 'required' => 0, + 'conditional_logic' => 0, + 'post_type' => array( + 0 => 'product', + ), + 'filters' => array( + 0 => 'search', + 1 => 'taxonomy', + ), + 'return_format' => 'object', + 'min' => '', + 'max' => 8, + ), + ), + 'location' => array( + array( + array( + 'param' => 'post_type', + 'operator' => '==', + 'value' => 'product', + ), + ), + ), + 'menu_order' => 0, + 'position' => 'normal', + 'style' => 'default', + 'label_placement' => 'top', + 'instruction_placement' => 'label', + 'hide_on_screen' => '', + )); + } +} +add_action('acf/init', 'register_recommended_products_acf_field'); + +add_action('wp_footer', 'remove_view_cart_button_js'); +function remove_view_cart_button_js() { + ?> + + '; + } + return $tag; +}, 10, 3 ); + +// Для кнопки "Применить фильтр" +add_filter('wbw_filter_submit_button_text', 'change_wbw_filter_button_text'); +function change_wbw_filter_button_text($text) { + return 'Ваш текст'; // Например, "Фильтровать" или "Поиск" +} + +// Для кнопки сброса (если есть) +add_filter('wbw_filter_reset_button_text', 'change_wbw_reset_button_text'); +function change_wbw_reset_button_text($text) { + return 'Сбросить'; + } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/global-functions/multilang-functions.php b/wp-content/themes/cosmopet/global-functions/multilang-functions.php index 98d131e..015ff51 100644 --- a/wp-content/themes/cosmopet/global-functions/multilang-functions.php +++ b/wp-content/themes/cosmopet/global-functions/multilang-functions.php @@ -1,43 +1,94 @@ -скидку!', 'Узнайте о нас больше и получите скидку!'); - pll_register_string ('Это миф!', 'Это миф!'); - pll_register_string ('Это правда!', 'Это правда!'); - pll_register_string ('Правда', 'Правда'); - pll_register_string ('Миф', 'Миф'); - pll_register_string ('Далее', 'Далее'); - pll_register_string ('ваш результат', 'ваш результат'); - pll_register_string ('Скопировать', 'Скопировать'); - pll_register_string ('Скопировано', 'Скопировано'); - pll_register_string ('В магазин', 'В магазин'); - pll_register_string ('Наш блог', 'Наш блог'); - pll_register_string ('Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных'); - pll_register_string ('ЭТАПЫ ПРОИЗВОД­СТВА', 'ЭТАПЫ ПРОИЗВОД­СТВА'); - pll_register_string ('Этапы производс­тва корма', 'Этапы производс­тва корма'); - pll_register_string ('Все статьи', 'Все статьи'); - pll_register_string ('Узнать больше', 'Узнать больше'); -}); - + +скидку!', 'Узнайте о нас больше и получите скидку!'); + pll_register_string ('Это миф!', 'Это миф!'); + pll_register_string ('Это правда!', 'Это правда!'); + pll_register_string ('Правда', 'Правда'); + pll_register_string ('Миф', 'Миф'); + pll_register_string ('Далее', 'Далее'); + pll_register_string ('ваш результат', 'ваш результат'); + pll_register_string ('Скопировать', 'Скопировать'); + pll_register_string ('Скопировано', 'Скопировано'); + pll_register_string ('В магазин', 'В магазин'); + pll_register_string ('Наш блог', 'Наш блог'); + pll_register_string ('Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных', 'Новости рынка кормов и экологии, полезные статьи о здоровье домашних животных'); + pll_register_string ('ЭТАПЫ ПРОИЗВОД­СТВА', 'ЭТАПЫ ПРОИЗВОД­СТВА'); + pll_register_string ('Этапы производс­тва корма', 'Этапы производс­тва корма'); + pll_register_string ('Все статьи', 'Все статьи'); + pll_register_string ('Узнать больше', 'Узнать больше'); + pll_register_string ('Продукция', 'Продукция'); + pll_register_string ('Фильтры', 'Фильтры'); + pll_register_string ('Новинка', 'Новинка'); + pll_register_string ('Распродажа %', 'Распродажа %'); + pll_register_string ('Купить', 'Купить'); + pll_register_string ('Подробнее', 'Подробнее'); + pll_register_string ('Объем', 'Объем'); + pll_register_string ('Количество', 'Количество'); + pll_register_string ('Добавить в корзину', 'Добавить в корзину'); + pll_register_string ('Применить', 'Применить'); + pll_register_string ('Сбросить фильтры', 'Сбросить фильтры'); + pll_register_string('cosmopet_bestsellers_title', 'BESTSELLERS', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_previous_products', 'Previous products', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_next_products', 'Next products', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_view_product', 'View product:', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_product_image', 'Product image:', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_buy_button', 'Buy', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_all_products', 'All products', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_no_products', 'No bestsellers found', 'CosmoPet Theme Bestsellers'); + pll_register_string('cosmopet_back_to_catalog', 'к каталогу', 'Product Detail'); + pll_register_string('cosmopet_sale_tag', 'Распродажа %', 'Product Detail'); + pll_register_string('cosmopet_add_to_cart', 'Добавить в корзину', 'Product Detail'); + pll_register_string('cosmopet_description', 'ОПИСАНИЕ', 'Product Detail'); + pll_register_string('cosmopet_composition', 'СОСТАВ', 'Product Detail'); + pll_register_string('cosmopet_feeding_recommendations', 'РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ', 'Product Detail'); + pll_register_string('cosmopet_nutritional_value', 'ПИЩЕВАЯ ЦЕННОСТЬ', 'Product Detail'); + pll_register_string('cosmopet_vitamins_per_kg', 'ВИТАМИНЫ НА КГ', 'Product Detail'); + pll_register_string('cosmopet_nutritional_additives_per_kg', 'ПИТАТЕЛЬНЫЕ ДОБАВКИ НА КГ', 'Product Detail'); + pll_register_string('cosmopet_energy_value_per_100g', 'ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ НА 100 ГРАММ', 'Product Detail'); + pll_register_string('cosmopet_important', 'Важно', 'Product Detail'); + pll_register_string('cosmopet_you_may_also_like', 'вашему питомцу может понравиться', 'Product Detail'); + pll_register_string('cosmopet_new_product', 'Новинка', 'Product Detail'); + pll_register_string('cosmopet_buy', 'Купить', 'Product Detail'); + pll_register_string('cosmopet_volume', 'Объем', 'Product Detail'); + pll_register_string('cosmopet_quantity', 'Количество', 'Product Detail'); + pll_register_string('cosmopet_details', 'Подробнее', 'Product Detail'); + + pll_register_string('reviews_title', 'Customer Reviews', 'Reviews Section'); + pll_register_string('show_more', 'Show more', 'Reviews Section'); + pll_register_string('default_reviewer_name', 'Anastasia', 'Reviews Section'); + pll_register_string('default_reviewer_role', 'dog owner', 'Reviews Section'); + pll_register_string('default_review_excerpt', 'Just wanted to say thank you - your treats are amazing!', 'Reviews Section'); + pll_register_string('default_review_full_1', 'She loves the lamb one - tasty, safe, and it even works great as a dental treat!', 'Reviews Section'); + pll_register_string('default_review_full_2', 'And the salmon sandwich in the tube is our go-to. We never leave the house without it. Perfect for walks and training!', 'Reviews Section'); + pll_register_string('default_review_full_3', 'So glad we found you!', 'Reviews Section'); + pll_register_string ('ВАША ЗАЯВКА ПРИНЯТА!', 'ВАША ЗАЯВКА ПРИНЯТА!'); + pll_register_string ('Спасибо! Сообщение успешно отправлено.', 'Спасибо! Сообщение успешно отправлено.'); + pll_register_string ('Наш менеджер скоро свяжемся с вами
для уточнения деталей.', 'Наш менеджер скоро свяжемся с вами
для уточнения деталей.'); + pll_register_string ('Вернуться на сайт', 'Вернуться на сайт'); + +}); + diff --git a/wp-content/themes/cosmopet/global-functions/multisite-functions.php b/wp-content/themes/cosmopet/global-functions/multisite-functions.php index e69de29..f15043f 100644 --- a/wp-content/themes/cosmopet/global-functions/multisite-functions.php +++ b/wp-content/themes/cosmopet/global-functions/multisite-functions.php @@ -0,0 +1,21 @@ + defined('SITE_DOMAIN') ? SITE_DOMAIN : null, + ]; + + return $context; +}); + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-desktop.css new file mode 100644 index 0000000..91a0ddd --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-desktop.css @@ -0,0 +1,728 @@ + + +/* Where home */ +.where-home { + padding: 162px 0 37px; + color: var(--background); +} + +.authors h1{ + font-size: 82px; + font-weight: bold; + line-height: 96px; + color:#fff; + margin-bottom: 41px; + text-transform: uppercase; +} + +.where-home h1 { + font-size: 82px; + font-weight: bold; + line-height: 96px; + margin-bottom: 41px; + text-transform: uppercase; +} + +.where-home p { + max-width: 928px; + color: #FFF; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; +} +/* Where home end */ + +/* Find us */ +.find-us { + color: var(--background); + padding-bottom: 24px; +} + +.find-us h2 { + padding: 10px 0; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + margin-bottom: 24px; +} + +.find-us ul { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 36px; +} + +.find-us h3 { + font-size: 24px; + font-weight: bold; + line-height: 28px; + margin-bottom: 8px; + text-transform: uppercase; +} + +.find-us p { + font-size: 24px; + font-weight: 500; + line-height: 32px; +} +/* Find us end */ + +/* Location */ +.location { + padding-bottom: 35px; +} + +.location h2 { + padding: 10px 0; + margin-bottom: 37px; + text-align: right; + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + color: var(--main_white); +} + +.location iframe { + height: 783px; + width: 100%; + border-radius: 64px; +} +/* Location end */ + +/* Sell form */ +.sell-form { + padding-bottom: 31px; +} + +.sell-form__container { + background: var(--main_white); + border-radius: 64px; + padding: 64px 105px 38px; + color: var(--grey-black); + display: flex; + flex-direction: column; + gap: 48px; +} + +.sell-form h2 { + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; +} + +.sell-form p { + text-transform: uppercase; + font-size: 24px; + font-weight: bold; + line-height: 28px; +} + +.sell-form form { + display: flex; + flex-direction: column; + align-items: center; + gap: 16px; +} + +.sell-form form button { + background: var(--main_black); + padding: 11px 70px; + color: var(--main_white); + text-transform: uppercase; + border-radius: 16px; + font-size: 20px; + font-weight: 600; + line-height: 24px; + border: 1px solid var(--main_black); +} + +.sell-form form button:hover { + background: var(--main_white); + color: var(--main_black); +} +/* Sell form end */ + +/* Breadcrumb */ +.breadcrumb { + padding: 20px 0 24px; +} + +.breadcrumb .container { + color: var(--main_white); + font-size: 14px; + font-weight: 500; + line-height: 16px; +} + +.breadcrumb a { + display: inline; +} +/* Breadcrumb end */ + +/* Authors */ +.authors { + padding-bottom: 120px; +} + +.authors h2 { + font-weight: bold; + font-size: 64px; + line-height: 120%; + color: white; + text-transform: uppercase; + margin-bottom: 36px; +} + +.authors ul { + display: flex; + flex-wrap: wrap; + align-items: stretch; + justify-content: center; + gap: 24px; +} + +.authors li { + background: #F5F5F5; + border-radius: 48px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: calc(100% / 3 - 16px); +} + +.authors a { + padding: 52px 17px 57px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.authors .main-img { + width: 200px; + height: 200px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin-bottom: 31px; +} + +.authors .main-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.authors-name { + font-size: 24px; + font-weight: bold; + text-transform: uppercase; + line-height: 28px; + color: #121212; + margin-bottom: 5px; +} + +.authors-type { + color: #121212; + font-size: 24px; + font-weight: 500; + line-height: 32px; + margin-bottom: 31px; +} + +.authors p { + color: #666666; + font-weight: 500; + font-size: 20px; + line-height: 24px; +} +/* Authors end */ + +/* author-head */ +.author-head { + padding-bottom: 36px; +} + +.author-head-content { + display: flex; + align-items: center; + gap: 31px; + margin-bottom: 17.5px; +} + +.author-head .main-img { + width: 278px; + height: 278px; + flex-shrink: 0; + border-radius: 48px; + overflow: hidden; +} + +.author-head .main-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.author-name { + font-size: 24px; + font-weight: bold; + line-height: 28px; + color: white; + margin-bottom: 5px; + text-transform: uppercase; +} + +.author-type { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: white; + margin-bottom: 5px; +} + +.author-description { + font-size: 24px; + font-weight: 500; + line-height: 32px; + color: white; + margin-bottom: 45px; +} + +.author-head p { + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: white; +} + +.author-head h2 { + font-size: 64px; + font-weight: bold; + line-height: 120%; + color: white; +} +/* author-head end */ + + + + + +.home-title { + font-size: 82px; + font-weight: bold; + line-height: 96px; + color: var(--main_white); + margin-bottom: 16px; +} + +.home-description { + font-size: 32px; + font-weight: bold; + line-height: 40px; + color: var(--main_white); + text-transform: uppercase; + margin-bottom: 68px; +} + +.home-swp { + position: relative; +} + +.home-swp__btn { + position: absolute; + bottom: 22px; + left: 50%; + transform: translateX(-50%); + z-index: 2; + display: flex; + align-items: center; + gap: 24px; +} + +.home-swp__btn button { + border: 1px solid var(--main_black); + background: var(--main_white); + width: 56px; + height: 56px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 20px; +} + +.home-swp .swiper-slide:not(.swiper-slide-active) { + height: 0; + overflow: hidden; +} + +.home-card { + border-radius: 60px; + overflow: hidden; + display: flex; + align-items: flex-start; + gap: 24px; + position: relative; +} + +.home-card.bg-yellow { + background: var(--orange_80); +} + +.home-card.bg-green { + background: var(--green_90); +} + +.home-card.bg-violet { + background: var(--violet_90); +} + +.home-card__img { + width: 395px; + border-radius: 60px; + overflow: hidden; + height: 393px; + flex-shrink: 0; +} + +.home-card__img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.home-card__content { + padding: 32px 79px 0 0; +} + +.home-card__content-title { + font-size: 36px; + font-weight: bold; + line-height: 40px; + text-transform: uppercase; + max-width: 660px; + margin-bottom: 10px; + color: var(--interface_title); +} + +.home-card__content-description { + color: var(--interface_title); + margin-bottom: 10px; + font-size: 20px; + font-weight: 500; + line-height: 24px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.home-card__content-body { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.home-card__content-body__alerts { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} + +.home-card__content-body__alerts li { + background: var(--interface_hover); + color: var(--background); + border-radius: 16px; + padding: 6px 8px; + font-size: 16px; + font-weight: 500; + line-height: 20px; +} + +.home-card__content-body__day { + color: var(--interface_hover); + font-size: 14px; + font-weight: 500; + line-height: 16px; +} + +.home-card__content-body__time { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.home-card__content-body__data { + display: flex; + align-items: center; + gap: 12px; +} + +.home-card__content-body__data>div { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.home-card__content-body__data>div .main-img { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; +} + +.home-card__content-body__link { + border: 1px solid #000000; + border-radius: 28px; + background: var(--main_white); + position: absolute; + right: 37px; + bottom: 26px; + padding: 8.5px 16px 12.5px; + font-style: 20px; + font-weight: 500; + line-height: 24px; +} +/* Home end */ + + +/* Anons */ +.anons { + background: var(--main_white); + border-radius: 60px; + padding: 51px 0; +} + +.anons-theme__title { + color: var(--main_black); + font-size: 24px; + font-weight: bold; + line-height: 28px; + text-transform: uppercase; + margin-bottom: 20px; +} + +.anons-theme { + margin-bottom: 60px; +} + +.anons-theme ul { + max-width: 1022px; + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.anons-theme ul a { + font-size: 20px; + font-weight: 600; + line-height: 24px; + color: var(--main_black); + padding: 4px 24px; + border: 1px solid #000; + border-radius: 20px; +} + +.anons-theme ul a:hover, +.anons-theme ul a.active { + background: var(--main_black); + color: var(--main_white); +} + +.anons-best { + margin-bottom: 60px; +} + +.anons-best__title { + font-size: 36px; + line-height: 40px; + font-weight: bold; + color: var(--main_black); + margin-bottom: 20px; +} + +.anons-best__card-wrap { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 24px; +} + +.anons-best__card { + padding-top: 293px; + border-radius: 48px; + overflow: hidden; + position: relative; + z-index: 1; +} + +.anons-best__card.light { + padding-top: 0; + border-radius: 0; +} + +.anons-best__card .main-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 360px; + z-index: -1; +} + +.anons-best__card .main-img img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.anons-best__card.light .main-img { + position: static; + height: 265px; +} +.anons-best__card.light .main-img img { + border-radius: 30px; +} + +.anons-best__card-alerts { + position: absolute; + top: 21px; + left: 17px; + width: calc(100% - 34px); + display: flex; + flex-wrap: wrap; + gap: 7px; + z-index: 1; +} + +.anons-best__card-alerts li { + padding: 6px 8px; + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--background); + background: var(--main_black); + border-radius: 30px; +} + +.anons-best__card-body { + background: var(--accent-1); + padding: 30px 17px 22px; + border-radius: 48px 48px 0 0; + color: var(--main_white); + position: relative; + height: 100%; +} + +.anons-best__card.light .anons-best__card-body { + background: transparent; + color: var(--main_black); + padding: 12px 0 34px; +} + +.anons-best__card-body__title { + font-size: 28px; + font-weight: bold; + line-height: 32px; + text-transform: uppercase; + margin-bottom: 14px; +} + +.anons-best__card.light .anons-best__card-body__title { + font-size: 26px; +} + +.anons-best__card-body__datas { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px 10px; + max-width: 264px; +} + +.anons-best__card.light .anons-best__card-body__datas { + color: var(--placeholder); +} + +.anons-best__card-body__datas p { + font-size: 14px; + line-height: 16px; + font-weight: 500; +} + +.anons-best__card-body__datas ul { + display: flex; + align-items: center; + gap: 10px; +} + +.anons-best__card-body__datas ul li { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + line-height: 16px; + font-weight: 500; +} + +.anons-best__card-body__datas ul .logo img { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; +} + +.anons-article { + margin-bottom: 40px; +} + +.anons-article__title { + font-size: 36px; + line-height: 40px; + font-weight: bold; + color: var(--main_black); + margin-bottom: 20px; +} + +.anons-article__card-wrap { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 40px 25px; +} + +.anons-article__more-link { + display: flex; + align-items: center; + justify-content: center; +} + +.anons-article__more-link a { + background: var(--accent-3); + color: var(--main_white); + border-radius: 20px; + border: 1px solid var(--main_white); + padding: 16px 24px; + font-size: 20px; + font-weight: 600; + line-height: 24px; + text-transform: uppercase; +} +/* Anons end */ + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-mobile.css b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-mobile.css new file mode 100644 index 0000000..5b3fc9f --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-mobile.css @@ -0,0 +1,120 @@ +/* Стили для мобильных устройств */ +@media only screen and (max-width: 576px) { + .anons-best__title { + font-size: 26px; + line-height: 32px; + margin-bottom: 12px; + } + + .anons-best__card { + padding-top: 205px; + } + + .anons-best__card .main-img { + height: 300px; + } + + .anons-best__card-body { + padding: 20px 17px; + } + + .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + margin-bottom: 16px; + } + + .anons-best__card.light .main-img { + height: 197px; + } + + .anons-best__card.light .anons-best__card-body__title { + font-size: 20px; + line-height: 24px; + } + + + + .authors { + padding-bottom: 138px; + } + + .authors h2 { + font-size: 32px; + line-height: 38px; + margin-bottom: 15px; + } + + .authors li { + border-radius: 24px; + width: 100%; + } + + .authors a { + padding: 32px 17px 52px; + } + + .authors .main-img { + width: 180px; + height: 180px; + margin-bottom: 20px; + } + + .authors-name { + font-size: 20px; + line-height: 24px; + } + + .authors-type { + font-size: 18px; + line-height: 24px; + margin-bottom: 20px; + } + + .authors p { + font-size: 16px; + line-height: 20px; + } + + .author-head { + padding-bottom: 15px; + } + + .author-head-content { + margin-bottom: 23px; + } + + .author-head .main-img { + width: 100%; + } + + .author-head h2 { + font-size: 32px; + line-height: 38px; + } + + .author-name { + font-size: 20px; + line-height: 24px; + } + + .author-type { + font-size: 18px; + line-height: 24px; + } + + .author-description { + font-size: 18px; + line-height: 24px; + margin-bottom: 24px; + } + + .author-head p { + font-size: 16px; + line-height: 20px; + } +} + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-tablet.css b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-tablet.css new file mode 100644 index 0000000..00bae10 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/css/gp-style-tablet.css @@ -0,0 +1,44 @@ +/* Стили для планшетов */ +@media only screen and (max-width: 992px) { + + .authors h2 { + font-size: 48px; + margin-bottom: 24px; + } + + .authors li { + border-radius: 32px; + width: calc(50% - 12px); + } + + .authors .main-img { + margin-bottom: 24px; + } + + .author { + padding-bottom: 24px; + } + + .author h2 { + font-size: 48px; + } + + .author-head-content { + flex-direction: column; + align-items: flex-start; + } +} + + + +/* Стили для планшетов */ +@media only screen and (max-width: 992px) { + + .author { + padding: 188px 0 36px; + } + + + + +} diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/arrow-down.svg b/wp-content/themes/cosmopet/modules/author/assets/img/arrow-down.svg new file mode 100644 index 0000000..be8f47a --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-1.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-1.png new file mode 100644 index 0000000..5857f04 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-1.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-2.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-2.png new file mode 100644 index 0000000..125d947 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-2.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-3.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-3.png new file mode 100644 index 0000000..f5a11c1 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-3.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-4.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-4.png new file mode 100644 index 0000000..a54bf7c Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-4.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-5.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-5.png new file mode 100644 index 0000000..9685422 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-5.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/author-main-card.png b/wp-content/themes/cosmopet/modules/author/assets/img/author-main-card.png new file mode 100644 index 0000000..a271f5b Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/author-main-card.png differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/bars.svg b/wp-content/themes/cosmopet/modules/author/assets/img/bars.svg new file mode 100644 index 0000000..0ff9b2e --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/bars.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/basket-icon.svg b/wp-content/themes/cosmopet/modules/author/assets/img/basket-icon.svg new file mode 100644 index 0000000..6ee2bce --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/basket-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/favicon.ico b/wp-content/themes/cosmopet/modules/author/assets/img/favicon.ico new file mode 100644 index 0000000..5517fde Binary files /dev/null and b/wp-content/themes/cosmopet/modules/author/assets/img/favicon.ico differ diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-1.svg b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-1.svg new file mode 100644 index 0000000..8a88433 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-2.svg b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-2.svg new file mode 100644 index 0000000..b7f36f4 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-3.svg b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-3.svg new file mode 100644 index 0000000..19e914a --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/footer-network-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/header-red.svg b/wp-content/themes/cosmopet/modules/author/assets/img/header-red.svg new file mode 100644 index 0000000..95c7ae6 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/header-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/heart-grey.svg b/wp-content/themes/cosmopet/modules/author/assets/img/heart-grey.svg new file mode 100644 index 0000000..81573c3 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/heart-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/heart-white.svg b/wp-content/themes/cosmopet/modules/author/assets/img/heart-white.svg new file mode 100644 index 0000000..7250c70 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/heart-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/heart.svg b/wp-content/themes/cosmopet/modules/author/assets/img/heart.svg new file mode 100644 index 0000000..95c2899 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/indent-icon-1.svg b/wp-content/themes/cosmopet/modules/author/assets/img/indent-icon-1.svg new file mode 100644 index 0000000..80d233c --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/indent-icon-1.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/logo-green.svg b/wp-content/themes/cosmopet/modules/author/assets/img/logo-green.svg new file mode 100644 index 0000000..4b64e3b --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/logo-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/logo.svg b/wp-content/themes/cosmopet/modules/author/assets/img/logo.svg new file mode 100644 index 0000000..d3929b8 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/long-arrow.svg b/wp-content/themes/cosmopet/modules/author/assets/img/long-arrow.svg new file mode 100644 index 0000000..6a3baa3 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/long-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/minus-icon.svg b/wp-content/themes/cosmopet/modules/author/assets/img/minus-icon.svg new file mode 100644 index 0000000..b4d504c --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/minus-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/msg-green.svg b/wp-content/themes/cosmopet/modules/author/assets/img/msg-green.svg new file mode 100644 index 0000000..9e521bc --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/msg-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/msg-grey.svg b/wp-content/themes/cosmopet/modules/author/assets/img/msg-grey.svg new file mode 100644 index 0000000..b126087 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/msg-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/msg-white.svg b/wp-content/themes/cosmopet/modules/author/assets/img/msg-white.svg new file mode 100644 index 0000000..b920033 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/msg-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/msg.svg b/wp-content/themes/cosmopet/modules/author/assets/img/msg.svg new file mode 100644 index 0000000..7471b49 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/msg.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/plus-icon.svg b/wp-content/themes/cosmopet/modules/author/assets/img/plus-icon.svg new file mode 100644 index 0000000..6066429 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/plus-icon.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/swp-next.svg b/wp-content/themes/cosmopet/modules/author/assets/img/swp-next.svg new file mode 100644 index 0000000..6393610 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/swp-next.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/swp-prev.svg b/wp-content/themes/cosmopet/modules/author/assets/img/swp-prev.svg new file mode 100644 index 0000000..b886a4f --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/swp-prev.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/img/user-icon.svg b/wp-content/themes/cosmopet/modules/author/assets/img/user-icon.svg new file mode 100644 index 0000000..4b9a9a9 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/img/user-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/modules/author/assets/js/author-posts-ajax.js b/wp-content/themes/cosmopet/modules/author/assets/js/author-posts-ajax.js new file mode 100644 index 0000000..8fdcaff --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/js/author-posts-ajax.js @@ -0,0 +1,46 @@ +jQuery(document).ready(function ($) { + $('#ajax-load-author').on('submit', function (e) { + e.preventDefault(); + var form = $(this); + var currentPage = parseInt($('#page_num').val()); + var totalPosts = parseInt(form.data('total')); + var postsPerPage = 9; + + console.log('Current page before load:', currentPage); + console.log('Total posts:', totalPosts); + console.log('Posts loaded before request:', postsPerPage); + + var data = { + action: 'get_author_posts', + page_num: currentPage, + author_id: form.data('author') + }; + + console.log('Sending AJAX request with data:', data); + + $.ajax({ + url: '/wp-admin/admin-ajax.php', + type: 'POST', + data: data, + success: function (response) { + console.log('AJAX response received'); + $(".anons-article__card-wrap").append(response); + + $('#page_num').val(currentPage + 1); + console.log('New page number:', currentPage + 1); + + // Считаем общее количество загруженных постов + var currentlyDisplayed = $('.anons-article__card-wrap .anons-best__card').length; + console.log('Actually displayed posts:', currentlyDisplayed); + + if (currentlyDisplayed >= totalPosts) { + console.log('Hiding load more button - all posts loaded'); + form.hide(); + } + }, + error: function (error) { + console.error('AJAX error:', error); + } + }); + }); +}); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/author/assets/js/main.js b/wp-content/themes/cosmopet/modules/author/assets/js/main.js new file mode 100644 index 0000000..0f43b8d --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/assets/js/main.js @@ -0,0 +1,48 @@ +// const homeSwp = new Swiper('.home-swp .swiper', { +// slidesPerView: 1, +// spaceBetween: 0, +// effect: 'fade', +// loop: true, +// navigation: { +// nextEl: '.home-swp__btn-next', +// prevEl: '.home-swp__btn-prev', +// } +// }) + +// const textsSwp = new Swiper('.texts-swp .swiper', { +// slidesPerView: 1, +// spaceBetween: 0, +// loop: true, +// effect: 'fade', +// navigation: { +// nextEl: '.texts-swp__next', +// prevEl: '.texts-swp__prev' +// }, +// pagination: { +// el: ".texts-swp__pagination", +// clickable: true, +// } +// }) + +// comment +// let answerbtns = document.querySelectorAll('.answer-btn'); +// let answerbtnicons = document.querySelectorAll('.answer-btn svg'); +// let answerblocks = document.querySelectorAll('.answer-block'); + +// answerbtns.forEach((answerbtn, index) => { +// answerbtn.addEventListener('click', () => { +// let answerbtnicon = answerbtnicons[index]; +// let answerblock = answerblocks[index]; + +// answerblock.classList.toggle('active'); +// answerbtnicon.classList.toggle('active'); + +// let buttonText = answerbtn.querySelector('span'); +// if (buttonText.textContent === 'Ответ') { +// buttonText.textContent = 'Свернуть'; +// } else { +// buttonText.textContent = 'ответ'; +// } +// }); +// }); +// comment diff --git a/wp-content/themes/cosmopet/modules/author/components/author-archive/component-controller.php b/wp-content/themes/cosmopet/modules/author/components/author-archive/component-controller.php new file mode 100644 index 0000000..92c3a0a --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/components/author-archive/component-controller.php @@ -0,0 +1,54 @@ +publish; +$context['total_pages'] = ceil($context['post_count'] / get_option('posts_per_page')); + +$context['sub_title'] = get_field('sub_title', 383); +$context['sub_text'] = get_field('sub_text', 383); + +$authors = Timber::get_posts([ + 'post_type' => 'blog_author', + 'posts_per_page' => -1, + 'orderby' => 'menu_order', + 'order' => 'ASC', +]); + +$authors_arr = iterator_to_array($authors); +foreach ($authors_arr as $author) { + $author_id = $author->ID; + $query = new WP_Query([ + 'post_type' => 'post', + 'posts_per_page' => -1, + 'meta_query' => [ + [ + 'key' => 'post_author', + 'value' => $author_id, + 'compare' => '=' + ] + ] + ]); + $author->post_count = $query->found_posts; + $author->position = get_field('post', $author_id); + $author->posts = Timber::get_posts([ + 'post_type' => 'post', + 'posts_per_page' => -1, + 'meta_query' => [ + [ + 'key' => 'post_author', + 'value' => $author_id, + 'compare' => '=' + ] + ] + ]); +} +$context['authors'] = $authors_arr; + +Timber::render('blog_author/author-archive.twig', $context); diff --git a/wp-content/themes/cosmopet/modules/author/components/author-single/component-controller.php b/wp-content/themes/cosmopet/modules/author/components/author-single/component-controller.php new file mode 100644 index 0000000..832d82d --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/components/author-single/component-controller.php @@ -0,0 +1,41 @@ +ID; + + +$author->position = get_field('post', $author_id); + +$count_query = new WP_Query([ + 'post_type' => 'post', + 'post_status' => 'publish', + 'posts_per_page' => -1, + 'meta_query' => [ + [ + 'key' => 'post_author', + 'value' => $author_id, + 'compare' => '=' + ] + ] +]); +$author->post_count = $count_query->found_posts; + +$author->posts = Timber::get_posts([ + 'post_type' => 'post', + 'post_status' => 'publish', + 'posts_per_page' => 9, + 'meta_query' => [ + [ + 'key' => 'post_author', + 'value' => $author_id, + 'compare' => '=' + ] + ] +]); + +$context['author'] = $author; +$context['total_pages'] = ceil($author->post_count / 9); + +Timber::render('blog_author/author-single.twig', $context); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/author/module-ajax-controller.php b/wp-content/themes/cosmopet/modules/author/module-ajax-controller.php new file mode 100644 index 0000000..5ed693d --- /dev/null +++ b/wp-content/themes/cosmopet/modules/author/module-ajax-controller.php @@ -0,0 +1,35 @@ + 'post', + 'post_status' => 'publish', + 'posts_per_page' => -1, + 'meta_query' => [ + [ + 'key' => 'post_author', + 'value' => $author_id, + 'compare' => '=' + ] + ] + ]); + + if ($all_posts instanceof \Timber\PostQuery || $all_posts instanceof \Timber\PostCollection) { + $all_posts = $all_posts->get_posts(); + } + + $remaining_posts = array_slice($all_posts, 9); + + $context = Timber::context(); + $context['posts'] = $remaining_posts; + + Timber::render('blog_author/author-posts-list.twig', $context); + wp_die(); +} + +add_action('wp_ajax_get_author_posts', 'get_author_posts'); +add_action('wp_ajax_nopriv_get_author_posts', 'get_author_posts'); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css index c2d3155..b4b3192 100644 --- a/wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/blog/assets/css/gp-style-desktop.css @@ -4,4 +4,65 @@ main{ .block-lists_text p { font-size: 18px!important; +} + +.user a{ + display: flex; + align-items: center; + gap: 5px; +} + +.user a{ + display:flex; + gap:5px; +} + +.user img{ + width:30px; + border-radius:100px; +} + +.anons-best__card-body__datas .logo a{ + display: flex; + align-items: center; + gap:5px; + margin-top: 10px; +} + +.comment-submit-btn{ + border: 1px solid #000000; + border-radius: 28px; + background: var(--main_white); + + padding: 8.5px 16px 8.5px; + font-size: 20px; + font-weight: 500; + line-height: 24px; + margin-top: 15px; + transition: all .5s; +} + +.comment-reply-title , .logged-in-as{ + margin: 10px 0; +} + +.comment-block.answer-block.active{ + margin-top: 15px; +} + +.comment-form-comment textarea{ + padding: 28px 48px; + border-radius: 24px; + background: #f5f5f5 !important; +} + +.comment-respond{ + margin-top: 30px; +} + + +.reply-form-container textarea{ + background-color: #fff !important; + margin-top: 2rem; + width: 100%; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/assets/js/comments.js b/wp-content/themes/cosmopet/modules/blog/assets/js/comments.js new file mode 100644 index 0000000..baa8004 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/assets/js/comments.js @@ -0,0 +1,198 @@ +// comment +let answerbtns = document.querySelectorAll('.answer-btn'); +let answerbtnicons = document.querySelectorAll('.answer-btn svg'); + +// При загрузке страницы проверяем активные кнопки +document.addEventListener('DOMContentLoaded', function() { + // Для каждой кнопки ответов + answerbtns.forEach((answerbtn) => { + // Находим родительский контейнер, чтобы искать ответы только для этого комментария + const buttonParent = answerbtn.parentElement; + + // Находим все блоки ответов для этого комментария (после текущей кнопки) + const answerBlocks = getRelatedAnswerBlocks(answerbtn); + if (answerBlocks.length === 0) return; + + // Проверяем, должны ли быть ответы развернуты (если у кнопки или любого ответа есть класс active) + const shouldBeActive = answerbtn.querySelector('svg').classList.contains('active') || + Array.from(answerBlocks).some(block => block.classList.contains('active')); + + if (shouldBeActive) { + // Активируем все ответы только для этого комментария + answerBlocks.forEach(block => { + block.classList.add('active'); + }); + + // Обновляем состояние кнопки + answerbtn.querySelector('svg').classList.add('active'); + + // Обновляем текст кнопки + let buttonText = answerbtn.querySelector('span'); + if (buttonText) { + buttonText.textContent = 'Свернуть'; + } + } else { + // Скрываем все ответы + answerBlocks.forEach(block => { + block.classList.remove('active'); + }); + + // Обновляем состояние кнопки + answerbtn.querySelector('svg').classList.remove('active'); + + // Обновляем текст кнопки в зависимости от количества ответов + let buttonText = answerbtn.querySelector('span'); + if (buttonText) { + const count = answerBlocks.length; + buttonText.textContent = count === 1 ? 'ответ' : 'ответа'; + } + } + }); +}); + +// Функция для получения блоков ответов, связанных с данной кнопкой +function getRelatedAnswerBlocks(answerBtn) { + // Получаем следующий блок комментариев (если он есть) + let currentElement = answerBtn; + let answerBlocks = []; + + // Собираем все блоки ответов до следующего основного комментария или кнопки ответов + while ((currentElement = currentElement.nextElementSibling) !== null) { + if (currentElement.classList.contains('comment-block') && !currentElement.classList.contains('answer-block')) { + // Достигли следующего основного комментария, прерываем сбор + break; + } else if (currentElement.classList.contains('answer-btn')) { + // Достигли следующей кнопки ответов, прерываем сбор + break; + } else if (currentElement.classList.contains('answer-block')) { + // Это блок ответа, добавляем в коллекцию + answerBlocks.push(currentElement); + } + } + + return answerBlocks; +} + +// Обработчики нажатия на кнопки ответов +answerbtns.forEach((answerbtn) => { + answerbtn.addEventListener('click', () => { + // Получаем все блоки ответов для этого комментария + const answerBlocks = getRelatedAnswerBlocks(answerbtn); + if (answerBlocks.length === 0) return; + + // Определяем, развернуты ли ответы сейчас + const isCurrentlyActive = answerbtn.querySelector('svg').classList.contains('active'); + + // Переключаем состояние + if (isCurrentlyActive) { + // Скрываем все ответы + answerBlocks.forEach(block => { + block.classList.remove('active'); + }); + + // Обновляем состояние кнопки + answerbtn.querySelector('svg').classList.remove('active'); + + // Обновляем текст кнопки + let buttonText = answerbtn.querySelector('span'); + if (buttonText) { + const count = answerBlocks.length; + buttonText.textContent = count === 1 ? 'ответ' : 'ответа'; + } + } else { + // Показываем все ответы + answerBlocks.forEach(block => { + block.classList.add('active'); + }); + + // Обновляем состояние кнопки + answerbtn.querySelector('svg').classList.add('active'); + + // Обновляем текст кнопки + let buttonText = answerbtn.querySelector('span'); + if (buttonText) { + buttonText.textContent = 'Свернуть'; + } + } + }); +}); + +// Обработка нажатия на кнопку "Ответить" на комментарий +document.addEventListener('DOMContentLoaded', function() { + // Получаем все кнопки "Ответить" на странице + const replyButtons = document.querySelectorAll('.reply-to-comment'); + + // Добавляем обработчик на каждую кнопку + replyButtons.forEach(button => { + button.addEventListener('click', function() { + // Получаем ID комментария, на который отвечаем + const commentId = this.getAttribute('data-comment-id'); + const postId = this.getAttribute('data-post-id'); + const replyToName = this.getAttribute('data-reply-to'); + + // Получаем контейнер для формы ответа + const replyFormContainer = document.getElementById('reply-form-' + commentId); + + // Если форма уже открыта, скрываем её + if (replyFormContainer.style.display !== 'none') { + replyFormContainer.style.display = 'none'; + return; + } + + // Скрываем все открытые формы ответов + document.querySelectorAll('.reply-form-container').forEach(container => { + container.style.display = 'none'; + }); + + // Клонируем основную форму комментариев + const originalForm = document.getElementById('commentform'); + if (originalForm) { + const clonedForm = originalForm.cloneNode(true); + + // Изменяем атрибуты формы для ответа + clonedForm.id = 'commentform-reply-' + commentId; + + // Добавляем скрытое поле с ID родительского комментария + const hiddenInput = document.createElement('input'); + hiddenInput.type = 'hidden'; + hiddenInput.name = 'comment_parent'; + hiddenInput.value = commentId; + clonedForm.appendChild(hiddenInput); + + // Изменяем заголовок формы + const formTitle = clonedForm.querySelector('.comment-reply-title'); + if (formTitle) { + formTitle.textContent = 'Ответить ' + replyToName; + } + + // Добавляем кнопку отмены + const cancelButton = document.createElement('button'); + cancelButton.type = 'button'; + cancelButton.className = 'cancel-reply-btn'; + cancelButton.textContent = 'Отменить'; + cancelButton.addEventListener('click', function() { + replyFormContainer.style.display = 'none'; + }); + + // Добавляем кнопку отмены в форму + const submitContainer = clonedForm.querySelector('.form-submit'); + if (submitContainer) { + submitContainer.appendChild(cancelButton); + } + + // Очищаем контейнер и добавляем клонированную форму + replyFormContainer.innerHTML = ''; + replyFormContainer.appendChild(clonedForm); + + // Показываем форму + replyFormContainer.style.display = 'block'; + + // Фокусируемся на текстовой области + const textarea = clonedForm.querySelector('textarea'); + if (textarea) { + textarea.focus(); + } + } + }); + }); +}); diff --git a/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/css/style.css b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/css/style.css new file mode 100644 index 0000000..f3b59dc --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/css/style.css @@ -0,0 +1,200 @@ +/* Editorial */ +.editorial { + padding-bottom: 68px; +} + +.editorial-head { + position: relative; + z-index: 1; + max-width: 841px; + margin-bottom: 37px; +} + +.editorial-head__title { + font-size: 82px; + line-height: 96px; + font-weight: bold; + color: var(--main_white); + text-transform: uppercase; +} + +.editorial-head__img { + position: absolute; + z-index: -1; + top: -14px; + right: -20px; + width: 221px; +} + +.editorial-head__star { + position: absolute; + top: 8.26px; + right: -13.5px; + transform: translateX(100%); + width: 87.5px; +} + +.editorial-card__wrap { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 31px 25px; + position: relative; + z-index: 1; +} + +.editorial-card { + border: 2px solid var(--creme-white); + border-radius: 30px; + display: flex; + align-items: stretch; + overflow: hidden; + background: var(--linear); + backdrop-filter: blur(28px); +} + +.editorial-card .main-img { + min-height: 282px; + width: 207px; + border-radius: 29px; + overflow: hidden; + flex-shrink: 0; +} + +.editorial-card:hover .main-img img{ + width: 120%; + height: 120%; +} + +.editorial-card .main-img img { + width: 100%; + height: 100%; + object-fit: cover; + transition: all .5s; +} + +.editorial-card__content { + padding: 42px 19px 19px 35px; +} + +.editorial-card__content-alerts { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 7px; + margin-bottom: 17px; +} + +.editorial-card__content-alerts a { + background: var(--main_black); + border-radius: 16px; + padding: 6px 8px; + font-size: 16px; + font-weight: 500; + line-height: 20px; + color: var(--background); +} + +.editorial-card__content-title { + font-size: 28px; + font-weight: bold; + line-height: 32px; + color: var(--grey-black); + text-transform: uppercase; + margin-bottom: 17px; +} + +.editorial-card__content-data { + display: flex; + flex-wrap: wrap; + gap: 5px 16px; + color: var(--interface_hover); + font-size: 16px; + font-weight: 500; + line-height: 20px; +} + +.editorial-card__content-data ul { + display: flex; + align-items: center; + gap: 16px; +} + +.editorial-card__content-data li { + display: flex; + align-items: center; + gap: 5px; +} + +.editorial-card__content-data .logo img { + width: 24px; + height: 24px; + border-radius: 50%; + object-fit: cover; +} +/* Editorial end */ + +@media (max-width: 1200px) { + .editorial-card__wrap { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } +} + +@media (max-width: 992px) { + .editorial { + padding-bottom: 36px; + } + + .editorial-head { + margin-bottom: 36px; + max-width: 313px; + } + + .editorial-head__title { + font-size: 32px; + line-height: 38px; + } + + .editorial-head__img { + width: 100px; + top: -14px; + right: -22.5px; + } + + .editorial-head__star { + display: none; + } +} + +@media (max-width: 576px) { + .editorial-card { + flex-direction: column; + border-radius: 30px; + position: relative; + } + + .editorial-card .main-img { + width: 100%; + height: 203px; + } + + .editorial-card__content { + padding: 17px 13px 24px; + } + + .editorial-card__content-alerts { + position: absolute; + top: 13px; + left: 8px; + width: calc(100% - 16px); + } + + .editorial-card__content-title { + font-size: 20px; + line-height: 24px; + margin-bottom: 17px; + } + + .editorial-card__content-data { + gap: 5px 16px; + } +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/header-red.svg b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/header-red.svg new file mode 100644 index 0000000..95c7ae6 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/header-red.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/msg-green.svg b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/msg-green.svg new file mode 100644 index 0000000..9e521bc --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/editorial/assets/img/msg-green.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/css/gp-style-desktop.css index 07fda11..c06abc9 100644 --- a/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/css/gp-style-desktop.css @@ -173,4 +173,8 @@ .home-card__content-body__link:hover{ background-color: #000; color: #fff; +} + +.blog-home{ + padding-bottom: 4rem; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/heart-grey.svg b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/heart-grey.svg new file mode 100644 index 0000000..81573c3 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/heart-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/msg-grey.svg b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/msg-grey.svg new file mode 100644 index 0000000..b126087 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/featured-slider/assets/img/msg-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/heart-white.svg b/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/heart-white.svg new file mode 100644 index 0000000..7250c70 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/heart-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/msg-white.svg b/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/msg-white.svg new file mode 100644 index 0000000..b920033 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/most-read/assets/img/msg-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/heart-grey.svg b/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/heart-grey.svg new file mode 100644 index 0000000..81573c3 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/heart-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/msg-grey.svg b/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/msg-grey.svg new file mode 100644 index 0000000..b126087 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/news-list/assets/img/msg-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css index 378b030..2b7ced0 100644 --- a/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-desktop.css @@ -122,4 +122,336 @@ p.discount-description__2 { font-weight: 500; color: var(--main_black); } -/* Discount end */ \ No newline at end of file +/* Discount end */ + + +/* Article home */ +.article-home { + padding-bottom: 36px; +} + +.article-home h1 { + font-size: 64px; + font-weight: bold; + line-height: 120%; + color: var(--main_white); + margin-bottom: 17px; + text-transform: uppercase; +} + +.article-home__data { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px 24px; + margin-bottom: 17px; +} + +.article-home__data-alerts { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; +} + +.article-home__data-alerts a { + font-size: 16px; + line-height: 20px; + font-weight: 500; + color: var(--background); + padding: 6px 8px; + border-radius: 20px; + background: var(--main_black); +} + +.article-home__data p { + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: var(--main_white); + display: flex; + align-items: center; + gap: 4px; +} + +.article-home__data .user { + display: flex; + align-items: center; + gap: 7px; + font-size: 14px; + line-height: 16px; + font-weight: 500; + color: var(--main_white); +} + +.article-home__data .user img { + width: 32px; + height: 32px; + border-radius: 50px; + object-fit: cover; +} + +.article-home__card { + width: 100%; + aspect-ratio: 1223/500; +} + +.article-home__card img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 64px; +} + + +@media (min-width: 992px) { + .article-home.position-1 .container { + position: relative; + z-index: 1; + } + + .article-home.position-1 .article-home__card { + width: calc(50% - 12px); + position: absolute; + top: 0; + right: 0; + height: 100%; + z-index: -1; + } + + .article-home.position-1 h1 { + width: calc(50% - 12px); + } + + .article-home.position-1 .article-home__data { + max-width: 406px; + } + + .article-home.position-2 .container { + position: relative; + z-index: 1; + height: 695px; + padding: 45px 42px; + } + + .article-home.position-2 .article-home__card { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + overflow: hidden; + } + + .article-home.position-2 .article-home__card::before { + content: ""; + width: 100%; + height: 100%; + background: linear-gradient(282.92deg, rgba(255, 255, 255, 0) 50.1%, #FFFFFF 77.26%); + position: absolute; + top: 0; + left: 0; + border-radius: 50px; + } + + .article-home.position-2 h1 { + color: var(--main_black); + max-width: 838px; + } + + .article-home.position-2 .article-home__data { + width: 304px; + } + + .article-home.position-2 .article-home__data p { + color: var(--main_black); + } + + .article-home.position-2 .article-home__data p img { + filter: brightness(0) invert(0) + } + + .article-home.position-2 .article-home__data .user { + color: var(--main_black); + } +} + +.article-content { + background: var(--main_white); + border-radius: 64px; + max-width: 1232px; + margin: 0 auto; + padding: 64px 0 116px; +} + +.article-container { + max-width: 1022px; + margin: 0 auto; + + @media (max-width: 1054px) { + max-width: calc(100% - 32px); + } +} +/* Article home end */ + + + +/* comment */ +.comment { + border-top: 1px solid var(--placeholder); + padding-top: 48px; + margin-top: 100px; +} + +.comment .comment-btn { + display: flex; + align-items: center; + justify-content: center; + gap: 12px; +} + +.comment .comment-btn button { + padding: 12px 24px; + border-radius: 20px; + display: flex; + align-items: center; + gap: 8px; + background: var(--btn-bg); + font-size: 20px; + font-weight: 600; + line-height: 24px; + font-family: var(--font-craftwork); +} + +.comment .comment-btn span { + font-family: var(--font-craftwork); + font-size: 20px; + font-weight: 500; + line-height: 24px; +} + +.comment .comment-title { + font-family: var(--font-craftwork); + font-size: 24px; + font-weight: 700; + line-height: 28px; + color: var(--grey-black); + margin: 48px 0 0 0; +} + +.comment .comment-in { + max-width: 816px; + margin: 0 auto; +} + +.comment .comment-block { + margin-top: 40px; + padding: 28px 48px; + border-radius: 24px; + background: var(--grey-f5); +} + +.comment .comment-block p { + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black); +} + +.comment .comment-block p a { + color: var(--green-dark); + text-decoration: underline; +} + +.comment .comment-user { + display: flex; + align-items: center; + gap: 12px; +} + +.comment .comment-user img { + width: 48px; + height: 48px; + border-radius: 50%; + flex-shrink: 0; +} + +.comment .comment-user h6 { + font-size: 20px; + font-weight: 700; + line-height: 24px; + color: var(---main_black); + margin-bottom: 5px; +} + +.comment .comment-user span { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); +} + +.comment .comment-block p { + margin: 15px 0; + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(---main_black); +} + +.comment .comment-btns { + display: flex; + align-items: center; + gap: 33px; +} + +.comment .comment-btns button { + font-size: 14px; + font-weight: 500; + line-height: 16px; + color: var(--interface_hover); + display: flex; + align-items: center; + gap: 5px; +} + +.comment .answer-btn { + margin-bottom: 10px; + font-family: var(--font-craftwork); + font-size: 16px; + font-weight: 700; + line-height: 20px; + color: var(--green-dark); + display: flex; + align-items: center; + gap: 8px; + padding: 6px 24px; + text-transform: lowercase; +} + +.comment .answer-btn svg { + transition: .2s ease; +} + +.comment .answer-btn svg.active { + transform: rotate(180deg); +} + +.comment .answer-block { + display: none; + margin: 0 0 0 54px; +} + +.comment .answer-block.active { + display: block; +} + +.comment .comment-block_text { + margin: 0 !important; +} + +.other-home { + padding-top: 36px !important; +} +/* comment */ \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css b/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css index 2818145..0f2d485 100644 --- a/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css +++ b/wp-content/themes/cosmopet/modules/blog/components/single/assets/css/gp-style-tablet.css @@ -59,4 +59,87 @@ font-size: 12px; line-height: 120%; } + + .article-home { + padding-bottom: 36px; + } + + .article-home .container { + display: flex; + flex-direction: column; + } + + .article-home h1 { + order: 1; + font-size: 32px; + line-height: 38px; + margin-bottom: 15px; + } + + .article-home__card { + order: 2; + + } + + .article-home__card img { + border-radius: 32px; + } + + .article-home__data { + gap: 8px 16px; + order: 3; + margin: 15px 0 0; + } + + .article-home__data-alerts { + gap: 16px; + } + + .article-home__data-alerts a { + padding: 6px 8px; + } + + .article-content { + padding: 48px 0; + border-radius: 64px; + } + + .comment .comment-block { + padding: 20px 24px; + margin-top: 28px; + } + + .comment .comment-title { + padding-bottom: 20px; + } + + .comment .answer-block { + margin: 10px 0 0 42px; + } + + .comment .comment-user h6 { + font-size: 16px; + line-height: 24px; + } + + .comment .comment-block p { + font-size: 16px; + line-height: 24px; + } + + .comment .comment-btns { + gap: 14px; + } + + .comment .comment-btns button { + font-size: 12px; + line-height: 16px; + } + + .comment .comment-user span { + font-size: 12px; + line-height: 16px; + } + + } \ No newline at end of file diff --git a/.user.ini b/wp-content/themes/cosmopet/modules/blog/components/single/assets/js/comments.js similarity index 100% rename from .user.ini rename to wp-content/themes/cosmopet/modules/blog/components/single/assets/js/comments.js diff --git a/wp-content/themes/cosmopet/modules/blog/components/single/assets/js/post-likes.js b/wp-content/themes/cosmopet/modules/blog/components/single/assets/js/post-likes.js new file mode 100644 index 0000000..f44ec79 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/blog/components/single/assets/js/post-likes.js @@ -0,0 +1,147 @@ +jQuery(document).ready(function ($) { + $(".comment-btn button").on("click", function () { + var postId = $(this).data("post-id"); + var $button = $(this); + + $.ajax({ + url: "/wp-admin/admin-ajax.php", + type: "POST", + data: { + action: "add_post_like", + post_id: postId, + }, + success: function (response) { + if (response.error) { + alert(response.error); + window.location.href = "/wp-login.php"; + return; + } + + $(".comment-btn span").text(response.count); + + if (response.is_liked) { + $button.addClass("active"); + + $button.find("svg path").attr({ + fill: "rgba(255, 0, 0, 0.7)", + stroke: "#ff0000", + }); + } else { + $button.removeClass("active"); + + $button.find("svg path").attr({ + fill: "rgb(18, 18, 18)", + stroke: "#666666", + }); + } + }, + error: function (error) { + if (error.responseJSON && error.responseJSON.data) { + alert(error.responseJSON.data); + window.location.href = "/wp-login.php"; + } + }, + }); + }); + + $(document).on("click", ".comment-like-btn", function () { + var commentId = $(this).data("comment-id"); + var $button = $(this); + + $.ajax({ + url: "/wp-admin/admin-ajax.php", + type: "POST", + data: { + action: "add_comment_like", + comment_id: commentId, + }, + success: function (response) { + if (response.error) { + alert(response.error); + window.location.href = "/wp-login.php"; + return; + } + + if (response.is_liked) { + $button + .empty() + .append( + $( + '' + ) + ) + .append(response.count); + $button.addClass("active"); + } else { + $button + .empty() + .append( + $( + '' + ) + ) + .append(response.count); + $button.removeClass("active"); + } + }, + error: function (error) { + if (error.responseJSON && error.responseJSON.data) { + alert(error.responseJSON.data); + window.location.href = "/wp-login.php"; + } + }, + }); + }); + + function checkLikedPosts() { + if (!document.body.classList.contains("logged-in")) { + return; + } + + $.ajax({ + url: "/wp-admin/admin-ajax.php", + type: "POST", + data: { + action: "check_user_likes", + }, + success: function (response) { + if (response.error) { + return; + } + + try { + var data = JSON.parse(response); + + if (data.posts && data.posts.length > 0) { + for (var i = 0; i < data.posts.length; i++) { + var $button = $('.comment-btn button[data-post-id="' + data.posts[i] + '"]'); + $button.addClass("active"); + $button.find("svg path").attr({ + fill: "rgba(255, 0, 0, 0.7)", + stroke: "#ff0000", + }); + } + } + + if (data.comments && data.comments.length > 0) { + for (var j = 0; j < data.comments.length; j++) { + var $commentButton = $('.comment-like-btn[data-comment-id="' + data.comments[j] + '"]'); + $commentButton.addClass("active"); + + $commentButton.find("svg path").attr({ + fill: "rgba(255, 0, 0, 0.7)", + stroke: "#ff0000", + }); + } + } + } catch (e) {} + }, + error: function (error) {}, + }); + } + + if (document.body.classList.contains("logged-in")) { + checkLikedPosts(); + } + }); + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/blog/components/single/component-controller.php b/wp-content/themes/cosmopet/modules/blog/components/single/component-controller.php index 4c6c9b5..85e5737 100644 --- a/wp-content/themes/cosmopet/modules/blog/components/single/component-controller.php +++ b/wp-content/themes/cosmopet/modules/blog/components/single/component-controller.php @@ -2,4 +2,6 @@ include_component('blog', 'featured-slider'); $context = Timber::get_context(); +$post = Timber::get_post(); +$context['post'] = $post; Timber::render('blog/blog-single.twig', $context); diff --git a/wp-content/themes/cosmopet/modules/blog/module-controller.php b/wp-content/themes/cosmopet/modules/blog/module-controller.php index cc5f29a..f2629c9 100644 --- a/wp-content/themes/cosmopet/modules/blog/module-controller.php +++ b/wp-content/themes/cosmopet/modules/blog/module-controller.php @@ -2,17 +2,7 @@ class BlogPost extends \Timber\Post { - /** - * Estimates time required to read a post. - * - * The words per minute are based on the English language, which e.g. is much - * faster than German or French. - * - * @link https://www.irisreading.com/average-reading-speed-in-various-languages/ - * - * @return string - */ - + public function reading_time() { $symb_per_minute = 2280; @@ -20,7 +10,6 @@ class BlogPost extends \Timber\Post $symb = strlen(wp_strip_all_tags($this->content())); $minutes = round($symb / $symb_per_minute); - /* translators: %s: Time duration in minute or minutes. */ return sprintf(_n('%s ' . pll__('мин.'), '%s ' . pll__('мин.'), $minutes), (int) $minutes); } public function get_author_name() @@ -35,6 +24,19 @@ class BlogPost extends \Timber\Post $id = get_field('post_author', $this->ID); return get_the_post_thumbnail_url( $id, 'thumbnail' ); } + public function get_author_link() + { + $id = get_field('post_author', $this->ID); + if ($id) { + return get_permalink($id); + } + return false; + } + + public function get_comments_number() + { + return get_comments_number($this->ID); + } } add_filter('timber/post/classmap', function ($classmap) { @@ -43,4 +45,43 @@ add_filter('timber/post/classmap', function ($classmap) { ]; return array_merge($classmap, $custom_classmap); -}); \ No newline at end of file +}); + +function enable_comments_for_posts() { + + update_option('default_comment_status', 'open'); + + $posts = get_posts([ + 'post_type' => 'post', + 'numberposts' => -1, + 'post_status' => 'publish' + ]); + + foreach ($posts as $post) { + if (!comments_open($post->ID)) { + + update_post_meta($post->ID, 'comment_status', 'open'); + } + } +} +add_action('after_setup_theme', 'enable_comments_for_posts'); + +function enqueue_comment_scripts() { + if (is_singular() && comments_open()) { + + wp_enqueue_script('comment-reply'); + + wp_enqueue_script( + 'blog-comments-js', + get_template_directory_uri() . '/modules/blog/assets/js/comments.js', + array('jquery', 'comment-reply'), + filemtime(get_template_directory() . '/modules/blog/assets/js/comments.js'), + true + ); + + wp_localize_script('blog-comments-js', 'ajax_object', array( + 'ajax_url' => admin_url('admin-ajax.php') + )); + } +} +add_action('wp_enqueue_scripts', 'enqueue_comment_scripts'); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css index 52a37a7..e766f05 100644 --- a/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css @@ -196,3 +196,7 @@ } +.social-media__icon { + width: 32px; + aspect-ratio: 1; +} diff --git a/wp-content/themes/cosmopet/modules/forms/assets/js/form.js b/wp-content/themes/cosmopet/modules/forms/assets/js/form.js index 0859e59..8fa3faf 100644 --- a/wp-content/themes/cosmopet/modules/forms/assets/js/form.js +++ b/wp-content/themes/cosmopet/modules/forms/assets/js/form.js @@ -1,14 +1,17 @@ // Функция для показа модальных окон function showModal(modalClass) { - const modal = document.querySelector('.' + modalClass); - if (modal) { - modal.style.display = 'flex'; - } + + + const modal = document.querySelector('.' + modalClass); + if (modal) { + modal.style.display = 'flex'; + } +} // Функция для закрытия модальных окон function closeModals() { - const modals = document.querySelectorAll('.modal'); + const modals = document.querySelectorAll('.mform'); modals.forEach(modal => { modal.style.display = 'none'; }); @@ -26,7 +29,8 @@ function showModal(modalClass) { // Закрытие при клике вне контента window.addEventListener('click', function(event) { - const modals = document.querySelectorAll('.modal'); + + const modals = document.querySelectorAll('.mform'); modals.forEach(modal => { if (event.target === modal) { modal.style.display = 'none'; @@ -34,6 +38,17 @@ function showModal(modalClass) { }); }); }); + + // Закрытие при клике вне контента + window.addEventListener('click', function(event) { + const modals = document.querySelectorAll('.modal-success, .modal-offer'); + modals.forEach(modal => { + if (event.target === modal) { + modal.style.display = 'none'; + } + }); +}); + jQuery(document).ready(function($) { @@ -52,7 +67,8 @@ jQuery(document).ready(function($) { }, success: function(response) { closeModals() - showModal('modal-success') + showModal('mform-success') + } }); } @@ -63,65 +79,65 @@ const metaLocale = document.querySelector('meta[property="og:locale"]'); const localeValue = metaLocale.getAttribute('content'); - // Функция валидации формы - function validateForm(form) { - // Очищаем предыдущие сообщения об ошибках внутри этой формы - clearErrorMessages(form); - let validated = true - // Валидация поля имени - const nameInput = form.querySelector('input[name="name"]'); - - if (nameInput && !nameInput.value.trim()) { - if(localeValue == 'en_US'){ - showError(nameInput, 'The name is requeried field'); - } - if(localeValue == 'ru_RU'){ - showError(nameInput, 'Поле имени обязательно для заполнения.'); - } - validated = false - } + // Функция валидации формы + function validateForm(form) { + // Очищаем предыдущие сообщения об ошибках внутри этой формы + clearErrorMessages(form); + let validated = true + // Валидация поля имени + const nameInput = form.querySelector('input[name="name"]'); + + if (nameInput && !nameInput.value.trim()) { + if(localeValue == 'en_US'){ + showError(nameInput, 'The name is requeried field'); + } + if(localeValue == 'ru_RU'){ + showError(nameInput, 'Поле имени обязательно для заполнения.'); + } + validated = false + } - // Валидация поля email - const emailInput = form.querySelector('input[name="email"]'); - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - if (emailInput && !emailPattern.test(emailInput.value.trim())) { + // Валидация поля email + const emailInput = form.querySelector('input[name="email"]'); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (emailInput && !emailPattern.test(emailInput.value.trim())) { - if(localeValue == 'en_US'){ - showError(emailInput, 'Email is incorrect.'); - } - if(localeValue == 'ru_RU'){ - showError(emailInput, 'Введите корректный email.'); - } - validated = false - } - - // Валидация поля телефона - const phoneInput = form.querySelector('input[name="phone"]'); - const phonePattern = /^\+?\d{10,15}$/; - if (phoneInput && !phonePattern.test(phoneInput.value.trim())) { - if(localeValue == 'en_US'){ - showError(phoneInput, 'The phone is incorrect.'); - } - if(localeValue == 'ru_RU'){ - showError(phoneInput, 'Введите корректный номер телефона.'); - } - validated = false - } - return validated - } + if(localeValue == 'en_US'){ + showError(emailInput, 'Email is incorrect.'); + } + if(localeValue == 'ru_RU'){ + showError(emailInput, 'Введите корректный email.'); + } + validated = false + } - // Функция для отображения сообщения об ошибке - function showError(input, message) { - const errorMessage = document.createElement('div'); - errorMessage.className = 'error-message'; - errorMessage.textContent = message; - input.insertAdjacentElement('afterend', errorMessage); - } + // Валидация поля телефона + const phoneInput = form.querySelector('input[name="phone"]'); + const phonePattern = /^\+?\d{10,15}$/; + if (phoneInput && !phonePattern.test(phoneInput.value.trim())) { + if(localeValue == 'en_US'){ + showError(phoneInput, 'The phone is incorrect.'); + } + if(localeValue == 'ru_RU'){ + showError(phoneInput, 'Введите корректный номер телефона.'); + } + validated = false + } + return validated + } - // Функция для очистки сообщений об ошибках внутри конкретной формы - function clearErrorMessages(form) { - const errorMessages = form.querySelectorAll('.error-message'); - errorMessages.forEach(errorMessage => { - errorMessage.remove(); - }); - } \ No newline at end of file + // Функция для отображения сообщения об ошибке + function showError(input, message) { + const errorMessage = document.createElement('div'); + errorMessage.className = 'error-message'; + errorMessage.textContent = message; + input.insertAdjacentElement('afterend', errorMessage); + } + + // Функция для очистки сообщений об ошибках внутри конкретной формы + function clearErrorMessages(form) { + const errorMessages = form.querySelectorAll('.error-message'); + errorMessages.forEach(errorMessage => { + errorMessage.remove(); + }); + } diff --git a/wp-content/themes/cosmopet/modules/forms/components/discount/assets/css/discount-form.css b/wp-content/themes/cosmopet/modules/forms/components/discount/assets/css/discount-form.css new file mode 100644 index 0000000..568a6d4 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/forms/components/discount/assets/css/discount-form.css @@ -0,0 +1,4004 @@ + + +/* .sellers_card .sellers_card-img { + width: auto!important; + height: 330px; +} */ + + +/* Home start */ +.home{ + position: relative; + /* GP | fix */ + background: var(--radial); +} +.home .container{ + padding: 157px 30px 245px; + position: relative; +} +@media (min-width: 1281px){ + .home .container{ + + max-width: 1350px !important; + } + +} + +@media (min-width: 1600px){ + .home .container{ + + max-width: 1440px !important; + } + +} +.home .home_dog{ + position: absolute; + bottom: 200px; + right: 8px; + opacity: .5; + z-index: 0; +} +.home_block-dog{ + width: 100%; + display: none; + margin: 0 auto; + opacity: .5; +} +.home .home_line2, +.home .home_line{ + position: absolute; + top: 70px; + left: 0; + width: 100%; + z-index: 1; + scale: 1.01; +} +.home .home_line2{ + display: none; + /* top: 37px; + left: -24px; */ + left: -2%; + top: 7%; + width: 108%; + z-index: 0; +} +.home .home_block{ + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: 32px; +} +.home_block .home_title{ + font-size: 82px; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +/* Home end */ + +/* Abour start */ +.about{ + box-shadow: 6px 9px 20px 0px #00000026; + background: var(--creme-white, #F4F1F0); + border-radius: 60px; + position: relative; + z-index: 2; + margin-top: -114px; + padding: 46px 0px 97px; +} +.about .about_block{ + display: flex; + flex-direction: column; + gap: 0; +} +.about .about_info-wrap{ + display: flex; + align-items: center; + gap: 70px; +} +.about_block .about_info{ + display: flex; + flex-direction: column; + gap: 25px; +} +.about_info-wrap .about_img{ + width: 40%; +} +.about_img .entoprotein-img{ + display: none; +} +.about_info-wrap .about_img img{ + width: 100%; + height: 720px; +} + +.about_info .about_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.about_info .about_text{ + font-size: 24px; + line-height: 28.8px; + letter-spacing: -0.01em; + color: var(--grey-black, #121212); +} + + +.about_block .about_cards{ + display: grid; + grid-template-columns: 31.5% 31.5% 31.5%; + gap: 58px 26px; +} +.about_cards .about_card{ + display: flex; + flex-direction: column; + gap: 24px; +} +.about_card .about_card-gif{ + width: 168px; + height: 168px; +} + +.about_card .about_card-info{ + display: flex; + flex-direction: column; + gap: 20px; +} +.about_card .about_card-title{ + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.about_card .about_card-text{ + font-size: 20px; + line-height: 24px; + color: var(--grey-black, #121212); + max-width: 278px; +} +.about_cards .about_company{ + position: relative; + padding: 25px 12px 30px 30px; + background: #F4F1F0; + border-radius: 60px; + display: flex; + flex-direction: column; + gap: 16px; +} +.about_cards .about_company::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -1; +} +.about_company .about_company-text{ + font-size: 20px; + line-height: 24px; + font-weight: 500; + color: var(--grey-black, #121212); +} +.about_company .about_company-logo{ + display: grid; + grid-template-columns: 29% 65%; + gap: 20px 10px; +} +.about_company .about_company-logo img{ + width: 100%; +} +.about_company .about_company-logo img:nth-child(4){ + height: 80px; +} + + +.about_slider{ + padding-top: 110px; +} +.about_slider .slider-container { + position: relative; + /* max-width: 636px; */ + height: 300px; + display: flex; + justify-content: center; + align-items: center; + margin: 0 auto; +} + +.about_slider .slide { + position: relative; + background: #FFF; + border-radius: 60px; + /* width: 429px; + height: 546px; */ + display: flex; + flex-direction: column; + align-items: center; + gap: 45px; + padding: 35px 50px 25px 50px; + opacity: 1; + z-index: 1; +} +.about_slider .carousel .carousel-item{ + width: 429px; + height: 546px; + padding: 35px 50px 25px 50px; + padding: 50px 53px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* background: var(--creme-white, #F4F1F0); */ + background: #ffffff30; + backdrop-filter: blur(6px); + z-index: 1; + box-shadow: -2px 5px 22.9px 0px rgba(0, 0, 0, 0.25); +} + +.about_slider .carousel .carousel-item.active { + backdrop-filter: blur(6px); + z-index: 3; +} +.about_slider .carousel .carousel-item::after { + content: ''; + background-image: url(../img/border.png); + background-size: cover; + /* background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); */ + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -2; + transform: translateZ(-1px); +} +.about_slider .carousel .carousel-item img{ + width: auto; +} + +.about_slider .slide_info{ + display: flex; + flex-direction: column; + gap: 15px; +} +.about_slider .slide--prev, +.about_slider .slide--next{ + z-index: 2; + opacity: 0.75; +} + +.about_slider .prev, .about_slider .next { + position: absolute; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + z-index: 99; + background-color: unset; +} + +.about_slider .prev { + left: 29vw; +} + +.about_slider .next { + right: 29vw; +} + +.about_slider .slide_title{ + text-transform: uppercase; + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +.about_slider .slide_text{ + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black, #121212); +} +/* About end */ + +.section_wrap{ + margin-top: -70px; + padding: 178px 0 90px; + /* GP | fix */ + +} +/* Sellers start */ +.sellers{ + padding-bottom: 113px; + +} +.sellers .seller_block{ + display: flex; + flex-direction: column; +} +.seller_block .sellers_top{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; + margin-bottom: 34px; +} +.sellers_top .sellers_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} + +.sellers_slider .swiper{ + /* padding-left: 10%; + padding-right: 20px; */ + display: flex; + align-items: center; + /* width: 1000px; */ + height: 540px; + margin: auto; + overflow: hidden; +} +.seller_name { + text-transform:lowercase; + color:var(--grey-black, #121212); + font-size: 20px; + font-weight: 400; + line-height: 24px; + text-align: left; + /* min-width: 280px; */ +} +.seller_price { +font-size: 20px; +font-weight: bold; +line-height: 30px; +text-align: left; +margin-bottom: 8px; +margin-top: 8px; +} + +.seller_full { + display: flex; + flex-direction: row; + justify-content: start; + margin-top: 48px; +} +.seller_full-link { +color:#121212; +font-size: 20px; +font-weight: bold; +line-height: 24px; +text-align: left; +text-decoration: none; +padding: 0px 0px 4px 0px; +gap: 8px; +border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) +} +.swiper .swiper-wrapper{ + display: flex; + height: unset; +} +.sellers .sellers_card{ + min-height: 490px; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 11px; + align-items: center; + padding: 16px; + /* border: 2px solid var(--creme-white, #F4F1F0); */ + border-radius: 24px; + background: rgba(255, 255, 255, 0.5); +} + +.sellers_card .sellers_card-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); + +} +/* Sellers end */ + + +/* Reviews start */ +.reviews{ + position: relative; + padding: 112px 0px 56px; + background: var(--creme-white, #F4F1F0); + border-radius: 60px 60px 0 0; +} +.reviews .reviews_person{ + position: absolute; + right: -80px; + top: 0; +} +.reviews_person-mob{ + display: none; +} +.reviews .reviews_title{ + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 79px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; + position: relative; + z-index: 1; +} +.reviews .reviews_block{ + margin-top: 35px; +} +.reviews_block .reviews_items{ + position: relative; + z-index: 1; + display: flex; + flex-wrap: wrap; + gap: 23px; + align-items: center; +} + +.reviews_items .reviews_item{ + position: relative; + display: flex; + flex-direction: column; + gap: 7px; + background: #F4F1F0; + padding: 23px; + border-radius: 60px; + width: 100%; + height: fit-content; + z-index: 1; +} +/* Пустой блок, чтоб на десктопе в первой строке справой стороны не загораживать картинку */ +.reviews_items .reviews_item.reviews_item--empty{ + background: none; +} +@media screen and (max-width: 480px) { + .reviews_items .reviews_item.reviews_item--empty { + display: none; + } +} + +.reviews_item .reviews_item-top{ + display: flex; + align-items: center; + gap: 8px; +} +.reviews_item .reviews_item-top img{ + width: 78px; +} +.reviews_item .reviews_item-top b{ + text-transform: uppercase; + display: block; + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +.reviews_item .reviews_item-top span{ + margin: 14px 0; + width: 100%; + display: block; + font-size: 12px; + font-weight: 500; + line-height: 14.4px; + color: var(--grey-black, #121212); +} +.reviews_item .reviews_item-text{ + font-size: 20px; + font-weight: 500; + line-height: 24px; + color: var(--grey-black, #121212); +} +.reviews_items .reviews_item1, +.reviews_items .reviews_item6{ + position: relative; + /* transform: rotate(-2.35deg); */ + transform-style: preserve-3d; +} +/* GP | fix */ +.reviews_items .reviews_item1::after, +.reviews_items .reviews_item6::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: -1; + transform: translateZ(-1px); +} + +.reviews_items .reviews_item6{ + transform: rotate(-7deg); +} + +.reviews_items .reviews_item3{ + transform: rotate(-5deg); +} +.reviews_items .reviews_item5, +.reviews_items .reviews_item4{ + background: radial-gradient(1073.72% 191.15% at -371.63% -32.65%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); + /* transform: rotate(4deg); + margin-top: 25px; */ +} + +.reviews_items .reviews_item2{ + background: var(--grey-black, #121212); + /* transform: rotate(5deg); + margin: 30px 0 0 20px; */ +} +.reviews_items .reviews_item4{ + /* transform: rotate(8deg); + margin: -30px 0 0 20%; */ +} + +.reviews_item2 .reviews_item-top b, +.reviews_item2 .reviews_item-top span, +.reviews_item2 .reviews_item-text, +.reviews_item3 .reviews_item-top b, +.reviews_item3 .reviews_item-top span, +.reviews_item3 .reviews_item-text, +.reviews_item4 .reviews_item-top b, +.reviews_item4 .reviews_item-top span, +.reviews_item4 .reviews_item-text, +.reviews_item5 .reviews_item-top b, +.reviews_item5 .reviews_item-top span, +.reviews_item5 .reviews_item-text{ + color: #F4F1F0; +} +.reviews_item2 .reviews_item-text, +.reviews_item3 .reviews_item-text, +.reviews_item4 .reviews_item-text, +.reviews_item5 .reviews_item-text{ + font-weight: 400; +} + + +/* Reviews end */ + +/* About us start */ +.about_us{ + padding-bottom: 54px; + background-color: #F4F1F0; + margin-top: -1px; +} +.about_us .about_us-title{ + font-size: 82px; + line-height: 98.4px; + text-transform: uppercase; + color: var(--grey-black, #121212); +} +.about_us .about_us-block{ + display: flex; + flex-direction: column; + gap: 15px; + margin-top: 25px; +} +.about_us-block .about_us-cards{ + display: grid; + align-items: start; + grid-template-columns: 59% 39.2%; + gap: 15px; +} +.about_us-block .about_us-card{ + position: relative; + border-radius: 60px; + overflow: hidden; + height: 324px; + width: 100%; + overflow: unset; +} +.about_us-block .about_us-card::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: 0; +} +.about_us-card .about_us-card-img{ + border-radius: 60px; + height: 100%; + width: 100%; + object-fit: cover; + position: relative; + z-index: 1; +} +.about_us-card .card_date{ + z-index: 1; + position: absolute; + top: 27px; + right: 35px; + background: #FFFFFF; + border-radius: 62px; + padding: 5px 15px 4px 17px; + font-size: 24px; + font-weight: 400; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +/* GP | fix */ + + +.about_us-card .about_us-card-info { + position: absolute; + padding: 10% 33px 21px ; + width: 100%; + z-index: 1; + display: flex; + flex-direction: column; + gap: 14px; + left: 0px; + bottom: 0; + border-radius: 0 0 60px 60px; + background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); +} + +.about_us-card-info.card-info--half-gradient { + background: unset; +} + +.about_us-card .about_us-card-info h2{ + /* max-width: 440px; */ + font-size: 24px; + line-height: 32px; + text-transform: uppercase; + color: var(--grey-black, #121212); +} +.about_us-card .about_us-card-info span{ + display: block; + font-weight: 400; + +} +.about_us-card .about_us-card-info span a{ + text-decoration: underline; + font-size: 24px; + line-height: 28.8px; + color: var(--grey-black, #121212); +} +/* About us end */ + +/* Truth start */ +.truth{ + border-radius: 0 0 60px 60px; + background: var(--creme-white, #F4F1F0); + padding-bottom: 119px; + margin-top: -1px; +} +.truth .truth_top{ + position: relative; + display: flex; + align-items: center; + justify-content: space-between; +} +.truth .truth_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + text-align: end; + text-transform: uppercase; + width: 723px; +} +.truth .truth_title span{ + color: #76CE75; + +} +.truth_top .gift_img{ + margin-left: -180px; +} +.truth_top .gift_line-img{ + position: absolute; + display: none; + bottom: 150px; + right: 0; + width: 245px; +} +.truth_content { + position: relative; + display: none; +} + +.truth_content::after{ + content: ''; + display: block; + position: absolute; + width: calc(100% + 4px); + height: calc(100% + 4px); + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + top: -2px; + left: -2px; + z-index: 0; +} +.truth_content.active { + display: block; +} +.truth .truth_block{ + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + width: 100%; + height: 480px; + overflow: hidden; + background: var(--creme-white, #F4F1F0); + border-radius: 60px; + box-shadow: 0px 3px 13.5px 0px #00000040; + padding: 25px 34px 0px 63px; +} +.truth .truth_success, +.truth .truth_error { + display: none; +} +.truth .truth_success.show, +.truth .truth_error.show { + display: flex; +} + +.truth_block .truth_line{ + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + margin-bottom: 24px; +} +.truth_block .truth_line span{ + border: 1px solid var(--grey-black, #121212); + opacity: .6; + width: 73px; + border-radius: 10px; +} +.truth_block .truth_line span.active{ + opacity: 1; +} +.truth_block .truth_block-title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--grey-black, #121212); + margin-bottom: 33px; + text-transform: uppercase; +} +.truth_content-end .truth_block-title, +.truth_success .truth_block-title{ + background: -webkit-radial-gradient(#0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_error .truth_block-title{ + background: -webkit-radial-gradient(#F21E6A 0%, #FF6543 112.38%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.truth_block .truth_block-text{ + position: relative; + z-index: 1; + display: flex; + align-items: start; + gap: 26px; +} +.truth_block .truth_end-text{ + display: flex; + flex-direction: column; + gap: 21px; +} +.truth_block .truth_block-text p{ + font-size: 24px; + font-weight: 700; + line-height: 28.8px; + max-width: 559px; +} +.truth_block .truth_block-text p span{ + font-weight: 500; +} +.truth_default .truth_block-text p{ + text-transform: uppercase; +} +.truth_error .truth_block-text p, +.truth_success .truth_block-text p { + max-width: 592px; + font-size: 20px; + line-height: 24px; + font-weight: 500; +} +.truth_block .truth_info{ + position: absolute; + width: 91%; + bottom: 0; + display: flex; + align-items: end; + justify-content: space-between; + margin-top: -100px; + z-index: 0; +} +.truth_content-end .truth_info{ + display: flex; + align-items: center; + justify-content: end; +} +.truth_block .truth_links{ + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 56px; +} +.truth_error .truth_links, +.truth_success .truth_links{ + gap: 20px; +} +.truth_block .truth_result{ + display: flex; + align-items: center; + gap: 23px; +} +.truth_block .truth_result img{ + width: 100%; +} +.truth_block .truth_link{ + width: 141px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; + color: var(--grey-black, #121212); + border: 2px solid var(--grey-black, #121212); + border-radius: 48px; +} + +.truth_content-end .truth_info img{ + margin-right: -34px; +} +.truth_content-end .truth_block .truth_link{ + width: 221px; +} + +.truth_content-end .truth_xn{ + position: relative; + width: 270px; + height: 158px; + background-image: url(../img/xn-border.svg); + background-repeat: no-repeat; + background-size: 100% 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.truth_points { + font-size: 450%; + font-weight: 700; +} + +/* Truth end */ + + +/* Blog start */ +.blog{ + padding-top: 89px; +} +.blog .blog_block{ + display: flex; + flex-direction: column; + gap: 15px; +} +.blog_block .blog_top{ + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; +} +.blog_block .blog_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +.blog_block .blog_text{ + font-size: 24px; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); +} +.blog .blog_slider{ + margin-top: 30px; +} +.blog_slider .swiper{ + padding-left: 9%; + padding-right: 20px; +} +.blog_slider .blog_card { + display: flex; + flex-direction: column; + border-radius: 60px; + transition: .3s ease all; + height: auto; +} +.blog_slider .blog_card:hover{ + border-color: #121212; + overflow: initial; +} + +/* .blog_slider .blog_card:hover .card-line-img{ + opacity: 1; +} */ + +.blog_slider .blog_card:hover .blog_card-text, +.blog_slider .blog_card:hover .blog_card-title{ + color: #F4F1F0; +} + +.blog_card .blog_card-img{ + object-fit: cover; + border: 2px solid var(--creme-white, #F4F1F0); + border-width: 2px 2px 0 2px; + width: 100%; + height: 40%; + border-radius: 60px 60px 0 0; +} +.blog_card .card-line-img{ + opacity: 0; + transition: .3s ease all; +} +.blog_card .blog_card-info-wrap{ + border: 2px solid var(--creme-white, #F4F1F0); + width: 100%; + height: 60%; + display: flex; + background: linear-gradient(355.81deg, #F4F1F0 5.04%, rgba(244, 241, 240, 0.3) 87.4%); + border-radius: 0 0 60px 60px; + padding: 25px 25px 30px 30px; +} +.blog_slider .blog_card:hover .blog_card-info-wrap{ + background: var(--grey-black, #121212); + /* padding-right: 15px; */ +} +.blog_card .blog_card-info{ + display: flex; + flex-direction: column; + margin-top: -2px; + gap: 16px; + +} +.blog_card .blog_card-title{ + /* font-size: 36px; */ + font-size: 2.1vw; + font-weight: 700; + line-height: 43.2px; + color: var(--grey-black, #121212); + text-transform: uppercase; + transition: .3s ease all; +} +.blog_card .blog_card-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--grey-black, #121212); + transition: .3s ease all; +} +/* Blog end */ + +.marketplace{ + margin-top: 5rem; +} +/* Discount start */ +.discount{ + padding-top: 50px; + padding-bottom: 50px; +} +.discount .discount_block{ + display: flex; + flex-direction: column; +} +.discount .discount_top{ + position: relative; + margin-bottom: 50px; +} +.discount_top .discount_title{ + font-size: 82px; + font-weight: 700; + line-height: 98.4px; + color: var(--creme-white, #F4F1F0); + text-transform: uppercase; +} +.discount_top .discount_top-imgs{ + position: absolute; + top: 55px; + right: -80px; +} +.discount_block .discount_form{ + position: relative; + z-index: 1; + display: flex; + align-items: center; + gap: 16px; + margin-bottom: 6px; +} +.discount_form .discount_form-btn { + background: inherit; + min-height: unset; +} +.discount_form .discount_form-btn:hover{ + background: #121212; + border-color: #121212; + color: #3ab18f; +} +.discount_form .discount_form-inp{ + width: 280px; + height: 50px; + border: 2px solid var(--creme-white, #F4F1F0); + padding: 10px 18px; + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); + border-radius: 28px; + opacity: .6; +} +.discount_form .discount_form-inp::placeholder{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + color: var(--creme-white, #F4F1F0); +} +.discount_form .discount_form-btn { + text-transform: lowercase; +} +.discount_block .discount_form-text{ + font-size: 14px; + line-height: 16.8px; + color: var(--creme-white, #F4F1F0); + opacity: .6; + max-width: 778px; + margin-bottom: 27px; +} +.discount_block .discount_text{ + font-size: 20px; + line-height: 24px; + color: var(--creme-white, #F4F1F0); +} + +.discount_block .discount_cosmodog{ + position: relative; + width: 100%; + height: 626px; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + display: flex; + align-items: end; + justify-content: center; + overflow: hidden; + cursor: pointer; +} +.discount_cosmodog .discount_cosmodog-img{ + + width: 100%; + height: 100%; + object-fit: cover; + +} + +.discount_cosmodog__slider{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.discount_cosmodog .discount_cosmodog-img.active{ + opacity: 1; +} +.discount_cosmodog:hover .discount_cosmodog-img:nth-child(2) { + opacity: 1; +} +.discount_cosmodog .discount_cosmodog_info{ + position: relative; + z-index: 1; + padding: 33px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: end; + background: linear-gradient(0deg, #F4F1F0 56%, rgba(244, 241, 240, 0) 100%); + width: 100%; + height: 219px; +} +.discount_cosmodog .discount_cosmodog-title{ + font-size: 40px; + font-weight: 700; + line-height: 48px; + text-align: center; + color: var(--grey-black, #121212); + text-transform: uppercase; +} +.discount_cosmodog .discount_cosmodog-text{ + font-size: 24px; + font-weight: 500; + line-height: 28.8px; + text-align: center; +} + +/* Discount end */ + +.gp_tags { + border: 1px solid #121212; + border-radius: 48px; + padding:3px 6px 3px 6px; + margin-right: 6px; + margin-bottom: 6px; + font-size: 16px; + line-height: 16px; + height: 27px; + text-transform: lowercase; +} +.gp_tags:last-child { + margin-right: 0; +} +.tags_block { + display: flex; + flex-direction: row; + justify-content:start; + flex-wrap: wrap; + width: 100%; +} + +.seller_buy { + text-transform: capitalize; + width: 100%; + height: 48px; + padding: 12px 24px 12px 24px; + gap: 8px; + border-radius: 20px; + color:#fff; + background: var(--interface-main_black, #121212); +} +.seller_link { + width: 100%; +} +.truth-form{ + display: flex; + gap: 10px; +} +.truth-form button{ + flex-shrink: 0; +} +input.truth-input{ + width: 200px; + height: 50px; + border-color: #121212 !important; + border-radius: 48px; + border: 2px solid #121212; + flex-shrink: 1; + margin-right: 12px; + padding: 20px; + font-size: 18px; +} +@media (max-width: 776px) { + .truth-form{ + flex-direction: column; + margin-bottom: 30px; +} +.truth-form button{ + width: 100%; + text-align: center; + justify-content: center; +} +input.truth-input{ + width: 100%; +} +} + +.smi-card-wrapper{ + border-radius: 60px; + background: linear-gradient(21.69deg, #F44242 23.69%, #569EF0 66.57%); + border-radius: 60px; + padding: 2px; + width: 100%; + height: 484px; +} +.smiSlider{ + margin-top: 3rem; +} +.smi-card{ + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + height: 480px; + border-radius: 60px; + position: relative; + overflow: hidden; + padding: 28px 35px; + color: #121212; + +} +.smi-card::before{ + background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%); +content: ''; +height: 100%; +width: 100%; +position: absolute; +bottom: 0; +left: 0; +z-index: 2; +} +.smi-card-img{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; +} +.smi-card-date, .smi-card-title, .smi-card-label{ + position: relative; + z-index: 2; +} +.smi-card-label{ + display: flex; + border: 1px solid #121212; + border-radius: 28px; + padding: 4px 15px; + align-items: center; + font-weight: 500; + font-size: 16px; + gap: 6px; + background-color: #fff; + width: max-content; +} +.smi-card-label p{ + margin-bottom: 0; +} +.smi-card-title{ + font-weight: 700; +font-size: 22px; +text-transform: uppercase; line-height: 120%; +margin-bottom: 7px; +margin-top: 10px; +} +.smi-card-date{ + font-weight: 500; +font-size: 12px; +} +.smiSlider.swiper{ + overflow: visible; + } + .about_us{ + width: 100%; + overflow: hidden; + } + .smi-card-label img{ + max-height: 25px; + width: auto; + } + .smi-card-label{ + height: 35px; + } +@media (max-width: 640px) { + .smi-card{ + padding: 16px; + height: 420px; + border-radius: 30px; + } + .smi-card-title{ + font-size: 18px; + } + .smi-card-wrapper{ + height: 424px; + border-radius: 30px; + } + +} + +.slider-arrows{ + position: relative; + /* top: 50%; + left: 50%; + transform: translate(-52.5%, -50%); + width: 78%; */ + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; +} +@media (max-width: 640px) { + .slider-arrows{ + display: none; + } + .sellers_slider .swiper{ +width: 330px; + } +} +.blogSlider .slider-arrows{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-55%, -50%); + width: 76.5%; + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; +} +.smiSlider .slider-arrows { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-47%, -50%); + width: 112%; + display: flex; + justify-content: space-between; + z-index: 40; + pointer-events: none; + +} +.slider-arrow{ + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' fill='white'/%3e%3crect x='0.5' y='0.5' width='55' height='55' rx='19.5' stroke='%23121212'/%3e%3cpath d='M37 28.3633H20.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 34.7272' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M37 28.3633L30.636 21.9993' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e "); + height: 56px; + width: 56px; + background-size: contain; + pointer-events: all; + +} +.slider-arrow[disabled]{ + visibility: none; +} +.slider-arrow-prev{ + transform: scaleX(-1); + margin-right: 24px; +} + +.header-lang{ + font-size: 16px; + font-weight: 500; + line-height: normal; + text-transform: uppercase; + color: var(--creme-white); + border-radius: 45px; + border: 1px solid var(--creme-white); + opacity: 0.6; + appearance: none; + background-color: transparent; + background-image: url(../img/i-arr_down.svg); + background-position: center right 10px; + background-repeat: no-repeat; + background-size: 16px; + padding: 11px 36px 11px 23px; + cursor: pointer; + outline: none; + position: relative; + z-index: 10; + } + + .header-lang ul{ + border: 1px solid #f3f1f0; + border-radius: 20px; + width: 100%; + padding-top: 11px; + padding-bottom: 11px; + padding-left: 23px; + padding-right: 23px; + background: #57da7d; + text-align: center; + opacity: 1; + left: 0; + bottom: -30px; + transform: translateY(100%); + + position: absolute; + display: none; + } + + .header-lang ul li a{ + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + color: var(--creme-white); + } + + .category-back{ + width: 124px; + color: #121212; +height: 28px;border: 1px solid #121212; +border-radius: 65px; +background-color: transparent; +font-weight: 500; +font-size: 16px; +display: flex; +align-items:center; +justify-content: center; +margin-bottom:1.5rem; +margin-top: 14px; +} +.category-back::before{ + background-image: url("data:image/svg+xml,%3Csvg width='10' height='15' viewBox='0 0 10 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L2 7.5L9 14' stroke='%23121212' stroke-width='2' /%3E%3C/svg%3E"); + content: ''; + width: 10px; + height: 15px; + flex-shrink: 0; + margin-right: 8px; +} +.category-back:hover{ + color: #121212; +} + +.main-page-wrapper{ + margin-top: 0 !important; +} + +.header_icon{ + flex-shrink: 0; +} + +[class*="wd-section-stretch"] { + position: relative; + min-width: 100vw !important; + width: 100vw; + left: calc(50% - 50vw)!important; +} + +.btn{ + padding: 0 30px; +} + +.header_icon{ + position: relative; +} + +.basket-btn__counter{ + position: absolute; + top: 0; + right: 0; + border-radius: 100%; +background: #76ce75; +height: 17px; +width: 17px; +font-weight: 700; +font-size: 10px; +text-align: center; +color: var(--creme-white); +display: flex; +align-items: center; +justify-content: center; +} + + +@media (max-width: 575px) { + .wpcf7-form-control-wrap{ + width: 100%; + } +} + +.seller_bt{ + display: flex; + align-items: center; + gap: 12px; +} + +/* discount sale */ + +.discount__sale { + padding: 69px 0 80px; + border-radius: 60px; + background: var(--creme-white, #F4F1F0); + box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15); +} + +.discount__sale .discount_title { + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 82px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.discount__sale .discount_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.discount__sale .discount_form { + display: flex; +} + +.discount__sale .discount_form .discount_form-inp { + color: var(--interface-main_black, #121212); + border: 2px solid var(--interface-main_black, #121212); +} + +.discount__sale .discount_form .discount_form-btn { + color: var(--interface-main_black, #121212); + border: 2px solid var(--interface-main_black, #121212); +} + +.discount__sale .discount_form .discount_form-btn:hover { + color: #FFF; +} + +.discount__sale .discount_form-text { + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + opacity: .6; + max-width: 750px; + margin-top: 6px; +} + +.discount__sale .discount_text { + margin-top: 27px; + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.discount__sale .discount_form .discount_form-inp::placeholder { + color: var(--interface-main_black, #121212); +} + +@media screen and (max-width: 576px) { + .discount__sale { + padding: 37px 0; + } + + .dicsount__body { + display: flex; + flex-direction: column; + margin-top: 26%; + } + + .discount__sale .discount_form { + flex-direction: column; + gap: 21px; + } + + .discount__sale .discount_top .discount_top-imgs .dicount_dog-img { + height: 356.534px; + width: 100%; + object-fit: contain; + object-position: right; + } + + .discount__sale .dicsount__body > { + order: 2; + } + + .discount__sale .discount_text { + order: 1; + margin-top: 0; + font-size: 18px; + } + + .discount__sale .discount_form-text { + order: 3; + font-size: 12px; + margin-top: 20px; + } + + .discount__sale .wpcf7 { + order: 2; + margin-top: 30px; + } + + .discount__sale .discount_form .discount_form-btn, + .discount__sale .discount_form .discount_form-inp { + text-align: center; + padding: 10px 10px 11px 10px; + font-size: 24px; + height: 50px; + justify-content: center; + } + + .discount__sale .discount_form .discount_form-inp::placeholder { + font-size: 24px; + } + + .discount__sale .discount_top .discount_top-imgs { + transform: unset; + } + + .discount__sale .discount_top .discount_top-imgs { + margin-top: -24px; + right: 15px; + width: calc(100% + 30px); + margin-bottom: -20%; + } +} + +.blog_card-title { + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: 32px; +} + +.blog__card-btn { + margin-top: 24px; + color: #000; + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 6px 15px 10px 15px; + max-width: max-content; + display: block; + margin-left: auto; + border-radius: 28px; + border: 1px solid #000; + background: var(--wh, #FFF); + transition: all .24s; +} + + +.blog_slider .blog_card:hover .blog__card-btn { + border-radius: 28px; + border: 1px solid var(--interface-main_white, #FFF); + background: transparent; + color: var(--interface-main_white, #FFF); + transition: all .24s; +} + +.blog__row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.blog__row .blog_text { + max-width: 627px; +} + +.truth_top { + position: relative; +} + +.truth_top picture img { + width: 315.563px; + height: 308.2px; + position: absolute; + right: 0; + top: -110px; +} + +.truth .truth_title { + text-align: left; + width: 100%; + font-size: 74px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 62px; +} + +.truth_block .truth_end-text strong { + font-weight: 900; +} + +.truth__end-promo { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 24px; + font-style: normal; + font-weight: 900; + line-height: normal; + text-transform: uppercase; +} + +.truth__end-btns { + margin-top: 10px; + display: flex; + gap: 12px; +} + +.truth__end-btn { + padding: 10px 10px 11px 10px; + font-family: "Craftwork Grotest"; + font-size: 24px; + font-style: normal; + font-weight: 500; + line-height: normal; + border-radius: 48px; + max-width: 210px; + width: 100%; + text-align: center; + transition: all .3s; + text-transform: none; +} + +.truth__end-btn.--white { + color: var(--grey-black, #121212); + border: 2px solid var(--grey-black, #121212); + background-color: transparent; +} + +.truth__end-btn.--white:hover { + background: #121212; + color: #FFF; + transition: all .3s; +} + +.truth__end-btn.--black { + background: var(--interface-main_black, #121212); + color: var(--interface-main_white, #FFF); + border: 2px solid transparent; +} + +.truth__end-btn.--black span { + position: relative; + padding-right: 16px; +} + +.truth__end-btn.--black span::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + width: 13px; + height: 13px; + background-size: 100%; + background-repeat: no-repeat; + transition: all .3s; + background-position: center; + background-image: url('data:image/svg+xml,'); +} + +.truth__end-btn.--black:hover { + background: transparent; + color: #121212; + border-color: #000; + transition: all .3s; +} + +.truth__end-btn.--black:hover span::after { + transition: all .3s; + background-image: url('data:image/svg+xml,'); +} + +@media screen and (max-width: 576px) { + .truth_top picture img { + position: relative; + top: unset; + right: unset; + left: 0; + width: 294.209px; + height: 198.713px; + } + + .truth .truth_title { + text-align: right; + } + + .truth__end-btns { + flex-direction: column; + } + + .truth__end-btn { + max-width: 100%; + } + + .truth .truth_title { + margin-bottom: 0; + } +} + +.home__block { + max-width: 50%; +} + +.home__title { + color: var(--interface-background, #F2F2F2); + font-family: "Craftwork Grotest"; + font-size: 48px; + font-style: normal; + font-weight: 700; + line-height: 56px; /* 116.667% */ + text-transform: uppercase; +} + +@media (min-width: 1600px){ + .home__title { + + font-size: 64px; + line-height: 120%; + } +} +.home__subtitle { + color: var(--interface-background, #F2F2F2); + font-family: "Craftwork Grotest"; + margin-top: 32px; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 120% */ +} + +.home__btn { + border-radius: 20px; + background: var(--interface-main_white, #FFF); + padding: 12px 24px; + color: var(--interface-main_black, #121212); + font-family: "Craftwork Grotest"; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 120% */ + display: block; + margin-top: 32px; + max-width: 290px; + text-align: center; + width: 100%; + border: 2px solid transparent; +} + +.home__btn span { + position: relative; + padding-right: 20px; +} + +.home__btn span::after { + content: ''; + width: 13px; + height: 13px; + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + background-image: url('data:image/svg+xml,'); +} + +.home__btn:hover { + border-color: #FFF; + background: transparent; + color: #FFF; +} + +.home__btn:hover span::after { + background-image: url('data:image/svg+xml,'); +} + +.home__pagination { + margin-top: 120px; +} + +.home__pagination .swiper-pagination-bullet { + width: 39.278px; + height: 6px; + border-radius: 54px; + opacity: 0.5; + background: var(--interface-main_white, #FFF); +} + +.home__pagination .swiper-pagination-bullet-active { + opacity: 1; +} + +.home__item img { + position: absolute; + right: -142px; + top: -110px; + height: auto; + width: 70%; + max-width: 600px; +} + +@media (min-width: 1420px) { + .home__item img { + position: absolute; + right: -142px; + top: -110px; + height: auto; + width: 70%; + max-width: 800px; + } +} + +.home__swiper, +.home__swiper .swiper-wrapper { + height: auto; +} + +.blog .blog_slider { + margin-top: 128px; +} + +.cosmopet-x { + padding: 36px 0 0 0; + width: 100%; + overflow: hidden; +} + +.cosmopet-x__swiper, +.cosmopet-x__swiper .swiper-wrapper { + height: auto; +} + +.cosmopet-x__title { + color: var(--creme-white, #F4F1F0); + font-family: "Craftwork Grotest"; + font-size: 82px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.cosmopet-x__swiper { + margin-top: 52px; + position: relative; +} + +.cosmopet-x__item { + position: relative; + width: 100%; + height: 484px; +} + +.cosmopet-x__item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + z-index: 1; + width: 100%; + border-radius: 60px; + border: 2px solid var(--creme-white, #F4F1F0); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.83) 0%, rgba(255, 255, 255, 0.00) 25.17%, rgba(255, 255, 255, 0.00) 65%, rgba(255, 255, 255, 0.83) 80%); +} + +.cosmopet-x__bg { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + border-radius: 60px; +} + +.cosmopet-x__body { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + width: 100%; + padding: 36px 35px; +} + +.cosmopet-x__heading { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 22px; + font-style: normal; + font-weight: 700; + line-height: normal; + text-transform: uppercase; +} + +.cosmopet-x__btn { + display: block; + max-width: max-content; + margin-top: 7px; + color: #000; + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 6px 15px 10px 15px; + border-radius: 28px; + border: 1px solid #000; + background: var(--wh, #FFF); +} + +.cosmopet-x__top { + position: absolute; + height: auto; + width: 60%; + top: 43px; + left: 50%; + transform: translateX(-50%); + z-index: 2; +} + +.cosmopet-x .slider-arrows { + top: 50%; + transform: translateY(-50%); + position: absolute; + width: 100%; +} + +.cosmopet-x .slider-arrows .cosmopet-prev { + left: -30px; +} + +.cosmopet-x .slider-arrows .cosmopet-next { + right: -30px; +} + +.slider-arrow { + background-image: url('data:image/svg+xml,')!important; +} + +.discount_top { + position: relative; +} + +.dicsount__body { + margin-top: 39px; +} + +.reviews_items .reviews_item { + flex: 0 0 calc(50% - 23px); + min-height: 334px; +} + +.reviews__left { + flex: 0 0 50%; + display: flex; + flex-direction: column; + gap: 23px; +} + +.reviews_item-top + span { + color: var(--creme-white, #F4F1F0); + font-family: "Craftwork Grotest"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.reviews_item1 .reviews_item-top + span { + color: var(--interface-main_black, #121212); +} + +.reviews .container { + position: relative; +} + +.truth { + padding-top: 180px; +} + +.blogosphere{ + padding-bottom: 6vh; +} + +.blogosphere__item { + position: relative; + /* width: 100%; */ + /* width: auto; + height: 33vh; */ + /* padding-bottom: 177.6061776061776%; */ + height: 60vh; + width: 36vh; +} + +.blogosphere__item .blogosphere__preview { + position: relative; + height: 60vh; + width: 36vh; + object-fit: cover; + /* height: 100%; + width: 100%; */ + /* position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; */ + border-radius: 33.6px; + box-shadow: 0px 4px 14.4px 0px rgba(0, 0, 0, 0.33); +} + +.blogosphere__content { + position: absolute; + /* width: 25vw; */ + width: 100%; + padding: 10px 15px; + display: flex; + align-items: center; + gap: 10px; + z-index: 1; +} + +.blogosphere__avatar +{ + position: relative; + width: 39.2px; + height: 39.2px; + flex-shrink: 0; + box-shadow: unset; + border: 1.4px solid #FFF; + border-radius: 100%; + flex-shrink: 0; +} + +.blogosphere__name { + color: #FFF; + font-family: "Craftwork Grotest"; + font-size: 16.8px; + font-style: normal; + font-weight: 700; + line-height: 22.4px; /* 133.333% */ +} + +.blogosphere__swiper.swiper { + position: relative; +} + +.blogosphere__swiper .carousel .carousel-item{ + width: auto; + height: auto; +} + +.blogosphere__swiper .slider-arrows { + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + max-width: 421px; + width: 100%; + left: 50%; + pointer-events: none; +} + +.blogosphere { + padding-top: 60px; +} + +.blogosphere__top { + display: flex; + align-items: center; + gap: 30px; +} + +.blogosphere__title { + background-size: 100%; + background-repeat: no-repeat; + background-position: center; + width: 692.514px; + height: 71.298px; + background-image: url('data:image/svg+xml,'); +} + +.blogosphere__circle { + flex-shrink: 0; +} + +.marketplace__swiper, .marketplace__swiper .swiper-wrapper { + height: auto; +} + +.marketplace__swiper .swiper-slide { + max-width: max-content; +} + +.marketplace__title { + color: var(--grey-black, #121212); + font-family: "Craftwork Grotest"; + font-size: 36px; + font-style: normal; + font-weight: 700; + line-height: 40px; /* 111.111% */ + text-transform: uppercase; +} + +.marketplace__swiper { + margin-top: 50px; + margin-left: -70px; + margin-right: -70px; +} + +.marketplace { + position: relative; +} + +.marketplace:after { + content: ''; + position: absolute; + right: 0; + bottom: 0; + width: 222px; + height: 671px; + background: linear-gradient(270deg, #F6F4F3 0%, rgba(242, 242, 242, 0.00) 100%); + z-index: 1; +} + +.blog_card .blog__card-wrapper .blog_card-img { + width: 100%; + height: 100%; + position: absolute; +} + +.blog__card-wrapper { + position: relative; + width: 100%; + padding-bottom: 61.31687242798354%; +} + +.discount__sale .discount_form .discount_form-inp { + opacity: 1; +} + +.discount__sale .discount_form .discount_form-inp::placeholder { + opacity: .6; +} + +.discount__sale .discount_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.blog_link.main_link:hover span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +@media screen and (max-width: 991px) { + .reviews__left { + width: 100%; + } +} + +@media screen and (max-width: 768px) { + .home__item img { + position: relative; + right: unset; + top: unset; + width: 100%; + height: auto; + } + + .home__item { + display: flex; + flex-direction: column-reverse; + } + + .home__block { + max-width: 100%; + margin-top: 12px; + } + + .home__title { + font-size: 32px; + font-style: normal; + font-weight: 700; + line-height: 38px; /* 118.75% */ + letter-spacing: -0.32px; + text-transform: uppercase; + } + + .home__subtitle { + margin-top: 16px; + } + + .home__btn { + margin-top: 16px; + max-width: 100%; + } + + .home__pagination { + margin-top: 12px; + text-align: center; + } + + .blog .blog_slider { + margin-top: 28px; + } + + .cosmopet-x__title { + font-size: 32px; + line-height: 38px; /* 118.75% */ + } + + .cosmopet-x__item { + height: 0; + padding-bottom: 151.25%; + } + + .cosmopet-x .slider-arrows { + display: flex; + } + + .cosmopet-x__swiper { + margin-top: 23px; + } + + .slider-arrows .cosmopet-prev { + left: -16px; + } + + .slider-arrows .cosmopet-next { + right: -16px; + } + + .reviews .reviews_title { + text-align: left!important; + font-size: 32px!important; + line-height: 38px!important; /* 118.75% */ + letter-spacing: -0.32px!important; + text-transform: uppercase!important; + margin: 0!important; + } + + .reviews_item .reviews_item-top { + justify-content: space-between; + } + + .reviews__left { + width: 100%; + } + + .reviews_items .reviews_item { + transform: unset!important; + } + + .reviews_items .reviews_item { + width: 100%!important; + } + + .reviews_items .reviews_person-mob { + display: none; + } + + .reviews_item .reviews_item-text { + font-size: 16px!important; + font-style: normal!important; + font-weight: 500!important; + line-height: 20px!important; + } + + .reviews_item .reviews_item-top b { + font-size: 19px!important; + font-style: normal!important; + font-weight: 700!important; + line-height: 24px!important; /* 120% */ + text-transform: uppercase!important; + } + + .reviews_item .reviews_item-text { + max-width: 100%!important; + } + + .truth { + padding-top: 78px; + } + + .blogosphere__circle { + display: none; + } + + .blogosphere__swiper.swiper { + margin-left: -15px; + width: calc(100% + 30px); + } + + .marketplace__title { + font-size: 32px; + line-height: 38px; /* 118.75% */ + letter-spacing: -0.32px; + } + + .marketplace__swiper { + margin-top: 24px; + margin-left: 0px; + margin-right: 0px; + } + + .smiSlider .slider-arrows { + transform: translate(-50%, -50%)!important; + width: 106%!important; + } + + .truth .truth_title span { + background: var(--Accent-1, radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1EA49C 45%, #76CE75 90%, #BBE38D 100%)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: none; + } + + .truth { + padding-top: 20px!important; + } + + .truth_content-wrap { + padding: 0 30px; + } +} + +@media screen and (max-width: 540px) { + .marketplace:after { + display: none; + } + + .truth .truth_content .truth_block, .truth .truth_content-end .truth_block { + height: auto!important; + } + + .truth .truth_block { + padding: 25px 15px 26px 15px!important; + } + + .blog_block .blog_text { + max-width: 100%!important; + font-size: 18px!important; + font-style: normal!important; + font-weight: 500!important; + line-height: 24px!important; + } + + .home { + background: var(--radial); + } + + .blogosphere__swiper .slider-arrows { + display: flex; + padding: 0 4.5px; + } + + .truth_block .truth_links { + padding-bottom: 0!important; + } + + .reviews_items .reviews_item { + padding: 32px 20px 35px 24px!important; + border-radius: 3.75rem!important; + } + + .reviews_items .reviews_item::after { + border-radius: 3.75rem!important; + } + + .blogosphere__top { + margin-bottom: -55px; + } + + .truth_block .truth_block-text { + min-height: unset!important; + } + + .discount { + margin-top: -50px; + } + + .sellers { + padding-top: 35px; + } + + .blogSlider .slider-arrows { + display: none!important; + } + + .blog_slider { + padding-bottom: 0!important; + } + + .cosmopet-x .slider-arrows .cosmopet-prev { + left: -10px; + } + + .cosmopet-x .slider-arrows .cosmopet-next { + right: -10px; + } + + .sellers { + padding-bottom: 120px!important; + } + + .discount__sale { + border-radius: 24px; + } + + .discount_form .discount_form-btn { + opacity: 1!important; + } + + .blogosphere { + padding-top: 40px; + } + + .reviews { + padding: 56px 0 62px!important; + } + + .reviews_item-top + span { + line-height: 15px; + } + + .reviews_block .reviews_items { + margin-left: 0!important; + } + + .reviews_item-name { + max-width: 70%; + } + + .reviews_item .reviews_item-top img { + width: 72px!important; + height: 72px!important; + } + + .reviews__left { + gap: 10px; + } +} + +.blogSlider .swiper-slide { + height: auto; +} + +.blogSlider .swiper-slide .blog_card { + height: 100%; +} + +.blogSlider .swiper-slide .blog_card .blog_card-info-wrap { + height: 100%; +} + +.blog_slider { + padding-bottom: 92px; +} + +.blog_card .blog_card-info { + justify-content: space-between; +} + +.blog_card-text { + flex: auto; +} + + +.carousel-item.active { + /* pointer-events: none; */ +} + +.sec-bf{ + position: relative; + z-index: 3; +} + +.copied{ + position: absolute; + top: -14px; + border-radius: 20px; + font-size: 13px; + right: -20px; + background: #fff; + padding: 5px; + opacity: 0; + pointer-events: none; + color: #000; +} + +.truth__end-btn.active .copied{ + opacity: 1; +} + +.home { + overflow: hidden; +} + + +.reviews_block { + position: relative; +} + +.reviews_items.--visible { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.reviews_row { + flex: 1 1 100%; + display: flex; +} + +.reviews_row--left { + justify-content: flex-start; +} + +.reviews_row--right { + justify-content: flex-end; +} + +.reviews_item { + width: 50%; + /* Каждый блок занимает половину ширины */ +} + +.reviews_item-swiper { + width: 100%; +} + +.reviews_item-img { + border-radius: 50%; +} + +.reviews_item-top { + display: flex; + justify-content: space-between; + padding-bottom: 10px; +} + +.reviews_item-text { + margin-top: 10px; +} + +.reviews_item.reviews_item1 { + flex: 1 1 50%; + max-width: 50%; +} + +.reviews_item.reviews_item2, +.reviews_item.reviews_item4 { + flex: 1 1 calc(50% - 20px); + max-width: 50%; +} + +.reviews_item.reviews_item2 { + position: absolute; + max-width: 500px; + height: 360px; + right: -4%; + bottom: 25%; +} + +.reviews .reviews_person { + position: absolute; + right: -100px; + top: -20%; +} + +@media (max-width: 768px) { + .reviews_row { + justify-content: center !important; + /* На мобильных устройствах центрируем */ + } + + .reviews_item { + width: 100%; + /* На мобильных устройствах блоки на всю ширину */ + } + + .reviews_person { + position: static; + margin: 20px auto; + max-width: 150px; + } + + .reviews_item.reviews_item1 { + flex: 1 1 50%; + max-width: 100%; + } + + .reviews_item.reviews_item2, + .reviews_item.reviews_item4 { + flex: 1 1 calc(50% - 20px); + max-width: 100%; + } + + .reviews_item.reviews_item2 { + position: unset; + max-width: 500px; + height: 360px; + right: -4%; + bottom: 25%; + } + + .reviews .reviews_person { + position: absolute; + right: -100px; + top: -20%; + } + + .reviews_row { + justify-content: center !important; + display: contents; + } +} + + +.no-scroll { + overflow: hidden; +} +.img--mobile{ + display: none; +} +@media only screen and (max-width: 1170px) { + .about_block .about_cards { + grid-template-columns: 48.5% 48.5%; + gap: 30px 20px; + } + .about_cards .about_company{ + max-width: 380px; + } + + .sellers_slider .swiper { + padding-left: 0; + padding-right: 0; + } + .blog_slider .swiper { + padding-left: 30px; + padding-right: 30px; + } + + .truth_block .truth_block-title, + .truth .truth_title { + font-size: 60px; + line-height: 70px; + width: 100%; + } + .discount_top .discount_title { + font-size: 60px; + max-width: 550px; + line-height: 65px; + } + .discount_top .discount_top-imgs { + position: absolute; + top: 20px; + right: -50px; + } + .discount_top .discount_top-imgs .dicount_dog-img { + width: 400px; + } + + .reviews_block .reviews_items{ + margin-left: -30px; + } + +} +@media only screen and (min-width: 600px){ +.swiper-slide-active .sellers_card { + + transform: scale(1.05); /* Увеличение на 1.2 */ + transition: transform 0.3s ease; + background: #fff; +} +} +@media only screen and (max-width: 950px){ + .about_us .about_us-title, + .sellers_top .sellers_title, + .about_info .about_title, + .home_block .home_title { + font-size: 65px; + line-height: 78px; + } + .about .about_block { + gap: 0; + } + .about_block .about_info-wrap{ + gap: 30px; + } + .about_info .about_text { + font-size: 20px; + line-height: 24px; + } + + .about_info-wrap .about_img img { + width: 230px; + height: 560px; + } + + .blog_card .blog_card-info-wrap { + width: 108%; + } + .sellers_top .slider-arrows { + display: none; +} + .seller_block .sellers_top { + align-items: start; + flex-direction: column; + gap: 10px; + } + .sellers_card .sellers_card-img { + /* width: 100%; */ + } + .sellers_card .sellers_card-text{ + text-align: center; + } + .about_us-block .about_us-cards { + grid-template-columns: 48% 48%; + gap: 17px; + } + + .truth_block .truth_block-text p{ + max-width: 400px; + } + .truth_top .gift_img { + margin-left: -120px; + width: 400px; + } + + .reviews_block .reviews_items{ + flex-direction: column; + margin-left: 0; + gap: 0; + align-items: center; + } + .reviews .reviews_title{ + text-align: center; + } + .reviews .reviews_person{ + display: none; + } + .reviews_person-mob{ + display: flex; + order: 3; + object-fit: contain; + margin-top: -80px; + z-index: -2; + } + .reviews_items .reviews_item{ + border-radius: 25px; + padding: 10px 14px; + } + .reviews_items .reviews_item::after{ + border-radius: 25px; + } + .reviews_items .reviews_item1{ + order: 1; + } + .reviews_items .reviews_item2{ + order: 2; + transform: rotate(7deg); + padding: 13px; + margin-top: 10px; + z-index: -1; + margin-left: -4px; + } + .reviews_items .reviews_item6{ + order: 4; + transform: rotate(2deg); + margin-top: -80px; + } + .reviews_items .reviews_item3{ + order: 6; + transform: rotate(2.18deg); + margin-top: 5px; + z-index: -2; + } + .reviews_items .reviews_item4{ + order: 5; + transform: rotate(-1.7deg); + margin-top: 0px; + z-index: -1; + } + .reviews_items .reviews_item5{ + order: 7; + transform: rotate(-3.14deg); + margin-top: -3px; + z-index: -3; + } + + .reviews_item .reviews_item-top b { + font-size: 20px; + line-height: 22px; + } + .reviews_item .reviews_item-text { + font-size: 12px; + line-height: 14.4px; + max-width: 228px; + } +} + +@media only screen and (max-width: 776px){ + .home_dog + { + display: none; + } + .sellers_slider .swiper { + width: 568px; + } + .sellers_card .sellers_card-img { + height: 260px; + } + .slider-arrows { + display: none; + } + .home_block-dog{ + display: flex; + margin-top: 20px; + } + .home .container { + padding: 68px 30px 180px; + } + + .blog_block .blog_title, + .about_info .about_title{ + font-size: 44px; + line-height: 50px; + } + .about_info-wrap .about_img { + max-width: 200px; + } + .about_card .about_card-title { + font-size: 20px; + line-height: 24px; + } + .blog_block .blog_text, + .about_card .about_card-text { + font-size: 16px; + line-height: 18px; + } + .about_card .about_card-info { + gap: 2px; + } + .about_us-card .about_us-card-info h2 { + font-size: 12px; + line-height: 16px; + font-weight: 700; + } + .about_us-card .about_us-card-info span { + font-size: 12px; + line-height: 14px; + } + .about_us-block .about_us-card { + border-radius: 25px; + height: 181px; + } + .about_us-card .about_us-card-info{ + gap: 4px; + padding: 55px 20px 40px; + } + .about_us-cards .about_us-card .about_us-card-info { + height: 131px; + } + .about_us-card .card_date { + top: auto; + right: auto; + bottom: 16px; + left: 20px; + right: 0; + z-index: 2; + padding: 0; + border-radius: 0; + height: fit-content; + width: fit-content; + font-size: 12px; + line-height: 14.4px; + background: transparent; + font-weight: 700; + } + + /* start: QUIZ - max-width: 776px */ + .truth_content-end .truth_block .truth_info { + margin-top: 0px; + } + .truth .truth_top { + flex-direction: column-reverse; + } + .truth_top .gift_line-img{ + display: flex; + } + .truth .truth_title{ + max-width: 500px; + margin-left: auto; + } + .truth_top .gift_img { + transform: rotate(-45deg); + margin-right: auto; + margin-left: -50px; + } + .truth_block .truth_info { + position: relative; + width: 100%; + margin-top: 0; + align-items: center; + flex-direction: column-reverse; + } + .truth_content::after{ + border-radius: 25px; + } + .truth_block .truth_links { + flex-direction: column; + gap: 12px; + padding-bottom: 26px; + width: 100%; + } + .truth_block .truth_link { + width: 100%; + height: 50px; + align-items: center; + justify-content: start; + padding: 8px 20px; + } + + .truth .truth_block { + border-radius: 25px; + height: auto; + padding: 25px 15px 0px 15px; + } + .truth_content-end .truth_block .truth_info{ + flex-direction: column; + } + .truth_content-end .truth_block .truth_links{ + padding-top: 30px; + } + .truth_content-end .truth_block .truth_link{ + width: 100%; + } + .truth_content-end .truth_block .truth_block-text{ + flex-direction: column; + } + .truth_content-end .truth_block .truth_block-text p{ + max-width: 230px; + } + .truth_content-end .truth_xn{ + width: 90px; + height: 58px; + } + .truth_content-end .truth_info img { + width: auto !important; + height: 26vh !important; + object-fit: cover; + position: absolute; + bottom: -21vh; + left: -62px; + } + .truth_content-end .truth_block .truth_link { + width: 100%; + background: #FFF; + } + .truth_content-end .truth_block .truth_end-text{ + width: 100%; + } + + /* end: QUIZ - max-width: 776px */ + + /* start: Наш блог - max-width: 776px*/ + .blog_card .blog_card-title { + font-size: 20px; + line-height: 25.4px; + } + .blog_card .blog_card-text { + font-size: 16px; + line-height: 18.4px; + } + .blog_card .blog_card-info{ + gap: 9px; + } + .blog_slider .blog_card { + border-radius: 30px; + } + .blog_card .blog_card-info-wrap{ + width: 100%; + border-radius: 0; + padding: 12px 14px 16px 16px; + } + .blog_slider .blog_card:hover .blog_card-info-wrap{ + padding-right: 14px; + } + .blog_slider .blog_card:hover { + overflow: hidden; + } + .blog_card .card-line-img{ + display: none; + } + .blog_card .blog_card-img{ + border-radius: 30px 30px 0 0; + } + /* end: Наш блог - max-width: 776px */ + + /* start: Узнайте о нас больше и получите скидку! - max-width: 776px */ + .discount .discount_top{ + margin-bottom: 148px; + order: 1; + } + .discount_block .discount_text{ + order: 2; + margin-bottom: 20px; + } + .discount_block .discount_form{ + order: 3; + margin-bottom: 20px; + } + .discount_block .discount_form-text{ + order: 4; + margin-bottom: 0; + } + .discount_block .discount_cosmodog{ + order: 5; + } + .discount_top .discount_title { + font-size: 48px; + line-height: 52px; + } + .discount_top .discount_top-imgs { + right: -165px; + top: 100px; + } + .discount_top .discount_top-imgs img{ + width: 314px; + } + + .discount_block .discount_form{ + flex-direction: column; + gap: 8px; + width: 100%; + } + .discount_form .discount-line{ + display: none; + } + .discount_form .discount_form-btn, + .discount_form .discount_form-inp{ + width: 100%; + } + /* end: Узнайте о нас больше и получите скидку! - max-width: 776px */ + + .post-single-page .article-body-container{ + padding-bottom: 100px; + } +} + +/* GP | Mobile */ +@media only screen and (max-width: 576px) { + + /*Слайдер*/ + .about .container-fluid { + padding-right: 0; + padding-left: 0; + } + + /*Бестселлеры*/ + .sellers .sellers_card { + background: #fff; + } + .sellers_slider { + height: 530px; + } + .gp_tags { + border: 1px solid #121212; + border-radius: 48px; + padding:2px 4px 2px 4px; + font-size: 14px; + line-height: 18px; + height: 24px; + } + /* .tags_block { + width: 200px; + } */ + .sellers_slider .swiper { + display: flex; + align-items: stretch; + width: 320px; + height: inherit; + } + .seller_name { +font-size: 20px; +font-weight: 500; +line-height: 24px; +text-align: left; + } + .seller_price { + font-size: 20px; + font-weight: bold; + line-height: 30px; + text-align: left; + margin-bottom: 8px; + margin-top: 8px; + } + /* start: Scrollbar */ + body::-webkit-scrollbar { + width: .2rem; + /* background: #fff0; */ + background: linear-gradient(#0F5881, #76CE75, #ECF39F); + } + + body::-webkit-scrollbar-thumb { + border-radius: 4px; + background: rgba(128, 128, 128, 0.9); + } + /* end: Scrollbar */ + + /* start: ОБЩИЕ */ + .img--desktop { + display: none; + } + + .img--mobile { + display: block; + } + /* end: ОБЩИЕ */ + + .main_link { + font-size: 12px; + line-height: 14.4px; + width: 129px; + height: 29px; + padding: 7px; + } + + + .home .home_line2 { + display: flex; + } + + .home .home_line { + display: none; + } + + .home .home_block { + gap: 8px; + } + + .home_block .home_title { + font-size: 26px; + line-height: 34px; + width: 80vw; + } + + .about { + border-radius: 25px; + padding-bottom: 0; + } + + .about > .container { + width: 100%; + margin-right: auto; + margin-left: auto; + } + + .about .about_info-wrap{ + flex-direction: column; + } + + .about_info-wrap .about_img{ + max-width: unset; + width: 100vw; + } + .about_info-wrap .about_img img{ + height: auto; + width: 100%; + } + + .about_cards .about_card { + gap: 0; + } + + .about_cards .about_card-right { + align-items: end; + text-align: end; + } + + .about_card-right .about_card-text { + margin-left: auto; + } + + .about_card .about_card-gif1, + .about_card .about_card-gif4 { + width: 87px; + height: 87px; + } + + .about_card .about_card-gif2 { + width: 99px; + height: 99px; + } + + .about_card .about_card-gif3 { + width: 117px; + height: 102px; + } + + .about_company { + margin-top: 4vh; + } + + .about_company .about_company-logo img { + height: 33px; + } + + .about_company .about_company-logo img:nth-child(1), + .about_company .about_company-logo img:nth-child(3), + .about_company .about_company-logo img:nth-child(4) { + height: 33px; + } + + .about_company .about_company-logo { + display: flex; + gap: 0px 5px; + margin-top: 2%; + justify-content: space-around; + } + + .about_company .about_company-text { + font-size: 12px; + line-height: 14.4px; + } + + .about_cards .about_company { + padding: 15px 16px 18px 16px; + gap: 5px; + border-radius: 25px; + } + + .about_cards .about_company::after { + border-radius: 25px; + } + + .about_company .about_company-logo img { + width: auto; + } + + .about_block .about_cards { + grid-template-columns: 100%; + gap: 10px; + } + + .about_us-cards .about_us-card .about_us-card-info { + height: 151px; + } + + .truth_block .truth_block-text p, + .about_card .about_card-title { + font-size: 12px; + line-height: 18.2px; + } + + .discount_block .discount_text, + .blog_card .blog_card-text, + .blog_block .blog_text, + .truth_block .truth_link, + .sellers_card .sellers_card-text, + .about_card .about_card-text { + font-size: 12px; + line-height: 14.2px; + } + + .about_card .about_card-gif { + margin-bottom: -17px; + } + + .about_slider { + padding: 0; + } + + .about_slider .carousel { + height: 55vh; + min-height: 55vh; + } + + .about .about_block { + gap: 55px; + } + + .about_slider .slide { + padding: 10px 39px; + width: 280px; + height: 280px; + border-radius: 100%; + gap: 12px; + } + + .about_slider .carousel .carousel-item { + padding: 10px 39px; + width: 290px; + height: 290px; + border-radius: 100%; + } + + .about_slider .carousel .carousel-item::after { + background-image: url(../img/border-mobile.png); + border-radius: 100%; + } + + .about_slider .prev { + left: 10vw; + } + + .about_slider .next { + right: 10vw; + } + + .about_slider .slide.active { + transform: translate(0, -20px); + } + + .about_slider .slide img { + width: 113px; + height: 113px; + } + + .about_slider .slide_info { + gap: 6px; + } + + .about_slider .slide_text, + .about_slider .slide_title { + font-size: 12px; + line-height: 14.4px; + text-align: center; + } + + .about_us-block .about_us-card::after, + .about_us-card .about_us-card-img { + border-radius: 25px; + } + + .about_us-card .about_us-card-info { + border-radius: 0 0 25px 25px; + } + + .discount_top .discount_title, + .blog_block .blog_title, + .truth_block .truth_block-title, + .about_us .about_us-title, + .sellers_top .sellers_title { + font-size: 30px; + line-height: 36px; + } + + .sellers_card .sellers_card-img { + width: 100%; + height: 290px; + object-fit: contain; + } + + .sellers .sellers_card { + border-radius: 24px; + height: 520px; + padding:31px 16px 31px 16px; + } + .sellers .swiper-slide{ + max-height: 35vh; + } + + .section_wrap { + padding: 110px 0 52px; + } + + .sellers { + position: relative; + padding-bottom: 87px; + } + + .sellers .sellers_link { + position: absolute; + bottom: 24px; + right: 22px; + } + + .seller_block .sellers_top { + gap: 0; + margin-bottom: 15px; + } + + .reviews { + padding: 90px 0px 36px; + border-radius: 25px 25px 0 0; + } + + /* QUIZ */ + .truth { + border-radius: 0 0 25px 25px; + padding-bottom: 47px; + } + + .truth .truth_content .truth_block, + .truth .truth_content-end .truth_block + { + height: 70vh; + } + + .truth .truth_title { + font-size: 30px; + line-height: 36px; + max-width: 260px; + } + + .truth_top .gift_img { + margin-left: -24px; + width: 160px; + } + + .truth_top .gift_line-img { + bottom: 44px; + width: auto; + } + + .truth_block .truth_block-text img { + width: 29px; + } + + .truth_block .truth_block-title { + max-width: 171px; + margin-bottom: 7px; + } + + .truth_block .truth_line { + gap: 16px; + margin-bottom: 10px; + } + + .truth_block .truth_line span { + width: 34px; + } + + .truth_block .truth_link { + height: 29px; + border-width: 2px; + } + + .truth_content-end .truth_info img { + width: 100%; + } + + .truth_block .truth_info img { + height: 170px; + width: auto; + } + + .truth_links .truth_result { + display: none; + } + + .truth_block .truth_block-text { + gap: 11px; + } + + .truth .truth_block { + height: 470px; + } + + .truth_block .truth_links { + width: 100%; + margin-right: 0; + } + .truth_error .truth_block-text, + .truth_success .truth_block-text + { + margin-bottom: 25%; + } + + /* 381 string in adaptive */ + .truth_content-end .truth_info img { + /* width: auto !important; + object-fit: cover; + position: absolute; + left: -62px; */ + height: 30vh !important; + bottom: 0; + left: unset; + right: 0; + } + + /* QUIZ - конец */ + + + /* Наш блог */ + .blog { + position: relative; + padding-top: 63px; + padding-bottom: 90px; + } + + .blog .blog_link { + position: absolute; + bottom: 35px; + right: 30px; + } + + .blog_card .blog_card-img { + height: 120px; + object-fit: cover; + } + + .blog_card .blog_card-title { + font-size: 12px; + line-height: 16px; + } + + .blog_block .blog_text { + max-width: 230px; + } + + .blog_slider .swiper { + padding-left: 15px; + padding-right: 15px; + } + /* Наш блог - конец */ + + + /* Узнайте о нас больше и получите скидку! */ + .discount { + padding: 0px 0 43px; + } + + .discount_block .discount_text { + max-width: 260px; + } + + .discount_top .discount_top-imgs { + right: -136px; + top: 87px; + } + + .discount_top .discount_top-imgs .dicount_dog-img { + width: 314px; + width: 110vw; + } + + .discount_form .discount_form-inp { + height: 29px; + padding: 6px 13px; + font-size: 12px; + line-height: 14.4px; + } + + .discount_form .discount_form-inp::placeholder { + font-size: 12px; + line-height: 14.4px; + } + + .discount_form .discount_form-btn { + justify-content: start; + padding: 5px 15px; + background: var(--creme-white, #F4F1F0); + color: #62c57e; + opacity: 0.6; + } + .discount_form img{ + display: none; + } + .discount_form span{ + width: 100%; + } + + .discount_block .discount_cosmodog { + border-radius: 25px; + height: 415px; + } + + .discount_cosmodog .discount_cosmodog_info { + height: 245px; + gap: 14px; + padding: 10px 19px; + } + + .discount_cosmodog .discount_cosmodog-title { + text-align: start; + font-size: 26px; + line-height: 31.2px; + max-width: 202px; + margin-right: auto; + } + + .discount_cosmodog .discount_cosmodog-text { + font-size: 12px; + line-height: 14.4px; + max-width: 231px; + text-align: start; + margin-right: auto; + } + + .discount_top .discount_top-imgs { + right: -20%; + top: 0; + transform: scale(1.8); + z-index: 0; + margin-bottom: -91%; + margin-top: 20%; + position: relative; + } + + .discount_block .wpcf7 { + order: 3; + } + + /* Узнайте о нас больше и получите скидку! - конец */ + + /* start: Отзывы ветеринаров */ + .reviews .reviews_title { + font-size: 26px; + line-height: 31px; + max-width: 278px; + margin: 0 auto; + } + + .reviews .reviews_block { + margin-top: 20px; + } + + .reviews_block .reviews_items { + flex-wrap: unset; + gap: 10px; + } + + .reviews_items .reviews_item { + width: 80vw; + gap: 10px; + } + + .reviews_items .reviews_item2 { + margin-top: -0px; + } + + .reviews_items .reviews_item1 { + transform: rotate(-5.35deg); + } + + .reviews_items .reviews_item3 { + margin-top: 3px; + } + + .reviews_items .reviews_item4 { + margin: unset; + } + + .reviews_items .reviews_person-mob { + margin-bottom: -10%; + } + + .reviews_item .reviews_item-name { + display: flex; + flex-direction: column; + gap: 20px; + } + + .reviews_item .reviews_item-top b { + font-size: 12px; + line-height: 16px; + text-transform: uppercase; + } + + .reviews_item .reviews_item-top span { + max-width: 134px; + } + + /* end: Отзывы ветеринаров */ + + /* start: О НАС ПИШУТ СМИ*/ + .about_us-card .about_us-card-info span a { + font-size: 14px; + } + + .about_us-block .about_us-cards { + grid-template-columns: 1fr; + } + + .about_us-card .card_date { + right: 20px; + left: unset; + } + + .about_us-cards .about_us-card-info { + height: 130px; + } + + .about_us-card .about_us-card-info { + padding: 55px 20px 20px; + } + + .about_us-card-info.card-info--half-gradient { + background: linear-gradient(0deg, #F4F1F0 45%, rgba(244, 241, 240, 0) 100%); + } + + .truth_content-end .truth_block .truth_end-text, + .truth_content-end .truth_block .truth_block-text { + position: static; + } + + .truth_content-end .truth_block .truth_link { + border-width: 2px; + position: static; + bottom: 28px; + right: 0; + width: 100%; + margin-bottom: 76px; + z-index: 2; + } + + .truth_content-end .truth_info { + bottom: 0; + left: 0; + position: absolute; + } + + /* end: О НАС ПИШУТ СМИ */ + + /* start: Проверьте свои знания и получите подарок! */ + .truth_top .gift_img { + width: 64vw; + margin: unset; + transform: translateX(-22%) rotate(-45deg); + } + + .truth_top .gift_line-img { + top: 40%; + } + + .truth .truth_block { + padding: 25px; + } + + .truth_block .truth_line { + gap: 10%; + } + + .truth_block .truth_block-text { + min-height: 20%; + } + + .truth_points { + font-size: 30px; + } + + /* end: О НАС ПИШУТ СМИ */ + + + /* start: Наш блог */ + .blog_slider .blog_card { + height: 290px; + } + + .blog_card .blog_card-img { + border-color: #121212; + } + + .blog_card .blog_card-info-wrap { + border-radius: 0 0 30px 30px; + border-color: #121212; + } + + .blog_slider .blog_card:hover .blog_card-info-wrap{ + border-radius: 0 0 30px 30px; + width: 100%; + } + /* end: Наш блог */ + + + + /* start: Футер */ + .footer_form .footer_form-title h2, + .footer_box .footer_box-title { + font-size: 12px; + line-height: 16.2px; + font-weight: 700; + } + + .footer_box .footer_box-link { + font-size: 12px; + line-height: 16.2px; + } + + .footer_form .footer_form-textarea textarea, + .footer_form .footer_form-inp input { + height: 28px; + border: 1px solid var(--grey-black, #121212); + padding: 5px 18px; + font-size: 12px; + line-height: 14.4px; + opacity: .5; + } + + .footer_form .footer_block .footer_bottom a, + .footer_form .footer_form-inp input::placeholder { + font-size: 12px; + line-height: 14.4px; + } + + .footer_form .footer_form-textarea textarea { + height: 123px; + min-height: unset; + padding: 7px 18px; + border-radius: 17px !important; + } + + .footer_form .footer_form-textarea { + display: flex; + flex-direction: column; + gap: 13px; + } + + .footer_form-textarea .footer_form-btn { + position: static; + width: 100%; + min-height: unset; + } + + .footer_block .footer_social { + gap: 14px; + } + + .footer_block .footer_bottom a:nth-child(2) { + display: none; + } + + .footer_form .footer_form-inp { + flex-direction: column; + } + + .footer .footer_box{ + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + row-gap: 14px; + column-gap: 0; + } + .footer .footer_box .footer_line-mob + { + grid-area: 1 / 2 / 3 / 3; + height: 100%; + padding-top: 4px; + } + .footer .footer_box .footer_line-mob1{ + margin-left: -30%; + } + .footer .footer_box .footer_box-title{ + grid-area: 1 / 1 / 1 / 1; + } + .footer .footer_box .footer_box-link{ + grid-area: 2 / 1 / 2 / 1; + } + .footer_box .footer_line-mob{ + display: block; + } + .footer_block .footer_bottom a{ + font-size: 12px; + line-height: 18px; + } + /* end: Футер */ +} + +@media only screen and (max-width: 350px) { + .reviews_block .reviews_items { + margin-left: -20px; + } +} + +.btn--black-hover:hover { + background: #121212 !important; + color: #F4F1F0 !important; + transition: .3s +} + +.btn--black-hover { + transition: .3s +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/forms/components/discount/component-controller.php b/wp-content/themes/cosmopet/modules/forms/components/discount/component-controller.php new file mode 100644 index 0000000..e69de29 diff --git a/wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css index 82761d5..054aca4 100644 --- a/wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/header/assets/css/gp-style-desktop.css @@ -730,3 +730,29 @@ width: 0px; } + +.mini-profile__button--counter { + display: flex +; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 2px; + position: absolute; + background: var(--gradient-turquoise); + border-radius: 10px; + width: 16px; + height: 16px; + border-radius: 50%; + right: 30px; + bottom: 20px; + font-style: normal; + font-weight: 700; + font-size: 9px; + line-height: 16px; + color: #121212; +} + +.mini-profile__button--counter.disabled{ + display: none; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/header/assets/js/core.js b/wp-content/themes/cosmopet/modules/header/assets/js/core.js index f11de2e..e69de29 100644 --- a/wp-content/themes/cosmopet/modules/header/assets/js/core.js +++ b/wp-content/themes/cosmopet/modules/header/assets/js/core.js @@ -1,151 +0,0 @@ -'use strict'; - -// function -function modalOpen(buttonElement, contentElement){ - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - elements = document.querySelectorAll(buttonElement), - device = window.screen.width; - - elements.forEach(e => { - let thisContentElement = document.querySelector(contentElement); - - e.onclick = function () { - modal.classList.add('active'); - thisContentElement.classList.add('active'); - - let width = thisContentElement.clientWidth; - - setTimeout(() => { - if (device <= 720) { - aside.style.width = `${device}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - }else{ - aside.style.width = `${width}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - } - }, 10); - } - }) -} - -function modalClose(buttonElement) { - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - asideItems = document.querySelectorAll('.modal__item'), - elements = document.querySelectorAll(buttonElement); - - elements.forEach(e => { - e.onclick = function () { - aside.style.width = '0px'; - - asideItems.forEach(e => { - if (e.classList.contains('active')) { - e.style.filter = 'blur(10px)'; - } - }); - - setTimeout(() => { - asideItems.forEach(e => { - if (e.classList.contains('active')) { - e.classList.remove('active'); - } - }); - - modal.classList.remove('active'); - }, 300); - } - }) -} - -function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { - let elements = document.querySelectorAll(mainElement); - - elements.forEach(e => { - let thisMainElement = e, - thisButtonElement = e.querySelector(buttonElement), - thisHeightElement = e.querySelector(heightElement), - thisContentElement = e.querySelector(contentElement); - - thisButtonElement.onclick = function (e) { - let height = thisHeightElement.clientHeight; - - if (close == true && !thisMainElement.classList.contains('active')) { - elements.forEach(e => { - if (e.classList.contains('active')) { - e.classList.remove('active'); - e.querySelector(contentElement).style.height = null - } - }) - } - - if (!thisMainElement.classList.contains('active')) { - thisContentElement.style.height = `${height}px`; - thisMainElement.classList.add('active'); - }else{ - thisContentElement.style.height = null; - thisMainElement.classList.remove('active'); - } - } - - }); -} -var menu_opened = false; -function toggleHeader(button, content, blockheight, removeBlock, removeClass) { - let thisButton = document.querySelector(button), - thisContent = document.querySelector(content), - thisRemoveBlock = document.querySelector(removeBlock) || '', - 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'); - - if (removeBlock) { - thisRemoveBlock.classList.remove(removeClass); - } - }else{ - thisContent.style.height = null; - thisContent.classList.remove('open'); - - if (removeBlock) { - if (window.Y <= 25) { - thisRemoveBlock.classList.add(removeClass); - } - } - } - menu_opened = !menu_opened; - } -} - - - -if (document.querySelector('.header').classList.contains('white')) { - window.addEventListener("scroll", function (e) { - let header = document.querySelector('.header'); - let scroll = window.scrollY; - if(!menu_opened){ - if (scroll >= 25) { - header.classList.remove('white') - }else{ - - header.classList.add('white') - - } - } - - }); -} - -toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); -toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); -toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); -// scroll - - - diff --git a/wp-content/themes/cosmopet/modules/header/module-controller.php b/wp-content/themes/cosmopet/modules/header/module-controller.php index ca66363..8d074cc 100644 --- a/wp-content/themes/cosmopet/modules/header/module-controller.php +++ b/wp-content/themes/cosmopet/modules/header/module-controller.php @@ -41,7 +41,11 @@ add_filter('timber/context', function($context) { if ($about_page) { $context['about_url'] = '/o-kompanii/'; $context['about_url_en'] = '/en/about-us/'; - } else { + } + else if (SITE_DOMAIN == 'AE'){ + $context['about_url_en'] = '/about-us/'; + } + else { $context['about_url'] = 'https://cosmopet.shop/chto-takoe-entoprotein/'; $context['about_url_en'] = 'https://cosmopet.shop/en/about-2/'; } @@ -50,7 +54,11 @@ add_filter('timber/context', function($context) { if ($production_page) { $context['production_url'] = '/proizvodstvo/'; $context['production_url_en'] = '/en/production/'; - } else { + } + else if (SITE_DOMAIN == 'AE'){ + $context['production_url_en'] = '/production/'; + } + else { $context['production_url'] = 'https://cosmopet.shop/proizvodstvo/'; $context['production_url_en'] = 'https://cosmopet.shop/en/production/'; } @@ -62,7 +70,9 @@ add_filter('timber/context', function($context) { $context['front_url'] = "https://cosmopet.shop/"; $context['front_url_en'] = "https://cosmopet.shop/en/main/"; } - + if (SITE_DOMAIN == 'AE'){ + $context['front_url_en'] = "/"; + } return $context; }); diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css index 77df47e..78f1e7f 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css +++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css @@ -1,32 +1,80 @@ @font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf'); + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Bold"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf"); + font-weight: 700; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk SemiBold"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf"); + font-weight: 600; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Medium"), + url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf"); + font-weight: 500; +} +@font-face { + font-family: "Craftwork Grotesk"; + src: local("Craftwork Grotesk Regular"), + url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"), + url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"), + url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf"); font-weight: 400; } @font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf'); - font-weight: 500; + font-family: "Abel"; + src: url('../fonts/Abel/Abel-Regular.ttf'); + font-weight: 400; } + +/* din 2014 */ @font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf'); + font-family: "DIN 2014 Rounded"; + src: local("DIN 2014 Rounded Demi"), + url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"), + url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"), + url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf"); font-weight: 600; } - @font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf'); - font-weight: 700; + font-family: "DIN 2014 Rounded"; + src: local("DIN 2014 Rounded Regular"), + url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"), + url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"), + url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf"); + font-weight: 400; } +/* din 2014 */ +/* roboto */ @font-face { - font-family: "Abel"; - src: url('../fonts/Abel/Abel-Regular.ttf'); + font-family: "Roboto"; + src: local("Roboto Medium"), + url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), + url("../fonts/roboto/Roboto-Medium.woff") format("woff"), + url("../fonts/roboto/roboto-medium.ttf") format("ttf"); + font-weight: 500; +} +@font-face { + font-family: "Roboto"; + src: local("Roboto Regular"), + url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), + url("../fonts/roboto/Roboto-Regular.woff") format("woff"), + url("../fonts/roboto/roboto-medium.ttf") format("ttf"); font-weight: 400; } +/* roboto */ :root { /* Colors */ @@ -36,7 +84,9 @@ --accent-3: linear-gradient(6deg, rgb(244, 66, 66) 7.584%,rgb(86, 158, 240) 72.371%); --linear: linear-gradient(-7.39deg, rgb(244, 241, 240) 23.643%,rgba(244, 241, 240, 0.3) 59.827%); --btn-bg: radial-gradient(100% 174.56% at 100% 0%, #7AD9E7 0%, #7EE7E1 25%, #B5E4B4 80%, #D7EEAA 100%); - + --font-family: "Craftwork Grotesk", sans-serif; + --second-family: "DIN 2014 Rounded", sans-serif; + --third-family: "Roboto", sans-serif; --main_white: #FFFFFF; --creme-white: #F4F1F0; @@ -54,9 +104,7 @@ --background: #F4F1F0; --placeholder: #999999; /* Fonts */ - --font-craftwork: 'Craftwork Grotest', sans-serif; --font-abel: 'Abel', serif; - --text-dark: #2b2b3b; --text-red: #fa0505; --text-green: #2ED15D; @@ -70,11 +118,25 @@ --gradient-blue: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(15, 88, 129) 0%, rgb(30, 164, 156) 51.21689438819885%, rgb(118, 206, 117) 80.70731163024902%, rgb(236, 243, 159) 91.14583134651184%); --gradient-turquoise: radial-gradient(346.57% 244.17% at 149.73% -58.39%, rgb(117, 196, 240) 0%, rgb(126, 231, 225) 51.21689438819885%, rgb(181, 228, 180) 80.70731163024902%, rgb(237, 244, 164) 91.14583134651184%); --gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%); + --text-white: #fff; + --text-black: #121212; + --text-grey: #999; + --text-3: #333; + --text-6: #666; + --text-9: #999; + + + + } + + + + body { background: var(--radial); - font-family: var(--font-craftwork); + font-family: var( --font-family); font-weight: 500; } @@ -209,7 +271,8 @@ textarea{ } } -.modal { + +.mform { position: fixed; top: 0; left: 0; @@ -222,7 +285,9 @@ textarea{ z-index: 1000; } - .modal-content { + + .mform-content { + position: relative; width: 100%; max-width: 600px; @@ -232,9 +297,9 @@ textarea{ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } - .modal-success .modal-content { + .mform-success .mform-content { background-color: #fff; - background: url(/wp-content/uploads/2025/04/background.png) center center / contain no-repeat; + background: url(/wp-content/themes/cosmopet/static/img/form-img.png) center center / contain no-repeat; background-color: #fff; background-position: bottom; height: 500px; @@ -244,15 +309,15 @@ textarea{ gap: 20px; } - .modal-success .modal-button-container { + .mform-success .mform-button-container { margin-top: 200px; } - .modal-message { + .mform-message { font-size: 20px; } - .modal-success .modal-image { + .mform-success .mform-image { position: absolute; bottom: 0; left: 50%; @@ -269,7 +334,9 @@ textarea{ color: #000; } - .modal-title { + + .mform-title { + font-size: 32px; font-weight: bold; margin-bottom: 10px; @@ -277,12 +344,14 @@ textarea{ } /* Стили для второго модального окна - Предложить статью */ - .modal-offer .modal-content { + .mform-offer .mform-content { + background-color: #d6ff9f; padding-bottom: 30px; } - .modal-subtitle { + + .mform-subtitle { font-size: 18px; margin-bottom: 20px; } @@ -297,7 +366,8 @@ textarea{ .form-row { display: flex; - gap: 10px; + gap: 2px; + flex-direction: column; } .full-width { @@ -366,12 +436,14 @@ textarea{ /* Адаптивность */ @media (max-width: 768px) { - .modal-content { + + .mform-content { + width: 90%; padding: 30px 20px; } - .modal-title { + .mform-title { font-size: 18px; margin-bottom: 5px; } @@ -404,6 +476,7 @@ textarea{ max-width: 1600px; } + .modal { display: none; } @@ -546,49 +619,1446 @@ textarea{ background: none; border: none; - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - color: var(--text-black); - - text-decoration: none; - - position: relative; - } - .back::before{ - content: ''; - - position: absolute; - top: 8px; - left: 0; - - margin-right: 8px; - - width: 24px; - height: 24px; - - background-image: url(../img/svg/main/arrow-back.svg); } + + + +/* modal */ +.modal{ + position: fixed; + top: 0; + left: 0; + + padding: 20px; + + width: 100%; + height: 100%; + + background: rgba(0, 0, 0, 0.25); + opacity: 0; + z-index: 200; + transition: opacity .2s ease-out; + pointer-events: none; + + display: flex; + justify-content: center; + align-items: center; + + overflow-y: auto; +} +.modal.active{ + opacity: 1; + pointer-events: auto; +} +.modal__notification{} +.form__button-mobile{ + display: none; +} +.modal__aside{ + position: fixed; + top: 0; + right: 0; + + width: 0; + height: 100%; + + overflow: hidden; + transition: width .4s ease-out; +} +.modal__item{ + height: 100%; + overflow: auto; + padding: 24px; + + background: var(--background-white); + + position: relative; + + display: none; - .back::after{ - content: ''; - - position: absolute; - bottom: 6px; - left: 0; - - width: calc(100% - 8px); - height: 1px; + filter: blur(10px); + transition: filter .2s ease-out; +} +.modal__item--no-title{ + padding-top: 72px; +} +.modal__item.active{ + display: flex; + flex-direction: column; + justify-content: space-between; +} +.modal__close{ + position: absolute; + top: 32px; + right: 24px; + + width: 24px; + height: 24px; + + border: none; + background: none; +} +.modal__header{} +.modal__title{ + padding-right: 48px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__small-title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__text{ + margin-top: 16px; + + padding-right: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-0); +} +.modal__form-sub{ + margin-top: 48px; +} +.modal-form-sub__submit{ + margin-top: 64px; +} +.modal__block-button{ + margin-top: 24px; +} +.modal__button{ + margin-top: 16px; +} +.modal__button:first-child{ + margin-top: 0; +} +.modal__content{ + margin-top: 24px; +} +.modal__filter{ + width: 400px; +} +.modal__footer{ + border-top: 1px solid var(--text-6); + padding-top: 23px; +} +.modal__block-price{ + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-block-price__title{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} +.modal__basket{ + width: 600px; +} +.modal__to-know, +.modal__to-know-submit{ + width: 412px; +} + +.modal-basket__item{ + padding-top: 23px; + padding-right: 15px; + padding-bottom: 24px; + + display: flex; + + border-top: 1px solid var(--background-grey); + + position: relative; +} +.modal-basket__item::before{ + content: ''; + + position: absolute; + top: 24px; + right: 6px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/basket.svg); + background-repeat: no-repeat; + background-position: center; + + cursor: pointer; + + transition: opacity .2s ease-out; +} +.modal-basket__item:hover .modal-basket__item::before{ + opacity: .8; +} +.modal-basket__item--return{ + padding-right: 5px; - background: var(--text-black); - } + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket__item--return .modal-basket-item__title{ + padding-right: 10px; +} +.modal-basket__item--return::before{ + display: none; +} +.modal-basket-item__return{ + border-radius: 20px; + padding: 4px 24px; - .button--high-46{ - padding: 12px 24px; + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + background: var(--background-black); + + border: none; +} +.modal-basket-item__block-image{ + width: 128px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; +} +.modal-basket-item__image{ + width: 96px; + aspect-ratio: 1; + + object-fit: contain; +} + +.modal-basket-item__block-image img{ + height: auto; +} +.modal-basket-item__content{ + margin-left: 16px; + width: 100%; +} +.modal-basket-item__title{ + padding-right: 40px; + font-family: var(--font-family); + font-weight: 500; font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-basket-item__sub-title{ + margin-top: 8px; + + font-family: var(--font-family); font-weight: 700; - line-height: 24px; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.modal-basket-item__control{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket-item__price{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-black); +} +.modal__basket .modal__header{ + height: calc(100% - 92px); + margin-bottom: -36px; +} +.modal__basket .modal__content{ + height: calc(100% - 100px); + overflow-x: hidden; + +} +.modal__basket .modal__content::-webkit-scrollbar { + width: 7px; + background-color: #f9f9fd; +} +.modal__basket .modal__content::-webkit-scrollbar-thumb { + background-color: var(--background-black); + border-radius: 2px; +} + +.modal-form{ + margin: auto; + + width: 600px; + + padding: 24px; + + border-radius: 20px; + + position: relative; + + display: none; +} +.modal-form.active{ + display: block; +} +.modal-form--white{ + border: 1px solid var(--background-black); + background: var(--background-white); +} +.modal-form--green-gradient{ + background: var(--gradient-blue); +} +.modal-form--width-584{ + width: 584px; +} +.modal-form--cdek{ + width: 836px; +} +.modal-form__close{ + position: absolute; + top: 24px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + border: none; + background: none; + background-image: url(../img/svg/main/black-x.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + + transition: opacity .2s ease-out; + + z-index: 10; +} +.modal-form__close--white{ + background-image: url(../img/svg/main/white-x.svg); +} +.modal-form__close:hover{ + opacity: .8; +} +.modal-form__button-close{} +.modal-form__title{ + padding-right: 50px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + color: var(--text-dark); +} +.modal-form__text--center{ + text-align: center; +} +.modal-form__text--center-pc{ + text-align: center; +} +.modal-form__title--green-gradient{ + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.modal-form__title--white{ + color: var(--text-white); +} +.modal-form__element{ + margin-top: 24px; +} +.modal-form__element--center{ + display: flex; + justify-content: center; +} +.modal-form__element--top-40{ + margin-top: 40px; +} +.modal-form__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-form__text--weight-500{ + font-weight: 500; +} +.modal-form__text--white{ + color: var(--text-white); +} +.modal-form__img{ + width: 100%; + height: 360px; + + object-fit: contain; +} +.modal-form__content{ + margin-top: 40px; +} +.modal-form-content__line{ + margin-top: 24px; +} +.modal-form-content__line:first-child{ + margin-top: 0; +} +.modal-form-content__line--two{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content-line__element{ + position: relative; +} +.modal-form-content-line__element--arrow::after{ + content: ''; + + position: absolute; + right: 16px; + bottom: 16px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/arrow-right-input.svg); + + pointer-events: none; +} +.modal-form-content__line--two .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content__line--three{ + display: flex; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + margin-left: 8px; + + width: 100%; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + margin-left: 8px; + + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--margin-top-16{ + margin-top: 16px; +} +.modal-form__buttons{ + margin-top: 32px; +} +.modal-form__buttons--two{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-form__buttons--two button, +.modal-form__buttons--two input{ + width: calc(50% - 20px); +} +.modal-map{ + margin: auto; + + width: 1105px; + + display: none; + + border-radius: 24px; + border: none; +} +.modal-map.active{ + display: flex; +} +.modal-map__left{ + width: 600px; + + padding: 24px; + + position: relative; +} +.modal-map__control{ + margin: 38px -12px -12px -12px; + + display: flex; +} +.modal-map__control--delivery{ + margin-top: 12px; +} +.modal-map-control__item{ + margin: 12px; + + padding: 2px; + + width: calc(50% - 24px); + + background: var(--background-9); + border-radius: 20px; + border: none; +} +.modal-map-control__item.active{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .form-input-radio__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__content{ + padding: 14px; + + border-radius: 18px; + + background: var(--background-white); +} +.modal-map-control-item__header{ + display: flex; + align-items: center; +} +.modal-map-control-item__circle{ + padding: 2px; + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-9); + position: relative; +} +.modal-map-control-item__input{ + display: none; +} +.modal-map-control-item-circle__content{ + width: 16px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-white); +} +.modal-map-control__item.active .modal-map-control-item__circle{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .modal-map-control-item__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.modal-map-control-item__description{ + margin-top: 16px; +} +.modal-map-control-item__time{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-align: start; +} +.modal-map-control-item__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-6); + + text-align: start; +} +.modal-map__form{ + margin-top: 24px; +} +.modal-map-form__hidden{ + +} +.modal-map-form__button{ + margin-top: 83px; +} +.modal-map-form__sub-button{ + display: none; +} +.modal-map__right{ + padding: 16px 0px 16px 16px; +} +.modal-map__map{ + border: 2px solid var(--background-9); + border-radius: 16px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.modal-map__map iframe{ + height: 650px; +} +.modal__age{ + +} +.modal__age > div{ + display: none; +} +.modal__age > div.active{ + display: flex; +} +/* modal */ + +/* toggle */ +.toggle{ + padding-top: 26px; + padding-bottom: 25px; + + border-bottom: 1px solid var(--text-3); + + position: relative; +} +.toggle::after{ + content: ''; + + position: absolute; + top: 24px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/black-x.svg); + transform: rotate(45deg); + transition: transform .2s; + pointer-events: none; +} +.toggle.active::after{ + transform: rotate(0deg); +} +.toggle__title{ + padding-right: 30px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + cursor: pointer; +} +.toggle__block-content{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.toggle__content{ + padding-top: 24px; +} +.toggle-content__item{ + margin: 12px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; +} +.toggle-content__item:first-child{ + margin-top: 0; +} +.toggle-content__element{ + margin: 12px; +} +.toggle-content__element--width-perc-100{ + width: 100%; +} +.toggle-content__element--width-perc-50{ + width: calc(50% - 24px); +} +.toggle__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +/* toggle */ + +/* checkbox */ +.checkbox{ + display: flex; + align-items: center; + + cursor: pointer; +} +.checkbox__state{ + border-radius: 4px; + + width: 18px; + height: 18px; + + border: 2px solid var(--background-black); + background: var(--background-white); + + flex-shrink: 0; +} +.checkbox.active .checkbox__state{ + background-color: var(--background-black); + + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; +} +.checkbox__input{ + display: none; +} +.checkbox__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +.checkbox__label a{ + color: #76ce75; + + text-decoration: none; +} +.checkbox--small{ + margin-top: 24px; +} +.checkbox--small .checkbox__label{ + padding-left: 24px; + + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +/* checkbox */ + +/* radio */ +.radio{ + display: flex; + align-items: center; +} +.radio__input{ + width: 18px; + aspect-ratio: 1; + + accent-color: var(--background-black); + + cursor: pointer; +} +.radio__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +/* radio */ + +.added_to_cart { + display: none!important; +} + +@keyframes slidein { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.remove-item{ + position: absolute; + top: 0; + right: 0; +} + +.modal-basket-item__content{ + position: relative; +} + + +/* Индикатор загрузки для корзины */ +.modal-basket__loading { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.8); + display: none; + justify-content: center; + align-items: center; + z-index: 10; + border-radius: 20px; +} + +.modal__item.loading .modal-basket__loading { + display: flex; +} + +.modal-basket__loader { + width: 48px; + height: 48px; + border: 5px solid var(--background-grey); + border-top: 5px solid var(--background-black); + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Блок кнопок корзины (адаптированный под ваши стили) */ +.modal-basket__actions { + display: flex; + justify-content: space-between; + gap: 16px; + margin-top: 24px; +} + +.modal-basket__button { + flex: 1; + padding: 16px 24px; + border-radius: 20px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + + position: relative; + } + .back::before{ + content: ''; + + position: absolute; + top: 8px; + left: 0; + + margin-right: 8px; + + width: 24px; + height: 24px; + + background-image: url(../img/svg/main/arrow-back.svg); + } + + .back::after{ + content: ''; + + position: absolute; + bottom: 6px; + left: 0; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); + } + + .button--high-46{ + padding: 12px 24px; + + font-size: 20px; + font-weight: 700; + line-height: 24px; +} + + +.modal-basket__button--continue { + background: var(--background-white); + border: 1px solid var(--background-black); + color: var(--text-black); +} + +.modal-basket__button--checkout { + background: var(--background-black); + border: 1px solid var(--background-black); + color: var(--text-white); +} + +.modal-basket__button:hover { + opacity: 0.9; + transform: translateY(-2px); +} + + +/* counter */ +.counter{ + display: flex; + align-items: center; +} +.counter__input{ + width: 48px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: center; + color: var(--text-black); + + pointer-events: none; + + background: none; + border: none; +} +.counter__button{ + width: 48px; + height: 48px; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--text-3); + border-radius: 24px; + + background: var(--background-white); + + transition: opacity .2s ease-out; +} +.counter__button:hover{ + opacity: .8; +} +.counter--small{ + +} +.counter--small .counter__button{ + width: 32px; + height: 32px; +} +.counter--small{ + +} +/* counter */ + + +/* button */ +.button{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-radius: 20px; + + cursor: pointer; +} +.button--100-perc{ + width: 100%; + text-align: center; +} +.button--white{ + padding: 11px 24px; + + text-align: center; + + background-color: var(--background-white); + border: 1px solid var(--background-black); + + transition: opacity .2s ease-out; +} +.button--white:hover{ + opacity: .8; +} +.button--white.active{ + background: var(--background-black); + color: var(--background-white); +} +.button--gradient{ + background: var(--gradient-turquoise); + border: none; + + transition: opacity .2s ease-out; +} +.button--gradient:hover{ + opacity: .8; +} +.button--base{ + padding: 12px 24px; +} +.button--high{ + height: 56px; + + padding: 16px 24px 24px 24px; + + font-weight: 700; + text-align: center; + + position: relative; +} +.button--high-46{ + padding: 12px 24px; + + font-size: 20px; + font-weight: 700; + line-height: 24px; +} +.button--icon{ + padding-right: 56px; + + text-align: start; +} +.button--filter::after{ + content: ''; + + position: absolute; + top: 16px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/filter.svg); + background-repeat: no-repeat; + background-size: contain; +} +.button--black{ + padding: 7px 15px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + background: var(--background-black); + border: 1px solid var(--text-white); +} +.button--link{ + text-decoration: none; +} +.button--red-48-px{ + border-radius: 48px; +} +.to-know{ + /* width: 100%; */ + + padding: 12px 24px 7px 24px; + + display: flex; + justify-content: center; + + border: none; + + transition: opacity .2s ease-out; + text-decoration: none; +} +.to-know:hover{ + opacity: .8; +} +.to-know p{ + padding-bottom: 4px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-bottom: 1px var(--text-black) solid; + + cursor: pointer; +} +.to-know--background-none{ + background: none; +} +.back{ + margin-top: 16px; + margin-left: 16px; + + padding: 8px; + padding-left: 32px; + + background: none; + border: none; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + + position: relative; +} +.back::before{ + content: ''; + + position: absolute; + top: 8px; + left: 0; + + margin-right: 8px; + + width: 24px; + height: 24px; + + background-image: url(../img/svg/main/arrow-back.svg); +} + +.back::after{ + content: ''; + + position: absolute; + bottom: 6px; + left: 0; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); +} + +.wc-forward { + width: 100%; + padding: 0.5rem 0; + text-align: center; +} +/* button */ + + + .woocommerce form .form-row .input-text { + display: flex; + flex-direction: row; + align-items: center; + padding: 12px 16px; + gap: 8px; + width: 100%; + height: 48px; + background: #FFFFFF; + border: 1px solid #999999; + border-radius: 20px; + margin-top: 6px; + color: #000 + } + + .woocommerce form .form-row textarea.input-text{ + height: 150px; + } + + .woocommerce-button{ + padding: 20px; + margin-top: 20px; + } + + .label__title, .form-row label { + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-3); +} + +.shop_table{ + width: 100%; +} + + +.form-input__error{ + margin-top: 4px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + color: #f60909; + + display: none; + + position: relative; +} +.form-input__error--absolute{ + position: absolute; + bottom: -19.95px; + left: 0; + + width: 100%; +} +.form__input.error, .form-input__phone.error{ + border-color: #f60909; +} +.form__input.error + .form-input__error{ + display: block; +} +.form-input__phone.error .form-input__error{ + display: block; +} +.form-input-phone__input.error + .form-input__error--absolute::before{ + content: ''; + + position: absolute; + top: -53px; + left: -1px; + + width: 100%; + height: 48px; + + border-radius: 20px; + border: 1px solid #f60909; +} + + + +.form__input{ + width: 100%; + + border-radius: 20px; + padding: 12px 16px; + border: 1px solid var(--text-black); + + background: var(--background-white); + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + + color: var(--text-black); +} +.form__input::placeholder{ + color: var(--text-grey); +} +.form__input--textarea{ + height: 96px; + resize: none; +} +.form__input--center{ + text-align: center; +} +.form__button{ + width: 100%; + + padding: 12px 24px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + border-radius: 16px; + border: none; + background: var(--background-black); + + cursor: pointer; + + transition: background-color .2s ease-out; +} +.form__button:hover{ + opacity: .8; +} + + +.modalProfile{ + position: fixed; + top: 0; + left: 0; + + padding: 20px; + + width: 100vw; + height: 100vh; + + background: rgba(0, 0, 0, 0.25); + + z-index: 200; + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; + + display: flex; + justify-content: center; + align-items: center; + + overflow-y: auto; + padding-top: 30px; + padding-bottom: 30px; +} +.modalProfile.active{ + opacity: 1; + pointer-events: auto; +} + +.popup-wrap{ + width: 100%; + height: 100%; + display: flex; +} + +.modal-form{ + margin: auto; +} + + +.label-name{ + display: block; + margin-bottom: 6px; +} + +.woocommerce-billing-fields__field-wrapper{ + margin-top: 2rem; +} + +.form__input--textarea{ + height: 96px; + resize: none; +} + +.remote-control__item { + display: none; +} + +.remote-control__item.active { + display: block; +} + +.order-contacts__delivery{ + padding-bottom: 3rem; +} + + +/* breadcrumbs */ +.breadcrumbs{ + margin: 24px; + padding-top: 30px; + display: flex; + align-items: center; +} +.breadcrumbs__item{ + display: block; + + padding: 0px 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-6); + + text-decoration: none; + + position: relative; +} +.breadcrumbs__item:first-child{ + padding-left: 0; +} +.breadcrumbs__item:nth-child(n+2)::before{ + content: ''; + + position: absolute; + top: -2px; + left: -12px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-breadcrumbs.svg); + background-repeat: no-repeat; + background-size: contain; +} +/* breadcrumbs */ + +.home { + padding: 60px 0 68px; +} + +.wc-block-components-checkout-place-order-button{ + background: var(--gradient-turquoise); + border: none; + transition: opacity .2s ease-out; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + border-radius: 20px; +} + +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=email], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=number], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=password], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=tel], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=text], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=url], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=email], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=number], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=password], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=tel], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=text], +.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type=url], +.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select{ + border-radius: 10px; } - /* button */ \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css index e04ef1d..d95c63b 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css +++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-full.css @@ -1,32 +1,3 @@ -@font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Regular.ttf'); - font-weight: 400; -} - -@font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Medium.ttf'); - font-weight: 500; -} - -@font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-SemiBold.ttf'); - font-weight: 600; -} - -@font-face { - font-family: "Craftwork Grotest"; - src: url('../fonts/Craftwork_Grotesk_Trial/CraftworkGrotesk-Bold.ttf'); - font-weight: 700; -} - -@font-face { - font-family: "Abel"; - src: url('../fonts/Abel/Abel-Regular.ttf'); - font-weight: 400; -} * { padding: 0; @@ -129,15 +100,9 @@ input[type=number]::-webkit-outer-spin-button { --background: #F4F1F0; --placeholder: #999999; /* Fonts */ - --font-craftwork: 'Craftwork Grotest', sans-serif; --font-abel: 'Abel', serif; } -body { - background: var(--radial); - font-family: var(--font-craftwork); - font-weight: 500; -} body.bg-white { background: var(--main_white); @@ -152,6 +117,10 @@ body.bg-white { } } +body.bg-white { + background: var(--main_white); +} + .form-inp { height: 48px; width: 100%; @@ -199,1375 +168,3 @@ body.bg-white { /* Основные стили для компьютера */ -/* Header */ -.header { - background: var(--main_white); - border-bottom: 1px solid var(--interface_title); - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 4; -} - -.header-container { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 0; -} - -.header-bars { - display: none; -} - -.header-logo { - display: flex; - align-items: center; - gap: 8px; -} - -.header-logo span { - color: var(---main_black); - font-size: 20px; - text-transform: uppercase; -} - -.header-navs { - display: flex; - align-items: center; - gap: 24px; -} - -.header-navs__link { - padding: 8px 12px; - font-size: 16px; - font-weight: bold; - text-transform: uppercase; - line-height: 20px; -} - -.header-accordion {} - -.header-accordion__btn { - display: flex; - align-items: center; - gap: 4px; - padding: 8px 12px; - border-radius: 24px; - background: var(--accent-2); - cursor: pointer; - user-select: none; - font-size: 16px; - font-weight: bold; - line-height: 20px; - color: var(---main_black); -} - -.header-right { - display: flex; - align-items: center; - gap: 8px; -} - -.header-lang__btn { - display: flex; - align-items: center; - cursor: pointer; - user-select: none; - gap: 4px; - padding: 12px 15px; - color: var(---main_black); - font-size: 16px; - font-weight: bold; - line-height: 20px; -} - -/* Header end */ - - -/* Home */ -.home { - padding: 60px 0 68px; -} - -.home-title { - font-size: 82px; - font-weight: bold; - line-height: 96px; - color: var(--main_white); - margin-bottom: 16px; -} - -.home-description { - font-size: 32px; - font-weight: bold; - line-height: 40px; - color: var(--main_white); - text-transform: uppercase; - margin-bottom: 68px; -} - -/* Home end */ - - -/* Anons */ -.anons { - background: var(--main_white); - border-radius: 60px; - padding: 51px 0; -} - -.anons-theme__title { - color: var(--main_black); - font-size: 24px; - font-weight: bold; - line-height: 28px; - text-transform: uppercase; - margin-bottom: 20px; -} - -.anons-theme { - margin-bottom: 60px; -} - -.anons-theme ul { - max-width: 1022px; - display: flex; - flex-wrap: wrap; - gap: 12px; -} - -.anons-theme ul a { - font-size: 20px; - font-weight: 600; - line-height: 24px; - color: var(--main_black); - padding: 4px 24px; - border: 1px solid #000; - border-radius: 20px; -} - -.anons-theme ul a:hover, -.anons-theme ul a.active { - background: var(--main_black); - color: var(--main_white); -} - -.anons-best { - margin-bottom: 60px; -} - -.anons-best__title { - font-size: 36px; - line-height: 40px; - font-weight: bold; - color: var(--main_black); - margin-bottom: 20px; -} - -.anons-best__card-wrap { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 24px; -} - -.anons-best__card { - padding-top: 293px; - border-radius: 48px; - overflow: hidden; - position: relative; - z-index: 1; - overflow: hidden; -} - -.anons-best__card.light { - padding-top: 0; - border-radius: 0; -} - -.anons-best__card .main-img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 360px; - z-index: -1; - overflow: hidden; - border-radius: 30px; -} -.anons-best__card:hover .main-img img{ - height: 120%; - width: 120%; -} -.anons-best__card .main-img img { - width: 100%; - height: 100%; - object-fit: cover; - max-width: none; - transition: all .5s; -} - -.anons-best__card.light .main-img { - position: static; - height: 265px; -} -.anons-best__card.light .main-img img { - border-radius: 30px; -} - -.anons-best__card-alerts { - position: absolute; - top: 21px; - left: 17px; - width: calc(100% - 34px); - display: flex; - flex-wrap: wrap; - gap: 7px; - z-index: 1; -} - -.anons-best__card-alerts li { - padding: 6px 8px; - font-size: 16px; - line-height: 20px; - font-weight: 500; - color: var(--background); - background: var(--main_black); - border-radius: 30px; -} - -.anons-best__card-body { - background: var(--accent-1); - padding: 30px 17px 22px; - border-radius: 48px 48px 0 0; - color: var(--main_white); - position: relative; - height: 100%; -} - -.anons-best__card.light .anons-best__card-body { - background: transparent; - color: var(--main_black); - padding: 12px 0 34px; -} - -.anons-best__card-body__title { - font-size: 28px; - font-weight: bold; - line-height: 32px; - text-transform: uppercase; - margin-bottom: 14px; -} - -.anons-best__card.light .anons-best__card-body__title { - font-size: 26px; -} - -.anons-best__card-body__datas { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 6px 10px; - max-width: 264px; -} - -.anons-best__card.light .anons-best__card-body__datas { - color: var(--placeholder); -} - -.anons-best__card-body__datas p { - font-size: 14px; - line-height: 16px; - font-weight: 500; -} - -.anons-best__card-body__datas ul { - display: flex; - align-items: center; - gap: 10px; -} - -.anons-best__card-body__datas ul li { - display: flex; - align-items: center; - gap: 4px; - font-size: 14px; - line-height: 16px; - font-weight: 500; -} - -.anons-best__card-body__datas ul .logo img { - width: 24px; - height: 24px; - border-radius: 50%; - object-fit: cover; -} - -.anons-article { - margin-bottom: 40px; -} - -.anons-article__title { - font-size: 36px; - line-height: 40px; - font-weight: bold; - color: var(--main_black); - margin-bottom: 20px; -} - -.anons-article__card-wrap { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 40px 25px; -} - -.anons-article__more-link { - display: flex; - align-items: center; - justify-content: center; -} - -.anons-article__more-link{ - background: var(--accent-3); - color: var(--main_white); - border-radius: 20px; - border: 1px solid var(--main_white); - padding: 16px 24px; - font-size: 20px; - font-weight: 600; - line-height: 24px; - text-transform: uppercase; - margin-right: auto; - margin-left: auto; - width: max-content; -} -/* Anons end */ - -/* Editorial */ -.editorial { - padding-bottom: 68px; -} - -.editorial-head { - position: relative; - z-index: 1; - max-width: 841px; - margin-bottom: 37px; -} - -.editorial-head__title { - font-size: 82px; - line-height: 96px; - font-weight: bold; - color: var(--main_white); - text-transform: uppercase; -} - -.editorial-head__img { - position: absolute; - z-index: -1; - top: -14px; - right: -20px; - width: 221px; -} - -.editorial-head__star { - position: absolute; - top: 8.26px; - right: -13.5px; - transform: translateX(100%); - width: 87.5px; -} - -.editorial-card__wrap { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 31px 25px; - position: relative; - z-index: 1; -} - -.editorial-card { - border: 2px solid var(--creme-white); - border-radius: 30px; - display: flex; - align-items: stretch; - overflow: hidden; - background: var(--linear); - backdrop-filter: blur(28px); -} - -.editorial-card .main-img { - min-height: 282px; - width: 207px; - border-radius: 29px; - overflow: hidden; - flex-shrink: 0; -} - -.editorial-card:hover .main-img img{ - width: 120%; - height: 120%; -} - -.editorial-card .main-img img { - width: 100%; - height: 100%; - object-fit: cover; - transition: all .5s; -} - -.editorial-card__content { - padding: 42px 19px 19px 35px; -} - -.editorial-card__content-alerts { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 7px; - margin-bottom: 17px; -} - -.editorial-card__content-alerts a { - background: var(--main_black); - border-radius: 16px; - padding: 6px 8px; - font-size: 16px; - font-weight: 500; - line-height: 20px; - color: var(--background); -} - -.editorial-card__content-title { - font-size: 28px; - font-weight: bold; - line-height: 32px; - color: var(--grey-black); - text-transform: uppercase; - margin-bottom: 17px; -} - -.editorial-card__content-data { - display: flex; - flex-wrap: wrap; - gap: 5px 16px; - color: var(--interface_hover); - font-size: 16px; - font-weight: 500; - line-height: 20px; -} - -.editorial-card__content-data ul { - display: flex; - align-items: center; - gap: 16px; -} - -.editorial-card__content-data li { - display: flex; - align-items: center; - gap: 5px; -} - -.editorial-card__content-data .logo img { - width: 24px; - height: 24px; - border-radius: 50%; - object-fit: cover; -} -/* Editorial end */ - -/* Footer */ -.footer { - background: var(--main_black); - padding: 40px 0 38px; - color: var(--main_white); -} - -.footer-top { - display: flex; - align-items: stretch; - justify-content: space-between; - gap: 48px; -} - -.footer-top .logo { - display: flex; - align-items: center; - gap: 10px; - font-size: 20px; - font-weight: 500; - text-transform: uppercase; - background: var(--accent-1); - color: transparent; - -webkit-background-clip: text; - background-clip: text; - margin-bottom: 24px; -} - -.footer-content__address { - font-size: 24px; - font-weight: 500; - line-height: 32px; - margin-bottom: 32px; -} - -.footer-content { - width: 100%; -} - -.footer-content ul { - display: flex; - flex-direction: column; - gap: 24px; -} - -.footer-content ul li { - display: flex; - flex-direction: column; - gap: 4px; -} - -.footer-content ul p { - font-size: 16px; - font-weight: bold; - line-height: 20px; -} - -.footer-content ul a { - font-size: 24px; - font-weight: 500; - line-height: 32px; -} - -.footer-content__wrap { - display: flex; - align-items: flex-end; - justify-content: space-between; - width: 100%; -} - -.footer-top__link { - display: flex; - flex-direction: column; - gap: 24px; -} - -.footer-top__link .link-black { - padding: 7px 15px; - color: var(--main_white); - font-size: 24px; - line-height: 32px; - font-weight: 500; - white-space: nowrap; - border: 1px solid var(--main_white); - border-radius: 24px; -} - -.footer-top__link .link-white { - width: 100%; - text-align: center; - background: var(--main_white); - color: var(--main_black); - font-size: 20px; - font-weight: 600; - line-height: 24px; - padding: 12px; - border-radius: 20px; -} - -.footer-contact { - width: 364px; - flex-shrink: 0; - background: var(--accent-1); - border-radius: 24px; - padding: 24px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.footer-contact__title { - color: var(--main_black); - font-size: 24px; - font-weight: 500; - line-height: 32px; -} - -.footer-contact__submit { - width: 100%; - text-align: center; - height: 48px; - border-radius: 16px; - background: var(--main_black); - font-size: 20px; - font-weight: 600; - line-height: 24px; - color: var(--main_white); -} - -.footer-bottom { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 17px; - margin-top: 19px; - border-top: 1px solid var(--main_white); -} - -.footer-network { - display: flex; - align-items: center; - gap: 32px; -} - -.footer-bottom a { - font-size: 16px; - line-height: 20px; - font-weight: 500; - color: var(--main_white); - opacity: 0.6; - text-decoration: underline; -} -/* Footer end */ - -/* Breadcrumb */ -.breadcrumb { - padding: 68px 0 24px; -} - -.breadcrumb .container { - color: var(--main_white); - font-size: 14px; - font-weight: 500; - line-height: 16px; -} - -.breadcrumb a { - display: inline; -} -/* Breadcrumb end */ - -/* Article home */ -.article-home { - padding-bottom: 36px; -} - -.article-home h1 { - font-size: 64px; - font-weight: bold; - line-height: 120%; - color: var(--main_white); - margin-bottom: 17px; - text-transform: uppercase; -} - -.article-home__data { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px 24px; - margin-bottom: 17px; -} - -.article-home__data-alerts { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 8px; -} - -.article-home__data-alerts a { - font-size: 16px; - line-height: 20px; - font-weight: 500; - color: var(--background); - padding: 6px 8px; - border-radius: 20px; - background: var(--main_black); -} - -.article-home__data p { - font-size: 14px; - line-height: 16px; - font-weight: 500; - color: var(--main_white); - display: flex; - align-items: center; - gap: 4px; -} - -.article-home__data .user { - display: flex; - align-items: center; - gap: 7px; - font-size: 14px; - line-height: 16px; - font-weight: 500; - color: var(--main_white); -} - -.article-home__data .user img { - width: 32px; - height: 32px; - border-radius: 50px; - object-fit: cover; -} - -.article-home__card { - width: 100%; - aspect-ratio: 1223/500; -} - -.article-home__card img { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 64px; -} -@media (max-width: 1200px) { - .editorial-card__wrap { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } -} -@media (max-width: 1200px) { - .header-navs { - gap: 12px; - } - - .header-navs__link { - font-size: 14px; - } - - .header-right { - gap: 4px; - } - - .anons-article__card-wrap { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .editorial-card__wrap { - grid-template-columns: repeat(1, minmax(0, 1fr)); - } - - .footer-top { - flex-direction: column; - align-items: center; - text-align: center; - } - - .footer-content { - display: flex; - flex-direction: column; - align-items: center; - } - - .footer-content__wrap { - flex-direction: column; - align-items: center; - gap: 48px; - } - - .footer-bottom { - flex-direction: column; - gap: 24px; - } -} -@media (min-width: 992px) { - .article-home.position-1 .container { - position: relative; - z-index: 1; - } - - .article-home.position-1 .article-home__card { - width: calc(50% - 12px); - position: absolute; - top: 0; - right: 0; - height: 100%; - z-index: -1; - } - - .article-home.position-1 h1 { - width: calc(50% - 12px); - } - - .article-home.position-1 .article-home__data { - max-width: 406px; - } - - .article-home.position-2 .container { - position: relative; - z-index: 1; - height: 695px; - padding: 45px 42px; - } - - .article-home.position-2 .article-home__card { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: 100%; - height: 100%; - overflow: hidden; - } - - .article-home.position-2 .article-home__card::before { - content: ""; - width: 100%; - height: 100%; - background: linear-gradient(282.92deg, rgba(255, 255, 255, 0) 50.1%, #FFFFFF 77.26%); - position: absolute; - top: 0; - left: 0; - border-radius: 50px; - } - - .article-home.position-2 h1 { - color: var(--main_black); - max-width: 838px; - } - - .article-home.position-2 .article-home__data { - width: 304px; - } - - .article-home.position-2 .article-home__data p { - color: var(--main_black); - } - - .article-home.position-2 .article-home__data p img { - filter: brightness(0) invert(0) - } - - .article-home.position-2 .article-home__data .user { - color: var(--main_black); - } -} - -.article-content { - background: var(--main_white); - border-radius: 64px; - max-width: 1232px; - margin: 0 auto; - padding: 64px 0 116px; -} - -.article-container { - max-width: 1022px; - margin: 0 auto; - - @media (max-width: 1054px) { - max-width: calc(100% - 32px); - } -} -/* Article home end */ - - - -/* comment */ -.comment { - border-top: 1px solid var(--placeholder); - padding-top: 48px; - margin-top: 100px; -} - -.comment .comment-btn { - display: flex; - align-items: center; - justify-content: center; - gap: 12px; -} - -.comment .comment-btn button { - padding: 12px 24px; - border-radius: 20px; - display: flex; - align-items: center; - gap: 8px; - background: var(--btn-bg); - font-size: 20px; - font-weight: 600; - line-height: 24px; - font-family: var(--font-craftwork); -} - -.comment .comment-btn span { - font-family: var(--font-craftwork); - font-size: 20px; - font-weight: 500; - line-height: 24px; -} - -.comment .comment-title { - font-family: var(--font-craftwork); - font-size: 24px; - font-weight: 700; - line-height: 28px; - color: var(--grey-black); - margin: 48px 0 0 0; -} - -.comment .comment-in { - max-width: 816px; - margin: 0 auto; -} - -.comment .comment-block { - margin-top: 40px; - padding: 28px 48px; - border-radius: 24px; - background: var(--grey-f5); -} - -.comment .comment-block p { - font-size: 20px; - font-weight: 500; - line-height: 24px; - color: var(--grey-black); -} - -.comment .comment-block p a { - color: var(--green-dark); - text-decoration: underline; -} - -.comment .comment-user { - display: flex; - align-items: center; - gap: 12px; -} - -.comment .comment-user img { - width: 48px; - height: 48px; - border-radius: 50%; - flex-shrink: 0; -} - -.comment .comment-user h6 { - font-size: 20px; - font-weight: 700; - line-height: 24px; - color: var(---main_black); - margin-bottom: 5px; -} - -.comment .comment-user span { - font-size: 14px; - font-weight: 500; - line-height: 16px; - color: var(--interface_hover); -} - -.comment .comment-block p { - margin: 15px 0; - font-size: 20px; - font-weight: 500; - line-height: 24px; - color: var(---main_black); -} - -.comment .comment-btns { - display: flex; - align-items: center; - gap: 33px; -} - -.comment .comment-btns button { - font-size: 14px; - font-weight: 500; - line-height: 16px; - color: var(--interface_hover); - display: flex; - align-items: center; - gap: 5px; -} - -.comment .answer-btn { - margin-bottom: 10px; - font-family: var(--font-craftwork); - font-size: 16px; - font-weight: 700; - line-height: 20px; - color: var(--green-dark); - display: flex; - align-items: center; - gap: 8px; - padding: 6px 24px; - text-transform: lowercase; -} - -.comment .answer-btn svg { - transition: .2s ease; -} - -.comment .answer-btn svg.active { - transform: rotate(180deg); -} - -.comment .answer-block { - display: none; - margin: 0 0 0 54px; -} - -.comment .answer-block.active { - display: block; -} - -.comment .comment-block_text { - margin: 0 !important; -} - -.other-home { - padding-top: 36px !important; -} -/* comment */ - -/* Стили для планшетов */ -@media only screen and (max-width: 992px) { - .header-navs { - display: none; - } - - .header-container { - height: 56px; - padding: 0; - } - - .header-bars { - display: flex; - align-items: center; - justify-content: center; - } - - .header-logo { - font-size: 16px; - line-height: 20px; - gap: 8px; - } - - .header-logo img { - width: 31px; - flex-shrink: 0; - } - - .header-lang { - display: none; - } - - .home { - padding: 22px 0 36px; - } - - .home-title { - font-size: 32px; - line-height: 38px; - margin-bottom: 36px; - } - - .home-description { - font-size: 20px; - line-height: 24px; - margin-bottom: 36px; - } - - - .anons { - border-radius: 24px; - } - - .anons-article__title { - font-size: 26px; - line-height: 32px; - } - - .anons-theme { - margin-bottom: 60px; - } - - .anons-theme__title { - margin-bottom: 20px; - font-size: 20px; - line-height: 24px; - } - - .anons-theme ul { - gap: 12px; - } - - .anons-theme ul a { - font-size: 16px; - line-height: 20px; - padding: 6px 24px; - } - - .anons-best__card-wrap { - grid-template-columns: repeat(1, minmax(0, 1fr)); - gap: 24px; - } - - .anons-article__card-wrap { - grid-template-columns: repeat(1, minmax(0, 1fr)); - gap: 20px; - } - - - - .editorial { - padding-bottom: 36px; - } - - .editorial-head { - margin-bottom: 36px; - max-width: 313px; - } - - .editorial-head__title { - font-size: 32px; - line-height: 38px; - } - - .editorial-head__img { - width: 100px; - top: -14px; - right: -22.5px; - } - - .editorial-head__star { - display: none; - } - - .editorial-card__wrap { - gap: 31px; - } - - .breadcrumb { - padding: 22px 0 15px; - } - - .article-home { - padding-bottom: 36px; - } - - .article-home .container { - display: flex; - flex-direction: column; - } - - .article-home h1 { - order: 1; - font-size: 32px; - line-height: 38px; - margin-bottom: 15px; - } - - .article-home__card { - order: 2; - - } - - .article-home__card img { - border-radius: 32px; - } - - .article-home__data { - gap: 8px 16px; - order: 3; - margin: 15px 0 0; - } - - .article-home__data-alerts { - gap: 16px; - } - - .article-home__data-alerts a { - padding: 6px 8px; - } - - .article-content { - padding: 48px 0; - border-radius: 64px; - } - - .comment .comment-block { - padding: 20px 24px; - margin-top: 28px; - } - - .comment .comment-title { - padding-bottom: 20px; - } - - .comment .answer-block { - margin: 10px 0 0 42px; - } - - .comment .comment-user h6 { - font-size: 16px; - line-height: 24px; - } - - .comment .comment-block p { - font-size: 16px; - line-height: 24px; - } - - .comment .comment-btns { - gap: 14px; - } - - .comment .comment-btns button { - font-size: 12px; - line-height: 16px; - } - - .comment .comment-user span { - font-size: 12px; - line-height: 16px; - } - - -} -/* Стили для ультрашироких экранов */ -@media only screen and (min-width: 1400px) { - -} - -/* Стили для мобильных устройств */ -@media only screen and (max-width: 576px) { - .anons-best__title { - font-size: 26px; - line-height: 32px; - margin-bottom: 12px; - } - - .anons-best__card { - padding-top: 205px; - } - - .anons-best__card .main-img { - height: 300px; - } - - .anons-best__card-body { - padding: 20px 17px; - } - - .anons-best__card-body__title { - font-size: 20px; - line-height: 24px; - margin-bottom: 16px; - } - - .anons-best__card.light .main-img { - height: 197px; - } - - .anons-best__card.light .anons-best__card-body__title { - font-size: 20px; - line-height: 24px; - } - - .editorial-card { - flex-direction: column; - border-radius: 30px; - position: relative; - } - - .editorial-card .main-img { - width: 100%; - height: 203px; - } - - .editorial-card__content { - padding: 17px 13px 24px; - } - - .editorial-card__content-alerts { - position: absolute; - top: 13px; - left: 8px; - width: calc(100% - 16px); - } - - .editorial-card__content-title { - font-size: 20px; - line-height: 24px; - margin-bottom: 17px; - } - - .editorial-card__content-data { - gap: 5px 16px; - } - - .footer { - padding: 24px 0 58px; - } - - .footer-top { - align-items: flex-start; - text-align: left; - gap: 24px; - } - - .footer-content__wrap { - align-items: flex-start; - gap: 24px; - } - - .footer-content { - align-items: flex-start; - } - - .footer-content .logo { - font-size: 20px; - margin-bottom: 24px; - } - - .footer-content__address { - font-size: 18px; - line-height: 24px; - margin-bottom: 32px; - } - - .footer-content ul { - gap: 24px; - } - - .footer-content ul p { - font-size: 16px; - line-height: 20px; - } - - .footer-content ul a { - font-size: 24px; - line-height: 32px; - } - - .footer-top__link .link-white { - display: none; - } - - .footer-contact { - width: 100%; - padding: 16px; - border-radius: 24px; - } - - .footer-contact__title { - color: var(--main_white); - } - - .footer-bottom { - margin-top: 0; - padding-top: 24px; - border: 0; - align-items: flex-start; - gap: 17px; - } -} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-normalize.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-normalize.css index 7274e0c..ccd51b7 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-normalize.css +++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-normalize.css @@ -16,10 +16,6 @@ img { max-width: 100%; } -span, -label { - display: inline-block; -} html { scroll-behavior: smooth; @@ -69,4 +65,12 @@ input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; margin: 0; +} + +main.wrapper{ + padding-top: 40px; +} + +.checkout-inline-error-message{ + display: none; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff new file mode 100644 index 0000000..e06b43d Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 new file mode 100644 index 0000000..a1a3337 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff new file mode 100644 index 0000000..d922e47 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 new file mode 100644 index 0000000..0e03542 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff new file mode 100644 index 0000000..cae3279 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 new file mode 100644 index 0000000..5bcac6c Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff new file mode 100644 index 0000000..a3b3cb0 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 new file mode 100644 index 0000000..a28684e Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-bold.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-bold.ttf new file mode 100644 index 0000000..2068cf4 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-bold.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-medium.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-medium.ttf new file mode 100644 index 0000000..5006ac0 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-medium.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-regular.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-regular.ttf new file mode 100644 index 0000000..ef2dbf4 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-regular.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf new file mode 100644 index 0000000..e866547 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/craftwork/craftwork-grotesk-semi-bold.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.ttf new file mode 100644 index 0000000..02f3aa3 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff new file mode 100644 index 0000000..7e32bd6 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff2 new file mode 100644 index 0000000..2659c5e Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-demi.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.ttf new file mode 100644 index 0000000..ef964ec Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff new file mode 100644 index 0000000..ed3b1ac Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff2 new file mode 100644 index 0000000..cb6110c Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/din-2014/din-2014-rounded-regular.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff new file mode 100644 index 0000000..561ec78 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff2 new file mode 100644 index 0000000..3e9c1c7 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Medium.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff new file mode 100644 index 0000000..bf7bb7c Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff2 b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff2 new file mode 100644 index 0000000..3374d82 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/Roboto-Regular.woff2 differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-medium.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-medium.ttf new file mode 100644 index 0000000..8798341 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-medium.ttf differ diff --git a/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-regular.ttf b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-regular.ttf new file mode 100644 index 0000000..7d9a6c4 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/layout/assets/fonts/roboto/roboto-regular.ttf differ diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs-black.svg b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/arrow-breadcrumbs-black.svg similarity index 100% rename from wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs-black.svg rename to wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/arrow-breadcrumbs-black.svg diff --git a/wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs.svg b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/arrow-breadcrumbs.svg similarity index 100% rename from wp-content/themes/cosmopet/woocommerce/assets/img/svg/main/arrow-breadcrumbs.svg rename to wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/arrow-breadcrumbs.svg diff --git a/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg new file mode 100644 index 0000000..efa46c8 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js b/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js new file mode 100644 index 0000000..d76ad0b --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js @@ -0,0 +1,166 @@ +// 'use strict'; + +// // Глобальные переменные для управления состоянием +// let currentModalContent = null; + +// function modalOpen(buttonElement, contentElement) { +// const modal = document.querySelector('.modal'); +// const aside = document.querySelector('.modal__aside'); +// const elements = document.querySelectorAll(buttonElement); +// const device = window.screen.width; + +// // Обработчик закрытия по клику на оверлей +// modal.addEventListener('click', function(e) { +// if (e.target === modal && currentModalContent) { +// closeModal(currentModalContent); +// } +// }); + +// // Обработчик закрытия по Escape +// document.addEventListener('keydown', function(e) { +// if (e.key === 'Escape' && currentModalContent) { +// closeModal(currentModalContent); +// } +// }); + +// elements.forEach(e => { +// e.addEventListener('click', function() { +// const content = document.querySelector(contentElement); +// currentModalContent = content; + +// // Сброс стилей перед открытием +// resetModalStyles(); + +// modal.classList.add('active'); +// content.classList.add('active'); + +// const width = content.clientWidth; + +// setTimeout(() => { +// if (device <= 720) { +// aside.style.width = `${device}px`; +// } else { +// aside.style.width = `${width}px`; +// } +// content.style.opacity = '1'; +// content.style.filter = 'blur(0)'; +// }, 10); +// }); +// }); +// } + +// function modalClose(buttonElement) { +// const elements = document.querySelectorAll(buttonElement); + +// elements.forEach(e => { +// e.addEventListener('click', function() { +// if (currentModalContent) { +// closeModal(currentModalContent); +// } +// }); +// }); +// } + +// function closeModal(contentElement) { +// const modal = document.querySelector('.modal'); +// const aside = document.querySelector('.modal__aside'); + +// aside.style.width = '0'; +// contentElement.style.opacity = '0'; +// contentElement.style.filter = 'blur(10px)'; + +// setTimeout(() => { +// contentElement.classList.remove('active'); +// modal.classList.remove('active'); +// currentModalContent = null; +// }, 300); +// } + +// function resetModalStyles() { +// const allModals = document.querySelectorAll('.modal__item'); + +// allModals.forEach(modal => { +// modal.style.opacity = ''; +// modal.style.filter = ''; +// modal.classList.remove('active'); +// }); + +// document.querySelector('.modal__aside').style.width = ''; +// } +// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { +// let elements = document.querySelectorAll(mainElement); + +// elements.forEach(e => { +// let thisMainElement = e, +// thisButtonElement = e.querySelector(buttonElement), +// thisHeightElement = e.querySelector(heightElement), +// thisContentElement = e.querySelector(contentElement); + +// thisButtonElement.onclick = function (e) { +// let height = thisHeightElement.clientHeight; + +// if (close == true && !thisMainElement.classList.contains('active')) { +// elements.forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// e.querySelector(contentElement).style.height = null +// } +// }) +// } + +// if (!thisMainElement.classList.contains('active')) { +// thisContentElement.style.height = `${height}px`; +// thisMainElement.classList.add('active'); +// }else{ +// thisContentElement.style.height = null; +// thisMainElement.classList.remove('active'); +// } +// } + +// }); +// } + +// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { +// let thisButton = document.querySelector(button), +// thisContent = document.querySelector(content), +// thisRemoveBlock = document.querySelector(removeBlock) || '', +// 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'); + +// if (removeBlock) { +// thisRemoveBlock.classList.remove(removeClass); +// } +// }else{ +// thisContent.style.height = null; +// thisContent.classList .remove('open'); + +// if (removeBlock) { +// if (window.scrollY <= 25) { +// thisRemoveBlock.classList.add(removeClass); +// } +// } +// } +// } +// } + +// function modalFormOpen(formOrNotification) { +// let buttons = document.querySelectorAll(formOrNotification), +// modal = document.querySelector('.modal'); + +// buttons.forEach(button => { +// button.onclick = function (eventButton) { +// let classOpenForm = button.dataset.form, +// form = modal.querySelector(`.${classOpenForm}`); + +// form.classList.add('active'); +// modal.classList.add('active'); +// } +// }) +// } +// // function \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-cabinet.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-cabinet.js new file mode 100644 index 0000000..1b485f7 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-cabinet.js @@ -0,0 +1,67 @@ +// 'use strict'; + +// import * as fun from './_gp-function.js'; + +// let widthPhoneCabinet = 1200; + +// fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); +// fun.modalFormOpen('.form-open'); + +// fun.closeModalForm('.modal-form__close'); +// fun.closeModalForm('.modal-form__button-close'); + +// controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); + +// function controlCabinet(buttons, main, minWidth){ +// let thisWidth = window.innerWidth; +// let thisMain = document.querySelector(main); + +// let thisButtons = document.querySelectorAll(buttons); + +// thisButtons.forEach(e => { +// e.onclick = function (element){ +// let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); +// let newHeight = thisContent.clientHeight + 48; +// let thisButton = element.target; + +// thisMain.style.height = `${newHeight}px` + +// if (!thisContent.classList.contains('active')) { +// thisMain.querySelector('.active').classList.remove('active'); +// thisContent.classList.add('active'); + +// setTimeout(() => { +// thisMain.style.height = 'auto'; + +// if (thisMain.querySelector('.hide')) { +// thisMain.querySelector('.hide').classList.remove('hide'); +// } + +// thisMain.querySelector('.active').classList.add('hide'); +// }, 200); +// } + +// thisButtons.forEach(e => { +// e.classList.remove('active'); +// }) +// thisButton.classList.add('active'); +// } +// }) + +// } + +// let modal = document.querySelector('.modal'); +// modal.onclick = function (eventModal) { +// let thisTarget = eventModal.target; + +// if (thisTarget.classList.contains('modal')) { +// thisTarget.classList.remove('active'); + +// if (!thisTarget.querySelector('.modal-map.active')) { +// thisTarget.querySelector('.modal-form.active').classList.remove('active'); +// }else{ +// thisTarget.querySelector('.modal-map.active').classList.remove('active'); +// } +// } +// } + diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-form.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-form.js new file mode 100644 index 0000000..9bfcdd9 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-form.js @@ -0,0 +1,284 @@ +'use strict'; + + +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); + +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { + let inputs = document.querySelectorAll(main); + + inputs.forEach(e => { + let thisMainFlag = e.querySelector(mainFlag), + thisMainCode = e.querySelector(mainCode), + thisInput = e.querySelector(input), + thisList = e.querySelector(list), + thisSelects = e.querySelectorAll(`.${selects}`), + thisSearchInput = e.querySelector(`.${searchInput}`); + + thisInput.onblur = function (input) { + if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { + thisList.classList.remove('active'); + } + } + + e.onclick = function (event) { + if (!event.target.classList.contains(searchInput)) { + if (thisList.classList.contains('active')) { + thisList.classList.remove('active'); + } + + thisInput.focus(); + thisList.classList.add('active'); + } + } + + thisSelects.forEach(e => { + let newIcon = e.querySelector(selectIcon), + newCode = e.querySelector(selectCode); + + e.onclick = function (event) { + event.preventDefault(); + thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; + thisMainCode.textContent = newCode.textContent; + + + setTimeout(() => { + thisList.classList.remove('active'); + }, 0); + } + + }) + }) +} + +if (document.querySelector('.form-input-phone__input')) { + checkPhone('.form-input-phone__input'); +} + +function checkPhone(input) { + document.querySelector(input).addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 4 || length == 8) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + }) +} + +inputTabs('.form-input__tabs', '.form-input-tabs__button'); +inputTabs('.modal-map__control', '.modal-map-control__item'); + +function inputTabs(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let buttons = main.querySelectorAll(button); + + buttons.forEach(button => { + button.onclick = function () { + if (button.classList.contains('active')) { + return ; + } + + main.querySelector('.active').classList.remove('active'); + + button.classList.add('active'); + + button.querySelector('input').click(); + } + }) + + }) +} + + +inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') + +function inputRadio(main ,item, textClass, input) { + let inputRadios = document.querySelectorAll(main); + + inputRadios.forEach(inputRadio => { + let items = inputRadio.querySelectorAll(item), + thisInput = inputRadio.querySelector(input); + + items.forEach(radio => { + let thisText = radio.querySelector(textClass).textContent; + + radio.onclick = function (event) { + event.preventDefault(); + + if (inputRadio.querySelector(`${item}.active`)) { + inputRadio.querySelector(`${item}.active`).classList.remove('active'); + } + thisInput.value = thisText; + radio.classList.add('active'); + } + }) + }) +} + +listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); + +function listInputRadio(main ,item, textClass, input, content, block) { + let listInputRadios = document.querySelectorAll(main); + + listInputRadios.forEach(listInputRadio => { + let thisInput = listInputRadio.querySelector(input), + items = listInputRadio.querySelectorAll(item), + thisContent = listInputRadio.querySelector(content), + thisBlock = listInputRadio.querySelector(block); + + thisInput.onclick = function () { + thisBlock.classList.add('active'); + thisBlock.style.height = '192px'; + } + + + thisInput.onblur = function(){ + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + }; + + items.forEach(item => { + item.onclick = function (event) { + event.preventDefault(); + let newText = item.querySelector(textClass).textContent; + + thisInput.value = newText; + + if (thisContent.querySelector('.active')) { + thisContent.querySelector('.active').classList.remove('active'); + } + + item.classList.add('active'); + } + }) + }) +} + +remoteControl('.form-input__remote-control', '.form-input-tabs__button'); +remoteControl('.modal-map__control', '.modal-map-control__item'); + +function remoteControl(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let subjectClass = main.dataset.content, + subject = document.querySelector(`.${subjectClass}`), + buttons = Array.from(main.querySelectorAll(button)); + + main.addEventListener('click', function (eventMain) { + setTimeout(() => { + let indexActive = buttons.findIndex((button, index) => { + if (button.classList.contains('active')) { + return true; + } + }); + if(subject.children[indexActive].classList.contains('active')){ + return ; + } + + subject.querySelector('.remote-control__item.active').classList.remove('active'); + subject.children[indexActive].classList.add('active'); + + let mandatorys = subject.querySelectorAll('.mandatory'); + + mandatorys.forEach(mandatory => { + if (mandatory.required) { + mandatory.required = false; + }else{ + mandatory.required = true; + } + }) + }, 0); + }) + }) +} + +formCheck('.modal-form__content', 'input[type=submit]'); +formCheck('.modal-map__form', 'input[type=submit]'); + +function formCheck(form, submit) { + let forms = document.querySelectorAll(form); + + forms.forEach(form => { + let thisSubmit = form.querySelector(submit); + + thisSubmit.onclick = function () { + form.classList.add('check') + } + + }) +} + +inputPhoneNoFlag('.no-flag'); + +function inputPhoneNoFlag(input){ + let inputs = document.querySelectorAll(input); + + inputs.forEach(input => { + let code = '+' + input.dataset.code; + + input.onfocus = function () { + if (input.value == '') { + input.value = code; + } + } + + input.addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (isNaN(event.data) || event.data == ' ') { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 3 || length == 7 || length == 11) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + + }) + }) +} + + +inputCheck('.form-agreement__check'); + +function inputCheck(className) { + let checks = document.querySelectorAll(className); + + checks.forEach(check => { + let square = check.querySelector('.form-agreement__square'), + input = check.querySelector('input'); + + square.onclick = function () { + input.click(); + } + }) +} + + +inputRead('.input-read'); +function inputRead(className) { + let inputs = document.querySelectorAll(className); + + inputs.forEach(input => { + input.addEventListener("input", function (event) { + let text = event.target.value; + + event.target.value = text.slice(0, -1); + }) + }) +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js new file mode 100644 index 0000000..a77fde9 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js @@ -0,0 +1,417 @@ +'use strict'; + +jQuery(document).ready(function ($) { + // OVERLAY + $('.product__main').on('click', '.open-overlay', function () { + let product = $(this).closest('.product__item'), + overlay = product.find('.product-item__overlay'); + + $('.product__item').find('.product-item__overlay').css('top', '100%'); + overlay.css('top', 0); + }) + // END OVERLAY + + $('.product__main').on('click', '.state__button', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'); + let price = $(this).data('product_price'); + let id = $(this).data('product_id'); + let qty = product.find('.counter__input').val(); + product.find('.product-item-overlay__price').html(price * qty + ' '); + product.find('.select__state').data('product_price', price).data('product_id', id).val($(this).text().trim()); + product.find('.state__block').removeClass('expanded').css('height', '0'); + + product.find('.add_to_cart_button').detach(); + product.find('.product-item-overlay__button').prepend('Добавить в корзину'); + }) + + $('.product__main').on('click', '.counter__button', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'); + let price = parseFloat(product.find('.select__state').data('product_price')); + + if (!price){ + price = parseFloat(product.find('.product-item__price p').html()); + } + let qty = product.find('.counter__input'); + + if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { + qty.val(parseInt(qty.val()) - 1); + } else { + if ($(this).hasClass('plus')) { + qty.val(parseInt(qty.val()) + 1); + } + } + product.find('.product-item-overlay__button a').attr('data-quantity', qty.val()) + product.find('.product-item-overlay__price').html(price * qty.val() + ' '); + }) + + $('.product__main').on('click', '.select__state', function(evt) { + evt.preventDefault(); + let product = $(this).closest('.product__item'), + listing = product.find('.state__block'); + + if (listing.hasClass('expanded')) { + listing.removeClass('expanded').css('height', '0'); + } else { + listing.addClass('expanded').css('height', 'auto'); + } + + product.find('.state__block').find('.state__button').removeClass('active'); + product.find('.state__button').each(function () { + if (product.find('.select__state').data('product_id') === $(this).data('product_id')) { + $(this).addClass('active'); + } + }) + }) + + + let page = 1; + + jQuery('body').on('click', '#load-more-products', function(e) { + e.preventDefault(); + page++; + + let category = $(this).data('category_id'); + let category_type = $(this).data('category_type'); + + $.ajax({ + type: 'POST', + url: '/wp-admin/admin-ajax.php', + dataType: 'html', + data: { + 'action' : 'get_products', + 'get_page' : page, + 'get_category' : category, + 'get_category_type' : category_type, + }, + success: function(data) { + // if($('
').html(data).find('.archive__item.ended').size() > 0) $('#load-more-products').parents('.cta').remove(); + // else $('#load-more-products').parents('.cta').show(); + + $('#load-more-products').detach(); + $('.product__main').append(data); + $('#load-more-products').prependTo('.product__footer'); + }, + error: function(data) { + console.log(data); + } + }); + }); + + $('.wpfMainWrapper').prepend('
'); + $('.wpfMainWrapper').find('.wpfFilterWrapper').appendTo($('.wpfFilters')); + + $('.wpfFilterWrapper').each(function () { + if ($(this).data('filter-type') === 'wpfPrice') { + $(this).find('.wpfFilterContent').append('
'); + $(this).find('.wpfPriceFilterRange').appendTo('.wpfExpandablePart'); + $(this).find('.wpfPriceInputs').appendTo('.wpfExpandablePart'); + + $(this).find('.wpfCurrencySymbol').detach(); + $(this).find('.wpfFilterDelimeter').detach(); + } + }); + + $('.wfpDescription').on('click', function () { + $(this).closest('.wpfFilterWrapper').toggleClass('expanded').find('.wpfCheckboxHier').slideToggle(); + $(this).parent().find('.wpfExpandablePart').slideToggle(); + }) + + +}) + + + + + + + + +// header +toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); +toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); +toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); +// header + +// modal +modalOpen('.button--filter', '.modal__filter'); +modalOpen('.basket-open', '.modal__basket'); +modalOpen('.open-to-know', '.modal__to-know'); +modalClose('.modal__close'); + +let modal = document.querySelector('.modal'); + +modal.onclick = function (event) { + let target = event.target; + if (target.classList.contains('modal')) { + closeAllModals(); + } +} + +// modal + +// toggle +toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); +// toggle + +// radio-button +// let radioButtons = document.querySelectorAll('.radio-button'); + +// radioButtons.forEach(radioBlock => { +// let buttons = radioBlock.querySelectorAll('.button'); + +// buttons.forEach(button => { +// let input = radioBlock.querySelector('.radio-button__input'); + +// button.onclick = function (e) { +// e.preventDefault(); + +// buttons.forEach(thisButton => { +// if (thisButton.classList.contains('active')) { +// thisButton.classList.remove('active') +// } +// }) + +// let text = button.textContent.trim(); + +// button.classList.toggle('active'); + +// input.value = text; +// } +// }) +// }) +// radio-button + + + + +// overlay +let products = document.querySelectorAll('.product__item'); + +products.forEach(productItem => { + let button = productItem.querySelector('.open-overlay'), + overlay = productItem.querySelector('.product-item__overlay'); + + + if (button) { + button.onclick = function (e) { + console.log('Открытие overlay для товара', productItem); + document.querySelectorAll('.product__item').forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + document.querySelectorAll('.product-item__overlay').forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + } + }); + + productItem.classList.toggle('active'); + overlay.classList.toggle('active'); + console.log('overlay toggled', overlay.classList.contains('active')); + } + } + +}) +// overlay + + +// checkbox +let checkbox = document.querySelectorAll('.checkbox'); + +checkbox.forEach(e => { + e.onclick = function (event) { + let input = e.querySelector('.checkbox__input'); + + if (!e.classList.contains('active')) { + input.checked = 1; + }else{ + input.checked = 0; + } + e.classList.toggle('active'); + } +}) +// checkbox + + +// function +function modalOpen(buttonElement, contentElement){ + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + elements = document.querySelectorAll(buttonElement), + device = window.screen.width, + body = document.querySelector('body'); + + elements.forEach(e => { + let thisContentElement = document.querySelector(contentElement); + + e.onclick = function () { + body.classList.add('overflow-hidden'); + modal.classList.add('active'); + thisContentElement.classList.add('active'); + + let width = thisContentElement.clientWidth; + + setTimeout(() => { + if (device <= 720) { + aside.style.width = `${device}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + }else{ + aside.style.width = `${width}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + } + }, 10); + } + }) +} + + +function closeAllModals() { + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + asideItems = document.querySelectorAll('.modal__item'), + body = document.querySelector('body'); + + aside.style.width = '0px'; + body.classList.remove('overflow-hidden'); + + asideItems.forEach(item => { + if (item.classList.contains('active')) { + item.style.opacity = 0; + item.style.filter = 'blur(10px)'; + } + }); + + setTimeout(() => { + asideItems.forEach(item => { + item.classList.remove('active'); + }); + modal.classList.remove('active'); + }, 300); +} + + +function modalClose(buttonElement) { + let elements = document.querySelectorAll(buttonElement); + elements.forEach(e => { + e.onclick = closeAllModals; + }); +} + +function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { + let elements = document.querySelectorAll(mainElement); + + elements.forEach(e => { + let thisMainElement = e, + thisButtonElement = e.querySelector(buttonElement), + thisHeightElement = e.querySelector(heightElement), + thisContentElement = e.querySelector(contentElement); + + thisButtonElement.onclick = function (e) { + let height = thisHeightElement.clientHeight; + + if (close == true && !thisMainElement.classList.contains('active')) { + elements.forEach(e => { + if (e.classList.contains('active')) { + e.classList.remove('active'); + e.querySelector(contentElement).style.height = null + } + }) + } + + if (!thisMainElement.classList.contains('active')) { + thisContentElement.style.height = `${height}px`; + thisMainElement.classList.add('active'); + }else{ + thisContentElement.style.height = null; + thisMainElement.classList.remove('active'); + } + } + + }); +} + +function toggleHeader(button, content, blockheight, removeBlock, removeClass) { + let thisButton = document.querySelector(button), + thisContent = document.querySelector(content), + thisRemoveBlock = document.querySelector(removeBlock) || '', + 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'); + + if (removeBlock) { + thisRemoveBlock.classList.remove(removeClass); + } + }else{ + thisContent.style.height = null; + thisContent.classList .remove('open'); + + if (removeBlock) { + if (window.scrollY <= 25) { + thisRemoveBlock.classList.add(removeClass); + } + } + } + } +} +// function + +// resize +window.addEventListener('resize', (e) => { + let width = window.screen.width; + + // media + modalOpen('.button--filter', '.modal__filter'); + modalOpen('.basket-open', '.modal__basket'); + modalOpen('.open-to-know', '.modal__to-know'); + modalClose('.modal__close'); + + let modalItem = document.querySelectorAll('.modal__item'); + + // if (width <= 720) { + modalItem.forEach(modal => { + if (modal.classList.contains('active')) { + let aside = document.querySelector('.modal__aside'); + + if (width <= 720) { + aside.style.width = `${width}px` + }else{ + let openAside = document.querySelector('.modal__item.active'), + newWidth = openAside.clientWidth; + + aside.style.width = `${newWidth}px` + } + } + }) + // } +}); +// resize + +// scroll + + +if (document.querySelector('.header').classList.contains('white')) { + window.addEventListener("scroll", function (e) { + let header = document.querySelector('.header'); + let scroll = window.scrollY; + + if (scroll >= 25) { + header.classList.remove('white') + }else{ + header.classList.add('white') + } + + }); +} +// scroll + + diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-product.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-product.js new file mode 100644 index 0000000..7b90d3c --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-product.js @@ -0,0 +1,110 @@ +// 'use strict'; + +// // slider gallery modal +// const gallery = new Swiper('.gallery__slider', { +// spaceBetween: 100, + +// pagination: { +// el: '.swiper-pagination', +// }, + +// navigation: { +// nextEl: '.swiper-button-next', +// prevEl: '.swiper-button-prev', +// }, + +// scrollbar: { +// el: '.swiper-scrollbar', +// }, +// }); + +// let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); + +// paginationButtons.forEach(button => { +// let index = button.dataset.countImg; + +// button.onclick = function () { +// gallery.slideTo(index); +// } +// }) + +// // open gallery +// let detailImage= document.querySelectorAll('.detail__image'); +// detailImage.forEach(button => { +// let index = button.dataset.countImg; + +// button.onclick = function () { +// gallery.slideTo(index); + +// document.querySelector('.gallery').classList.add('active'); +// } +// }) + +// // close gallery + +// document.querySelector('.gallery__close').onclick = function () { +// document.querySelector('.gallery').classList.remove('active'); +// } +// // slider gallery modal + +// // slider gallery main phone + +// // createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980); + +// const detailPhone = new Swiper('.detail__images-phone', { +// spaceBetween: 100, + +// pagination: { +// el: '.swiper-pagination', +// }, + +// navigation: { +// nextEl: '.swiper-button-next', +// prevEl: '.swiper-button-prev', +// }, + +// scrollbar: { +// el: '.swiper-scrollbar', +// }, +// }); + +// let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); + +// detailImagesPhones.forEach(button => { +// button.onclick = function (e) { +// let index = button.dataset.countImg; + +// gallery.slideTo(index); + +// document.querySelector('.gallery').classList.add('active'); +// } +// }) + +// // slider gallery main phone + +// // detail catalog +// const detailCatalot = new Swiper('.detail__catalot', { +// // Navigation arrows +// navigation: { +// nextEl: '.detail-catalot-control__button.next', +// prevEl: '.detail-catalot-control__button.prev', +// }, +// breakpoints: { +// 1600: { +// slidesPerView: 4, +// }, +// 1200: { +// slidesPerView: 3, +// }, +// 780: { +// slidesPerView: 2, +// }, +// 100: { +// slidesPerView: 1.1, +// spaceBetween: 20 +// }, +// } + + +// }); +// // detail catalog \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/module-controller.php b/wp-content/themes/cosmopet/modules/layout/module-controller.php index 3d14f53..08e4f89 100644 --- a/wp-content/themes/cosmopet/modules/layout/module-controller.php +++ b/wp-content/themes/cosmopet/modules/layout/module-controller.php @@ -2,4 +2,6 @@ include_module('header'); +include_component('shop', 'cart'); +include_module('shop'); include_module('footer'); diff --git a/wp-content/themes/cosmopet/modules/layout/module.template.twig b/wp-content/themes/cosmopet/modules/layout/module.template.twig deleted file mode 100644 index 33532d3..0000000 --- a/wp-content/themes/cosmopet/modules/layout/module.template.twig +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - - - - - - - - {{ function('wp_head') }} - - - - - - {% if current_lang == 'en' %} - {% include 'header/module.template_ENG.twig' %} - {% elseif current_lang == 'fr' %} - {% else %} - {% include 'header/module.template_RU.twig' %} - {% endif %} - - -
- {% block content %} - {% endblock %} -
- - {% include 'footer/module.template.twig' %} -
- {{ function('wp_footer') }} - - \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js b/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js new file mode 100644 index 0000000..e9daf1a --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js @@ -0,0 +1,361 @@ +jQuery(document).ready(function($) { + // Открытие/закрытие модалки + // $(document).on('click', '.cart-contents, .continue-shopping, .modal__close', function(e) { + // e.preventDefault(); + // $('#modal-basket').toggleClass('active'); + // }); + + // Обновление количества через input + $(document).on('change', '.counter__input', function() { + const key = $(this).data('key'); + const quantity = $(this).val(); + + if (quantity > 0) { + updateCart(key, quantity); + } else { + removeItem(key); + } + }); + + // Увеличение количества + + $(document).on('click', '.modal__basket .counter__button.plus', function(e) { + + e.preventDefault(); + const key = $(this).data('key'); + const input = $(this).siblings('.counter__input'); + const quantity = parseInt(input.val()) + 1; + input.val(quantity).trigger('change'); + }); + + // Уменьшение количества + + $(document).on('click', '.modal__basket .counter__button.minus', function(e) { + e.preventDefault(); + const key = $(this).data('key'); + const input = $(this).siblings('.counter__input'); + let quantity = parseInt(input.val()) - 1; + quantity = quantity < 1 ? 1 : quantity; + input.val(quantity).trigger('change'); + }); + + $(document).on('click', '.remove-item', function() { + const key = $(this).data('key'); + removeItem(key); + }); + // Удаление товара + function formatMoney(amount) { + if (typeof woocommerce_params !== 'undefined' && woocommerce_params.currency_format) { + const format = woocommerce_params.currency_format; + return format + .replace('%1$s', woocommerce_params.currency_symbol) + .replace('%2$s', parseFloat(amount).toFixed(2)); + } + return woocommerce_params.currency_symbol + parseFloat(amount).toFixed(2); + } + + // Хранилище временно удалённых товаров + const removedItemsStorageKey = 'woocommerce_removed_items'; + + + function restoreRemovedItems() { + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + + if (removedItems.length === 0) return; + + $('#modal-basket').addClass('loading'); + + // Создаем копию массива для работы + let itemsToRemove = [...removedItems]; + + function processNextItem() { + if (itemsToRemove.length === 0) { + // Все элементы обработаны + localStorage.removeItem(removedItemsStorageKey); + updateCartFragment(); + $('#modal-basket').removeClass('loading'); + return; + } + + const element = itemsToRemove.shift(); // Берем первый элемент + + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'remove_cart_item', + cart_item_key: element.key + }, + success: function(response) { + if (response.success) { + // Обновляем localStorage, удаляя только что обработанный элемент + const currentItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + const updatedItems = currentItems.filter(item => item.key !== element.key); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(updatedItems)); + } + // Обрабатываем следующий элемент + processNextItem(); + }, + error: function() { + // Продолжаем даже при ошибке + processNextItem(); + } + }); + } + + // Начинаем обработку + processNextItem(); +} + + // Инициализация при загрузке + restoreRemovedItems(); + + // Функция удаления товара с возможностью восстановления + function removeItem(key) { + const $item = $(`[data-key="${key}"]`); + const productId = $item.data('product_id'); + const variationId = $item.data('variation_id') || 0; + const quantity = parseInt($item.find('.counter__input').val()); + + // Сохраняем во временное хранилище + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + removedItems.push({ product_id: productId, variation_id: variationId, quantity: quantity, key: key }); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(removedItems)); + + // Показываем кнопку восстановления + $item.html(` +

+ Удаление товара из корзины: 5с +

+
+ +
+ `); + + // Удаляем через 5 секунд, если не восстановили + const removeTimeout = setTimeout(() => { + permanentRemoveItem(key, productId, variationId); + }, 5000); + + const product_remove_timer = setInterval(() => { + let number = Number($(`#${key}_timer`).html()) - 1 + $(`#${key}_timer`).html(number) + }, 1000); + + // Обработчик восстановления + $(document).off('click', `[data-key="${key}"] .modal-basket-item__return`).on('click', `[data-key="${key}"] .modal-basket-item__return`, function(e) { + e.preventDefault(); + clearTimeout(removeTimeout); + clearInterval(product_remove_timer); // Очищаем интервал + restoreItem(key, productId, variationId, quantity); + }); + } + + // Полное удаление товара + function permanentRemoveItem(key, productId, variationId) { + $('#modal-basket').addClass('loading'); + + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'remove_cart_item', + cart_item_key: key + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + if (response.success) { + // Удаляем из временного хранилища + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + const updatedItems = removedItems.filter(item => + !(item.product_id === productId && item.variation_id === variationId) + ); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(updatedItems)); + + updateCartFragment(); + } + } + }); + } + + // Восстановление товара + function restoreItem(key, productId, variationId, quantity) { + $('#modal-basket').addClass('loading'); + + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'restore_cart_item', + product_id: productId, + variation_id: variationId, + quantity: quantity + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + if (response.success) { + // Удаляем из временного хранилища + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + const updatedItems = removedItems.filter(item => + !(item.product_id === productId && item.variation_id === variationId) + ); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(updatedItems)); + + updateCartFragment(); + } + } + }); + } + + // --- Работа с cookie --- + function setCookie(name, value, days) { + let expires = ''; + if (days) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = '; expires=' + date.toUTCString(); + } + document.cookie = name + '=' + (value || '') + expires + '; path=/'; + } + function getCookie(name) { + const nameEQ = name + '='; + const ca = document.cookie.split(';'); + for(let i=0;i < ca.length;i++) { + let c = ca[i]; + while (c.charAt(0)==' ') c = c.substring(1,c.length); + if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); + } + return null; + } + // --- Конец работы с cookie --- + + // Открытие корзины при первом добавлении товара + function openBasketOnFirstAdd() { + if (!getCookie('basket_popup_shown')) { + console.log('[openBasketOnFirstAdd] Срабатывает открытие корзины'); + // Выбираем только модалку, в которой находится корзина + var $basket = $('#modal-basket'); + var $modal = $basket.closest('.modal'); + var $aside = $modal.find('.modal__aside'); + var device = window.screen.width; + + // Сброс только внутри этой модалки + var $items = $modal.find('.modal__item'); + console.log('[openBasketOnFirstAdd] modal:', $modal.get(), 'modal__item:', $items.get()); + $items.removeClass('active').attr('style', ''); + $modal.addClass('active').show(); + $basket.addClass('active').css({opacity: 1, filter: 'blur(0px)'}); + console.log('[openBasketOnFirstAdd] basket:', $basket.get()); + var width = $basket[0] ? $basket[0].clientWidth : 600; + setTimeout(function() { + if (device <= 720) { + $aside.css('width', device + 'px'); + console.log('[openBasketOnFirstAdd] aside width:', device + 'px'); + } else { + $aside.css('width', width + 'px'); + console.log('[openBasketOnFirstAdd] aside width:', width + 'px'); + } + }, 10); + setCookie('basket_popup_shown', '1', 30); + } else { + console.log('[openBasketOnFirstAdd] Куки уже установлены, попап не открывается'); + } + } + + // Обновление корзины при добавлении товара + $(document.body).on('added_to_cart', function() { + updateCartFragment(); + openBasketOnFirstAdd(); + }); + + // Функция обновления количества + function updateCart(key, quantity) { + $.ajax({ + type: 'POST', + url: '/wp-admin/admin-ajax.php', // Используем стандартный параметр WooCommerce + data: { + action: 'update_cart_quantity', + cart_item_key: key, + quantity: quantity + }, + beforeSend: function() { + $('#modal-basket').addClass('loading'); + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + if (response.success) { + updateCartFragment(); + } else { + console.error('Ошибка при обновлении корзины'); + } + }, + error: function(xhr, status, error) { + console.error('AJAX ошибка:', error); + } + }); + } + + // Обновление фрагментов корзины + function updateCartFragment() { + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'get_cart_fragment' + }, + beforeSend: function() { + $('#modal-basket').addClass('loading'); + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + console.log(response) + if (response.success) { + $('#modal-basket-content').html(response.data.contents); + $('.modal-block-price__price').html(response.data.total); + $('.mini-profile__button--counter').text(response.data.count); + if(response.data.count > 0){ + $('.mini-profile__button--counter').removeClass('disabled') + } + else( + $('.mini-profile__button--counter').addClass('disabled') + ) + + } + } + }); + } + + // Добавляем спиннер на кнопку 'Добавить в корзину' в корзине + $('body').on('click', '.add_to_cart_button', function() { + var btn = $(this); + if (!btn.hasClass('loading')) { + btn.addClass('loading'); + btn.data('original-text', btn.html()); + btn.css('position', 'relative'); + btn.html(''); + } + }); + + // Убираем спиннер после завершения ajax WooCommerce + $(document.body).on('added_to_cart', function(e, fragments, cart_hash, $button) { + if ($button && $button.length) { + $button.removeClass('loading'); + if ($button.data('original-text')) { + $button.html($button.data('original-text')); + $button.removeData('original-text'); + } + } + }); +}); + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/cart/component-controller.php b/wp-content/themes/cosmopet/modules/shop/components/cart/component-controller.php new file mode 100644 index 0000000..2a423c1 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/cart/component-controller.php @@ -0,0 +1,13 @@ +cart->get_cart_contents_count(); + return $context; +}); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/css/checkout.css b/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/css/checkout.css new file mode 100644 index 0000000..f3ee59b --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/css/checkout.css @@ -0,0 +1,1307 @@ +.order{ + display: flex; +} +.order__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order__contacts{ + width: calc(50% - 0.5px); + + padding: 24px; + + border-right: 1px solid #121212; +} +.order-contacts__header{ + display: flex; + justify-content: space-between; + align-items: center; +} +.order-contacts__form{ + margin-top: 24px; +} +.order-contacts__delivery{ + margin-top: 47.5px; + + padding-top: 48px; + + border-top: 1px solid var(--background-grey); +} + +.order-contacts-deliver__item{ + margin-top: 24px; +} +.order-contacts-deliver__date{ + padding: 8px; + + border-radius: 24px; + + background: var(--background-grey); +} +.order-contacts-deliver__date .form-input-radio__item{ + margin-top: 24px; +} +.order-contacts-deliver__date .form-input-radio__item:first-child{ + margin-top: 0; +} +.order__your{ + width: calc(50% - 0.5px); + + padding: 24px 24px 24px 48px; + + background: var(--background-grey); +} +.order-your__products{ + margin-top: 48px; +} +.order-your-products__item{ + margin-top: 16px; + + display: flex; + justify-content: space-between; +} +.order-your-products__left{ + display: flex; + align-items: center; +} +.order-your-products__img{ + width: 40px; + aspect-ratio: 1; + + border-radius: 16px; +} +.order-your-products__content{ + margin-left: 16px; +} +.order-your-products__name{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + text-decoration: none; +} +.order-your-products__description{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-6); +} +.order-your-products__description span{ + font-weight: 700; +} +.order-your-products__description span::before{ + margin-left: 3px; + + content: 'x '; +} +.order-your-products__right{ + display: flex; +} +.order-your-products__count{ + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-6); +} +.order-your-products__count::before{ + content: 'x'; +} +.order-your-products__price{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-black); +} + +.order-your__calculation{ + margin-top: 48px; +} +.order-your__promo{ + display: flex; +} +.order-your-promo__button{ + margin-left: 8px; +} +.order-your-calculation__item{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.order-your-calculation__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.order-your-calculation__value{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} + +.order-your-calculation__value--discount{ + background: var(--gradient-red); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.order-your-calculation__description{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-9); +} +.order-your-calculation__line{ + margin-top: 23px; + border: 1px solid var(--background-9); +} +.order-your-calculation__result{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order-your-calculation__submit{ + margin-top: 48px; +} + +@media only screen and (max-width: 1200px) { +.order{ + display: block; +} +.order__contacts, .order__your{ + border: none; + width: 100%; +} +} + +@media only screen and (max-width: 720px) { +.order__title{ + max-width: 181px; + + font-size: 20px; + line-height: 120%; +} +.order__your{ + margin-top: 16px; +} +.order__contacts{ + padding: 24px 16px; +} +.order__your{ + padding: 40px 16px 9px 16px; +} +.order-your__promo{ + display: block; +} +.order-your-promo__button{ + margin-left: 0; + margin-top: 24px; + + width: 100%; +} +.order-your-products__content{ + max-width: 164px; +} +.order-your-products__count, .order-your-products__price{ + flex-shrink: 0; +} +} + + +/* modal */ +.modal{ + position: fixed; + top: 0; + left: 0; + + padding: 20px; + + width: 100%; + height: 100%; + + background: rgba(0, 0, 0, 0.25); + + z-index: 200; + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; + + display: flex; + justify-content: center; + align-items: center; + + overflow-y: auto; + } + .modal.active{ + opacity: 1; + pointer-events: auto; + } + .modal__notification{} + .form__button-mobile{ + display: none; + } + .modal__aside{ + position: fixed; + top: 0; + right: 0; + + width: 0; + height: 100%; + + overflow: hidden; + transition: width .4s ease-out; + } + .modal__item{ + height: 100%; + + padding: 24px; + + background: var(--background-white); + + position: relative; + + display: none; + + filter: blur(10px); + transition: filter .2s ease-out; + } + .modal__item--no-title{ + padding-top: 72px; + } + .modal__item.active{ + display: flex; + flex-direction: column; + justify-content: space-between; + } + .modal__close{ + position: absolute; + top: 32px; + right: 24px; + + width: 24px; + height: 24px; + + border: none; + background: none; + } + .modal__header{} + .modal__title{ + padding-right: 48px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); + } + .modal__small-title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); + } + .modal__text{ + margin-top: 16px; + + padding-right: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-0); + } + .modal__form-sub{ + margin-top: 48px; + } + .modal-form-sub__submit{ + margin-top: 64px; + } + .modal__block-button{ + margin-top: 24px; + } + .modal__button{ + margin-top: 16px; + } + .modal__button:first-child{ + margin-top: 0; + } + .modal__content{ + margin-top: 24px; + } + .modal__filter{ + width: 400px; + } + .modal__footer{ + border-top: 1px solid var(--text-6); + padding-top: 23px; + } + .modal__block-price{ + display: flex; + justify-content: space-between; + align-items: center; + } + .modal-block-price__title{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + } + .modal-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); + } + .modal-block-price__price::after{ + + } + .modal__basket{ + width: 600px; + } + .modal__to-know, + .modal__to-know-submit{ + width: 412px; + } + + .modal-basket__item{ + padding-top: 23px; + padding-right: 15px; + padding-bottom: 24px; + + display: flex; + + border-top: 1px solid var(--background-grey); + + position: relative; + } + .modal-basket__item::before{ + content: ''; + + position: absolute; + top: 24px; + right: 6px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/basket.svg); + background-repeat: no-repeat; + background-position: center; + + cursor: pointer; + + transition: opacity .2s ease-out; + } + .modal-basket__item:hover .modal-basket__item::before{ + opacity: .8; + } + .modal-basket__item--return{ + padding-right: 5px; + + display: flex; + justify-content: space-between; + align-items: center; + } + .modal-basket__item--return .modal-basket-item__title{ + padding-right: 10px; + } + .modal-basket__item--return::before{ + display: none; + } + .modal-basket-item__return{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + background: var(--background-black); + + border: none; + } + .modal-basket-item__block-image{ + width: 128px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + } + .modal-basket-item__image{ + width: 96px; + aspect-ratio: 1; + + object-fit: contain; + } + .modal-basket-item__content{ + margin-left: 16px; + } + .modal-basket-item__title{ + padding-right: 40px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + } + .modal-basket-item__sub-title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + } + .modal-basket-item__control{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + } + .modal-basket-item__price{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-black); + } + .modal-basket-item__price::after{ + + padding-left: 4px; + } + .modal__basket .modal__header{ + height: calc(100% - 92px); + margin-bottom: -36px; + } + .modal__basket .modal__content{ + height: calc(100% - 100px); + overflow-x: hidden; + + } + .modal__basket .modal__content::-webkit-scrollbar { + width: 7px; + background-color: #f9f9fd; + } + .modal__basket .modal__content::-webkit-scrollbar-thumb { + background-color: var(--background-black); + border-radius: 2px; + } + + .modal-form{ + margin: auto; + + width: 600px; + + padding: 24px; + + border-radius: 20px; + + position: relative; + + display: none; + } + .modal-form.active{ + display: block; + } + .modal-form--white{ + border: 1px solid var(--background-black); + background: var(--background-white); + } + .modal-form--green-gradient{ + background: var(--gradient-blue); + } + .modal-form--width-584{ + width: 584px; + } + .modal-form--cdek{ + width: 836px; + } + .modal-form__close{ + position: absolute; + top: 24px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + border: none; + background: none; + background-image: url(../img/svg/main/black-x.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + + transition: opacity .2s ease-out; + + z-index: 10; + } + .modal-form__close--white{ + background-image: url(../img/svg/main/white-x.svg); + } + .modal-form__close:hover{ + opacity: .8; + } + .modal-form__button-close{} + .modal-form__title{ + padding-right: 50px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + color: var(--text-dark); + } + .modal-form__text--center{ + text-align: center; + } + .modal-form__text--center-pc{ + text-align: center; + } + .modal-form__title--green-gradient{ + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .modal-form__title--white{ + color: var(--text-white); + } + .modal-form__element{ + margin-top: 24px; + } + .modal-form__element--center{ + display: flex; + justify-content: center; + } + .modal-form__element--top-40{ + margin-top: 40px; + } + .modal-form__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + } + .modal-form__text--weight-500{ + font-weight: 500; + } + .modal-form__text--white{ + color: var(--text-white); + } + .modal-form__img{ + width: 100%; + height: 360px; + + object-fit: contain; + } + .modal-form__content{ + margin-top: 40px; + } + .form-row{ + margin-top: 24px; + } + .form-row:first-child{ + margin-top: 0; + } + .modal-form-content__line--two{ + display: flex; + justify-content: space-between; + } + .modal-form-content__line--two-mobile{ + display: flex; + justify-content: space-between; + } + .modal-form-content__line--two-mobile .modal-form-content-line__element{ + width: calc(50% - 12px); + } + .modal-form-content-line__element{ + position: relative; + } + .modal-form-content-line__element--arrow::after{ + content: ''; + + position: absolute; + right: 16px; + bottom: 16px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/arrow-right-input.svg); + + pointer-events: none; + } + .modal-form-content__line--two .modal-form-content-line__element{ + width: calc(50% - 12px); + } + .modal-form-content__line--three{ + display: flex; + } + .modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 85px; + + flex-shrink: 0; + } + .modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + margin-left: 8px; + + width: 100%; + } + .modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + margin-left: 8px; + + width: 85px; + + flex-shrink: 0; + } + .modal-form-content__line--margin-top-16{ + margin-top: 16px; + } + .modal-form__buttons{ + margin-top: 32px; + } + .modal-form__buttons--two{ + display: flex; + justify-content: space-between; + align-items: center; + } + + .modal-form__buttons--two button, + .modal-form__buttons--two input{ + width: calc(50% - 20px); + } + .modal-map{ + margin: auto; + + width: 1105px; + + display: none; + + border-radius: 24px; + border: none; + } + .modal-map.active{ + display: flex; + } + .modal-map__left{ + width: 600px; + + padding: 24px; + + position: relative; + } + .modal-map__control{ + margin: 38px -12px -12px -12px; + + display: flex; + } + .modal-map__control--delivery{ + margin-top: 12px; + } + .modal-map-control__item{ + margin: 12px; + + padding: 2px; + + width: calc(50% - 24px); + + background: var(--background-9); + border-radius: 20px; + border: none; + } + .modal-map-control__item.active{ + background: var(--gradient-blue); + } + .modal-map-control__item.active .form-input-radio__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); + } + .modal-map-control-item__content{ + padding: 14px; + + border-radius: 18px; + + background: var(--background-white); + } + .modal-map-control-item__header{ + display: flex; + align-items: center; + } + .modal-map-control-item__circle{ + padding: 2px; + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-9); + position: relative; + } + .modal-map-control-item__input{ + display: none; + } + .modal-map-control-item-circle__content{ + width: 16px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-white); + } + .modal-map-control__item.active .modal-map-control-item__circle{ + background: var(--gradient-blue); + } + .modal-map-control__item.active .modal-map-control-item__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); + } + .modal-map-control-item__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + } + .modal-map-control-item__description{ + margin-top: 16px; + } + .modal-map-control-item__time{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-align: start; + } + .modal-map-control-item__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-6); + + text-align: start; + } + .modal-map__form{ + margin-top: 24px; + } + .modal-map-form__hidden{ + + } + .modal-map-form__button{ + margin-top: 83px; + } + .modal-map-form__sub-button{ + display: none; + } + .modal-map__right{ + padding: 16px 0px 16px 16px; + } + .modal-map__map{ + border: 2px solid var(--background-9); + border-radius: 16px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .modal-map__map iframe{ + height: 650px; + } + .modal__age{ + + } + .modal__age > div{ + display: none; + } + .modal__age > div.active{ + display: flex; + } + /* modal */ + + /* toggle */ + .toggle{ + padding-top: 26px; + padding-bottom: 25px; + + border-bottom: 1px solid var(--text-3); + + position: relative; + } + .toggle::after{ + content: ''; + + position: absolute; + top: 24px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/black-x.svg); + transform: rotate(45deg); + transition: transform .2s; + pointer-events: none; + } + .toggle.active::after{ + transform: rotate(0deg); + } + .toggle__title{ + padding-right: 30px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + cursor: pointer; + } + .toggle__block-content{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; + } + .toggle__content{ + padding-top: 24px; + } + .toggle-content__item{ + margin: 12px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; + } + .toggle-content__item:first-child{ + margin-top: 0; + } + .toggle-content__element{ + margin: 12px; + } + .toggle-content__element--width-perc-100{ + width: 100%; + } + .toggle-content__element--width-perc-50{ + width: calc(50% - 24px); + } + .toggle__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + } + /* toggle */ + + /* checkbox */ + .checkbox{ + display: flex; + align-items: center; + + cursor: pointer; + } + .checkbox__state{ + border-radius: 4px; + + width: 18px; + height: 18px; + + border: 2px solid var(--background-black); + background: var(--background-white); + + flex-shrink: 0; + } + .checkbox.active .checkbox__state{ + background-color: var(--background-black); + + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; + } + .checkbox__input{ + display: none; + } + .checkbox__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; + } + .checkbox__label a{ + color: #76ce75; + + text-decoration: none; + } + .checkbox--small{ + margin-top: 24px; + } + .checkbox--small .checkbox__label{ + padding-left: 24px; + + font-weight: 500; + font-size: 12px; + line-height: 133%; + } + /* checkbox */ + + + @media (max-width: 720px) { + .modal-map__control{ + flex-wrap: wrap; + } + .modal-map-control__item{ + width: calc(100% - 24px); + } + .form__full-mobile{ + width: 100%; + border-radius: 0; + border: none; + } + } + + .container{ + max-width: 100% !important; + padding: 0; + } + + .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-20_0, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-20_0, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-20_0, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{ + padding: 0; + } + + .page-title{ + display: none; + } + + + .modal-map-control-item__input{ + display: none; + } + + .page .main-page-wrapper{ + background: #fff !important; + } + + .modal-map-control-item__content{ + width: 100%; + } + + + .woocommerce-shipping-methods{ + display: flex; + } + .visually-hidden { + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} +.modal-map-control__item{ + display: flex; + flex-direction: column; +} +.modal-map-control__item > label { + flex-grow: 1; + display: flex; + flex-direction: column; + position: relative; +} +.modal-map-control__item > label > *{ + flex-grow: 1; +} +.modal-map-control__item:nth-child(n){ + margin: 12px; + margin-bottom: 12px; +} +.modal-map-control-item__title{ + text-align: left; +} +.modal-map-control__item > label{ + margin-bottom: 0; +} +.open-pvz-btn{ + position: absolute !important; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + padding: 0 !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} + + +.order-contacts__delivery.loading{ + position: relative; + min-height: 110px; +} +.order-contacts__delivery.loading::before{ + content: ''; + z-index: 150; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + background-color: rgba(255,255,255, .6); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E"); + background-size: 48px; + background-position: center; + background-repeat: no-repeat; + } + + + .shop_table .woocommerce-shipping-totals{ + display:none; + } + + .amount{ + color: inherit; + } + + .order-your-products__item{ + align-items: center; + } + + +.wc_payment_methods.payment_methods.methods{ + display: none; +} + + +.woocommerce-terms-and-conditions-wrapper{ + +} + +.woocommerce-privacy-policy-text p{ + color: #121212 !important; + font-size: 14px; +} + +.woocommerce-privacy-policy-text a{ + color: #121212 !important; + font-size: 14px; + text-decoration: underline; +} + +.woocommerce-terms-and-conditions-checkbox-text a{ + color: #121212 !important; + font-size: 14px; + text-decoration: underline; +} + + + +.woocommerce-checkout.processing { + position: relative; + opacity: 0.5; + pointer-events: none; +} + +.woocommerce-checkout .blockUI.blockOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(242, 242, 242, 0.7) !important; + z-index: 9999; +} + +.woocommerce-checkout .blockUI-message { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 10000; + font-size: 16px; + color: #333; +} + +.cabinet-card__button{ + padding: 8px 8px 6px 0; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: none; + border: none; + + position: relative; + + text-decoration: none; +} +.cabinet-card__button::before{ + content: ''; + + position: absolute; + bottom: 6px; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); + + transition: opacity .2s ease-out; +} +.cabinet-card__button:hover{ + opacity: .8; +} + +.form-agreement{ + display: flex; +} +.form-agreement__check{ + display: flex; + align-items: center; +} +.form-agreement__square{ + width: 18px; + aspect-ratio: 1; + + border-radius: 4px; + + border: 2px solid var(--background-black); +} +.form-agreement__label{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-agreement__input{ + display: none; +} +.form-agreement__input:checked + .form-agreement__square{ + border: none; + background: var(--gradient-blue); + + position: relative; +} +.form-agreement__input:checked + .form-agreement__square::after{ + content: ''; + + position: absolute; + top: 1px; + left: 1px; + + width: 16px; + aspect-ratio: 1; + + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.50681 0.784901C9.86151 1.14024 9.86101 1.71584 9.50567 2.07055L4.35112 7.216C3.99601 7.57049 3.42085 7.57024 3.06604 7.21544L0.493317 4.64271C0.138295 4.28769 0.138295 3.71208 0.493317 3.35706C0.848339 3.00204 1.42394 3.00204 1.77897 3.35706L3.70944 5.28753L8.22116 0.783766C8.57649 0.429057 9.1521 0.429565 9.50681 0.784901Z' fill='white'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; +} + +.modal-map__control--delivery > p{ + color: #121212; + padding-left: 1rem; +} + +.form-agreement__label a{ + color: #121212; + text-decoration: underline; +} + +.form-input__error.active{ + display: block; +} + +.order-your__promo{ + position: relative; +} + +.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout{ + display: none; +} + +.woocommerce-terms-and-conditions-wrapper, .woocommerce-message{ + display: none; +} + + +.woocommerce-checkout-review-order-table tr{ + border: none !important; +} + + +.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-20_0, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-20_0, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-20_0, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto { + padding-right: 0 !important; + padding-left: 0 !important; +} + +.cdek-office-info{ + display: none; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/js/script.js b/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/js/script.js new file mode 100644 index 0000000..3035f2c --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/checkout/assets/js/script.js @@ -0,0 +1,161 @@ +jQuery(document).ready(function($) { + jQuery(document.body).on('updated_checkout', function() { + // Найти новые методы доставки внутри shop_table + var shippingMethodsHtml = jQuery('.woocommerce-checkout-review-order-table .woocommerce-shipping-methods').html(); + // Обновить кастомный блок + if(!shippingMethodsHtml){ + shippingMethodsHtml ='

Не удалось получить доступные методы доставки!
Укажите свой город для получения доступных методов.

' + } + jQuery('#custom-shipping-methods').html(shippingMethodsHtml); + jQuery('.order-contacts__delivery').removeClass('loading'); + + jQuery('.modal-map-control__item.active').click() + }); + + + $(document.body).on('update_checkout', function() { + jQuery('.order-contacts__delivery').addClass('loading'); + }); + + $('body').on('click', '.modal-map-control__item', function(){ + if (!$(this).hasClass('active')){ + $('#addr_inp').val('') + $('#pvz_inp').val('') + $('#billing_address_1').val('') + $('#billing_address_2').val('') + } + $('.shipping-add-info').removeClass('active') + var remote = $(this).data('remote') + $('.shipping-add-info[data-remote="' + remote + '"]').addClass('active') + }) + + jQuery('#addr_inp').on('click', function(){ + jQuery('#address_input').addClass('active') + }) + +}); + + + +jQuery(document).ready(function($) { + // Перехват отправки формы купона + $(document).on('click', 'button[name="apply_coupon"]', function(e) { + e.preventDefault(); // Останавливаем отправку основной формы + + // Отправка данных купона через AJAX + var couponCode = $('#coupon_code').val(); + + if (!couponCode) { + alert('Пожалуйста, введите код купона.'); + return; + } + + $.ajax({ + url: wc_checkout_params.ajax_url, // URL для AJAX-запроса WooCommerce + type: 'POST', + data: { + action: 'apply_coupon', + coupon_code: couponCode + }, + success: function(response) { + if (response.success) { + $(document.body).trigger('update_checkout'); + $('#promo_form').hide() + $('#promo_delete').show() + $('#promo_err').hide() + $('#coupon_code_app').val('Применен промокод: ' + couponCode) + $('#delete_coupon').data('coupon', couponCode) + } else { + $('#promo_err').show() + } + }, + error: function() { + alert('Произошла ошибка. Попробуйте ещё раз.'); + } + }); + }); + + jQuery('#pvz_inp').on('click', function(){ + jQuery('.open-pvz-btn').click() + }) + + $('#address_input input').on('change, input, keyup', function(){ + var address = $('#f_address').val() + var apart = $('#f_apartment').val() + var floor = $('#f_floor').val() + var entrance = $('#f_entrance').val() + var number_phone = $('#f_number-phone').val() + + var address_2 = '' + + if (apart){ + address_2 += ' кв ' + apart + } + if (floor){ + address_2 += ' этаж ' + floor + } + if (entrance){ + address_2 += ' подъезд ' + entrance + } + if (number_phone){ + address_2 += ' домофон ' + number_phone + } + $('#addr_inp').val(address + address_2) + $('#billing_address_1').val(address) + $('#billing_address_2').val(address_2) + }) +}); + + +jQuery(document).ready(function ($) { + $(document.body).on('checkout_error', function () { + // $('.woocommerce-error').remove(); + $('.form-input__error').removeClass('active'); + + // // Добавляем ошибки рядом с полями + $('.woocommerce-error li').each(function () { + var errorMessage = $(this).text().trim(); + var fieldKey = $(this).data('id'); // Предполагается, что ошибка содержит data-id + console.log(errorMessage) + console.log(fieldKey) + if (fieldKey) { + var errorContainer = $('#' + fieldKey + '-error'); + if (errorContainer.length) { + errorContainer.html('' + errorMessage + ''); + $('#' + fieldKey + '-error').addClass('active'); + } + } + if (errorMessage == 'phone_err' || errorMessage == 'The string supplied did not seem to be a phone number.' || errorMessage.includes('Некорректный номер телефона')){ + $('#billing_phone-error').html('Неправильно введен номер') + $('#billing_phone-error').addClass('active'); + } + if (errorMessage == 'Order pickup point not selected.' || errorMessage == 'Не выбран ПВЗ для доставки заказа.'){ + $('#pvz-error').html(errorMessage) + $('#pvz-error').addClass('active'); + } + if (errorMessage == 'adress_error'){ + $('#adr-error').html('Не указан адрес доставки') + $('#adr-error').addClass('active'); + } + if (errorMessage == 'Неверный адрес эл. почты для выставления счета'){ + $('#billing_email-error').html(errorMessage).addClass('active'); + } + if(errorMessage == 'Не выбран метод доставки. Пожалуйста перепроверьте ваш адрес или обратитесь за помощью к администрации сайта.'){ + $('#billing_city-error').html(errorMessage).addClass('active'); + } + if(errorMessage == 'Этот email уже зарегистрирован.'){ + $('#acc-error').html('Этот email уже зарегистрирован. Войдите в свой аккаунт или укажите другой E-mail.').addClass('active'); + } + }); + }); + + $('#delete_coupon').on('click', function(){ + $('.woocommerce-remove-coupon[data-coupon=' + $(this).data('coupon') + ']').click() + }) + $('.woocommerce-remove-coupon').on('click', function(){ + + $('#promo_form').show() + $('#promo_delete').hide() + }) +}); + diff --git a/wp-content/themes/cosmopet/modules/shop/components/checkout/component-controller.php b/wp-content/themes/cosmopet/modules/shop/components/checkout/component-controller.php new file mode 100644 index 0000000..e69de29 diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css new file mode 100644 index 0000000..1091e45 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css @@ -0,0 +1,2233 @@ + +/* общие */ +button{ + cursor: pointer; +} + +.wrapper{ + margin: 0 auto; + + max-width: 1600px; +} + +/* компоненты */ + +/* lang*/ +.lang{ + position: relative; +} +.lang__open{ + padding: 12px 15px; + + width: 74px; + + background: none; + border: none; + + display: flex; + align-items: center; + + transition: opacity .2s ease-out; +} +.lang__open:hover{ + opacity: .8; +} +.lang-open p{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + + text-align: start; + + color: var(--text-black); +} +.lang-open__arrow{ + margin-left: 7.25px; + + display: flex; + justify-content: center; + align-items: center; +} +.lang-open__black{ + +} +.lang-open__white{ + display: none; +} +.lang__content{ + position: absolute; + top: 33px; + left: -13px; + + height: 0; + + border-radius: 6px; + + transition: height .2s ease-out; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); + overflow: hidden; + + background-color: var(--background-white); + + z-index: 100; +} +.lang__list{ + width: 104px; + + padding: 8px; + + list-style-type: none; +} +.lang__item{ + margin-top: 8px; +} +.lang__item:first-child{ + margin-top: 0; +} +.lang__link{ + display: block; + + width: 100%; + + padding: 4px; + + border-radius: 6px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + text-decoration: none; + + position: relative; + + transition: background-color .2s ease-out; +} +.lang__link:hover, +.lang__item.active .lang__link{ + background-color: var(--background-grey); +} +.lang__item.active .lang__link::before{ + content: ''; + + position: absolute; + top: 10px; + right: 8px; + + width: 16px; + height: 12px; + + background-image: url(../img/svg/main/arrow-selected.svg); +} +/* lang */ + + +/* mini-profile */ +.mini-profile{ + display: flex; + align-items: center; +} +.mini-profile__item{ + margin-left: 8px; +} +.mini-profile__item:first-child{ + margin-left: 0; +} +.mini-profile__button{ + display: block; + + padding: 8px; + + display: flex; + justify-content: center; + align-items: center; + + background: none; + border: none; + + transition: opacity .2s ease-out; +} +.mini-profile__button:hover{ + opacity: .8; +} +.mini-profile__icon{ + width: 24px; + aspect-ratio: 1; +} +.mini-profile__icon.white{ + display: none; +} +/* mini-profile */ + + +/* main-menu */ +.main-menu{ + display: flex; + align-items: center; + + list-style-type: none; +} +.main-menu__item{ + margin-left: 24px; + + transition: opacity .2s ease-out; +} +.main-menu__item:first-child{ + margin-left: 0; +} +.main-menu__item:hover{ + opacity: .8; + + background: var(--background-grey); + border-radius: 24px; +} +.header.white .main-menu__item:hover .main-menu__link{ + color: var(--text-black); +} +.main-menu__item:active{ + opacity: 1; +} +.main-menu__link{ + display: block; + + padding: 8px 12px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-decoration: none; + + transition: color .2s ease-out; +} +.main-menu__button{ + padding: 8px 32px 8px 12px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + border: none; + border-radius: 24px; + + background: var(--gradient-turquoise); + + position: relative; +} +.main-menu__button::before{ + content: ''; + + position: absolute; + top: 14px; + right: 14px; + + width: 13px; + height: 8px; + + background-image: url(../img/svg/main/arrow-black.svg); + background-repeat: no-repeat; + background-size: contain; +} +/* main-menu */ + + +/* form */ +.form{ + width: 100%; + + padding: 24px 24px 43px; + + display: flex; + flex-direction: column; + + border-radius: 24px; + background: var(--gradient-turquoise); +} +.form__item{ + margin-top: 16px; +} +.form__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-black); +} +.form__input{ + width: 100%; + + border-radius: 20px; + padding: 12px 16px; + border: 1px solid var(--text-black); + + background: var(--background-white); + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + + color: var(--text-black); +} +.form__input::placeholder{ + color: var(--text-grey); +} +.form__input--grey{ + border-color: var(--background-9); +} +.form__input--textarea{ + height: 96px; + resize: none; +} +.form__input--textarea-72{ + height: 72px; + resize: none; + + overflow: hidden; +} +.form__input--center{ + text-align: center; +} +.form__button{ + width: 100%; + + padding: 12px 24px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + border-radius: 16px; + border: none; + background: var(--background-black); + + cursor: pointer; + + transition: background-color .2s ease-out; +} +.form__button:hover{ + opacity: .8; +} + +.label{ + padding-bottom: 4px; + + display: inline-block; + + position: relative; +} +.label::after{ + content: ''; + + position: absolute; + top: 2px; + right: -20px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/question.svg); + + cursor: pointer; +} +.label__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-3); +} +.label__question{ + position: absolute; + + padding: 8px; + + border-radius: 6px; + transition: height .2s ease-out; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); + overflow: hidden; + background-color: var(--background-white); + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; +} +.label:hover .label__question{ + opacity: 1; + pointer-events: auto; +} + +.label-name{ + margin-bottom: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + display: block; +} +.form-input__error{ + margin-top: 4px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + color: #f60909; + + display: none; + + position: relative; +} +.form-input__error--absolute{ + position: absolute; + bottom: -19.95px; + left: 0; + + width: 100%; +} +.modal-form__content.check .form__input:invalid{ + border-color: #f60909; +} +.modal-form__content.check .form__input:invalid + .form-input__error{ + display: block; +} +.modal-form__content.check .form-input-phone__input:invalid + .form-input__error{ + display: block; +} +.modal-form__content.check .form-input-phone__input:invalid + .form-input__error--absolute::before{ + content: ''; + + position: absolute; + top: -53px; + left: -1px; + + width: 100%; + height: 48px; + + border-radius: 20px; + border: 1px solid #f60909; +} +.form-input__phone{ + padding: 12px 16px 12px ; + + display: flex; + align-items: center; + + border-radius: 20px; + border: 1px solid var(--text-black); + + cursor: pointer; + + position: relative; +} +.form-input__phone.focus{ + outline: 1px solid var(--text-black); +} +.form-input-phone__icon{ + flex-shrink: 0; + + height: 16px; + width: 28px; + + background-size: 16px; + background-repeat: no-repeat; + background-position: left; + + position: relative; +} +.form-input-phone__icon::after{ + content: ''; + + position: absolute; + top: 4px; + right: 0; + + width: 8px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/triangle-grey.svg); +} +.form-input-phone__code{ + flex-shrink: 0; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone__code::before{ + content: '+'; +} +.form-input-phone__input{ + margin-left: 6px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: none; + outline: none; +} +.form-input-phone__list{ + position: absolute; + top: 52px; + left: 8px; + + width: 280px; + + z-index: 10; + + transition: opacity .2s ease-out; + + opacity: 0; + pointer-events: none; + + border-radius: 20px; + + overflow: hidden; +} +.form-input-phone__list.active{ + opacity: 1; + pointer-events: auto; +} +.form-input-phone-list__search{ + width: 100%; + + padding: 12px 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-left: 1px solid var(--background-black); + border-right: 1px solid var(--background-black); + border-top: 1px solid var(--background-black); + border-radius: 20px 20px 0 0; + + background: var(--background-white); +} +.form-input-phone-list__search::placeholder{ + color: var(--text-6); +} +.form-input-phone-list__content{ + width: 100%; + max-height: 224px; + + padding: 24px 16px; + + border: 1px solid var(--background-black); + border-top: none; + border-radius: 0 0 20px 20px; + + background: var(--background-white); + + overflow-y: auto; +} +.form-input-phone-list__item{ + margin-top: 14px; + + display: flex; + align-items: center; + + background: none; + border: none; + + cursor: pointer; +} +.form-input-phone-list__item:first-child{ + margin-top: 0; +} +.form-input-phone-list-item__icon{ + width: 16px; + aspect-ratio: 1; +} +.form-input-phone-list-item__name{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone-list-item__code{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-phone-list-item__code::before{ + content: '+'; +} +.form-input__tabs{ + padding: 2px; + + display: flex; + + border-radius: 20px; + background: var(--gradient-turquoise); + + position: relative; +} +.form-input__tabs--white{ + padding: 3px; + border: 1px solid var(--text-3); + background: var(--white); +} +.form-input__tabs--white .form-input-tabs__button.active{ + background: var(--gradient-turquoise); +} +.form-input-tabs__button{ + width: 100%; + + padding: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + text-align: center; + + border-radius: 18px; + + z-index: 2; + + transition: background-color .2s ease-out; +} +.form-input-tabs__button.active{ + background-color: var(--background-white); +} +.form-input-tabs__input{ + display: none; +} +.form-input__radio{ + padding: 16px; + + display: flex; + flex-direction: column; +} +.form-input-radio__item{ + margin-top: 14px; + + display: flex; + align-items: center; +} +.form-input-radio__item:first-child{ + margin-top: 0; +} +.form-input-radio__circle{ + padding: 2px; + + width: 20px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--gradient-blue); + + position: relative; +} +.form-input-radio__item.active .form-input-radio__circle::before{ + content: ''; + + position: absolute; + top: 4px; + left: 4px; + + width: 12px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--gradient-blue); +} +.form-input-radio-circle__content{ + width: 16px; + aspect-ratio: 1; + + border-radius: 50%; + + background: var(--background-white); +} +.form-input-radio__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.form-input-radio__title.form-input-radio__title--no-span span{ + color: var(--text-dark); +} +.form-input-radio__price{ + margin-left: auto; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-radio__price::after{ + content: ' ₽'; +} +.form-input-radio__input{ + display: none; +} +.form-input__list{ + position: relative; +} +.form-input__list::before{ + content: ''; + position: absolute; + top: 21.5px; + right: 19.5px; + width: 13px; + height: 8px; + background-image: url(../img/svg/main/arrow-black.svg); + background-repeat: no-repeat; + background-size: contain; + pointer-events: none; +} +.form-input-list__input{ + width: 100%; + + border-radius: 20px; + padding: 12px 16px; + padding-right: 40px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: 1px solid var(--text-black); +} + +.form-input-list__input::placeholder{ + color: var(--text-grey); +} +.form-input-list__block-content{ + position: absolute; + top: 50px; + left: 0; + + width: 100%; + max-height: 192px; + height: 0; + + border-radius: 20px; + background-color: var(--background-white); + + overflow: hidden; + + transition: height .2s ease-out; + + z-index: 10; +} +.form-input-list__block-content.active{ + border: 1px solid var(--background-black); +} +.form-input-list__content{ + margin: 8px 16px; + + max-height: 176px; + + padding-right: 16px; + + overflow-y: auto; +} +.form-input-list__content::-webkit-scrollbar{ + border-radius: 8px; + width: 4px; + background: rgba(204, 204, 204, 0.2); +} +.form-input-list__content::-webkit-scrollbar-thumb{ + border-radius: 8px; + background: var(--background-9); +} +.form-input-list__content +.form-input-list__item{ + margin-top: 16px; + + width: 100%; + + display: flex; + justify-content: space-between; + align-items: center; + + border-radius: 8px; + padding: 4px; + + background: none; + border: none; +} +.form-input-list__item:first-child{ + margin-top: 0; +} +.form-input-list__item.active{ + background: rgba(204, 204, 204, 0.2); +} +.form-input-list-item__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-input-list-item__box{ + width: 20px; + aspect-ratio: 1; + + padding: 2px; + + border-radius: 4px; + + background: var(--gradient-blue); +} +.form-input-list-item-box__content{ + width: 16px; + aspect-ratio: 1; + + border-radius: 2px; + + background: var(--background-white); +} +.form-input-list__item.active .form-input-list-item-box__content{ + background: var(--gradient-blue); +} +.remote-control__item{ + display: none; +} +.remote-control__item.active{ + display: block; +} +/* .form-input-radio__ */ + +.form-agreement{ + display: flex; +} +.form-agreement__check{ + display: flex; + align-items: center; +} +.form-agreement__square{ + width: 18px; + aspect-ratio: 1; + + border-radius: 4px; + + border: 2px solid var(--background-black); +} +.form-agreement__label{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.form-agreement__input{ + display: none; +} +.form-agreement__input:checked + .form-agreement__square{ + border: none; + background: var(--gradient-blue); + + position: relative; +} +.form-agreement__input:checked + .form-agreement__square::after{ + content: ''; + + position: absolute; + top: 1px; + left: 1px; + + width: 16px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; +} +/* form */ + + +/* social media */ +.social-media{ + display: flex; + align-items: center; +} +.social-media__item{ + margin-left: 32px; + + transition: opacity .2s ease-out; +} +.social-media__item:hover{ + opacity: .8; +} +.social-media__item:first-child{ + margin-left: 0px; +} +.social-media__icon{ + width: 32px; + aspect-ratio: 1; +} +/* social media */ + + +/* breadcrumbs */ +.breadcrumbs{ + margin: 24px; + + display: flex; + align-items: center; +} +.breadcrumbs__item{ + display: block; + + padding: 0px 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-6); + + text-decoration: none; + + position: relative; +} +.breadcrumbs__item:first-child{ + padding-left: 0; +} +.breadcrumbs__item:nth-child(n+2)::before{ + content: ''; + + position: absolute; + top: -2px; + left: -12px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-breadcrumbs.svg); + background-repeat: no-repeat; + background-size: contain; +} +/* breadcrumbs */ + +/* compound */ +.compound{ + margin: -5px; + + min-height: 33.95px; + + display: flex; + align-items: start; +} +.compound__item{ + margin: 5px; + + padding: 4px 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + border-radius: 16px; + background-color: var(--background-white); + + display: block; + text-decoration: none; +} +.compound__item:first-child{ + margin-left: 0; +} +.product__footer{ + margin: 48px 24px 24px; + + display: flex; + justify-content: center; +} +.product__footer--error{ + margin: 45px 0; +} +/* compound */ + +/* button */ +.button{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-radius: 20px; + + cursor: pointer; +} +.button--100-perc{ + width: 100%; +} +.button--white{ + padding: 11px 24px; + + text-align: center; + + background-color: var(--background-white); + border: 1px solid var(--background-black); + + transition: opacity .2s ease-out; +} +.button--white:hover{ + opacity: .8; +} +.button--white.active{ + background: var(--background-black); + color: var(--background-white); +} +.button--gradient{ + background: var(--gradient-turquoise); + border: none; + + transition: opacity .2s ease-out; +} +.button--gradient:hover{ + opacity: .8; +} +.button--base{ + padding: 12px 24px; +} +.button--high{ + height: 56px; + + padding: 16px 24px 24px 24px; + + font-weight: 700; + text-align: center; + + position: relative; +} +.button--high-46{ + padding: 12px 24px; + + font-size: 20px; + font-weight: 700; + line-height: 24px; +} +.button--icon{ + padding-right: 56px; + + text-align: start; +} +.button--filter::after{ + content: ''; + + position: absolute; + top: 16px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/filter.svg); + background-repeat: no-repeat; + background-size: contain; +} +.button--black{ + padding: 7px 15px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + background: var(--background-black); + border: 1px solid var(--text-white); +} +.button--link{ + text-decoration: none; +} +.button--red-48-px{ + border-radius: 48px; +} +.to-know{ + /* width: 100%; */ + + padding: 12px 24px 7px 24px; + + display: flex; + justify-content: center; + + border: none; + + transition: opacity .2s ease-out; + text-decoration: none; +} + +.to-know--start{ + justify-content: start; + padding-left: 0; +} + +.to-know:hover{ + opacity: .8; +} +.to-know p{ + padding-bottom: 4px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border-bottom: 1px var(--text-black) solid; + + cursor: pointer; +} +.to-know--background-none{ + background: none; +} +.back{ + margin-top: 16px; + margin-left: 16px; + + padding: 8px; + padding-left: 32px; + + background: none; + border: none; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + + position: relative; +} +.back::before{ + content: ''; + + position: absolute; + top: 8px; + left: 0; + + margin-right: 8px; + + width: 24px; + height: 24px; + + background-image: url(../img/svg/main/arrow-back.svg); +} + +.back::after{ + content: ''; + + position: absolute; + bottom: 6px; + left: 0; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); +} +/* button */ + +/* select */ +.select{ + max-width: 144px; + + position: relative; +} +.select__state{ + width: 100%; + + padding: 11px 47px 11px 13px; + + /* pointer-events:none; */ + + border: 1px solid var(--background-black); + border-radius: 20px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + cursor: pointer; + + position: relative; + + transition: opacity .2s ease-out; +} +.select:hover .select__state{ + opacity: .8; +} +.select::after{ + content: ''; + + position: absolute; + top: 20.5px; + right: 21.5px; + + width: 17px; + height: 10px; + + background-image: url(../img/svg/main/arrow-black.svg); + background-repeat: no-repeat; + background-size: contain; + + pointer-events: none; +} +.state__block{ + position: absolute; + top: 48px; + left: 0; + + width: 100%; + + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.state__content{ + padding: 8px; + + border-radius: 6px; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2); + background-color: var(--background-white); + + list-style-type: none; +} +.state__content li{ + margin-top: 8px; +} +.state__content li:first-child{ + margin-top: 0; +} +.state__button{ + width: 100%; + + padding: 4px 32px 4px 4px; + + background: none; + border: none; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + text-align: start; + + border-radius: 6px; + + transition: background-color .2s ease-out; + + position: relative; +} +.state__button:hover, +.state__button.active{ + background-color: var(--background-grey); +} + +.state__button.active::before{ + content: ''; + position: absolute; + top: 10px; + right: 8px; + width: 16px; + height: 12px; + background-image: url(../img/svg/main/arrow-selected.svg); +} + +/* select */ + +/* counter */ +.counter{ + display: flex; + align-items: center; +} +.counter__input{ + width: 48px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: center; + color: var(--text-black); + + pointer-events: none; + + background: none; + border: none; +} +.counter__button{ + width: 48px; + height: 48px; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--text-3); + border-radius: 24px; + + background: var(--background-white); + + transition: opacity .2s ease-out; +} +.counter__button:hover{ + opacity: .8; +} +.counter--small{ + +} +.counter--small .counter__button{ + width: 32px; + height: 32px; +} +.counter--small{ + +} +/* counter */ + +/* modal */ +.modal{ + position: fixed; + top: 0; + left: 0; + + padding: 20px; + + width: 100%; + height: 100%; + + background: rgba(0, 0, 0, 0.25); + + z-index: 200; + + opacity: 0; + transition: opacity .2s ease-out; + pointer-events: none; + + display: flex; + justify-content: center; + align-items: center; + + overflow-y: auto; +} +.modal.active{ + opacity: 1; + pointer-events: auto; +} +.modal__notification{} +.form__button-mobile{ + display: none; +} +.modal__aside{ + position: fixed; + top: 0; + right: 0; + + width: 0; + height: 100%; + + overflow: hidden; + transition: width .4s ease-out; +} +.modal__item{ + height: 100%; + + padding: 24px; + + background: var(--background-white); + + position: relative; + + display: none; + + filter: blur(10px); + transition: filter .2s ease-out; +} +.modal__item--no-title{ + padding-top: 72px; +} +.modal__item.active{ + display: flex; + flex-direction: column; + justify-content: space-between; +} +.modal__close{ + position: absolute; + top: 32px; + right: 24px; + + width: 24px; + height: 24px; + + border: none; + background: none; +} +.modal__header{} +.modal__title{ + padding-right: 48px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__small-title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.modal__text{ + margin-top: 16px; + + padding-right: 10px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-0); +} +.modal__form-sub{ + margin-top: 48px; +} +.modal-form-sub__submit{ + margin-top: 64px; +} +.modal__block-button{ + margin-top: 24px; +} +.modal__button{ + margin-top: 16px; +} +.modal__button:first-child{ + margin-top: 0; +} +.modal__content{ + margin-top: 24px; +} +.modal__filter{ + width: 400px; +} +.modal__footer{ + border-top: 1px solid var(--text-6); + padding-top: 23px; +} +.modal__block-price{ + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-block-price__title{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} +.modal-block-price__price::after{ + content: 'Р'; +} +.modal__basket{ + width: 600px; +} +.modal__to-know, +.modal__to-know-submit{ + width: 412px; +} + +.modal-basket__item{ + padding-top: 23px; + padding-right: 15px; + padding-bottom: 24px; + + display: flex; + + border-top: 1px solid var(--background-grey); + + position: relative; +} +.modal-basket__item::before{ + content: ''; + + position: absolute; + top: 24px; + right: 6px; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/basket.svg); + background-repeat: no-repeat; + background-position: center; + + cursor: pointer; + + transition: opacity .2s ease-out; +} +.modal-basket__item:hover .modal-basket__item::before{ + opacity: .8; +} +.modal-basket__item--return{ + padding-right: 5px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket__item--return .modal-basket-item__title{ + padding-right: 10px; +} +.modal-basket__item--return::before{ + display: none; +} +.modal-basket-item__return{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-white); + + background: var(--background-black); + + border: none; +} +.modal-basket-item__block-image{ + width: 128px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; +} +.modal-basket-item__image{ + width: 96px; + aspect-ratio: 1; + + object-fit: contain; +} +.modal-basket-item__content{ + margin-left: 16px; +} +.modal-basket-item__title{ + padding-right: 40px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-basket-item__sub-title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.modal-basket-item__control{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.modal-basket-item__price{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-black); +} +.modal-basket-item__price::after{ + content: 'Р'; + + padding-left: 4px; +} +.modal__basket .modal__header{ + height: calc(100% - 92px); + margin-bottom: -36px; +} +.modal__basket .modal__content{ + height: calc(100% - 100px); + overflow-x: hidden; + +} +.modal__basket .modal__content::-webkit-scrollbar { + width: 7px; + background-color: #f9f9fd; +} +.modal__basket .modal__content::-webkit-scrollbar-thumb { + background-color: var(--background-black); + border-radius: 2px; +} + +.modal-form{ + margin: auto; + + width: 600px; + + padding: 24px; + + border-radius: 20px; + + position: relative; + + display: none; +} +.modal-form.active{ + display: block; +} +.modal-form--white{ + border: 1px solid var(--background-black); + background: var(--background-white); +} +.modal-form--green-gradient{ + background: var(--gradient-blue); +} +.modal-form--width-584{ + width: 584px; +} +.modal-form--cdek{ + width: 836px; +} +.modal-form__close{ + position: absolute; + top: 24px; + right: 24px; + + width: 24px; + aspect-ratio: 1; + + border: none; + background: none; + background-image: url(../img/svg/main/black-x.svg); + background-repeat: no-repeat; + background-size: 24px; + background-position: center; + + transition: opacity .2s ease-out; + + z-index: 10; +} +.modal-form__close--white{ + background-image: url(../img/svg/main/white-x.svg); +} +.modal-form__close:hover{ + opacity: .8; +} +.modal-form__button-close{} +.modal-form__title{ + padding-right: 50px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + color: var(--text-dark); +} +.modal-form__text--center{ + text-align: center; +} +.modal-form__text--center-pc{ + text-align: center; +} +.modal-form__title--green-gradient{ + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.modal-form__title--white{ + color: var(--text-white); +} +.modal-form__element{ + margin-top: 24px; +} +.modal-form__element--center{ + display: flex; + justify-content: center; +} +.modal-form__element--top-40{ + margin-top: 40px; +} +.modal-form__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.modal-form__text--weight-500{ + font-weight: 500; +} +.modal-form__text--white{ + color: var(--text-white); +} +.modal-form__img{ + width: 100%; + height: 360px; + + object-fit: contain; +} +.modal-form__content{ + margin-top: 40px; +} +.modal-form-content__line{ + margin-top: 24px; +} +.modal-form-content__line:first-child{ + margin-top: 0; +} +.modal-form-content__line--two{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile{ + display: flex; + justify-content: space-between; +} +.modal-form-content__line--two-mobile .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content-line__element{ + position: relative; +} +.modal-form-content-line__element--arrow::after{ + content: ''; + + position: absolute; + right: 16px; + bottom: 16px; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/arrow-right-input.svg); + + pointer-events: none; +} +.modal-form-content__line--two .modal-form-content-line__element{ + width: calc(50% - 12px); +} +.modal-form-content__line--three{ + display: flex; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + margin-left: 8px; + + width: 100%; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + margin-left: 8px; + + width: 85px; + + flex-shrink: 0; +} +.modal-form-content__line--margin-top-16{ + margin-top: 16px; +} +.modal-form__buttons{ + margin-top: 32px; +} +.modal-form__buttons--two{ + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-form__buttons--two button, +.modal-form__buttons--two input{ + width: calc(50% - 20px); +} +.modal-map{ + margin: auto; + + width: 1105px; + + display: none; + + border-radius: 24px; + border: none; +} +.modal-map.active{ + display: flex; +} +.modal-map__left{ + width: 600px; + + padding: 24px; + + position: relative; +} +.modal-map__control{ + margin: 38px -12px -12px -12px; + + display: flex; +} +.modal-map__control--delivery{ + margin-top: 12px; +} +.modal-map-control__item{ + margin: 12px; + + padding: 2px; + + width: calc(50% - 24px); + + background: var(--background-9); + border-radius: 20px; + border: none; +} +.modal-map-control__item.active{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .form-input-radio__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__content{ + padding: 14px; + + border-radius: 18px; + + background: var(--background-white); +} +.modal-map-control-item__header{ + display: flex; + align-items: center; +} +.modal-map-control-item__circle{ + padding: 2px; + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-9); + position: relative; +} +.modal-map-control-item__input{ + display: none; +} +.modal-map-control-item-circle__content{ + width: 16px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--background-white); +} +.modal-map-control__item.active .modal-map-control-item__circle{ + background: var(--gradient-blue); +} +.modal-map-control__item.active .modal-map-control-item__circle::before{ + content: ''; + position: absolute; + top: 4px; + left: 4px; + width: 12px; + aspect-ratio: 1; + border-radius: 50%; + background: var(--gradient-blue); +} +.modal-map-control-item__title{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); +} +.modal-map-control-item__description{ + margin-top: 16px; +} +.modal-map-control-item__time{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-align: start; +} +.modal-map-control-item__price{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: var(--text-6); + + text-align: start; +} +.modal-map__form{ + margin-top: 24px; +} +.modal-map-form__hidden{ + +} +.modal-map-form__button{ + margin-top: 83px; +} +.modal-map-form__sub-button{ + display: none; +} +.modal-map__right{ + padding: 16px 0px 16px 16px; +} +.modal-map__map{ + border: 2px solid var(--background-9); + border-radius: 16px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.modal-map__map iframe{ + height: 650px; +} +.modal__age{ + +} +.modal__age > div{ + display: none; +} +.modal__age > div.active{ + display: flex; +} +/* modal */ + +/* toggle */ +.toggle{ + padding-top: 26px; + padding-bottom: 25px; + + border-bottom: 1px solid var(--text-3); + + position: relative; +} +.toggle::after{ + content: ''; + + position: absolute; + top: 24px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/black-x.svg); + transform: rotate(45deg); + transition: transform .2s; + pointer-events: none; +} +.toggle.active::after{ + transform: rotate(0deg); +} +.toggle__title{ + padding-right: 30px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + cursor: pointer; +} +.toggle__block-content{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.toggle__content{ + padding-top: 24px; +} +.toggle-content__item{ + margin: 12px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; +} +.toggle-content__item:first-child{ + margin-top: 0; +} +.toggle-content__element{ + margin: 12px; +} +.toggle-content__element--width-perc-100{ + width: 100%; +} +.toggle-content__element--width-perc-50{ + width: calc(50% - 24px); +} +.toggle__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +/* toggle */ + +/* checkbox */ +.checkbox{ + display: flex; + align-items: center; + + cursor: pointer; +} +.checkbox__state{ + border-radius: 4px; + + width: 18px; + height: 18px; + + border: 2px solid var(--background-black); + background: var(--background-white); + + flex-shrink: 0; +} +.checkbox.active .checkbox__state{ + background-color: var(--background-black); + + background-image: url(../img/svg/main/arrow-selected-white.svg); + background-repeat: no-repeat; + background-position: center; +} +.checkbox__input{ + display: none; +} +.checkbox__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +.checkbox__label a{ + color: #76ce75; + + text-decoration: none; +} +.checkbox--small{ + margin-top: 24px; +} +.checkbox--small .checkbox__label{ + padding-left: 24px; + + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +/* checkbox */ + +/* radio */ +.radio{ + display: flex; + align-items: center; +} +.radio__input{ + width: 18px; + aspect-ratio: 1; + + accent-color: var(--background-black); + + cursor: pointer; +} +.radio__label{ + padding-left: 8px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-dark); + + cursor: pointer; +} +/* radio */ + + +@keyframes slidein { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.subscription{ + +} +.subscription__item{ + display: flex; + + color: var(--text-black); + font-family: var(--font-family); + font-weight: 500; + line-height: 120%; +} +.subscription__item:nth-last-child(n + 2){ + border-bottom: 1px solid var(--background-9); +} +.subscription__item span{ + font-weight: 700; +} +.subscription__item span small{ + font-size: 16px; +} +.subscription__status{ + color: var(--text-black); +} +.subscription__status--close{ + color: var(--text-red); +} +.subscription__status--end{ + color: var(--text-green); +} +.subscription__add{ + width: 100%; +} +.subscription__add-header{ +} +.subscription__add-product{ + align-items: start; +} +.subscription__add-product > *:not(:first-child){ + padding-top: 14px; +} +.subscription__add-title{ + font-family: var(--font-family); + font-weight: 600; + line-height: 133%; +} +.subscription__add-content{ + +} + +.tabs__buttons{ + margin: -12px; + + display: flex; + flex-wrap: wrap; +} +.tabs__content-wrap{ + margin-top: 24px; +} +.tabs__content{ + display: none; +} +.tabs__content.active{ + display: block; +} + +.cabinet__control--column{ + flex-direction: column; +} + +.cabinet__control--column > *:not(:first-child){ + margin-top: 16px +} + +.cabinet-card-order__payment{ + +} +.cabinet-card-order__sub-title{ + font-family: var(--font-family); + font-weight: 600; + line-height: 143%; + color: var(--text-3); +} +.cabinet-card-order__date{ + font-family: var(--font-family); + font-weight: 700; + line-height: 125%; + color: var(--text-3); +} + +.cabinet-card-order-payment__price span{ + font-size: 12px; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css new file mode 100644 index 0000000..77d7532 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css @@ -0,0 +1,2017 @@ +/* Основные стили для компьютера */ + +/* header start */ + +.header{ + position: relative; + + background-color: var(--background-white); + + position: fixed; + left: 0; + top: 0; + right: 0; + + z-index: 200; +} + +.detail .product__main{ + width: 100%; +} + +.header__content::after{ + content: ''; + + position: absolute; + left: auto; + right: auto; + bottom: 0; + + width: calc(100% - 48px); + max-width: 1552px; + height: 1px; + + background: var(--text-3); +} + +.detail-block-form__items{ + margin: 25px 0 0; +} + +.header__content{ + height: 72px; + + padding: 14px 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__open-menu{ + display: none; + + width: 24px; + aspect-ratio: 1; + + position: relative; + + border: none; + background: none; +} +.header__open-menu::before{ + content: ''; + + position: absolute; + top: 8px; + left: 4px; + + width: 16px; + height: 2px; + + background: var(--background-black); + border-radius: 1px; + +} +.header__open-menu::after{ + content: ''; + + position: absolute; + left: 4px; + bottom: 8px; + + width: 16px; + height: 2px; + + background: var(--background-black); + border-radius: 1px; +} + +.header__logo{ + width: 182px; + height: 40px; +} +.header__logo-black, +.header__logo-white{ + width: 100%; + height: 100%; +} +.header__logo-white{ + display: none; +} + +.header__menu-block{ + position: absolute; + top: 72px; + left: 0; + + width: 100%; + height: 0; + + overflow: hidden; + transition: height .2s ease-out; + + background-color: var(--background-white); + + z-index: 100; +} + +.header__pc-menu{ + padding: 40px 46px; + + display: flex; + justify-content: center; + + position: relative; +} +.header__pc-menu::before{ + content: ''; + + position: absolute; + top: 0; + left: 46px; + + width: 330px; + height: 248px; + + background-image: url(../img/pet/cat.png); + background-repeat: no-repeat; +} +.header__pc-menu::after{ + content: ''; + + position: absolute; + top: 0; + right: 46px; + + width: 330px; + height: 248px; + + background-image: url(../img/pet/dog.png); + background-repeat: no-repeat; +} +.header-pc-menu__content{ + width: 600px; + + display: flex; + justify-content: space-between; +} +.header-pc-menu__item{ + +} +.header-pc-menu__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + color: var(--text-black); + + text-decoration: none; +} +.header-pc-menu__list{ + margin-top: 16px; + + list-style-type: none; +} +.header-pc-menu__list-li{ + margin-top: 25px; +} +.header-pc-menu__list-li:first-child{ + margin-top: 0; +} +.header-pc-menu__list-li a{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-0); + + text-decoration: none; +} +.header__phone-menu{ + display: none; + + padding: 24px 16px; + + height: calc(100vh - 56px); + + overflow-x: auto; +} +.header-phone-menu__item{ + padding: 16px 0; + + border-top: 1px solid #f4f1f0; + border-bottom: 1px solid #f4f1f0; + + display: flex; + flex-direction: column; +} +.header-phone-menu__item:first-child{ + border-top: 0; +} +.header-phone-menu__item:last-child{ + border-bottom: 0; +} +.header-phone-menu__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; +} +.header-phone-menu__title--gradient{ + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.header-phone-menu__category{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 18px; + line-height: 133%; + color: var(--text-black); + + text-decoration: none; +} +.header-phone-menu__list{ + margin-top: 24px; + + padding-left: 32px; + + list-style-type: none; +} +.header-phone-menu__list-item{ + margin-top: 16px; +} +.header-phone-menu__list-item:first-child{ + margin-top: 0; +} +.header-phone-menu__list-item a{ + font-family: var(--font-family); + font-weight: 500; + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + text-decoration: none; +} +.header.white{ + background: none; +} +.header.white .header__logo-black{ + display: none; +} +.header.white .header__logo-white{ + display: block; +} +.header.white .main-menu__link{ + color: var(--text-white); +} +.header.white .main-menu__button{ + background: var(--background-white); +} +.header.white .lang__open{ + color: var(--text-white); +} +.header.white .header__content::after{ + background: var(--background-white); +} +.header.white .lang-open__black{ + display: none; +} +.header.white .lang-open__white{ + display: block; +} +.header.white .mini-profile__icon.white{ + display: block; +} +.header.white .mini-profile__icon.black{ + display: none; +} +.header.white .header__open-menu::before, +.header.white .header__open-menu::after{ + background: var(--background-white); +} +.header__phone-menu::-webkit-scrollbar { + width: 0px; +} + +main{ + padding-top: 72px; +} +/* header end */ + +/* product */ +.product{ + padding: 24px; + } + .product__header{ + display: flex; + justify-content: space-between; + align-items: center; + } + .product__tag{ + margin: 36px -12px -12px -12px; + + display: flex; + align-items: center; + flex-wrap: wrap; + } + .product-tag__item{ + margin: 12px; + + padding: 1px; + + border-radius: 16px; + + background: var(--gradient-blue); + border: none; + } + .product-tag-item__content{ + padding: 3px 11px; + + background: var(--background-white); + + border-radius: 15px; + + display: flex; + align-items: center; + } + .product-tag-item__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .product-tag-item__button{ + margin: 2px 0 2px 4px; + + width: 20px; + aspect-ratio: 1; + + background: none; + border: none; + + background-image: url(../img/svg/main/gradient-x.svg); + background-repeat: no-repeat; + background-position: center; + } + .product__error{ + margin: auto; + + padding: 0 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-0); + text-align: center; + } + .product__error-button{ + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: 1px solid var(--text-0); + background: var(--background-white); + text-decoration: none; + } + .product__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + text-align: center; + color: var(--text-black); + } + .product__main{ + margin: 36px -12px -12px; + + /* width: 100%; */ + + display: flex; + align-items: stretch; + flex-wrap: wrap; + } + .product__item{ + margin: 12px; + + width: calc(25% - 24px); + + display: flex; + flex-direction: column; + justify-content: space-between; + + background-color: var(--background-grey); + border-radius: 24px; + + overflow: hidden; + + position: relative; + } + .product__item::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: calc(100% - 2px); + height: calc(100% - 2px); + + border: 1px solid #000; + border-radius: 24px; + + pointer-events: none; + transition: opacity .2s ease-out; + + opacity: 0; + } + .product__item:hover::before{ + opacity: 1; + } + .product__item.active::before{ + opacity: 0; + } + .product-item__block-label{ + position: absolute; + top: 16px; + left: 16px; + } + .product-item__label{ + position: absolute; + top: 16px; + left: 16px; + + margin: -2px; + + display: flex; + align-items: center; + + z-index: 10; + } + .product-item-label__tag{ + margin: 2px; + + padding: 4px 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + color: #f4f1f0; + + border-radius: 16px; + display: block; + + text-decoration: none; + } + .product-item-label__tag--new{ + background: var(--gradient-blue); + } + .product-item-label__tag--new-green{ + background: #d9ffcc; + color: #4e7623; + } + .product-item-label__tag--sale{ + background: var(--gradient-red); + } + .product-item-label__tag--sale-red{ + color: #fa0505; + background: #ffe5e5; + } + .product-item-label__tag--black{ + background: var(--background-black); + color: var(--text-white); + } + .product-item-label__tag--title{ + padding: 4px 2px; + + font-size: 16px; + line-height: 125%; + color: var(--text-black); + + display: flex; + align-items: center; + } + .product-item__product-card{ + height: 274px; + + display: flex; + justify-content: center; + align-items: center; + } + .product-item__images{ + height: 242px; + object-fit: contain; + } + .product-item__content-card{ + padding: 15.5px; + } + .product-item__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + text-decoration: none; + display: block; + } + .product-item__title:first-child{ + margin-top: 0; + } + .product-item__price{ + margin-top: 8px; + + display: flex; + align-items: center; + } + .product-item__price p{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + color: var(--text-black); + } + .product-item__price p::after{ + + padding-left: 5px; + } + .product-item__price span{ + margin-left: 9px; + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-red); + } + .product-item__price del{ + margin-left: 24px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 18px; + line-height: 133%; + text-transform: uppercase; + text-decoration: line-through; + color: var(--text-6); + } + .product-item__price del::after{ + + } + .product-item__price span::before{ + content: '-'; + } + .product-item__price span::after{ + content: '%'; + } + .product-item__bye{ + margin-top: 8px; + } + .product__item.hiding .product-item__images{ + filter: grayscale(1) + } + .product__item.hiding .product-item__price{ + color: var(--text-grey); + } + .product-item__overlay{ + position: absolute; + top: 100%; + left: 0; + + width: 100%; + height: 100%; + + padding: 24px; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: 24px; + backdrop-filter: blur(25px); + background-color: rgba(242, 242, 242, 0.8); + + z-index: 10; + + transition: top .4s ease-out; + } + .product-item__overlay.active{ + top: 0; + } + .product-item-overlay__header{} + .product-item-overlay__tags{ + margin: 4px -6px -6px -6px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-3); + + display: flex; + flex-wrap: wrap; + + list-style-type: none; + } + .product-item-overlay__tags li{ + margin: 4px 6px; + + position: relative; + } + .product-item-overlay__tags li:nth-child(n+1)::after{ + content: ''; + + position: absolute; + top: 6px; + right: -8px; + + width: 4px; + aspect-ratio: 1; + + background-color: var(--text-3); + border-radius: 50%; + } + .product-item-overlay__tags li:last-child::after, + .product-item-overlay__tags li:last-child::before{ + display: none; + } + .product-item-overlay__price{ + margin-top: 32px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); + } + .product-item-overlay__price::after{ + + } + .product-item-overlay__block-button{ + margin-top: 32px; + } + .product-item-overlay__button{ + margin-top: 16px; + } + .product-item-overlay__button:first-child{ + margin-top: 0; + } + .product-item-overlay__input-block{ + + } + .product-item-overlay__field{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; + } + .product-item-overlay__field:first-child{ + margin-top: 0; + } + .product-item-overlay-field__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-0); + } + .product-item__form{ + + } +/* product */ + +/* modal */ +/* .modal__button .to-know{ + display: none; +} */ +/* modal */ + +/* footer */ +.footer{ + margin-top: 80px; + + padding: 40px 24px; + + background: var(--background-black); +} +.footer__wrapper{ + width: 100%; + + display: flex; +} +.footer__content{ + width: calc(100% - 364px); +} +.footer__logo{ + width: 187px; + height: 43px; +} +.footer__address{ + margin-top: 24px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + font-style: normal; +} +.footer__list{ + margin: 28px -12px -12px -12px; + + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} +.footer-list__item{ + margin: 12px; + + width: calc(50% - 24px); + + display: flex; + flex-direction: column; +} +.footer-list__item:nth-child(even){ + width: 322px; +} +.footer-list__item .button{ + border-radius: 24px; +} +.footer-list__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-white); +} +.footer-list__link{ + margin-top: 4px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-white); + + text-decoration: none; +} +.footer__form{ + margin-left: 48px; + + width: 364px; +} +.footer__about{ + margin-top: 16px; + + padding-top: 15px; + + display: flex; + justify-content: space-between; + align-items: center; + + border-top: 1px solid var(--text-white); +} +.footer-about__text{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + text-align: right; + color: var(--text-white); + opacity: 0.6; + + text-decoration: none; +} +.footer__social-media{ + display: none; +} +/* footer */ + +/* detail */ +.detail{ + margin: 48px 24px 24px 24px; + + display: flex; + align-items: start; + flex-wrap: wrap; +} +.detail__images{ + margin: -12px; + + width: calc(50% - 24px); + + display: flex; + flex-wrap: wrap; +} +.detail__image{ + margin: 12px; + + border-radius: 24px; + + display: flex; + align-items: center; + justify-content: center; + + background: var(--background-grey); + cursor: pointer; +} +.detail__image--width-perc-100{ + width: calc(100% - 24px); + height: 600px; + +} +.detail__image--width-perc-50{ + width: calc(50% - 24px); + height: 288px; +} +.detail__image--width-perc-100 img{ + width: 90%; + height: 90%; + + object-fit: contain; +} +.detail__image--width-perc-50 img{ + width: 100%; + height: 100%; + + object-fit: contain; +} +.detail__content{ + margin-left: 48px; + + width: calc(50% - 24px); +} +.detail__label{ + margin: -2px; + display: flex; + align-items: center; +} +.detail__label .product-item-label__tag:last-child{ + margin-left: auto; +} +.detail__label .product-item-label__tag:first-child{ + margin-left: 0; +} +.detail__title{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; + color: var(--text-black); +} +.detail__block-price{ + margin-top: 24px; + + display: flex; + align-items: center; +} +.detail-block-price__price{ + font-family: var(--font-family); + font-weight: 700; + font-size: 36px; + line-height: 111%; + text-transform: uppercase; +} +.detail-block-price__price::after{ + +} +.detail-block-price__sale{ + margin-left: 22px; + + display: flex; + align-items: center; +} +.detail-block-price-sale__text{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 120%; + text-transform: uppercase; + text-decoration: line-through; + color: var(--text-6); +} +.detail-block-price-sale__text::after{ + +} +.detail-block-price-sale__perc{ + margin-left: 9px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-red); +} +.detail-block-price-sale__perc::before{ + content: '-'; +} +.detail-block-price-sale__perc::after{ + content: '%'; +} +.detail-block__form{ + margin-top: 48px; + + display: flex; + flex-direction: column; +} +.detail-block-form__item{ + margin-top: 24px; + + min-width: 345.89px; + + display: flex; + align-items: center; + flex-wrap: wrap; +} +.detail-block-form__item--radio{ + margin: 16px -8px -8px -8px; +} +.detail-block-form__item:first-child{ + margin-top: 0; +} +.detail-block-form__item button{ + margin: 8px; +} +.detail-block-form__submit{ + min-width: 345.89px; +} +.detail__warning{ + padding: 3px; + + border-radius: 24px; + + background: var(--gradient-turquoise); +} +.detail-warning__content{ + padding: 26px; + + border-radius: 22px; + + background: var(--background-white); +} +.detail-warning__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + color: var(--text-black); +} +.detail-warning__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.detail__toggle{ + margin-top: 48px; + margin-bottom: 48px; +} +.detail__wrapper-catalot{ + margin-top: 64px; + + width: calc(100% + 16px); + + overflow: hidden; + + position: relative; +} +.detail__catalot{ + +} +.detail-catalot__header{ + padding-right: 16px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.detail-catalot__control{ + display: flex; + align-items: center; +} +.detail-catalot-control__button{ + margin-left: 24px; + + width: 48px; + aspect-ratio: 1; + + border-radius: 50%; + border: 1px solid var(--background-black); + background: none; + + display: flex; + justify-content: center; + align-items: center; +} +.detail-catalot__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 100%; + text-transform: uppercase; + text-align: start; + color: var(--text-0); +} +.detail-catalot__content{ + margin: 12px -12px -12px -12px; + + width: 100%; + + display: flex; +} +.detail__catalot .product__item{ + width: calc(100% - 24px); +} +.detail__images-phone{ + display: none; +} +.back-detail{ + display: none; +} +.toggle__table{ + margin-top: 32px; + + display: flex; + flex-wrap: wrap; +} +.toggle__table:first-child{ + margin-top: 0; +} +.toggle__table--three .toggle-table__block:nth-child(1){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(2){ + width: 40%; +} +.toggle__table--three .toggle-table__block:nth-child(3){ + width: 20%; +} +.toggle__table--two .toggle-table__block{ + width: calc(50% - 20px); +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-left: 40px; +} +.toggle-table__block{ + +} +.toggle-table__item{ + margin-top: 8px; + + width: 100%; + + display: flex; + justify-content: space-between; +} +.toggle-table__item p{ + display: block; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + flex-shrink: 0; +} +.toggle-table__item .warning{ + width: 100%; +} +.toggle-table__item .warning p{ + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + text-align: center; +} +.toggle-table__title{ + margin-bottom: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.toggle-table__title--center{ + text-align: center; +} +.toggle-table-item__line{ + margin: 23px 8px 0 8px; + + width: 100%; + + height: 1px; + background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, #333, #333); + background-size: 4px 2px, 100% 2px; + + opacity: .6; +} + +.radio-button{ +} +.radio-button__input{ + display: none; +} +/* detail */ + +/* gallery */ +.gallery{ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + + padding: 24px; + + display: flex; + align-items: center; + + background: var(--background-white); + + pointer-events: none; + opacity: 0; + transition: opacity .2s ease-out; + + z-index: 300; +} +.gallery.active{ + opacity: 1; + pointer-events: auto; +} +.gallery__close{ + position: absolute; + top: 24px; + right: 24px; + + z-index: 10; +} +.gallery__pagination{ + margin: -12px; +} +.gallery-pagination__item{ + margin: 12px; + + width: 134px; + height: 136px; + + display: flex; + justify-content: center; + align-items: center; + + border: none; + border-radius: 16px; + background: var(--background-grey); +} +.gallery-pagination__item img{ + width: 90%; + max-height: 90%; + + object-fit: contain; +} +.gallery__slider{ + margin-left: 48px; + + padding: 100px; +} +.gallery__slider{ + width: 100%; +} +.gallery__slider .swiper-pagination{ + display: none; +} +.gallery__slider .swiper-button-next::after, +.gallery__slider .swiper-button-prev::after{ + display: none; +} +.gallery-button{ + width: 48px; + height: 48px; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--background-black); + border-radius: 20px; + + background: none; +} +.gallery__slider .swiper-slide{ + display: flex; + justify-content: center; + align-items: center; +} +.gallery__block{ + width: 600px; + height: 774px; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-grey); + border-radius: 24px; +} +.gallery__block img{ + width: 90%; + max-height: 90%; + + object-fit: contain; +} +.gallery__wrapper{ + margin: 0 auto; + max-width: 1600px; + + display: flex; + align-items: center; +} +/* .swiper { + width: 600px; + height: 300px; +} */ + +/* gallery */ + + +/* cabinet */ +.cabinet{ + padding: 24px; + + display: flex; + justify-content: space-between; +} +.cabinet__control{ + margin: 24px; + margin-bottom: 0; + + display: none; +} +.cabinet-control__button{ + margin-left: 8px; + + padding: 12px 16px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: var(--background-white); + border: 2px solid var(--text-black); + border-radius: 48px; + + transition: opacity .2s ease-out; +} +.cabinet-control__button:first-child{ + margin-left: 0; +} +.cabinet-control__button.active{ + background: var(--background-black); + color: var(--text-white); +} +.cabinet-control__button:hover{ + opacity: .8; +} +.cabinet__orders{ + width: calc(((100% - 48px) / 3) * 2); +} +.cabinet__profile{ + width: calc((100% - 48px) / 3); +} + +.cabinet-card{ + margin-top: 32px; + + padding: 1px; + + border-radius: 20px; +} +.cabinet-card:first-child{ + margin-top: 0; +} +.cabinet-card--green{ + background: var(--background-green); +} +.cabinet-card--green-white{ + background: var(--background-green-white); +} +.cabinet-card--green-white .cabinet-card__content{ + background: none; +} +.cabinet-card--red-blue{ + background: var(--gradient-red); +} +.cabinet-card--grey{ + background: var(--background-9); +} +.cabinet-card__content{ + padding: 23px; + + border-radius: 19px; + + background-color: var(--background-white); +} +.cabinet-card__element{ + margin-top: 24px; + + position: relative; +} +.cabinet-card__element--margin-top-32{ + margin-top: 32px; +} +.cabinet-card__element:first-child, +.cabinet-card__element--margin-top-32:first-child{ + margin-top: 0 +} +.cabinet-card__element-change{ + position: absolute; + top: 14px; + right: 0; + + width: 24px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/change-dot.svg); + border: none; + background-color: var(--background-white); + + transition: opacity .2s ease-out; +} +.cabinet-card__element-change:hover{ + opacity: .8; +} +.cabinet-card__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; + background: var(--gradient-blue); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.cabinet-card__text{ + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + + color: var(--text-black); +} +.cabinet-card__text--grey{ + color: var(--text-grey); +} +.cabinet-card__label{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + + color: var(--text-3); +} +.cabinet-card__status{ + padding-left: 20px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + + position: relative; +} +.cabinet-card__status--chek{ + color: var(--text-green); +} +.cabinet-card__status--chek::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-chek.svg); + object-fit: contain; +} +.cabinet-card__status--cancelled{ + color: var(--text-red); +} +.cabinet-card__status--cancelled::before{ + content: ''; + + position: absolute; + top: 0; + left: 0; + + width: 16px; + height: 16px; + + background-image: url(../img/svg/main/status-cancelled.svg); + object-fit: contain; +} +.cabinet-card__block-accounts{ + display: flex; +} +.cabinet-card__account{ + margin-left: 16px; + + width: 40px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-9); + border-radius: 50%; +} +.cabinet-card__account:first-child{ + margin-left: 0; +} +.cabinet-card__block-buttons{ + display: flex; + justify-content: space-between; + align-items: center; +} +.cabinet-card__button{ + padding: 8px 8px 6px 0; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + background: none; + border: none; + + position: relative; + + text-decoration: none; +} +.cabinet-card__button::before{ + content: ''; + + position: absolute; + bottom: 6px; + + width: calc(100% - 8px); + height: 1px; + + background: var(--text-black); + + transition: opacity .2s ease-out; +} +.cabinet-card__button:hover{ + opacity: .8; +} +.cabinet-card__confirm{ + margin-top: 16px; + + border-radius: 20px; + padding: 4px 24px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + + + background: var(--background-black); + color: var(--text-white); + border: none; + + transition: opacity .2s ease-out; +} +.cabinet-card__confirm:hover{ + opacity: .8; +} +.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{ + margin-top: 8px; +} +.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{ + margin-top: 0px; +} +.cabinet-card__block-add-pets{ + width: 100%; + + display: flex; + align-items: center; + + background: none; + border: none; +} +.cabinet-card-add-pets__circle{ + width: 48px; + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border: 1px solid var(--text-6); + border-radius: 50%; +} +.cabinet-card-add-pets__text{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 600; + font-size: 20px; + line-height: 120%; + + color: var(--text-6); + + position: relative; +} +.cabinet-card-add-pets__text::after{ + content: ''; + + position: absolute; + left: 0; + bottom: -4px; + + width: 100%; + height: 1px; + + background: var(--text-6); +} +.cabinet-card__discount{ + display: flex; + align-items: center; +} +.cabinet-card-discount__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-discount__percent{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-discount__percent::after{ + content: '%'; +} +.cabinet-card-discount__arrow{ + display: inline-block; + + margin-left: 6px; + + width: 20px; + aspect-ratio: 1; + + background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg); + background-position: center; +} +.cabinet-card__no-orders{ + margin-top: 32px; + + padding: 48px 24px; +} +.cabinet-card-no-orders__element{ + margin-top: 26px; +} +.cabinet-card-no-orders__element:first-child{ + margin-top: 0; +} +.cabinet-card-no-orders__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + text-align: center; + color: var(--text-black); +} +.cabinet-card__pet{ + display: flex; + align-items: center; +} +.cabinet-card-pet__icon{ + width: 48px; + aspect-ratio: 1; + + border-radius: 50%; + background: var(--gradient-blue); +} +.cabinet-card-pet-icon__content{ + margin: 1px; + + width: calc(100% - 2px); + aspect-ratio: 1; + + display: flex; + justify-content: center; + align-items: center; + + border-radius: 50%; + background: var(--background-white); +} +.cabinet-card-pet-icon__content img{ + width: 32px; + aspect-ratio: 1; + + object-fit: contain; +} +.cabinet-card-pet__name{ + margin-left: 24px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card__order{ + position: relative; +} +.cabinet-card-order__header{ + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.cabinet-card-order__main{} +.cabinet-card-order-main__date{ + font-family: var(--font-family); + font-weight: 500; + font-size: 24px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-main__number{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-main__number::before{ + content: '№'; +} +.cabinet-card-order__payment{ + display: flex; + align-items: flex-end; + + transition: margin .2s ease-out; +} +.cabinet-card-order-payment__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-payment__price{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 16px; + line-height: 125%; + color: var(--text-black); +} +.cabinet-card-order-payment__price::after{ + margin-left: 5px; + +} +.cabinet-card-order-payment__price--add::after{ + display: none; +} +.cabinet-card-order__content{ + margin-top: 24px; +} +.cabinet-card-order__content +.cabinet-card-order__status{ + display: flex; + align-items: center; +} +.cabinet-card-order-status__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-status__pointer{ + margin-left: 12px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-status__pointer--grey{ + color: var(--text-6); +} +.cabinet-card-order-status__pointer--green{ + color: var(--text-green); +} +.cabinet-card-order-status__pointer--red{ + color: var(--text-red); +} +.cabinet-card-order__block-detail{ + height: 0; + overflow: hidden; + + transition: height .2s ease-out; +} +.cabinet-card-order__detail{ + padding-top: 24px; +} +.cabinet-card-order-detail__address{} +.cabinet-card-order-detail-address__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-detail-address__text{ + margin-top: 16px; + + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.cabinet-card-order-detail__main{ + margin-top: 24px; + + display: flex; + justify-content: space-between; +} +.cabinet-card-order-detail-main__products{} +.cabinet-card-order-detail-main__product{ + margin-top: 4px; + + display: flex; + align-items: center; +} +.cabinet-card-order-detail-main__product:first-child{ + margin-top: 0; +} +.cabinet-card-order-detail-main-product__img{ + width: 106px; + height: 96px; +} +.cabinet-card-order-detail-main-product__content{ + display: flex; +} +.cabinet-card-order-detail-main-product__description{ + width: 212px; +} +.cabinet-card-order-detail-main-product-description__what{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); +} +.cabinet-card-order-detail-main-product-description__with-what{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-6); +} +.cabinet-card-order-detail-main-product__count{ + margin-left: 8px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-6); +} +.cabinet-card-order-detail-main-product__count::before{ + margin-right: 4px; + + content: 'x'; +} +.cabinet-card-order-detail-main-product__price{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-black); +} +.cabinet-card-order-detail-main-product__price::after{ + content: ' Р'; +} +.cabinet-card-order-detail-main__links{ + display: flex; + flex-direction: column; +} +.cabinet-card-order-detail-main__link{ + margin-top: 16px; +} +.cabinet-card-order-detail-main__link:first-child{ + margin-top: 0; +} +.cabinet-card-order__open-detail{ + margin-top: 24px; + + padding-right: 24px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); + + border: none; + background: none; + + position: relative; +} +.cabinet-card-order__open-detail::after{ + content: ''; + + position: absolute; + top: 6.75px; + right: 0; + + width: 12.5px; + height: 10.5px; + + background-image: url(../img/svg/main/arrow-black.svg); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + + transition: transform .2s; + /* transform: rotate(180deg); */ +} +.cabinet-card-order__detail-short{ + position: absolute; + right: 0; + bottom: 0; + + display: flex; + align-items: center; + + transition: opacity .2s .1s ease-out; +} +.cabinet-card-order-detail-short__item{ + border-radius: 16px; + width: 106px; + height: 96px; +} +.cabinet-card__download{ + margin-top: 32px; +} +.cabinet-card__order.active .cabinet-card-order__detail-short{ + opacity: 0; +} +.cabinet-card__order.active .cabinet-card-order__open-detail::after{ + transform: rotate(180deg); +} +.cabinet-card-order__payment-add{ + display: flex; + flex-direction: column; + align-items: start; +} +.cabinet-card-order__sub-title{ + font-size: 14px; +} +.cabinet-card-order__date{ + font-size: 16px; +} +/* .cabinet-card-no-orders__ */ +.cabinet__subscription-pc{ +} +.cabinet__subscription-mobile{ + display: none; +} +/* cabinet */ + +@media only screen and (max-width: 1600px) { + +.wrapper{ + max-width: 1280px; +} + +.product__item{ + margin: 12px; + + width: calc(33.3% - 24px); +} + +.gallery__wrapper{ + max-width: 1280px; +} + +.header__content::after{ + max-width: 1232px; +} +} + +@media only screen and (max-width: 1365px) { + .gallery__wrapper{ + max-width: 100%; + } + +} + +.subscription{ + margin-top: 12px; +} +.subscription__item{ + padding: 12px 0; + justify-content: space-between; +} +.subscription__item{ + font-size: 20px; +} +.subscription__add{ + color: var(--text-black); +} +.subscription__add-header{ + +} +.subscription__add-title{ + font-size: 24px; +} +.subscription__add-content{ + padding: 24px 0 12px 0; +} +.subscription__add-product{ + align-items: start; +} +.subscription__add-product > *:nth-child(3){ + margin-left: auto; + align-items: center; +} +.subscription__add .cabinet-card-order-detail-main-product-description__what { + font-size: 16px; + line-height: 125%; +} +.subscription__add .cabinet-card-order-detail-main-product-description__with-what { + font-weight: 500; + font-size: 16px; +} +.subscription__add .cabinet-card-order-detail-main-product__count{ + font-weight: 700; + font-size: 16px; + line-height: 100%; +} +.subscription__add .cabinet-card-order-detail-main-product__price{ + font-weight: 500; + font-size: 20px; + line-height: 120%; +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-mobile.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-mobile.css new file mode 100644 index 0000000..4464cbc --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-mobile.css @@ -0,0 +1,336 @@ +/* Стили для мобильных устройств */ +@media only screen and (max-width: 720px) { +/* product */ +.product__item{ + width: calc(100% - 24px); +} +/* product */ + +/* modal */ +.modal__basket{ + width: 100%; +} +.modal__filter{ + width: 100%; +} +.modal__to-know, +.modal__to-know-submit{ + width: 100%; +} +.modal__button .to-know{ + display: flex; + + background: none; +} +.modal__basket .modal__header { + height: calc(100% - 156px); + margin-bottom: -36px; +} +.modal-basket-item__block-image{ + position: absolute; + width: 80px; +} +.modal-basket-item__image{ + width: 48px; +} +.modal-basket-item__content{ + margin-left: 0; + + padding-left: 96px; +} +.modal-basket-item__control{ + margin-left: -80px; +} +.modal-basket-item__title{ + min-height: 40px; + + font-size: 16px; +} +.modal-basket__item--return{ + flex-direction: column; + align-items: start; +} +.modal-basket__item--return .modal-basket-item__title{ + margin-right: auto; +} +.notification--width-584{ + width: 100%; +} +.notification__title{ + font-size: 20px; +} +.notification__text--center-pc{ + text-align: start; +} +.notification__img{ + height: 360px; +} +.notification__title{ + padding-right: 96px; +} +.modal-form__buttons--two{ + flex-wrap: wrap; +} +.modal-form__buttons--two button, .modal-form__buttons--two input{ + margin-top: 24px; + width: 100%; +} +.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{ + margin-top: 0; +} +.modal-map__control{ + flex-wrap: wrap; +} +.modal-map-control__item{ + width: calc(100% - 24px); +} +.form__full-mobile{ + width: 100%; + border-radius: 0; + border: none; +} + +.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ + width: 69px; +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ + +} +.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ + width: 82px; +} +.form__input{ + padding: 12px 14px; +} +.modal-form--height-100-phone{ + min-height: 100%; +} +/* modal */ + +/* footer */ +.footer__about{ + display: none; +} +.footer__wrapper{ + flex-direction: column; +} +.footer__content{ + width: 100%; +} +.footer__form{ + margin-top: 24px; + margin-left: 0; + + width: 100%; +} +.footer__social-media{ + display: block; + + margin-top: 24px; +} +.footer-about__text{ + padding-top: 35px; + display: block; + text-align: left; +} +.footer__list{ + margin-top: 20px; +} +/* footer */ + +/* detail */ +.toggle__table--two .toggle-table__block{ + width: 100%; +} +.toggle__table--two .toggle-table__block:nth-child(even){ + margin-top: 32px; + margin-left: 0; +} +.toggle__table--three .toggle-table__block:nth-child(1){ + width: 31%; +} +/* detail */ + +/* cabinet */ +.cabinet-card__title{ + font-size: 20px; +} +.cabinet-card__no-orders{ + margin-top: 16px; +} +.cabinet-card-order__header{ + flex-direction: column; +} +.cabinet-card-order__payment{ + margin-top: 16px; +} +.cabinet-card-order-detail__main{ + flex-direction: column; +} +.cabinet-card-order-detail-main__links{ + margin-top: 24px; + + align-items: start; +} +.cabinet-card-order-detail-main-product__img{ + width: 70px; + height: 70px; +} +.cabinet-card-order-detail-main__product{ + margin-top: 16px; + + align-items: start; +} +.cabinet-card-order-detail-main-product__content{ + margin-left: 16px; + + flex-wrap: wrap; + + position: relative; +} +.cabinet-card-order-detail-main-product__description{ + width: 100%; +} +.cabinet-card-order-detail-main-product__count{ + position: absolute; + left: 116px; + bottom: 0; +} +.cabinet-card-order-detail-main-product__price{ + position: absolute; + left: 153px; + bottom: 0; +} +.cabinet-card__content{ + padding-right: 19px; +} +.cabinet-card-order-main__date{ + font-size: 20px; +} +/* .cabinet-card__order.active */ +/* .cabinet-card__order.active */ +/* cabinet */ +} + +@media only screen and (max-width: 576px) { +/* header */ + +/* header */ + +/* product */ +.product__header{ + flex-direction: column; + align-items: start; +} +.product__header .button{ + margin-top: 48px; +} +/* product */ + +/* modal */ +.modal__aside{ + left: 0; +} +.form-input-radio__title span{ + display: block; + width: 100%; + + color: var(--text-grey); +} +.modal-form__title{ + font-size: 20px; +} +/* modal */ + +/* detail */ +.detail-block-form__item, +.detail-block-form__submit{ + min-width: 100%; +} +/* detail */ + +/* cabinet */ + +.cabinet-card-order-detail-main-product__img{ + width: 40px; + height: 40px; +} + +.cabinet-card-order-detail-main-product__count{ + left: auto; + right: 71px; +} +.cabinet-card-order-detail-main-product__price{ + left: auto; + right: 0; +} +.cabinet-card-order__detail-short{ + transition-delay: 0; + transition-duration: 0; +} +/* cabinet */ +} + +@media only screen and (max-width: 720px) { + .subscription__item{ + flex-direction: column; + } + + .subscription__item > p:first-child{ + font-size: 16px; + color: var(--text-6); + } + .subscription__item > p:last-child{ + margin-top: 6px; + } + + .subscription__add-title { + font-size: 20px; + } + + .subscription__add-product{ + flex-wrap: wrap; + } + + .subscription__add-product > *:not(:first-child){ + padding-top: 0; + } + .subscription__add-product .cabinet-card-order-detail-main-product__img{ + width: 73px; + height: 66px; + } + .subscription__add-product .cabinet-card-order-detail-main-product-description__what{ + font-size: 12px; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{ + margin-top: 8px; + + font-size: 12px; + } + .subscription__add-product .cabinet-card-order-detail-main-product__description { + width: calc(100% - 73px); + } + .subscription__add-product .cabinet-card-order-detail-main-product__content{ + position: static; + margin-top: -10px; + margin-left: auto; + width: calc(100% - 73px); + + display: flex; + justify-content: space-between; + align-items: center; + } + .subscription__add-product .cabinet-card-order-detail-main-product__count{ + position: static; + font-size: 12px; + } + .subscription__add-product .cabinet-card-order-detail-main-product__price{ + position: static; + font-size: 16px; + } +} + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-order.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-order.css new file mode 100644 index 0000000..fcfde9e --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-order.css @@ -0,0 +1,241 @@ +.order{ + display: flex; +} +.order__title{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order__contacts{ + width: calc(50% - 0.5px); + + padding: 24px; + + border-right: 1px solid #121212; +} +.order-contacts__header{ + display: flex; + justify-content: space-between; + align-items: center; +} +.order-contacts__form{ + margin-top: 24px; +} +.order-contacts__delivery{ + margin-top: 47.5px; + + padding-top: 48px; + + border-top: 1px solid var(--background-grey); +} + +.order-contacts-deliver__item{ + margin-top: 24px; +} +.order-contacts-deliver__date{ + padding: 8px; + + border-radius: 24px; + + background: var(--background-grey); +} +.order-contacts-deliver__date .form-input-radio__item{ + margin-top: 24px; +} +.order-contacts-deliver__date .form-input-radio__item:first-child{ + margin-top: 0; +} +.order__your{ + width: calc(50% - 0.5px); + + padding: 24px 24px 24px 48px; + + background: var(--background-grey); +} +.order-your__products{ + margin-top: 48px; +} +.order-your-products__item{ + margin-top: 16px; + + display: flex; + justify-content: space-between; +} +.order-your-products__left{ + display: flex; +} +.order-your-products__img{ + width: 40px; + aspect-ratio: 1; + + border-radius: 16px; +} +.order-your-products__content{ + margin-left: 16px; +} +.order-your-products__name{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-black); + + text-decoration: none; +} +.order-your-products__description{ + margin-top: 8px; + + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + color: var(--text-6); +} +.order-your-products__description span{ + font-weight: 700; +} +.order-your-products__description span::before{ + margin-left: 3px; + + content: 'x '; +} +.order-your-products__right{ + display: flex; +} +.order-your-products__count{ + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-6); +} +.order-your-products__count::before{ + content: 'x'; +} +.order-your-products__price{ + margin-left: 16px; + + font-family: var(--font-family); + font-weight: 700; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-black); +} +.order-your-products__price::after{ + content: 'Р'; +} +.order-your__calculation{ + margin-top: 48px; +} +.order-your__promo{ + display: flex; +} +.order-your-promo__button{ + margin-left: 8px; +} +.order-your-calculation__item{ + margin-top: 24px; + + display: flex; + justify-content: space-between; + align-items: center; +} +.order-your-calculation__title{ + font-family: var(--font-family); + font-weight: 500; + font-size: 20px; + line-height: 120%; + color: var(--text-black); +} +.order-your-calculation__value{ + font-family: var(--font-family); + font-weight: 700; + font-size: 20px; + line-height: 200%; + text-transform: uppercase; + text-align: right; + color: var(--text-black); +} +.order-your-calculation__value--price::after{ + content: ' ₽'; +} +.order-your-calculation__value--discount{ + background: var(--gradient-red); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +.order-your-calculation__value--discount::before{ + content: '- '; +} +.order-your-calculation__description{ + font-family: var(--font-family); + font-weight: 500; + font-size: 12px; + line-height: 133%; + text-align: right; + color: var(--text-9); +} +.order-your-calculation__line{ + margin-top: 23px; + border: 1px solid var(--background-9); +} +.order-your-calculation__result{ + font-family: var(--font-family); + font-weight: 700; + font-size: 24px; + line-height: 117%; + text-transform: uppercase; + color: var(--text-black); +} +.order-your-calculation__submit{ + margin-top: 48px; +} + +@media only screen and (max-width: 1200px) { +.order{ + display: block; +} +.order__contacts, .order__your{ + border: none; + width: 100%; +} +} + +@media only screen and (max-width: 720px) { +.order__title{ + max-width: 181px; + + font-size: 20px; + line-height: 120%; +} +.order__your{ + margin-top: 16px; +} +.order__contacts{ + padding: 24px 16px; +} +.order__your{ + padding: 40px 16px 9px 16px; +} +.order-your__promo{ + display: block; +} +.order-your-promo__button{ + margin-left: 0; + margin-top: 24px; + + width: 100%; +} +.order-your-products__content{ + max-width: 164px; +} +.order-your-products__count, .order-your-products__price{ + flex-shrink: 0; +} +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-tablet.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-tablet.css new file mode 100644 index 0000000..e59949c --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-tablet.css @@ -0,0 +1,348 @@ +/* Стили для планшетов */ +@media only screen and (max-width: 1200px) { +/* header */ +main{ + padding-top: 64px; +} +.main-menu{ + display: none; +} +.header__open-menu{ + display: block; +} +.lang{ + display: none; +} +.header__logo{ + width: 136px; + height: 29px; +} +.header__content{ + height: auto; + + padding: 8px 16px; +} +.mini-profile__item:nth-child(2){ + margin-left: 0; +} +.header::after{ + left: 0; + + width: 100%; +} +.header__pc-menu{ + display: none; +} +.header__phone-menu{ + display: block; +} +.header__menu-block{ + top: 56px; +} +.header__content::after{ + left: 0; + right: 0; + width: 100%; +} +/* header */ + +/* footer */ +.footer{ + margin-top: 0; + + padding: 24px 16px; +} +/* footer */ + +/* breadcrumbs */ +.breadcrumbs{ + display: none; +} +/* breadcrumbs */ + +/* product */ +.product{ + padding: 12px; + padding-top: 20px; +} +.product__title{ + font-weight: 700; + font-size: 26px; + line-height: 123%; + text-transform: uppercase; +} +.to-know p { + font-size: 18px; +} +.toggle-table__title{ + font-weight: 700; + font-size: 12px; + line-height: 133%; +} +.toggle-table__item p{ + font-weight: 500; + font-size: 12px; + line-height: 133%; +} +.toggle-table-item__line{ + margin-top: 12px; +} +.detail{ + margin: 24px 16px; +} +.back-detail{ + display: inline; +} +.detail-catalot__title{ + font-size: 22px; +} +.product__footer--error{ + margin: 48px 0px 24px; +} +/* product */ + +/* modal */ +.modal{ + padding: 0; +} +.modal__text{ + padding-right: 0; +} +.form__button-pc{ + display: none; +} +.form__button-mobile{ + display: block; +} +.modal-form{ + /* min-height: 100%; + width: 100%; + + border-radius: 0; + border: none; */ +} +.modal__notification{ + margin: 24px; +} +.form-input-phone__list{ + left: 0; +} + +.modal-form-content__line--two{ + flex-wrap: wrap; +} +.modal-form-content__line--two .modal-form-content-line__element{ + margin-top: 24px; + + width: 100%; +} +.modal-form-content__line--two .modal-form-content-line__element:first-child{ + margin-top: 0; +} +.modal-map{ + width: 100%; + + flex-direction: column; + + border-radius: 0; +} +.modal-map__left, .modal-map__right{ + width: 100%; +} +.modal-map__map iframe { + width: 100%; + height: 528px; +} +.modal-map-form__button{ + display: none; +} +.modal-map-form__sub-button{ + margin-top: 64px; + + padding: 0 24px; + + display: flex; + } +/* modal */ + +/* cabinet */ +.cabinet{ + flex-direction: column; + + position: relative; +} +.cabinet__control{ + display: flex; + + position: relative; +} +.cabinet__orders, .cabinet__profile{ + width: calc(100% - 48px); +} +.cabinet__orders, .cabinet__profile{ + position: absolute; + opacity: 0; + + transition: opacity .2s ease-out; +} +.cabinet-content{ + pointer-events:none; +} +.cabinet__orders.active, .cabinet__profile.active{ + opacity: 1; +} +.cabinet__orders.hide, .cabinet__profile.hide{ + position: static; + display: block; + pointer-events:auto; + + width: 100%; +} +.cabinet__subscription-pc{ + display: none; +} +.cabinet__subscription-mobile{ + display: block; + + margin: 24px 24px 0 24px; +} +.cabinet__orders .cabinet-card:nth-child(2){ + margin-top: 0; + } + .cabinet__orders--no-cab .cabinet-card:nth-child(2){ + margin-top: 32px; + } +/* cabinet */ +} + +@media only screen and (max-width: 980px) { +/* product */ +.product__item{ + width: calc(50% - 24px); +} +/* product */ + + +/* detail */ +.detail{ + flex-direction: column; +} +.detail__images{ + display: none; +} +.detail__content{ + width: 100%; +} +.detail__content{ + margin-left: 0; +} + +.detail__images-phone{ + display: block; + + margin-top: 48px; + margin-bottom: 48px; + + position: relative; + + overflow: hidden; +} +.detail__images-phone .swiper-slide{ + display: flex; + justify-content: center; +} +.detail-images-phone__image-block{ + width: 100%; + aspect-ratio: 1; + max-width: 500px; + + display: flex; + justify-content: center; + align-items: center; + + background: var(--background-grey); + border-radius: 16px; +} + +.detail__images-phone .swiper-pagination-bullet{ + width: 8px; + height: 8px; + + border-radius: 50%; + + border: 1px solid #666; + background-color: #666; + + opacity: 1; +} +.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{ + background-color: var(--background-white); +} + +.detail__images-phone .swiper-pagination{ + margin-bottom: 19px; +} +.detail__title{ + font-size: 26px; + line-height: 123%; +} +.gallery__slider .swiper-pagination { + display: block; +} +.gallery__pagination{ + display: none; +} + +.gallery__slider .swiper-pagination-bullet{ + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid #666; + background-color: #666; + opacity: 1; +} +.gallery__wrapper .gallery-button{ + display: none; +} + +.gallery__slider .swiper-pagination-bullet.swiper-pagination-bullet-active{ + background-color: var(--background-white); +} + +.gallery__slider{ + margin-left:0; + padding: 0px 0px 50px 0px; + /* padding: 40px; */ +} +.gallery__block { + width: 100%; + aspect-ratio: 1; + height: auto; +} +/* detail */ +} + +@media only screen and (max-width: 750px) { +/* cabinet */ +.cabinet-card-order__open-detail{ + margin-top: 144px; +} +.cabinet-card-order__detail-short{ + right: auto; + left: 0; + bottom: 48px; +} +.cabinet-card-order-detail-short__item{ + margin-left: -27px; +} +.cabinet-card-order-detail-short__item:first-child{ + margin-left: 0; +} +.cabinet-card__order.active .cabinet-card-order__open-detail{ + margin-top: 24px; +} +.cabinet-card-order__link{ + margin-top: 144px; +} +/* cabinet */ +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-ultra.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-ultra.css new file mode 100644 index 0000000..c149baa --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-ultra.css @@ -0,0 +1,4 @@ +/* Стили для ультрашироких экранов */ +@media only screen and (min-width: 1400px) { + +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/cat.png b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/cat.png new file mode 100644 index 0000000..f88dd36 Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/cat.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/dog.png b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/dog.png new file mode 100644 index 0000000..36e37ae Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/dog.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/mini-dog.png b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/mini-dog.png new file mode 100644 index 0000000..59a696d Binary files /dev/null and b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/pet/mini-dog.png differ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-back.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-back.svg new file mode 100644 index 0000000..a977e53 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-breadcrumbs.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-breadcrumbs.svg new file mode 100644 index 0000000..f1f9618 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-breadcrumbs.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-left.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-right.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-selected.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-selected.svg new file mode 100644 index 0000000..fb283a7 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-selected.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/black-x.svg b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js new file mode 100644 index 0000000..a014802 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js @@ -0,0 +1,286 @@ +'use strict'; + + +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); + +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { + let inputs = document.querySelectorAll(main); + + inputs.forEach(e => { + let thisMainFlag = e.querySelector(mainFlag), + thisMainCode = e.querySelector(mainCode), + thisInput = e.querySelector(input), + thisList = e.querySelector(list), + thisSelects = e.querySelectorAll(`.${selects}`), + thisSearchInput = e.querySelector(`.${searchInput}`); + + thisInput.onblur = function (input) { + if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { + thisList.classList.remove('active'); + } + } + + e.onclick = function (event) { + if (!event.target.classList.contains(searchInput)) { + if (thisList.classList.contains('active')) { + thisList.classList.remove('active'); + } + + thisInput.focus(); + thisList.classList.add('active'); + } + } + + thisSelects.forEach(e => { + let newIcon = e.querySelector(selectIcon), + newCode = e.querySelector(selectCode); + + e.onclick = function (event) { + event.preventDefault(); + thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; + thisMainCode.textContent = newCode.textContent; + + + setTimeout(() => { + thisList.classList.remove('active'); + }, 0); + } + + }) + }) +} + +if (document.querySelector('.form-input-phone__input')) { + checkPhone('.form-input-phone__input'); +} + +function checkPhone(input) { + document.querySelector(input).addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 4 || length == 8) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + }) +} + +inputTabs('.form-input__tabs', '.form-input-tabs__button'); +inputTabs('.modal-map__control', '.modal-map-control__item'); + +function inputTabs(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let buttons = main.querySelectorAll(button); + + buttons.forEach(button => { + button.onclick = function () { + if (button.classList.contains('active')) { + return ; + } + + main.querySelector('.active').classList.remove('active'); + + button.classList.add('active'); + + if (button.querySelector('input')){ + button.querySelector('input').click(); + } + } + }) + + }) +} + + +inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') + +function inputRadio(main ,item, textClass, input) { + let inputRadios = document.querySelectorAll(main); + + inputRadios.forEach(inputRadio => { + let items = inputRadio.querySelectorAll(item), + thisInput = inputRadio.querySelector(input); + + items.forEach(radio => { + let thisText = radio.querySelector(textClass).textContent; + + radio.onclick = function (event) { + event.preventDefault(); + + if (inputRadio.querySelector(`${item}.active`)) { + inputRadio.querySelector(`${item}.active`).classList.remove('active'); + } + thisInput.value = thisText; + radio.classList.add('active'); + } + }) + }) +} + +listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); + +function listInputRadio(main ,item, textClass, input, content, block) { + let listInputRadios = document.querySelectorAll(main); + + listInputRadios.forEach(listInputRadio => { + let thisInput = listInputRadio.querySelector(input), + items = listInputRadio.querySelectorAll(item), + thisContent = listInputRadio.querySelector(content), + thisBlock = listInputRadio.querySelector(block); + + thisInput.onclick = function () { + thisBlock.classList.add('active'); + thisBlock.style.height = '192px'; + } + + + thisInput.onblur = function(){ + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + }; + + items.forEach(item => { + item.onclick = function (event) { + event.preventDefault(); + let newText = item.querySelector(textClass).textContent; + + thisInput.value = newText; + + if (thisContent.querySelector('.active')) { + thisContent.querySelector('.active').classList.remove('active'); + } + + item.classList.add('active'); + } + }) + }) +} + +remoteControl('.form-input__remote-control', '.form-input-tabs__button'); +remoteControl('.modal-map__control', '.modal-map-control__item'); + +function remoteControl(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let subjectClass = main.dataset.content, + subject = document.querySelector(`.${subjectClass}`), + buttons = Array.from(main.querySelectorAll(button)); + + main.addEventListener('click', function (eventMain) { + setTimeout(() => { + let indexActive = buttons.findIndex((button, index) => { + if (button.classList.contains('active')) { + return true; + } + }); + if(subject.children[indexActive].classList.contains('active')){ + return ; + } + + subject.querySelector('.remote-control__item.active').classList.remove('active'); + subject.children[indexActive].classList.add('active'); + + let mandatorys = subject.querySelectorAll('.mandatory'); + + mandatorys.forEach(mandatory => { + if (mandatory.required) { + mandatory.required = false; + }else{ + mandatory.required = true; + } + }) + }, 0); + }) + }) +} + +formCheck('.modal-form__content', 'input[type=submit]'); +formCheck('.modal-map__form', 'input[type=submit]'); + +function formCheck(form, submit) { + let forms = document.querySelectorAll(form); + + forms.forEach(form => { + let thisSubmit = form.querySelector(submit); + + thisSubmit.onclick = function () { + form.classList.add('check') + } + + }) +} + +inputPhoneNoFlag('.no-flag'); + +function inputPhoneNoFlag(input){ + let inputs = document.querySelectorAll(input); + + inputs.forEach(input => { + let code = '+' + input.dataset.code; + + input.onfocus = function () { + if (input.value == '') { + input.value = code; + } + } + + input.addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (isNaN(event.data) || event.data == ' ') { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 3 || length == 7 || length == 11) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + + }) + }) +} + + +inputCheck('.form-agreement__check'); + +function inputCheck(className) { + let checks = document.querySelectorAll(className); + + checks.forEach(check => { + let square = check.querySelector('.form-agreement__square'), + input = check.querySelector('input'); + + square.onclick = function () { + input.click(); + } + }) +} + + +inputRead('.input-read'); +function inputRead(className) { + let inputs = document.querySelectorAll(className); + + inputs.forEach(input => { + input.addEventListener("input", function (event) { + let text = event.target.value; + + event.target.value = text.slice(0, -1); + }) + }) +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js new file mode 100644 index 0000000..23b16ab --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js @@ -0,0 +1,156 @@ +// 'use strict'; + +// // function +// function modalOpen(buttonElement, contentElement){ +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// elements = document.querySelectorAll(buttonElement), +// device = window.screen.width; + +// elements.forEach(e => { +// let thisContentElement = document.querySelector(contentElement); + +// e.onclick = function () { +// modal.classList.add('active'); +// thisContentElement.classList.add('active'); + +// let width = thisContentElement.clientWidth; + +// setTimeout(() => { +// if (device <= 720) { +// aside.style.width = `${device}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// }else{ +// aside.style.width = `${width}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// } +// }, 10); +// } +// }) +// } + +// function modalClose(buttonElement) { +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// asideItems = document.querySelectorAll('.modal__item'), +// elements = document.querySelectorAll(buttonElement); + +// elements.forEach(e => { +// e.onclick = function () { +// aside.style.width = '0px'; + +// asideItems.forEach(e => { +// if (e.classList.contains('active')) { +// e.style.filter = 'blur(10px)'; +// } +// }); + +// setTimeout(() => { +// asideItems.forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// } +// }); + +// modal.classList.remove('active'); +// }, 300); +// } +// }) +// } + +// function closeModalForm(close){ +// let buttons = document.querySelectorAll(close), +// modal = document.querySelector('.modal'); + +// buttons.forEach(button => { +// button.onclick = function (buttonEvent) { +// modal.classList.remove('active'); + +// if (!modal.querySelector('.modal-map.active')) { +// modal.querySelector('.modal-form.active').classList.remove('active'); +// }else{ +// modal.querySelector('.modal-map.active').classList.remove('active'); +// } +// } +// }) +// } + +// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { +// let elements = document.querySelectorAll(mainElement); + +// elements.forEach(e => { +// let thisMainElement = e, +// thisButtonElement = e.querySelector(buttonElement), +// thisHeightElement = e.querySelector(heightElement), +// thisContentElement = e.querySelector(contentElement); + +// thisButtonElement.onclick = function (e) { +// let height = thisHeightElement.clientHeight; + +// if (close == true && !thisMainElement.classList.contains('active')) { +// elements.forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// e.querySelector(contentElement).style.height = null +// } +// }) +// } + +// if (!thisMainElement.classList.contains('active')) { +// thisContentElement.style.height = `${height}px`; +// thisMainElement.classList.add('active'); +// }else{ +// thisContentElement.style.height = null; +// thisMainElement.classList.remove('active'); +// } +// } + +// }); +// } + +// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { +// let thisButton = document.querySelector(button), +// thisContent = document.querySelector(content), +// thisRemoveBlock = document.querySelector(removeBlock) || '', +// 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'); + +// if (removeBlock) { +// thisRemoveBlock.classList.remove(removeClass); +// } +// }else{ +// thisContent.style.height = null; +// thisContent.classList .remove('open'); + +// if (removeBlock) { +// if (window.scrollY <= 25) { +// thisRemoveBlock.classList.add(removeClass); +// } +// } +// } +// } +// } + +// function modalFormOpen(formOrNotification) { +// let buttons = document.querySelectorAll(formOrNotification), +// modal = document.querySelector('.modal'); + +// buttons.forEach(button => { +// button.onclick = function (eventButton) { +// let classOpenForm = button.dataset.form, +// form = modal.querySelector(`.${classOpenForm}`); + +// form.classList.add('active'); +// modal.classList.add('active'); +// } +// }) +// } +// // function \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js new file mode 100644 index 0000000..17670d2 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js @@ -0,0 +1,304 @@ +'use strict'; + +// header +toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); +toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); +toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); +// header + +// // modal +// modalOpen('.button--filter', '.modal__filter'); +// modalOpen('.basket-open', '.modal__basket'); +// modalOpen('.open-to-know', '.modal__to-know'); +// modalClose('.modal__close'); + +// let modalElement = document.querySelector('.modal'); + +// modalElement.onclick = function (event) { +// let target = event.target; +// if (target.classList.contains('modal')) { +// let aside = target.querySelector('.modal__aside'), +// modalItem = target.querySelector('.modal__item.active'); +// aside.style.width = '0px'; +// setTimeout(() => { +// modalItem.style.cssText = ''; +// modalItem.classList.remove('active'); +// target.classList.remove('active'); +// }, 300); +// } +// } + +// // modal + +// toggle +// toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); +// // toggle + +// // radio-button +// let radioButtons = document.querySelectorAll('.radio-button'); + +// radioButtons.forEach(radioBlock => { +// let buttons = radioBlock.querySelectorAll('.button'); + +// buttons.forEach(button => { +// let input = radioBlock.querySelector('.radio-button__input'); + +// button.onclick = function (e) { +// e.preventDefault(); +// buttons.forEach(thisButton => { +// if (thisButton.classList.contains('active')) { +// thisButton.classList.remove('active') +// } +// }) + +// let text = button.textContent.trim(); + +// button.classList.toggle('active'); + +// input.value = text; +// } +// }) +// }) +// // radio-button + +// select +toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); + +let selects = document.querySelectorAll('.select'); + +selects.forEach(select => { + let state = select.querySelector('.select__state'), + content = select.querySelector('.state__block'), + buttons = select.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'); + content.style.height = 0; + select.classList.remove('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'); + +// checkbox.forEach(e => { +// e.onclick = function (event) { +// let input = e.querySelector('.checkbox__input'); +// if (!e.classList.contains('active')) { +// input.checked = 1; +// }else{ +// input.checked = 0; +// } +// e.classList.toggle('active'); +// } +// }) +// // checkbox + + +// // function +// function modalOpen(buttonElement, contentElement){ +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// elements = document.querySelectorAll(buttonElement), +// device = window.screen.width; + +// elements.forEach(e => { +// let thisContentElement = document.querySelector(contentElement); + +// e.onclick = function () { +// modal.classList.add('active'); +// thisContentElement.classList.add('active'); + +// let width = thisContentElement.clientWidth; + +// setTimeout(() => { +// if (device <= 720) { +// aside.style.width = `${device}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// }else{ +// aside.style.width = `${width}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// } +// }, 10); +// } +// }) +// } + +// function modalClose(buttonElement) { +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// asideItems = document.querySelectorAll('.modal__item'), +// elements = document.querySelectorAll(buttonElement); + +// elements.forEach(e => { +// e.onclick = function () { +// aside.style.width = '0px'; + +// asideItems.forEach(e => { +// if (e.classList.contains('active')) { +// e.style.filter = 'blur(10px)'; +// } +// }); + +// setTimeout(() => { +// asideItems.forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// } +// }); + +// modal.classList.remove('active'); +// }, 300); +// } +// }) +// } + +// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { +// let elements = document.querySelectorAll(mainElement); + +// elements.forEach(e => { +// let thisMainElement = e, +// thisButtonElement = e.querySelector(buttonElement), +// thisHeightElement = e.querySelector(heightElement), +// thisContentElement = e.querySelector(contentElement); + +// thisButtonElement.onclick = function (e) { +// let height = thisHeightElement.clientHeight; +// if (close == true && !thisMainElement.classList.contains('active')) { +// elements.forEach(e => { +// if (e.classList.contains('active')) { +// e.classList.remove('active'); +// e.querySelector(contentElement).style.height = null +// } +// }) +// } + +// if (!thisMainElement.classList.contains('active')) { +// thisContentElement.style.height = `${height}px`; +// thisMainElement.classList.add('active'); +// }else{ +// thisContentElement.style.height = null; +// thisMainElement.classList.remove('active'); +// } +// } + +// }); +// } + +// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { +// let thisButton = document.querySelector(button), +// thisContent = document.querySelector(content), +// thisRemoveBlock = document.querySelector(removeBlock) || '', +// 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'); + +// if (removeBlock) { +// thisRemoveBlock.classList.remove(removeClass); +// } +// }else{ +// thisContent.style.height = null; +// thisContent.classList .remove('open'); + +// if (removeBlock) { +// if (window.scrollY <= 25) { +// thisRemoveBlock.classList.add(removeClass); +// } +// } +// } +// } +// } +// function + +// // resize +// window.addEventListener('resize', (e) => { +// let width = window.screen.width; +// // media +// modalOpen('.button--filter', '.modal__filter'); +// modalOpen('.basket-open', '.modal__basket'); +// modalOpen('.open-to-know', '.modal__to-know'); +// modalClose('.modal__close'); + +// let modalItem = document.querySelectorAll('.modal__item'); + +// modalItem.forEach(modal => { +// if (modal.classList.contains('active')) { +// let aside = document.querySelector('.modal__aside'); + +// if (width <= 720) { +// aside.style.width = `${width}px` +// }else{ +// let openAside = document.querySelector('.modal__item.active'), +// newWidth = openAside.clientWidth; + +// aside.style.width = `${newWidth}px` +// } +// } +// }) +// }); +// // resize + +// scroll + + +if (document.querySelector('.header').classList.contains('white')) { + window.addEventListener("scroll", function (e) { + let header = document.querySelector('.header'); + let scroll = window.scrollY; + if (scroll >= 25) { + header.classList.remove('white') + }else{ + header.classList.add('white') + } + + }); +} +// scroll + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js new file mode 100644 index 0000000..2508270 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js @@ -0,0 +1,110 @@ +'use strict'; + +// slider gallery modal +const gallery = new Swiper('.gallery__slider', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let paginationButtons = document.querySelectorAll('.gallery-pagination__item'); + +paginationButtons.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + } +}) + +// open gallery +let detailImage= document.querySelectorAll('.detail__image'); +detailImage.forEach(button => { + let index = button.dataset.countImg; + + button.onclick = function () { + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// close gallery + +document.querySelector('.gallery__close').onclick = function () { + document.querySelector('.gallery').classList.remove('active'); +} +// slider gallery modal + +// slider gallery main phone + +// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980); + +const detailPhone = new Swiper('.detail__images-phone', { + spaceBetween: 100, + + pagination: { + el: '.swiper-pagination', + }, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + + scrollbar: { + el: '.swiper-scrollbar', + }, +}); + +let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block'); + +detailImagesPhones.forEach(button => { + button.onclick = function (e) { + let index = button.dataset.countImg; + + gallery.slideTo(index); + + document.querySelector('.gallery').classList.add('active'); + } +}) + +// slider gallery main phone + +// detail catalog +const detailCatalot = new Swiper('.detail__catalot', { + // Navigation arrows + navigation: { + nextEl: '.detail-catalot-control__button.next', + prevEl: '.detail-catalot-control__button.prev', + }, + breakpoints: { + 1600: { + slidesPerView: 4, + }, + 1200: { + slidesPerView: 3, + }, + 780: { + slidesPerView: 2, + }, + 100: { + slidesPerView: 1.1, + spaceBetween: 20 + }, + } + + +}); +// detail catalog \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js new file mode 100644 index 0000000..431b952 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js @@ -0,0 +1,66 @@ +const rootSelectorTabs = '[data-js-tabs]'; + +class Tabs{ + // элементы для поиска + selectors = { + root: rootSelectorTabs, + button: '[data-js-tabs-button]', + content: '[data-js-tabs-content]', + } + // класс отображения состояния + stateClasses = { + isActive: 'active', + } + + constructor(rootElement){ + this.rootElement = rootElement; + this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); + this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); + this.state = { + activeMenuIndex: [...this.buttonElements] + .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), + }; + this.limitTabsIndex = this.buttonElements.length - 1; + this.bindEvents(); + } + + updateUI(){ + const { activeMenuIndex } = this.state; + + this.buttonElements.forEach((buttonElement, index) => { + const isActive = index === activeMenuIndex; + + buttonElement.classList.toggle(this.stateClasses.isActive, isActive); + }) + + this.contentElements.forEach((contentElement, index) => { + const isActive = index === activeMenuIndex; + + contentElement.classList.toggle(this.stateClasses.isActive, isActive); + }) + } + + onButtonClick(buttonIndex){ + this.state.activeMenuIndex = buttonIndex; + this.updateUI(); + } + + bindEvents(){ + this.buttonElements.forEach((buttonElement, index) => { + buttonElement.addEventListener('click', () => this.onButtonClick(index)) + }) + } +} + +class TabsCollection { + constructor(){ + this.init(); + } + + init(){ + document.querySelectorAll(rootSelectorTabs).forEach((element) => { + new Tabs(element); + }); + } +} + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js new file mode 100644 index 0000000..d1a76ad --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js @@ -0,0 +1,88 @@ +const rootSelectorToggles = '[data-js-toggle]'; + +class Toggle{ + // элементы для поиска + selectors = { + root: rootSelectorToggles, + button: '[data-js-toggle-button]', + wrapper: '[data-js-toggle-wrapper]', + content: '[data-js-toggle-content]', + } + // класс отображения состояния + stateClasses = { + isActive: 'active', + } + + constructor(rootElement){ + this.rootElement = rootElement; + this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button); + this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper); + this.contentElements = this.rootElement.querySelectorAll(this.selectors.content); + this.state = { + activeToggleIndex: [...this.buttonElements] + .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)), + }; + this.bindEvents(); + } + + updateUI(newHeight){ + const { activeToggleIndex } = this.state; + + this.buttonElements.forEach((buttonElement, index) => { + const isActive = index === activeToggleIndex; + + buttonElement.classList.toggle(this.stateClasses.isActive, isActive); + }) + + this.wrapperElements.forEach((wrapperElement, index) => { + const isActive = index === activeToggleIndex, + newHeight = this.contentElements[index].offsetHeight; + + wrapperElement.classList.toggle(this.stateClasses.isActive, isActive); + + if (isActive) { + wrapperElement.style.height = `${newHeight}px`; + + setTimeout(() => { + if (wrapperElement.classList.contains('active')) { + wrapperElement.style.height = `auto`; + } + }, 300); + }else{ + wrapperElement.style.height = `${newHeight}px`; + + setTimeout(() => { + if (!wrapperElement.classList.contains('active')) { + wrapperElement.style.height = `${0}px`; + } + }, 10); + } + }) + + } + + onButtonClick(buttonIndex){ + this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex; + + this.updateUI(); + } + + bindEvents(){ + this.buttonElements.forEach((buttonElement, index) => { + buttonElement.addEventListener('click', () => this.onButtonClick(index)) + }) + } +} + +class TogglesCollection{ + constructor(){ + this.init(); + } + + init(){ + document.querySelectorAll(rootSelectorToggles).forEach((element) => { + new Toggle(element); + }); + } +} + diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-controller.php b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-controller.php new file mode 100644 index 0000000..e5aca87 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-controller.php @@ -0,0 +1,74 @@ +get_attributes(); + + if (!empty($product_attributes)) { + foreach ($product_attributes as $taxonomy => $attribute) { + if ($attribute->is_taxonomy()) { + $terms = wc_get_product_terms($product_id, $taxonomy, ['fields' => 'all']); + if (!empty($terms)) { + $attr_values = []; + foreach ($terms as $term) { + $attr_values[] = [ + 'name' => $term->name, + 'slug' => $term->slug, + 'term_id' => $term->term_id, + 'link' => get_term_link($term->term_id, $taxonomy), + ]; + } + $attributes[wc_attribute_label($taxonomy)] = $attr_values; + } + } else { + $attributes[wc_attribute_label($taxonomy)] = $attribute->get_options(); + } + } + } + + $context['product_attributes'] = $attributes; + + if ($product->is_type('variable')) { + $available_variations = $product->get_available_variations(); + $variations_data = []; + + foreach ($available_variations as $variation) { + $variation_id = $variation['variation_id']; + $variation_obj = wc_get_product($variation_id); + + $variations_data[] = [ + 'variation_id' => $variation_id, + 'price' => $variation_obj->get_price(), + 'regular_price' => $variation_obj->get_regular_price(), + 'sale_price' => $variation_obj->get_sale_price(), + 'attributes' => $variation['attributes'] + ]; + } + + $context['variations'] = $variations_data; + } + + $meta_fields = [ + 'composition' => get_post_meta($product_id, '_composition', true), + 'feeding_recommendations' => get_post_meta($product_id, '_feeding_recommendations', true), + 'feeding_recommendations_table' => get_field('feeding_recommendations_table', $product_id), + + 'nutritional_value' => get_post_meta($product_id, '_nutritional_value', true), + 'vitamins' => get_post_meta($product_id, '_vitamins', true), + 'additives' => get_post_meta($product_id, '_additives', true), + 'energy_value' => get_post_meta($product_id, '_energy_value', true), + 'important' => get_post_meta($product_id, '_important', true), + ]; + + $context['product_meta'] = $meta_fields; + } + } + + return $context; +}); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig new file mode 100644 index 0000000..c1bc729 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig @@ -0,0 +1,449 @@ +{% set current_path = template_path ~ '/modules/shop/components/single-product' %} + + {% set bodyClass = 'bg-white' %} + + {% set mainClass = 'wrapper' %} + + {% extends 'layout.twig' %} + + {% block content %} +
+
+ {% if wc_breadcrumbs %} + {% for crumb in wc_breadcrumbs %} + + {{ crumb.text }} + + {% endfor %} + {% endif %} +
+ + + {{ function('pll_e', 'к каталогу') }} + + +
+
+ {% for image in gallery_images %} +
+ {{ image.alt }} +
+ {% endfor %} +
+
+ +
+
+ {% if product_attributes.Flavor is defined and product_attributes.Flavor|length > 0 %} +
+ {{ product_attributes.Flavor[0].name }} +
+ {% endif %} + {% if product_attributes.Вкус is defined and product_attributes.Вкус|length > 0 %} +
+ {{ product_attributes.Вкус[0].name }} +
+ {% endif %} + + {% if product_attributes.Тег is defined and product_attributes.Тег|length > 0 %} +
+ {{ product_attributes.Тег[0].name }} +
+ {% endif %} + {% if product.is_on_sale() %} +
+ {{ function('pll_e', 'Распродажа %') }} +
+ {% endif %} +
+

+ {{ product.get_title }} +

+ +
+
+ {% for image in gallery_images %} +
+
+ {{ image.alt }} +
+
+ {% endfor %} +
+
+
+ +
+

+ {{ product.get_price }} {{ fn('get_woocommerce_currency_symbol') }} +

+ + {% if product.is_on_sale() %} +
+

+ {{ product.get_regular_price }} {{ fn('get_woocommerce_currency_symbol') }} +

+

+ {{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }} +

+
+ {% endif %} +
+
+ {% set collection = fn('wc_get_product_terms', product.id, 'pa_collection') %} + {% if collection %} + {% set siblings = function('get_collection_siblings', collection[0].term_id) %} + {% if siblings %} +
+ {% for sibling in siblings %} + {% set weight = sibling.post_title|split(', ')|last %} + {% set current_weight = function('get_product_info', product.id, 'weight') %} + {% set class = weight == current_weight ? 'active' : '' %} + + {{ weight|upper }} + + {% endfor %} + +
+ {% endif %} + {% endif %} + + + +
+ + {{ function('pll_e', 'Добавить в корзину') }} +
+
+ +
+
+

+ {{ function('pll_e', 'ОПИСАНИЕ') }} +

+
+
+

+ {{ product.get_description() }} +

+
+
+
+ + {% if product_meta.composition %} +
+

+ {{ function('pll_e', 'СОСТАВ') }} +

+
+
+

+ {{ product_meta.composition }} +

+
+
+
+ {% endif %} + + {% if product_meta.feeding_recommendations_table %} +
+

+ {{ function('pll_e', 'РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ') }} +

+
+
+
+ {% if product_meta.feeding_recommendations_table.header %} +
+

{{ product_meta.feeding_recommendations_table.header.0 is iterable ? product_meta.feeding_recommendations_table.header.0|join(', ') : product_meta.feeding_recommendations_table.header.0 }}

+ {% for row in product_meta.feeding_recommendations_table.body %} +
+

{{ row.0 is iterable ? row.0|join(', ') : row.0 }}

+
+
+ {% endfor %} +
+
+

{{ product_meta.feeding_recommendations_table.header.1 is iterable ? product_meta.feeding_recommendations_table.header.1|join(', ') : product_meta.feeding_recommendations_table.header.1 }}

+ {% for row in product_meta.feeding_recommendations_table.body %} +
+

{{ row.1 is iterable ? row.1|join(', ') : row.1 }}

+
+
+ {% endfor %} +
+
+

{{ product_meta.feeding_recommendations_table.header.2 is iterable ? product_meta.feeding_recommendations_table.header.2|join(', ') : product_meta.feeding_recommendations_table.header.2 }}

+ {% for row in product_meta.feeding_recommendations_table.body %} +
+

{{ row.2 is iterable ? row.2|join(', ') : row.2 }}

+
+ {% endfor %} +
+ {% endif %} +
+
+
+
+ {% elseif product_meta.feeding_recommendations %} +
+

+ {{ function('pll_e', 'РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ') }} +

+
+
+ {{ product_meta.feeding_recommendations }} +
+
+
+ {% endif %} + + {% if product_meta.nutritional_value or product_meta.vitamins or product_meta.additives or product_meta.energy_value %} +
+

+ {{ function('pll_e', 'ПИЩЕВАЯ ЦЕННОСТЬ') }} +

+
+
+ {% if product_meta.nutritional_value and product_meta.vitamins %} +
+
+

{{ function('pll_e', 'ПИЩЕВАЯ ЦЕННОСТЬ') }}

+ {{ product_meta.nutritional_value }} +
+
+

{{ function('pll_e', 'ВИТАМИНЫ НА КГ') }}

+ {{ product_meta.vitamins }} +
+
+ {% endif %} + + {% if product_meta.additives or product_meta.energy_value %} +
+ {% if product_meta.additives %} +
+

{{ function('pll_e', 'ПИТАТЕЛЬНЫЕ ДОБАВКИ НА КГ') }}

+ {{ product_meta.additives }} +
+ {% endif %} + + {% if product_meta.energy_value %} +
+

{{ function('pll_e', 'ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ НА 100 ГРАММ') }}

+
+
+
+

{{ product_meta.energy_value }}

+
+
+
+
+ {% endif %} +
+ {% endif %} +
+
+
+ {% endif %} + + +
+ + +
+
+

{{ function('pll_e', 'Важно') }}

+

+ {{ product_meta.important }} +

+
+
+
+
+ {% set recommended_products = function('get_field', 'recommended_products', product.id) %} + {% set related_products = recommended_products ? recommended_products : function('wc_get_related_products', product.id, 4) %} + {% if related_products %} +
+
+
+

+ {{ function('pll_e', 'вашему питомцу может понравиться') }} +

+ +
+ + + +
+
+
+ {% for related_product in related_products %} +
+ {% set post_id = related_product.ID is defined ? related_product.ID : related_product %} + {% set wc_product = fn('wc_get_product', post_id) %} + {% if wc_product %} +
+
+ {% if wc_product.get_date_created|date('Y-m-d') >= criteria_for_new_product %} + + {{ function('pll_e', 'Новинка') }} + + {% endif %} + + {% if wc_product.is_on_sale() %} + + {{ function('pll_e', 'Распродажа %') }} + + {% endif %} +
+ + {{ wc_product.get_name() }} + +
+
+ {% set compound = fn('wc_get_product_terms', post_id, 'pa_compound') %} + {% for option in compound %} + {% set term = get_term(option) %} + {{ term.name }} + {% endfor %} +
+ {{ wc_product.get_name() }} +
+

{{ wc_product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}

+
+
+ +
+
+
+
+ {{ wc_product.get_name() }} +
    + {% set features = fn('wc_get_product_terms', post_id, 'pa_features') %} + {% for option in features %} + {% set term = get_term(option) %} +
  • {{ term.name }}
    • + {% endfor %} +
+
+ +
+
+
+

Объем

+ +
+ {% set cur_weight = function('get_product_info', post_id, 'weight') %} + +
+
    + {% set collection = fn('wc_get_product_terms', post_id, 'pa_collection') %} + {% for option in collection %} + {% set term = get_term(option) %} + {% if term %} + {% set siblings = function('get_collection_siblings', term.term_id) %} + + {% for sibling in siblings %} + {% set weight = function('get_product_info', sibling.ID, 'weight') %} + + {% set class = '' %} + {% if weight == cur_weight %} + {% set class = 'active' %} + {% endif %} +
  • + +
    • + {% endfor %} + {% endif %} + {% endfor %} +
+
+
+
+
+

Количество

+ +
+ + + +
+
+
+

+ {{ wc_product.get_price() }} +

+
+
+ {{ function('get_add_to_cart_button', post_id) }} +
+
+ +

{{ function('pll_e', 'Подробнее') }}

+ +
+
+
+
+
+ {% endif %} +
+ {% endfor %} +
+
+
+ {% endif %} +
+
+ +
+ + +
+
+ {% for image in gallery_images %} + + {% endfor %} +
+ +
+
+ {% for image in gallery_images %} +
+
+ {{ image.alt }} +
+
+ {% endfor %} +
+ +
+ +
+ +
+
+ +
+
+
+
+ +
+ {% endblock %} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/module-ajax-controller.php b/wp-content/themes/cosmopet/modules/shop/module-ajax-controller.php new file mode 100644 index 0000000..7f36e87 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/module-ajax-controller.php @@ -0,0 +1,142 @@ + 'Код купона не указан.' ) ); + } + + // Применение купона + $applied = WC()->cart->apply_coupon( $coupon_code ); + + if ( $applied ) { + wp_send_json_success(); + } else { + wp_send_json_error( array( 'message' => 'Купон не применён. Проверьте код.' ) ); + } +} + + +/** + * Обработчик AJAX для обновления количества товара в корзине + */ +add_action('wp_ajax_update_cart_quantity', 'update_cart_quantity_handler'); +add_action('wp_ajax_nopriv_update_cart_quantity', 'update_cart_quantity_handler'); + +function update_cart_quantity_handler() { + if (!isset($_POST['cart_item_key']) || !isset($_POST['quantity'])) { + wp_send_json_error('Недостаточно данных'); + return; + } + + $cart_item_key = sanitize_text_field($_POST['cart_item_key']); + $quantity = intval($_POST['quantity']); + + if ($quantity <= 0) { + wp_send_json_error('Некорректное количество'); + return; + } + + $cart = WC()->cart; + $cart_item = $cart->get_cart_item($cart_item_key); + + if (!$cart_item) { + wp_send_json_error('Товар не найден в корзине'); + return; + } + + $updated = $cart->set_quantity($cart_item_key, $quantity); + + if ($updated) { + wp_send_json_success(); + } else { + wp_send_json_error('Не удалось обновить количество'); + } +} + +/** + * Обработчик AJAX для восстановления товара в корзине + */ +add_action('wp_ajax_restore_cart_item', 'restore_cart_item_handler'); +add_action('wp_ajax_nopriv_restore_cart_item', 'restore_cart_item_handler'); + +function restore_cart_item_handler() { + if (!isset($_POST['product_id']) || !isset($_POST['quantity'])) { + wp_send_json_error('Недостаточно данных'); + return; + } + + $product_id = intval($_POST['product_id']); + $variation_id = isset($_POST['variation_id']) ? intval($_POST['variation_id']) : 0; + $quantity = intval($_POST['quantity']); + + if ($quantity <= 0) { + wp_send_json_error('Некорректное количество'); + return; + } + + $cart = WC()->cart; + $cart_item_key = $cart->add_to_cart($product_id, $quantity, $variation_id); + + if ($cart_item_key) { + wp_send_json_success(); + } else { + wp_send_json_error('Не удалось восстановить товар'); + } +} + +/** + * Обработчик AJAX для получения фрагментов корзины + */ +add_action('wp_ajax_get_cart_fragment', 'get_cart_fragment_handler'); +add_action('wp_ajax_nopriv_get_cart_fragment', 'get_cart_fragment_handler'); + +function get_cart_fragment_handler() { + ob_start(); + Timber::render('shop/cart-contents.twig', Timber::context()); + $contents = ob_get_clean(); + + $response = array( + 'contents' => $contents, + 'total' => WC()->cart->get_cart_total(), + 'count' => WC()->cart->get_cart_contents_count() + ); + + wp_send_json_success($response); +} + + +/** + * Инициализация WooCommerce AJAX + */ +add_action('wp_enqueue_scripts', 'enqueue_woocommerce_ajax_scripts'); +function enqueue_woocommerce_ajax_scripts() { + wp_localize_script('jquery', 'woocommerce_params', array( + 'ajax_url' => admin_url('admin-ajax.php'), + 'currency_symbol' => get_woocommerce_currency_symbol(), + 'currency_format' => str_replace(array('%1$s', '%2$s'), array('%s', '%v'), get_woocommerce_price_format()), + )); +} + +add_action('wp_ajax_remove_cart_item', 'handle_remove_cart_item'); +add_action('wp_ajax_nopriv_remove_cart_item', 'handle_remove_cart_item'); + +function handle_remove_cart_item() { + if (!isset($_POST['cart_item_key'])) { + wp_send_json_error('Не указан ключ элемента корзины'); + return; + } + + $cart_item_key = sanitize_text_field($_POST['cart_item_key']); + $cart = WC()->cart; + + if ($cart->remove_cart_item($cart_item_key)) { + wp_send_json_success(); + } else { + wp_send_json_error('Не удалось удалить товар из корзины'); + } +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/module-controller.php b/wp-content/themes/cosmopet/modules/shop/module-controller.php new file mode 100644 index 0000000..e8f01d5 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/module-controller.php @@ -0,0 +1,387 @@ + 'text', + 'label' => __('Имя', 'woocommerce'), + 'placeholder' => __('Ваше имя', 'woocommerce'), + 'required' => true, + 'class' => array('form-row-wide'), + 'priority' => 10, + ); + $fields['billing']['billing_last_name'] = array( + 'type' => 'text', + 'label' => __('Фамилия', 'woocommerce'), + 'placeholder' => __('Ваша фамилия', 'woocommerce'), + 'required' => true, + 'class' => array('form-row-wide'), + 'priority' => 10, + ); + $fields['billing']['billing_email'] = array( + 'type' => 'email', + 'label' => __('E-mail', 'woocommerce'), + 'placeholder' => __('Начните вводить ваш email', 'woocommerce'), + 'required' => true, + 'class' => array('form-row-wide'), + 'priority' => 20, + ); + $fields['billing']['billing_phone'] = array( + 'type' => 'tel', + 'label' => __('Телефон', 'woocommerce'), + 'placeholder' => __('+7 ___ ___ ____', 'woocommerce'), + 'required' => true, + 'class' => array('form-row-wide'), + 'priority' => 30, + ); + $fields['billing']['billing_city'] = array( + 'type' => 'text', + 'label' => __('Населенный пункт', 'woocommerce'), + 'placeholder' => __('Ваш город', 'woocommerce'), + 'required' => true, + 'class' => array('form-row-wide'), + 'priority' => 40, + ); + + $fields['billing']['billing_address_1'] = array( + 'type' => 'text', + 'label' => __('Адрес', 'woocommerce'), + 'placeholder' => __('Адрес', 'woocommerce'), + 'required' => false, + 'class' => array('visually-hidden'), + 'priority' => 40, + ); + $fields['billing']['billing_address_2'] = array( + 'type' => 'text', + 'label' => __('Адрес 2', 'woocommerce'), + 'placeholder' => __('Адрес 2', 'woocommerce'), + 'required' => false, + 'class' => array('visually-hidden'), + 'priority' => 40, + ); + + return $fields; +} +// remove_action( 'woocommerce_review_order_before_payment', 'woocommerce_review_order_shipping' ); + +add_action( 'init', function() { + update_option( 'woocommerce_enable_coupons', 'yes' ); // Включение купонов +} ); + +add_filter( 'woocommerce_available_payment_gateways', 'set_default_payment_gateway' ); + +function set_default_payment_gateway( $available_gateways ) { + if ( is_cart() || is_checkout() ) { + // Устанавливаем способ оплаты по умолчанию + $default_payment_gateway = 'tbank'; // ID способа оплаты, например 'cod' для "наличными при доставке" + + // Проверяем, доступен ли этот способ оплаты + if ( isset( $available_gateways[ $default_payment_gateway ] ) ) { + foreach ( $available_gateways as $gateway_id => $gateway ) { + // Оставляем только выбранный способ оплаты + if ( $gateway_id !== $default_payment_gateway ) { + unset( $available_gateways[ $gateway_id ] ); + } + } + } + } + + return $available_gateways; +} + +add_filter( 'woocommerce_checkout_terms_and_conditions_checkbox_enabled', '__return_false' ); +add_filter( 'woocommerce_checkout_terms_is_required', '__return_false' ); +remove_action( 'woocommerce_checkout_before_terms_and_conditions', 'wc_checkout_privacy_policy_text', 20 ); +remove_action( 'woocommerce_checkout_terms_and_conditions', 'wc_terms_and_conditions_page_content', 30 ); +remove_action( 'woocommerce_checkout_after_terms_and_conditions', 'wc_privacy_policy_text', 20 ); + +add_action( 'woocommerce_checkout_process', 'remove_terms_validation' ); + +function remove_terms_validation() { + remove_action( 'woocommerce_checkout_process', 'woocommerce_checkout_terms_and_conditions' ); +} + +add_filter( 'woocommerce_order_button_html', 'custom_checkout_button_classes' ); + +function custom_checkout_button_classes( $button ) { + // Заменяем стандартные классы + $button = '
+ +
'; + return $button; + + + +} + +add_filter( 'woocommerce_checkout_fields', 'customize_checkout_registration_fields' ); + +function customize_checkout_registration_fields( $fields ) { + // Убираем поле ввода пароля + unset( $fields['account']['account_password'] ); + + return $fields; +} + +// Автоматическая генерация пароля +add_filter( 'woocommerce_checkout_posted_data', 'generate_password_for_registration' ); + +function generate_password_for_registration( $data ) { + + + $billing_first_name = isset( $_POST['billing_first_name'] ) ? sanitize_text_field( $_POST['billing_first_name'] ) : ''; + $billing_last_name = isset( $_POST['billing_last_name'] ) ? sanitize_text_field( $_POST['billing_last_name'] ) : ''; + $billing_address_1 = isset( $_POST['billing_address_1'] ) ? sanitize_text_field( $_POST['billing_address_1'] ) : ''; + $billing_address_2 = isset( $_POST['billing_address_2'] ) ? sanitize_text_field( $_POST['billing_address_2'] ) : ''; + $billing_city = isset( $_POST['billing_city'] ) ? sanitize_text_field( $_POST['billing_city'] ) : ''; + $billing_postcode = isset( $_POST['billing_postcode'] ) ? sanitize_text_field( $_POST['billing_postcode'] ) : ''; + $billing_country = isset( $_POST['billing_country'] ) ? sanitize_text_field( $_POST['billing_country'] ) : ''; + $billing_state = isset( $_POST['billing_state'] ) ? sanitize_text_field( $_POST['billing_state'] ) : ''; + $billing_phone = isset( $_POST['billing_phone'] ) ? sanitize_text_field( $_POST['billing_phone'] ) : ''; + $billing_email = isset( $_POST['billing_email'] ) ? sanitize_email( $_POST['billing_email'] ) : ''; + + + $data['shipping_first_name'] = $data['billing_first_name']; + $data['shipping_last_name'] = $data['billing_last_name']; + $data['shipping_address_1'] = $data['billing_address_1'] . $data['billing_address_2']; + $data['shipping_city'] = $data['billing_city']; + $data['shipping_postcode'] = $data['billing_postcode']; + $data['shipping_country'] = $data['billing_country']; + $data['shipping_state'] = $data['billing_state']; + + + + return $data; +} + + +function handle_user_registration_on_checkout() { + // Получаем данные из POST-запроса + if ( isset( $_POST['billing_email'] ) && isset( $_POST['reg'] )) { + if ($_POST['reg'] == '1'){ + + + $email = sanitize_email( $_POST['billing_email'] ); + $pass = sanitize_text_field( $_POST['pass'] ); + + // Регистрация пользователя + $user_id = custom_register_user_from_post( $email, $pass ); + + if ( is_wp_error( $user_id ) ) { + // Если email уже существует, выводим ошибку + wc_add_notice( $user_id->get_error_message(), 'error' ); + } else { + + wp_set_current_user( $user_id ); // Устанавливаем текущего пользователя + wp_set_auth_cookie( $user_id ); // Устанавливаем куки для авторизации + do_action( 'wp_login', $email, $user ); // Событие входа в систему + + }} + + } +} +add_action( 'woocommerce_checkout_process', 'handle_user_registration_on_checkout' ); + + +function custom_register_user_from_post( $email, $pass ) { + // Проверяем, есть ли уже пользователь с таким email + if ( email_exists( $email ) ) { + return new WP_Error( 'email_exists', 'Этот email уже зарегистрирован.' ); + } + + // Создаем пользователя в WordPress + $user_id = wp_create_user( $email, $pass, $email ); + if ( is_wp_error( $user_id ) ) { + return $user_id; // Возвращаем ошибку, если не удалось создать пользователя + } + + update_user_meta( $user_id, 'billing_email', $email ); // Устанавливаем email + update_user_meta( $user_id, 'user_email', $email ); // Устанавливаем email для входа + + // Устанавливаем роль пользователя как 'customer' для WooCommerce + $user = new WP_User( $user_id ); + $user->set_role( 'customer' ); + return $user_id; +} + + +add_filter( 'woocommerce_form_field', 'add_error_containers_to_checkout_fields', 10, 4 ); + +function add_error_containers_to_checkout_fields( $field, $key, $args, $value ) { + if ( is_checkout() ) { + // Добавляем контейнер для ошибок под полем + $error_container = '
'; + $field .= $error_container; + } + return $field; +} + +add_filter( 'woocommerce_add_error', 'remove_payments_word_from_errors_multilang' ); + +function remove_payments_word_from_errors_multilang( $error ) { + // Слова для удаления в разных языках + $translations = array( + 'Платежи', // Русский + 'Billing', // Английский + ); + + foreach ( $translations as $word ) { + $error = str_replace( $word, '', $error ); + } + + return trim( $error ); +} + + +add_action( 'woocommerce_checkout_process', 'validate_phone_field_with_li_data_id' ); + +function validate_phone_field_with_li_data_id() { + // Получаем значение телефона из формы + $phone = isset( $_POST['billing_phone'] ) ? sanitize_text_field( $_POST['billing_phone'] ) : ''; + + // Проверяем формат телефона + if ( ! preg_match( '/^\+?[0-9\s\-\(\)]+$/', $phone ) ) { + wc_add_notice( 'phone_err', 'error', 'billing_phone' ); + } +} + +add_action( 'woocommerce_checkout_process', 'make_address_required_for_specific_shipping' ); + +function make_address_required_for_specific_shipping() { + // Получаем выбранный метод доставки + $chosen_shipping_methods = WC()->session->get( 'chosen_shipping_methods' ); + $chosen_shipping = isset( $chosen_shipping_methods[0] ) ? $chosen_shipping_methods[0] : ''; + + // Проверяем, выбран ли метод доставки "official_cdek:137" + if ( $chosen_shipping === 'official_cdek:137' ) { + // Проверяем, заполнен ли адрес + if ( empty( $_POST['billing_address_1'] ) ) { + wc_add_notice('adress_error', 'error' ); + } + } +} + +function auto_fill_shipping_fields_from_billing( $order_id ) { + // Получаем объект заказа + $order = wc_get_order( $order_id ); + + if ( ! $order ) { + return; // Если заказ недоступен, выходим + } + + // Получаем значения полей billing из глобального $_POST + $billing_first_name = isset( $_POST['billing_first_name'] ) ? sanitize_text_field( $_POST['billing_first_name'] ) : ''; + $billing_last_name = isset( $_POST['billing_last_name'] ) ? sanitize_text_field( $_POST['billing_last_name'] ) : ''; + $billing_address_1 = isset( $_POST['billing_address_1'] ) ? sanitize_text_field( $_POST['billing_address_1'] ) : ''; + $billing_address_2 = isset( $_POST['billing_address_2'] ) ? sanitize_text_field( $_POST['billing_address_2'] ) : ''; + $billing_city = isset( $_POST['billing_city'] ) ? sanitize_text_field( $_POST['billing_city'] ) : ''; + $billing_postcode = isset( $_POST['billing_postcode'] ) ? sanitize_text_field( $_POST['billing_postcode'] ) : ''; + $billing_country = isset( $_POST['billing_country'] ) ? sanitize_text_field( $_POST['billing_country'] ) : ''; + $billing_state = isset( $_POST['billing_state'] ) ? sanitize_text_field( $_POST['billing_state'] ) : ''; + $billing_phone = isset( $_POST['billing_phone'] ) ? sanitize_text_field( $_POST['billing_phone'] ) : ''; + $billing_email = isset( $_POST['billing_email'] ) ? sanitize_email( $_POST['billing_email'] ) : ''; + + // Копируем данные в поля доставки + $order->set_shipping_first_name( $billing_first_name ); + $order->set_shipping_last_name( $billing_last_name ); + $order->set_shipping_address_1( $billing_address_1 ); + $order->set_shipping_address_2( $billing_address_2 ); + $order->set_shipping_city( $billing_city ); + $order->set_shipping_postcode( $billing_postcode ); + $order->set_shipping_country( $billing_country ); + $order->set_shipping_state( $billing_state ); + + // Сохраняем изменения в заказе + $order->save(); +} + + add_filter('timber/context', function($context) { + if (function_exists('is_product') && is_product()) { + $product_id = get_the_ID(); + $product = wc_get_product($product_id); + + if ($product) { + $context['product'] = $product; + $context['product_id'] = $product_id; + + + $terms = get_the_terms($product_id, 'product_cat'); + if ($terms && !is_wp_error($terms)) { + $context['product_categories'] = $terms; + } + + + $attachment_ids = $product->get_gallery_image_ids(); + $gallery_images = []; + + $main_image_id = $product->get_image_id(); + if ($main_image_id) { + $gallery_images[] = [ + 'id' => $main_image_id, + 'src' => wp_get_attachment_image_url($main_image_id, 'full'), + 'alt' => get_post_meta($main_image_id, '_wp_attachment_image_alt', true) + ]; + } + + foreach ($attachment_ids as $attachment_id) { + $gallery_images[] = [ + 'id' => $attachment_id, + 'src' => wp_get_attachment_image_url($attachment_id, 'full'), + 'alt' => get_post_meta($attachment_id, '_wp_attachment_image_alt', true) + ]; + } + + $context['gallery_images'] = $gallery_images; + + $related_products_ids = wc_get_related_products($product_id, 5); + if (!empty($related_products_ids)) { + $related_products = []; + foreach ($related_products_ids as $related_id) { + $related_product = wc_get_product($related_id); + if ($related_product) { + $related_products[] = $related_product; + } + } + $context['related_products'] = $related_products; + } + } + } + + return $context; + }); + +function conditional_dequeue_woocommerce_styles() { + if (function_exists('is_woocommerce') && !is_woocommerce() && !is_cart() && !is_checkout() && !is_account_page()) { + wp_dequeue_style('woocommerce-general'); + wp_dequeue_style('woocommerce-layout'); + wp_dequeue_style('woocommerce-smallscreen'); + } +} +add_action('wp_enqueue_scripts', 'conditional_dequeue_woocommerce_styles', 999); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/page.php b/wp-content/themes/cosmopet/page.php index edd6b31..9ef9917 100644 --- a/wp-content/themes/cosmopet/page.php +++ b/wp-content/themes/cosmopet/page.php @@ -5,9 +5,12 @@ * This is the template that renders pages using Timber (Twig). */ - -include_module('profile'); -include_component('profile', 'profile'); + +if (is_account_page()){ + include_module('profile'); + include_component('profile', 'profile'); +} + $context = Timber::context(); $context['post'] = Timber::get_post(); diff --git a/wp-content/themes/cosmopet/single-blog_author.php b/wp-content/themes/cosmopet/single-blog_author.php new file mode 100644 index 0000000..a2ac841 --- /dev/null +++ b/wp-content/themes/cosmopet/single-blog_author.php @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/single-product.php b/wp-content/themes/cosmopet/single-product.php new file mode 100644 index 0000000..ad3e75f --- /dev/null +++ b/wp-content/themes/cosmopet/single-product.php @@ -0,0 +1,60 @@ + '', + 'wrap_before' => '', + 'wrap_after' => '', + 'before' => '', + 'after' => '', + 'home' => _x('Home', 'breadcrumb', 'woocommerce'), + ); + + $breadcrumbs = new WC_Breadcrumb(); + $breadcrumbs->generate(); + + $formatted_breadcrumbs = array(); + foreach ($breadcrumbs->get_breadcrumb() as $crumb) { + $formatted_breadcrumbs[] = array( + 'text' => $crumb[0], + 'url' => $crumb[1] + ); + } + + $context['wc_breadcrumbs'] = $formatted_breadcrumbs; + } + + $product_id = get_the_ID(); + $product = wc_get_product($product_id); + + $context['product'] = $product; + + $context['related_products'] = array(); + $related_products_ids = wc_get_related_products($product_id, 5); + + if ($related_products_ids) { + foreach ($related_products_ids as $related_id) { + $related_product = wc_get_product($related_id); + if ($related_product) { + $context['related_products'][] = $related_product; + } + } + } + + Timber::render('modules/shop/components/single-product/component-template.twig', $context); +} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css index 188030e..6f02d2c 100644 --- a/wp-content/themes/cosmopet/static/front-page/css/style.css +++ b/wp-content/themes/cosmopet/static/front-page/css/style.css @@ -429,7 +429,7 @@ border-bottom: 2px solid var(--interface-main_black, rgba(18, 18, 18, 1)) } .reviews .reviews_title{ color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 79px; font-style: normal; font-weight: 700; @@ -1506,11 +1506,12 @@ justify-content: center; border-radius: 60px; background: var(--creme-white, #F4F1F0); box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15); + margin-bottom: 6rem; } .discount__sale .discount_title { color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 82px; font-style: normal; font-weight: 700; @@ -1545,7 +1546,7 @@ justify-content: center; .discount__sale .discount_form-text { color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 14px; font-style: normal; font-weight: 500; @@ -1558,7 +1559,7 @@ justify-content: center; .discount__sale .discount_text { margin-top: 27px; color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 20px; font-style: normal; font-weight: 500; @@ -1648,7 +1649,7 @@ justify-content: center; .blog__card-btn { margin-top: 24px; color: #000; - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 12px; font-style: normal; font-weight: 500; @@ -1710,7 +1711,7 @@ justify-content: center; .truth__end-promo { color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 24px; font-style: normal; font-weight: 900; @@ -1726,7 +1727,7 @@ justify-content: center; .truth__end-btn { padding: 10px 10px 11px 10px; - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 24px; font-style: normal; font-weight: 500; @@ -1822,7 +1823,7 @@ justify-content: center; .home__title { color: var(--interface-background, #F2F2F2); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 48px; font-style: normal; font-weight: 700; @@ -1839,7 +1840,7 @@ justify-content: center; } .home__subtitle { color: var(--interface-background, #F2F2F2); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; margin-top: 32px; font-size: 20px; font-style: normal; @@ -1852,7 +1853,7 @@ justify-content: center; background: var(--interface-main_white, #FFF); padding: 12px 24px; color: var(--interface-main_black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 20px; font-style: normal; font-weight: 600; @@ -1952,7 +1953,7 @@ justify-content: center; .cosmopet-x__title { color: var(--creme-white, #F4F1F0); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 82px; font-style: normal; font-weight: 700; @@ -2006,7 +2007,7 @@ justify-content: center; .cosmopet-x__heading { color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 22px; font-style: normal; font-weight: 700; @@ -2019,7 +2020,7 @@ justify-content: center; max-width: max-content; margin-top: 7px; color: #000; - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 12px; font-style: normal; font-weight: 500; @@ -2081,7 +2082,7 @@ justify-content: center; .reviews_item-top + span { color: var(--creme-white, #F4F1F0); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 12px; font-style: normal; font-weight: 500; @@ -2157,7 +2158,7 @@ justify-content: center; .blogosphere__name { color: #FFF; - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 16.8px; font-style: normal; font-weight: 700; @@ -2216,7 +2217,7 @@ justify-content: center; .marketplace__title { color: var(--grey-black, #121212); - font-family: "Craftwork Grotest"; + font-family: "Craftwork Grotesk"; font-size: 36px; font-style: normal; font-weight: 700; @@ -4001,4 +4002,278 @@ text-align: left; .btn--black-hover { transition: .3s +} + + +.reviews-plus{ + background:none; +} + + +.section-nav{ +position:relative; +display:block; +} + +.reviews-plus .container{ +display:flex; +align-items:center; + +justify-content:space-between;; + + +} + +.section-nav > *{ +position:relative; +} + +.section-nav { +display:flex; +} + + +.container-plus{ +max-width:1040px; +margin:0 auto; +} + + +.section-title { + font-weight: 500; +font-size: 82px; + width:50%; + line-height:1.2; + +text-transform: uppercase; +color: #f4f1f0; +} + +.reviews-slider { + padding: 20px; + margin-top:20px; + position: relative; + overflow:visible !important; +} + +.review-card { + background: white; +border-radius: 50px; + + padding: 36px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + margin: 10px; +} + +.review-header { + display: flex; + flex-direction:column; + align-items: left; + gap:20px; + margin-bottom: 20px; +} + +/* Для нечетных слайдов (1, 3, 5...) */ +.reviews-slider .swiper-slide:nth-child(odd) { + transform: rotate(-3deg); + transition: transform 0.3s ease; + border: 2px solid transparent; +background: padding-box linear-gradient(rgb(255 255 255), rgb(255 255 255)), +border-box linear-gradient(rgb(244 66 66), rgb(86 158 240 / 0.1)); + + +} + + +.review-card{ +position:relative; +} + +.review-card:before{ +content:''; +position:absolute; +background-image:url(https://test.cosmopet.ae/wp-content/uploads/2025/04/99.svg); +width:72px; +height:72px; +display:block; +right:36px; +top:36px; +} + +/* Для четных слайдов (2, 4, 6...) */ +.reviews-slider .swiper-slide:nth-child(even) { + transform: rotate(3deg); + transition: transform 0.3s ease; + border: 2px solid #dbbdbd; +background: #121212; + +} + +.reviews-slider .swiper-slide:nth-child(even) p , .reviews-slider .swiper-slide:nth-child(even) h3 { +color:#fff; +} + +.review-avatar { + width: 78px; + height: 78px; + border-radius: 50%; + background:#00000020; + object-fit: cover; + margin-right: 15px; + +} + +.review-author h3 { +font-weight: 400; +font-size: 24px; +text-transform: uppercase; +} + +.review-author p { +font-weight: 500; +font-size: 12px; +color: #121212; +} + +.review-text { +font-weight: 500; +font-size: 15px; +color: #121212; +} + +.review-more-content { + display: none; +} + +.show-more-btn { + background: none; + border: none; + color: #4a90e2; + cursor: pointer; + padding: 5px 0; + margin-top: 10px; + font-weight: 600; +} + +.show-more-btn:hover { + text-decoration: underline; +} + +/* Swiper Navigation */ +.reviews-plus .swiper-button-next, +.reviews-plus .swiper-button-prev { +border: 1px solid #121212; +border-radius: 20px; +padding: 16px; +width: 56px; +height: 56px; + background: #fff; +} + +.reviews-plus .swiper-button-prev{ +transform:rotate(-180deg) +} + +.reviews-plus .swiper-button-next::after, +.reviews-plus .swiper-button-prev::after { + font-size: 18px; + display:none; +} + +.swiper-pagination-bullet-active { + background: #4a90e2; +} + +/* Popup Styling */ +.review-popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.7); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.popup-content { + background: white; + padding: 30px; + border-radius: 12px; + max-width: 600px; + width: 90%; + max-height: 80vh; + overflow-y: auto; + position: relative; +} + +.close-popup { + position: absolute; + top: 15px; + right: 15px; + font-size: 24px; + background: none; + border: none; + cursor: pointer; + color: #777; +} + +.popup-review-content { + padding: 20px 0; +} + +/* Responsive */ +@media (max-width: 768px) { + .review-card { + padding: 20px; + } + + .reviews-plus .container{ + flex-wrap:wrap; + } + + .review-text { +font-weight: 500; +font-size: 12px; + } + + .star-igm{ + width:20%; + } + + .section-nav{ + gap:5px; + } + + .reviews-plus .swiper-button-next, .reviews-plus .swiper-button-prev { +border: 1px solid #121212; +border-radius: 10px; +padding: 5px; + inset:0; +width: 36px; +height: 36px; +background: #fff; +position: static !important; +margin-top: 16px; +} + + .review-card{ + padding:20px; + } + + .section-title { +font-weight: 500; +font-size: 42px; +width: 100%; +line-height: 1.2; +text-transform: uppercase; +color: #f4f1f0; +} + +} + +.reviews-plus{ + overflow: hidden; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/front-page/img/stars.svg b/wp-content/themes/cosmopet/static/front-page/img/stars.svg new file mode 100644 index 0000000..545167d --- /dev/null +++ b/wp-content/themes/cosmopet/static/front-page/img/stars.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/front-page/js/main.js b/wp-content/themes/cosmopet/static/front-page/js/main.js index ac3153f..7f98d84 100644 --- a/wp-content/themes/cosmopet/static/front-page/js/main.js +++ b/wp-content/themes/cosmopet/static/front-page/js/main.js @@ -197,11 +197,6 @@ document.addEventListener('DOMContentLoaded', function () { slidesPerView: 'auto', spaceBetween: 13, - mousewheel: { - sensitivity: 1, - enabled: true, - releaseOnEdges: true, - }, }); // sellerSlider @@ -215,11 +210,6 @@ document.addEventListener('DOMContentLoaded', function () { nextEl: '.sellerSlider-next', prevEl: '.sellerSlider-prev' }, - mousewheel: { - sensitivity: 1, - enabled: true, - releaseOnEdges: true, - }, breakpoints: { 250: { slidesPerView: 1, @@ -248,11 +238,6 @@ document.addEventListener('DOMContentLoaded', function () { let blogSlider = new Swiper(".blogSlider", { slidesPerView: 2.5, spaceBetween: 43, - mousewheel: { - sensitivity: 1, - enabled: true, - releaseOnEdges: true, - }, navigation: { nextEl: '.blogSlider-next', prevEl: '.blogSlider-prev' @@ -280,11 +265,6 @@ document.addEventListener('DOMContentLoaded', function () { let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", { slidesPerView: 2.5, spaceBetween: 43, - mousewheel: { - sensitivity: 1, - enabled: true, - releaseOnEdges: true, - }, navigation: { nextEl: '.cosmopet-next', prevEl: '.cosmopet-prev' @@ -316,11 +296,6 @@ document.addEventListener('DOMContentLoaded', function () { nextEl: '.smiSlider-next', prevEl: '.smiSlider-prev' }, - mousewheel: { - sensitivity: 1, - enabled: true, - releaseOnEdges: true, - }, breakpoints: { 300: { slidesPerView: 1.3, @@ -492,6 +467,7 @@ document.addEventListener('DOMContentLoaded', function () { }); }); +<<<<<<< HEAD // Находим все элементы с классом login-open document.addEventListener('DOMContentLoaded', function() { const loginButtons = document.querySelectorAll('.login-open'); @@ -544,4 +520,75 @@ document.addEventListener('DOMContentLoaded', function() { // Сбрасываем ширину modalAside.style.width = ''; } - }); \ No newline at end of file + }); +======= + +document.addEventListener('DOMContentLoaded', function() { + // Initialize Swiper + const reviewsSwiper = new Swiper('.reviews-slider', { + slidesPerView: 1, + spaceBetween: 50, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + navigation: { + nextEl: '.swiper-button-prev', + prevEl: '.swiper-button-next', + }, + breakpoints: { + 320: { + slidesPerView: 1.3, + spaceBetween: 20, + + }, + 1024: { + slidesPerView: 2, + }, + 1200: { + slidesPerView: 2, + } + } + }); + + // Show more functionality + const showMoreButtons = document.querySelectorAll('.show-more-btn'); + const reviewPopup = document.querySelector('.review-popup'); + const popupContent = document.querySelector('.popup-review-content'); + const closePopup = document.querySelector('.close-popup'); + + showMoreButtons.forEach(button => { + button.addEventListener('click', function() { + const reviewCard = this.closest('.review-card'); + const reviewHeader = reviewCard.querySelector('.review-header').cloneNode(true); + const reviewText = reviewCard.querySelector('.review-text').cloneNode(true); + + // Show the hidden content in the review text + const moreContent = reviewText.querySelector('.review-more-content'); + if (moreContent) { + moreContent.style.display = 'block'; + } + + // Populate popup + popupContent.innerHTML = ''; + popupContent.appendChild(reviewHeader); + popupContent.appendChild(reviewText); + + // Show popup + reviewPopup.style.display = 'flex'; + }); + }); + + // Close popup + closePopup.addEventListener('click', function() { + reviewPopup.style.display = 'none'; + }); + + // Close popup when clicking outside + reviewPopup.addEventListener('click', function(e) { + if (e.target === reviewPopup) { + reviewPopup.style.display = 'none'; + } + }); +}); +>>>>>>> ec84500a88f048324cf2940bad3ba7528694953e diff --git a/wp-content/themes/cosmopet/static/img/form-img.png b/wp-content/themes/cosmopet/static/img/form-img.png new file mode 100644 index 0000000..a543660 Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/form-img.png differ diff --git a/wp-content/themes/cosmopet/static/img/modal/about_slider.png b/wp-content/themes/cosmopet/static/img/modal/about_slider.png new file mode 100644 index 0000000..f3a8325 Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/modal/about_slider.png differ diff --git a/wp-content/themes/cosmopet/static/img/pet/cat.png b/wp-content/themes/cosmopet/static/img/pet/cat.png new file mode 100644 index 0000000..f88dd36 Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/pet/cat.png differ diff --git a/wp-content/themes/cosmopet/static/img/pet/dog.png b/wp-content/themes/cosmopet/static/img/pet/dog.png new file mode 100644 index 0000000..36e37ae Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/pet/dog.png differ diff --git a/wp-content/themes/cosmopet/static/img/pet/mini-dog.png b/wp-content/themes/cosmopet/static/img/pet/mini-dog.png new file mode 100644 index 0000000..59a696d Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/pet/mini-dog.png differ diff --git a/wp-content/themes/cosmopet/static/img/product/image.png b/wp-content/themes/cosmopet/static/img/product/image.png new file mode 100644 index 0000000..aaef248 Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/product/image.png differ diff --git a/wp-content/themes/cosmopet/static/img/product/mini-card.png b/wp-content/themes/cosmopet/static/img/product/mini-card.png new file mode 100644 index 0000000..0e0eb02 Binary files /dev/null and b/wp-content/themes/cosmopet/static/img/product/mini-card.png differ diff --git a/wp-content/themes/cosmopet/static/img/svg/country/ar.svg b/wp-content/themes/cosmopet/static/img/svg/country/ar.svg new file mode 100644 index 0000000..4e3a7b3 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/country/ar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/country/ru.svg b/wp-content/themes/cosmopet/static/img/svg/country/ru.svg new file mode 100644 index 0000000..fc991dd --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/country/ru.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/logo/logo-black.svg b/wp-content/themes/cosmopet/static/img/svg/logo/logo-black.svg new file mode 100644 index 0000000..4cd0135 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/logo/logo-black.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/img/svg/logo/logo-gradient.svg b/wp-content/themes/cosmopet/static/img/svg/logo/logo-gradient.svg new file mode 100644 index 0000000..9054fde --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/logo/logo-gradient.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/logo/logo-white.svg b/wp-content/themes/cosmopet/static/img/svg/logo/logo-white.svg new file mode 100644 index 0000000..22c4489 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/logo/logo-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-back.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-back.svg new file mode 100644 index 0000000..a977e53 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-black.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-black.svg new file mode 100644 index 0000000..38fe433 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs-black.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs-black.svg new file mode 100644 index 0000000..88fd149 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs.svg new file mode 100644 index 0000000..f1f9618 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-breadcrumbs.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-left.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-right-input.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-right-input.svg new file mode 100644 index 0000000..a101dd0 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-right-input.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-right.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected-white.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected-white.svg new file mode 100644 index 0000000..bb7e90b --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected.svg b/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected.svg new file mode 100644 index 0000000..fb283a7 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/arrow-selected.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/static/img/svg/main/basket.svg b/wp-content/themes/cosmopet/static/img/svg/main/basket.svg new file mode 100644 index 0000000..6c08b40 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/basket.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg b/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/change-dot.svg b/wp-content/themes/cosmopet/static/img/svg/main/change-dot.svg new file mode 100644 index 0000000..f38b6c9 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/change-dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/filter.svg b/wp-content/themes/cosmopet/static/img/svg/main/filter.svg new file mode 100644 index 0000000..efa46c8 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/google-white.svg b/wp-content/themes/cosmopet/static/img/svg/main/google-white.svg new file mode 100644 index 0000000..4040621 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/google-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/gradient-x.svg b/wp-content/themes/cosmopet/static/img/svg/main/gradient-x.svg new file mode 100644 index 0000000..3a19e1f --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/gradient-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/minus.svg b/wp-content/themes/cosmopet/static/img/svg/main/minus.svg new file mode 100644 index 0000000..77109fe --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/minus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/plus-grey.svg b/wp-content/themes/cosmopet/static/img/svg/main/plus-grey.svg new file mode 100644 index 0000000..6fa9039 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/plus-grey.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/plus.svg b/wp-content/themes/cosmopet/static/img/svg/main/plus.svg new file mode 100644 index 0000000..a9db939 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/plus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/question.svg b/wp-content/themes/cosmopet/static/img/svg/main/question.svg new file mode 100644 index 0000000..2e21e7b --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/status-cancelled.svg b/wp-content/themes/cosmopet/static/img/svg/main/status-cancelled.svg new file mode 100644 index 0000000..f96648a --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/status-cancelled.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/status-chek.svg b/wp-content/themes/cosmopet/static/img/svg/main/status-chek.svg new file mode 100644 index 0000000..836d49b --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/status-chek.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/triangle-grey.svg b/wp-content/themes/cosmopet/static/img/svg/main/triangle-grey.svg new file mode 100644 index 0000000..23ede66 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/triangle-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/vk-white.svg b/wp-content/themes/cosmopet/static/img/svg/main/vk-white.svg new file mode 100644 index 0000000..556d386 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/vk-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/white-x.svg b/wp-content/themes/cosmopet/static/img/svg/main/white-x.svg new file mode 100644 index 0000000..3697346 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/white-x.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/main/ya-white.svg b/wp-content/themes/cosmopet/static/img/svg/main/ya-white.svg new file mode 100644 index 0000000..a6b4ece --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/main/ya-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket-w.svg b/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket-w.svg new file mode 100644 index 0000000..55eb29f --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket-w.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket.svg b/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket.svg new file mode 100644 index 0000000..fdf6bf8 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/mini-profile/basket.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile-w.svg b/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile-w.svg new file mode 100644 index 0000000..442e587 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile-w.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile.svg b/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile.svg new file mode 100644 index 0000000..6a48c34 --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/mini-profile/profile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/social-media/tg.svg b/wp-content/themes/cosmopet/static/img/svg/social-media/tg.svg new file mode 100644 index 0000000..332942a --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/social-media/tg.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/social-media/vk.svg b/wp-content/themes/cosmopet/static/img/svg/social-media/vk.svg new file mode 100644 index 0000000..ef5cadf --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/social-media/vk.svg @@ -0,0 +1,3 @@ + + + diff --git a/wp-content/themes/cosmopet/static/img/svg/social-media/ya.svg b/wp-content/themes/cosmopet/static/img/svg/social-media/ya.svg new file mode 100644 index 0000000..055175d --- /dev/null +++ b/wp-content/themes/cosmopet/static/img/svg/social-media/ya.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-left.svg b/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-left.svg new file mode 100644 index 0000000..465c268 --- /dev/null +++ b/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-right.svg b/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-right.svg new file mode 100644 index 0000000..8952470 --- /dev/null +++ b/wp-content/themes/cosmopet/static/shop/img/svg/main/arrow-right.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/wp-content/themes/cosmopet/static/shop/img/svg/main/black-x.svg b/wp-content/themes/cosmopet/static/shop/img/svg/main/black-x.svg new file mode 100644 index 0000000..cb3041d --- /dev/null +++ b/wp-content/themes/cosmopet/static/shop/img/svg/main/black-x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/wp-content/themes/cosmopet/templates/blog/blog-single.twig b/wp-content/themes/cosmopet/templates/blog/blog-single.twig index 019dc97..05d08fe 100644 --- a/wp-content/themes/cosmopet/templates/blog/blog-single.twig +++ b/wp-content/themes/cosmopet/templates/blog/blog-single.twig @@ -1,62 +1,89 @@ -{% extends 'layout.twig' %} - - -{% block content %} - - -
-
- {{ function('pll_e', 'Главная') }} / - {{ function('pll_e', 'Блог') }} / - {{ post.name }} -
-
- + {% extends 'layout.twig' %} + + + {% block content %} - -
-
-

{{post.name}}

-
- -

{{post.date}}

-

{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}

- - {% if post.get_author_name %} -
- - {{post.get_author_name}} + +
+
+ {{ function('pll_e', 'Главная') }} / + {{ function('pll_e', 'Блог') }} / + {{ post.name }} +
+
+ + +
+
+

{{post.name}}

+
+ +

{{post.date}}

+

{{ function('pll_e', 'время чтения') }}: {{post.reading_time}}

+ + {% if post.get_author_name %} +
+ + + {{post.get_author_name}} + +
+ {% endif %} +
+
+ {{post.thumbnail.alt}}
- {% endif %}
-
- {{post.thumbnail.alt}} +
+ + + + +
+
+ {{post.content}}
+ +
+
+
+ + + {{ function('get_post_likes_count', post.ID) }} + +
+
+

+ {{ function('pll_e', 'КОММЕНТАРИИ') }} ({{ function('get_comments_number', post.ID) }}) +

+ {{ function('comments_template') }} +
+
+
+
-
+ - + - -
-
- {{post.content}} -
-
- -
-
- {% include '/blog/featured-slider.twig' %} -
-
- - +
+
+ {% include '/blog/featured-slider.twig' %} +
+
+ + -{% endblock %} \ No newline at end of file + {% endblock %} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/blog/editorial.twig b/wp-content/themes/cosmopet/templates/blog/editorial.twig index 0409128..7b7ed3d 100644 --- a/wp-content/themes/cosmopet/templates/blog/editorial.twig +++ b/wp-content/themes/cosmopet/templates/blog/editorial.twig @@ -27,14 +27,21 @@

{{_post.date}}

{{_post.reading_time}}

- + diff --git a/wp-content/themes/cosmopet/templates/blog/featured-slider.twig b/wp-content/themes/cosmopet/templates/blog/featured-slider.twig index daddad6..24ac65c 100644 --- a/wp-content/themes/cosmopet/templates/blog/featured-slider.twig +++ b/wp-content/themes/cosmopet/templates/blog/featured-slider.twig @@ -36,7 +36,20 @@
{{_post.date}}
{{ function('pll_e', 'время чтения') }}: {{_post.reading_time}}
- +
+
+ +{{ function('get_post_likes_count', _post.ID|default(0)) }} +
+
+ +{{ _post.get_comments_number }}
+ {% if _post.get_author_name %} + +{% endif %} +
{{ function('pll_e', 'читать статью') }} diff --git a/wp-content/themes/cosmopet/templates/blog/most-read.twig b/wp-content/themes/cosmopet/templates/blog/most-read.twig index 903c173..81c41f7 100644 --- a/wp-content/themes/cosmopet/templates/blog/most-read.twig +++ b/wp-content/themes/cosmopet/templates/blog/most-read.twig @@ -1,18 +1,8 @@ +{% set current_path = template_path ~ '/modules/blog/components/most-read' %} +

{{ function('pll_e', 'САМЫЕ ЧИТАЕМЫЕ') }}:

- - {% if debug_info %} -
-

Метаполя с просмотрами:

- -
- {% endif %} - {% if most_read and most_read|length > 0 %}