Mister Diamond Slider

slider.php

1.  Фон. Паттерн или цвет
1.1 $slide__bg_pattern - паттерн
1.2 $slide__bg_color - цвет
2.  Картинка первого плана - товара или ещё какая-то другая в правой части десктопа или в нижней части мобильной версии
2.1 $slide__image_default - дефолтная на обе версии, если не указана мобильная картинка, или десктопная, если указана мобильная
2.2 $slide__image_mobile - мобильная картинка
2.3 $slide__image_cover - размер картинки background-size: cover;
3.  $slide__link - ссылка 
4.  $price_before и $price_after - 2 поля цены "до" и "после" 
5.  $slide__text - основное текстовое поле 
6.  Убрать заголовок со слайда - он будет ручками прописываться в текстовом поле тегом заголовка h2, например



<!-- 
*
* Фон. Паттерн или цвет
* 
-->

<!-- Если указан цвет фона и не указан паттерн, то ставим цветной фон. -->
<? if (!empty($slide__bg_color) && empty($slide__bg_pattern)) { ?>

<style>
    .slide {
        background-image: none;
        background-color: $slide__bg_color;
    }
</style>

<!-- Если указана паттерн, то показываем его. 
Цвет не обязательно должен быть не указан. -->
<?php }     
elseif (empty($slide__bg_color) && !empty($slide__bg_pattern)) 
{ ?>

<style>
    .slide {
        background-image: url($slide__bg_pattern);
        background-size: cover;      
        background-color: transparent;
    }
</style>

<!-- Если указана паттерн и цвет, то показываем всё. -->
<?php }     
elseif (!empty($slide__bg_color) && !empty($slide__bg_pattern)) 
{ ?>

<style>
    .slide {
        background-image: url($slide__bg_pattern);
        background-size: cover;      
        background-color: $slide__bg_color;
    }
</style>

<!-- Ничего не указано. -->
<?php } else { ?>

<style>
    .slide {
        background-image: none;
        background-color: transparent;
    }
</style>

<?php } ?>


<!-- 
*
* Картинка первого плана - товара или ещё какая-то другая в правой части десктопа или в нижней части мобильной версии
* 
-->

<!-- Если указана дефолтная картинка и не указана мобильная, то ставим дефолтную. -->
<? if (!empty($slide__image_default) && empty($slide__image_mobile)) { ?>

<style>
    .slide__image {
        background-image: url($slide__image_default);
    }
</style>

<!-- Если указаны дефолтная и мобильная картинки, то используем обе через @media. -->
<?php }     
elseif (!empty($slide__image_default) && !empty($slide__image_mobile)) 
{ ?>

<style>
    .slide__image {
        background-image: url($slide__image_default);
        background-size: cover;      
        @media (max-width: 500px) {
            background-image: url($slide__image_mobile);
        }
    }
</style>

<!-- Если не указана дефолтная картинка, но указана мобильная, то ставим мобильную. Ну, мало ли... -->
<?php }     
elseif (empty($slide__image_default) && !empty($slide__image_mobile)) 
{ ?>

<style>
    .slide__image {
        background-image: none;
        background-size: cover;      
        @media (max-width: 500px) {
            background-image: url($slide__image_mobile);
        }
    }
</style>

<!-- Ничего не указано. -->
<?php } else { ?>

<style>
    .slide {
        background-image: none;
    }
</style>

<?php } ?>


<!-- Мы можем использовать обычную картинку товара, так и специально подготовленное для слайдера изображение.
В первом случае необходимо указать background-size: contain;, чтобы картинка подстроилась под блок только по вертикали в десктопной версии, по горизонтали в мобильной. 
Во втором случае может понадобиться полностью залить блок изображением - background-size: cover;  -->
<?php }     
if (isset($slide__image_cover)) 
{ ?>

<style>
    .slide__image {
        background-size: cover;   
    }
</style>

<!-- Ничего не указано. -->
<?php } else { ?>

<style>
    .slide__image {
        background-size: contain;   
    }
</style>

<?php } ?>




<!-- 
*
* Код слайда
* 
-->

<!-- Если в админке указана ссылка, то делаем весь блок кликабельным.
Если ссылки нет, то оборачиваем в div.
Проверяем наличия цвета или паттерна. -->
<? if (!empty($slide__link)) { ?>
<a href="#" class="slide">
<?php } else { ?>
<div class="slide">
<?php } ?>

    <div class="slide__container">

        <div class="slide__content">

            <!-- Если основное текстовое поле заполнено, то выводим. -->
            <? if (!empty($slide__text)) { ?>
            <div class="slide__text">
                <h4>Заголовок<h4> 
                <p>Описание</p>
            </div>
            <?php } ?>

            <!-- Если одной из полей цены "до" и "после" заполнены, то выводим. -->
            <? if (!empty($price_before) && !empty($price_after))  { ?>
            <div class="price">

                <!-- Если поле цены "до" заполнены, то выводим. -->
                <? if (!empty($price_before)) { ?>
                <div class="price__before">
                    <div class="price__title">Цена в бутике от:</div>
                    <div class="price__description">1 875 000 ₽</div>
                </div>            
                <?php } ?>

                <!-- Если поле цены "после" заполнены, то выводим. -->
                <? if (!empty($price_after)) { ?>
                <div class="price__after">
                    <div class="price__title">Цена в Mr. Diamond:</div>
                    <div class="price__description">1 279 500 ₽</div>
                </div>
                <?php } ?>
                
            </div>
            <?php } ?>

        </div>

    </div>

    <!-- Отображение этого поля выше через стили. -->
    <div class="slide__image"></div>

<!-- Если в админке указана ссылка, то делаем весь блок кликабельным.
Если ссылки нет, то оборачиваем в div. -->
<? if (!empty($slide__link)) { ?>
</a>
<?php } else { ?>
</div>
<?php } ?>

slider.scss

.slide {
    display: block;
    position: relative;
    width: 100%;
    color: rgb(36, 55, 70);
    height: 500px;
    padding: 81px 10.35% 50px 136px; 
    text-decoration: none;
    overflow: hidden;
    background-repeat: repeat; // Для паттерна
    font-family: "pt-sans-caption";
    font-size: 15px;

    @media (max-width: 1200px) {
        height: 400px;
    }

    @media (max-width: 1024px) {
        height: 350px;
        padding-left: 40px 3.6% 40px 30px;
    }

    @media (max-width: 500px) {
        height: auto;
    }

    &__container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    &__image {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-repeat: no-repeat;
        background-position: right;
        background-size: contain;

        @media (max-width: 500px) {
            background-position: bottom;
        }
    }

    &__content {
        width: 60%;
        display: flex;
        flex-direction: column;
        z-index: 2;

        @media (max-width: 500px) {
            width: 100%;
            padding-bottom: 60vw;
        }
    }

    &__text {
        width: 100%; // Как-то так. Этот текст во всю ширину блока, а цены по 50%. Насчёт использования width и flex-basis не уверен, не проверял.

        h4 {
            font-family: "bebas-neue-by-fontfabric";
            font-size: 58px;
            font-weight: 700;

            @media (max-width: 1200px) {
                font-size: 50px;
            }

            @media (max-width: 1024px) {
                font-size: 40px;
            }

            @media (max-width: 768px) {
                font-size: 34px;
            }
        }

        p {
            display: inline-block;
            font-size: 13px;
            height: auto;
        }

    }

    &:hover {
        .slide__image {
            transform: scale(1.05); // Можно ещё это применить на background-image для .slide
        }
    }
}

.price {
    display: flex;
    flex-direction: row;

    @media (max-width: 500px) {
        flex-direction: column;
    }

    &>div {
        flex-basis: 50%;
        flex-grow: 0;
        flex-shrink: 1;
    }

    &__title {
        display: inline-block;
        font-size: 13px;
        height: auto;
    }

    &__description {
        display: block;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    &:first-child {
        .price-description {
            text-decoration: line-through;
        }
    }
}