Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task: 6607 | Правки на главной странице 2

Browse Source
pull/29/head
Максим Максимов 2 months ago
parent 2e325b4839
commit d4a8de8552
4 changed files with 178 additions and 150 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      wp-content/themes/cosmopet/functions.php
  2. 85
      wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
  3. 120
      wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
  4. 79
      wp-content/themes/cosmopet/templates/front-page/front-page.twig

10
wp-content/themes/cosmopet/functions.php
Unescape View File

@ -293,16 +293,6 @@ function include_component($module_name, $component_name) {
}
function theme_enqueue_scripts() {
// Materialize CSS
wp_enqueue_style('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css', [], '1.0.0');
// Materialize JS
wp_enqueue_script('materialize-js', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js', [], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
/**
* Регистрируем шаблоны из всех подпапок /templates/

85
wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css
Unescape View File

@ -2073,7 +2073,92 @@ textarea{
}
}
.container, .container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.about_slider .prev, .about_slider .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 99;
background-color: unset;
}
.about_slider .next {
right: 29vw;
}
.about_slider .prev {
left: 29vw;
}
.about_slider .carousel-item {
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 .swiper-slide-active {
backdrop-filter: blur(6px);
width: 429px!important;
z-index: 3;
}
.about_slider .carousel-item img {
width: auto;
}
.about_slider .slide_info {
display: flex;
flex-direction: column;
gap: 15px;
}
.about_slider .carousel-item::after {
content: '';
background-image: url(/wp-content/themes/cosmopet/static/front-page/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 .slide_title {
text-transform: uppercase;
font-size: 24px;
font-weight: 700;
line-height: 28.8px;
color: #121212;
}
.about_slider .slide_text {
font-size: 20px;
font-weight: 500;
line-height: 24px;
color:#121212;
}
.discount_block .discount_cosmodog {
margin-top: 60px;

120
wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
Unescape View File

@ -415,99 +415,41 @@ if (document.querySelector('.header').classList.contains('white')) {
// scroll
document.addEventListener('DOMContentLoaded', function () {
// Переводы для демонстрации
const translations = {
ru: {
'slide1-title': 'МОС и ФОС пребиотики',
'slide1-text': 'Поддерживают здоровый баланс микрофлоры кишечника и снижают риск заболеваний ЖКТ',
'slide2-title': 'Омега 3 и жирные кислоты',
'slide2-text': 'Улучшают работу мозга и сохраняют его активность, обеспечивают здоровье кожи и блеск шерсти',
'slide3-title': 'Юкка Шидигера',
'slide3-text': 'Стимулирует пищеварение, связывает вещества, вызывающие неприятный запах фекалий. Результат — регулярный стул с меньшим запахом',
'slide4-title': 'Кальций, фосфор и витамин D',
'slide4-text': 'В оптимальном соотношении поддерживают здоровье костей, способствуют восстановлению суставов и подвижности',
'slide5-title': 'Энтопротеин',
'slide5-text': 'Легкоперевариваемый энтопротеин, который к тому же превосходит по питательности традиционное мясо. Будучи новым источником белка, не вызывает аллергии у питомцев'
const aboutSwiper = new Swiper('.about_slider', {
loop: true,
centeredSlides: true,
grabCursor: true,
slidesPerView: 'auto',
spaceBetween: 30,
effect: 'coverflow',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 150,
modifier: 2.5,
slideShadows: false,
},
navigation: {
nextEl: '.about_slider_nav.next',
prevEl: '.about_slider_nav.prev',
},
breakpoints: {
0: {
slidesPerView: 1.5,
},
480: {
slidesPerView: 2.5,
},
768: {
slidesPerView: 3.5,
},
1024: {
slidesPerView: 5,
},
},
ae: {
'slide1-title': 'MOS and FOS prebiotics',
'slide1-text': 'Maintain a healthy balance of intestinal microflora and reduces the risk of intestinal diseases',
'slide2-title': 'Omega 3 and fatty acids',
'slide2-text': 'They improve the functioning of the brain and maintain its normal activity, preserve the health of the skin and the shine of the coat',
'slide3-title': 'Yucca schidigera',
'slide3-text': 'It stimulates digestion, even binding the substances responsible for the specific smell of dog and cat faeces. As a result bowel-emptying occurs like clockwork (and with less odour!)',
'slide4-title': 'Calcium, phosphorus and vitamin D',
'slide4-text': 'In their optimal ratio, they support bone health, promote joint restoration and help maintain mobility',
'slide5-title': 'E-protein',
'slide5-text': 'An easily digestible E-protein, nutritionally superior to traditional meat; being a novel source of protein, does not cause allergies in pets'
}
};
function switchLanguage(lang) {
const texts = translations[lang];
for (const [id, text] of Object.entries(texts)) {
const element = document.getElementById(id);
if (element) {
element.textContent = text;
}
}
}
// Инициализация слайдера
var slider = carousel_init();
function carousel_init() {
var carousel = document.querySelectorAll('.carousel');
var options;
if (window.innerWidth > 421) {
options = {
numVisible: 5,
shift: 50,
dist: -50,
padding: 20
};
} else {
options = {
numVisible: 3,
shift: 30,
dist: -30,
padding: 10
};
}
var instances = M.Carousel.init(carousel, options);
// Обработчики для кнопок навигации
document.querySelectorAll('.about_slider_nav').forEach(btn => {
btn.addEventListener('click', function (e) {
if (e.target.closest('button').classList.contains('next')) {
instances[0].next();
} else {
instances[0].prev();
}
});
});
return instances;
}
// Переинициализация при изменении размера экрана
window.addEventListener('resize', function() {
// Уничтожаем текущий экземпляр
var currentCarousel = M.Carousel.getInstance(document.querySelector('.carousel'));
if (currentCarousel) {
currentCarousel.destroy();
}
// Создаем новый с обновленными параметрами
setTimeout(() => {
slider = carousel_init();
}, 100);
});
});
document.addEventListener('DOMContentLoaded', function () {
const petsSlider = new Swiper(".discount_cosmodog__slider", {
slidesPerView: 1,

79
wp-content/themes/cosmopet/templates/front-page/front-page.twig
Unescape View File

@ -95,64 +95,75 @@
{% endif %}
<div class="container-fluid">
<div class="about_slider aboutSlider swiper">
<button class="about_slider_nav next">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9,18 15,12 9,6"></polyline>
</svg>
</button>
<div class="about_slider swiper">
<div class="swiper-buttons">
<button class="about_slider_nav prev">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15,18 9,12 15,6"></polyline>
</svg>
<img src="/wp-content/themes/cosmopet/static/front-page/img/slider-prev.svg" alt="">
</button>
<button class="about_slider_nav next">
<img src="/wp-content/themes/cosmopet/static/front-page/img/slider-next.svg" alt="">
</button>
<!-- Переключатель языка для демонстрации -->
<div style="text-align: center; margin-bottom: 20px;">
<button onclick="switchLanguage('ru')" style="margin-right: 10px; padding: 5px 15px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Русский</button>
<button onclick="switchLanguage('ae')" style="padding: 5px 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">English</button>
</div>
<div class="slider swiper-wrapper carousel">
<div class="swiper-wrapper">
<div class="slide swiper-slide carousel-item">
<img src="https://via.placeholder.com/200x150/4CAF50/white?text=MOS+FOS" alt="">
<img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img1.png" alt="">
<div class="slide_info">
<h3 class="slide_title" id="slide1-title">MOS and FOS prebiotics</h3>
<p class="slide_text" id="slide1-text">Maintain a healthy balance of intestinal microflora and reduces the risk of intestinal diseases</p>
<h3 class="slide_title">Пребиотики MOS и FOS</h3>
<p class="slide_text">
Поддерживают здоровый баланс кишечной микрофлоры и снижают риск
возникновения
заболеваний кишечника
</p>
</div>
</div>
<div class="slide swiper-slide slide--prev2 carousel-item">
<img src="https://via.placeholder.com/200x150/2196F3/white?text=Omega+3" alt="">
<div class="slide swiper-slide carousel-item">
<img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img2.png" alt="">
<div class="slide_info">
<h3 class="slide_title" id="slide2-title">Omega 3 and fatty acids</h3>
<p class="slide_text" id="slide2-text">They improve the functioning of the brain and maintain its normal activity, preserve the health of the skin and the shine of the coat</p>
<h3 class="slide_title">Омега 3 и жирные кислоты</h3>
<p class="slide_text">
Улучшают работу мозга и поддерживают его активность в норме,
сохраняют здоровье
кожи и блеск шерсти
</p>
</div>
</div>
<div class="slide swiper-slide active2 swiper-slide-active carousel-item active">
<img src="https://via.placeholder.com/200x150/FF9800/white?text=Yucca" alt="">
<div class="slide swiper-slide swiper-slide-active carousel-item">
<img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img3.png" alt="">
<div class="slide_info">
<h3 class="slide_title" id="slide3-title">Yucca schidigera</h3>
<p class="slide_text" id="slide3-text">It stimulates digestion, even binding the substances responsible for the specific smell of dog and cat faeces. As a result bowel-emptying occurs like clockwork (and with less odour!)</p>
<h3 class="slide_title">Юкка Шидигера</h3>
<p class="slide_text">
Стимулирует пищеварение и связывает вещества, отвечающие за
специфический запах
стула. Результат: туалет как по часам<br> (а неприятного запаха<br> – меньше).
</p>
</div>
</div>
<div class="slide swiper-slide slide--next2 carousel-item">
<img src="https://via.placeholder.com/200x150/9C27B0/white?text=Calcium" alt="">
<div class="slide swiper-slide carousel-item">
<img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img4.png" alt="">
<div class="slide_info">
<h3 class="slide_title" id="slide4-title">Calcium, phosphorus and vitamin D</h3>
<p class="slide_text" id="slide4-text">In their optimal ratio, they support bone health, promote joint restoration and help maintain mobility</p>
<h3 class="slide_title">Кальций, фосфор и витамин D</h3>
<p class="slide_text">
В оптимальном соотношении поддерживают здоровье костей,
способствуют
восстановлению суставов и поддержанию их подвижности
</p>
</div>
</div>
<div class="slide swiper-slide carousel-item">
<img src="https://via.placeholder.com/200x150/E91E63/white?text=E-protein" alt="">
<img src="/wp-content/themes/cosmopet/static/front-page/img/about_slider-img5.png" alt="">
<div class="slide_info">
<h3 class="slide_title" id="slide5-title">E-protein</h3>
<p class="slide_text" id="slide5-text">An easily digestible E-protein, nutritionally superior to traditional meat; being a novel source of protein, does not cause allergies in pets</p>
<h3 class="slide_title">E-protein</h3>
<p class="slide_text">
Легкоперевариваемый энтопротеин, который к тому же превосходит по
питательности
традиционное мясо. Будучи новым источником белка не вызывает аллергии<br> у питомцев
</p>
</div>
</div>
</div>
</div>
</div>
{% if site_region == 'ru' %}
<div class="marketplace">
<div class="container">

Write Preview
Loading…
Cancel
Save