updates for request form titles, H2/H3 on brands / models

This commit is contained in:
merelendor 2022-12-06 14:27:37 +03:00
parent f566f21529
commit 85dae8ece5
7 changed files with 332 additions and 120 deletions

View File

@ -13,11 +13,11 @@
$this->setFrameMode(true);
?>
<div class="recom_models">
<p class="title"><?= isset($arParams['TITLE']) ? $arParams['TITLE'] : $arResult['TITLE']; ?></p>
<h2><?= isset($arParams['TITLE']) ? $arParams['TITLE'] : $arResult['TITLE']; ?></h2>
<? foreach($arResult['MODELS'] AS $model): ?>
<div class="other_item">
<a href="<?= $model['URL']; ?>">
<span><?= $model['NAME']; ?></span>
<h3><?= $model['NAME']; ?></h3>
<img src="<?= ($model['PREVIEW_PICTURE'] != "") ? $model['PREVIEW_PICTURE'] : "/images/no_car_photo_380.png"; ?>" alt="<?= $model['NAME']; ?>" loading="lazy" />
</a>
</div>

View File

@ -54,12 +54,19 @@ $this->setFrameMode(true);
<div class="fixed_col" style="z-index: 10;">
<div class="model_price">
<h2 style="margin:0; font-size:inherit; margin-bottom: 45px; line-height: 20px;">Оформите автомобиль <?= $arResult['PROPERTIES']['BRAND']['RELATED']['NAME']; ?> <?= $arResult['PROPERTIES']['MODEL']['RELATED']['NAME']; ?> в лизинг на выгодных условиях</h2>
<p>
Стоимость авто (от)
<span style="font-size: <?= ($arParams['car_price'] > 9999999) ? "30px" : "34px"; ?>"><?= number_format($arParams['car_price'], 0, ".", " "); ?> ₽</span>
</p>
<button class="button button-blue" id="to_calculator_button">Рассчитать</button>
<button class="button" id="to_form_button">Задать вопрос</button>
<? if($arResult['ACTIVE'] == "Y"): ?>
<p>
Стоимость авто (от)
<span style="font-size: <?= ($arParams['car_price'] > 9999999) ? "30px" : "34px"; ?>"><?= number_format($arParams['car_price'], 0, ".", " "); ?> ₽</span>
</p>
<button class="button button-blue" id="to_calculator_button">Рассчитать</button>
<button class="button" id="to_form_button">Задать вопрос</button>
<? else: ?>
<p style="font-weight: normal;">
Уточняйте наличие автомобиля у менеджеров компании Эволюция Автолизинга
</p>
<button class="button" id="to_form_button">Уточнить наличие</button>
<? endif; ?>
</div>
</div>
</div>
@ -217,76 +224,78 @@ $this->setFrameMode(true);
</article>
</div>
<div id="calc">
<div class="calc_body">
<h2 class="section_title">Калькулятор расчета лизинга</h2>
<div class="calc_settings">
<div class="settings_box">
<p>Стоимость авто</p>
<p>
<span id="calculator_car_price_value">
<?= number_format($arResult['PROPERTIES']['PRICE']['VALUE'], 0, ".", " "); ?>
</span>
<output hidden></output>
</p>
<div class="price_custom" id="calculator_car_price_editor" style="display:none;">
<input id="calculator_car_price_input" type="number" value="500000" min="500000" max="20000000" />
<button id="calculator_car_price_save">Сохранить</button>
<? if($arResult['ACTIVE'] == "Y"): ?>
<div id="calc">
<div class="calc_body">
<h2 class="section_title">Калькулятор расчета лизинга</h2>
<div class="calc_settings">
<div class="settings_box">
<p>Стоимость авто</p>
<p>
<span id="calculator_car_price_value">
<?= number_format($arResult['PROPERTIES']['PRICE']['VALUE'], 0, ".", " "); ?>
</span>
<output hidden></output>
</p>
<div class="price_custom" id="calculator_car_price_editor" style="display:none;">
<input id="calculator_car_price_input" type="number" value="500000" min="500000" max="20000000" />
<button id="calculator_car_price_save">Сохранить</button>
</div>
<div class="line">
<input id="calculation_car_price" data-slider-name="car_price" type="range" min="<?= $arParams['CAR_PRICE_MIN']; ?>" max="<?= $arParams['CAR_PRICE_MAX']; ?>" step="100000" data-rangeslider value="<?= $arParams['car_price']; ?>" />
</div>
<p class="min"><?= $arParams['CAR_PRICE_MIN'] / 1000000; ?> млн</p>
<p class="max"><?= $arParams['CAR_PRICE_MAX'] / 1000000; ?> млн</p>
</div>
<div class="line">
<input id="calculation_car_price" data-slider-name="car_price" type="range" min="<?= $arParams['CAR_PRICE_MIN']; ?>" max="<?= $arParams['CAR_PRICE_MAX']; ?>" step="100000" data-rangeslider value="<?= $arParams['car_price']; ?>" />
<div class="settings_box">
<p>Первоначальный взнос</p>
<p><output></output> %</p>
<div class="line">
<input id="calculation_initial_payment" data-slider-name="initial_payment" type="range" min="<?= $arParams['INITIAL_PAYMENT_MIN'];?>" max="<?= $arParams['INITIAL_PAYMENT_MAX'];?>" data-rangeslider value="<?= $arParams['initial_payment']; ?>" />
</div>
<p class="min"><?= $arParams['INITIAL_PAYMENT_MIN'];?>%</p>
<p class="max"><?= $arParams['INITIAL_PAYMENT_MAX'];?>%</p>
</div>
<p class="min"><?= $arParams['CAR_PRICE_MIN'] / 1000000; ?> млн</p>
<p class="max"><?= $arParams['CAR_PRICE_MAX'] / 1000000; ?> млн</p>
</div>
<div class="settings_box">
<p>Первоначальный взнос</p>
<p><output></output> %</p>
<div class="line">
<input id="calculation_initial_payment" data-slider-name="initial_payment" type="range" min="<?= $arParams['INITIAL_PAYMENT_MIN'];?>" max="<?= $arParams['INITIAL_PAYMENT_MAX'];?>" data-rangeslider value="<?= $arParams['initial_payment']; ?>" />
<div class="settings_box">
<p>Срок договора</p>
<p><output></output> мес.</p>
<div class="line">
<input id="calculation_lease_period" data-slider-name="lease_period" type="range" min="<?= $arParams['LEASE_PERIOD_MIN']; ?>" max="<?= $arParams['LEASE_PERIOD_MAX']; ?>" data-rangeslider value="<?= $arParams['lease_period']; ?>" />
</div>
<p class="min"><?= $arParams['LEASE_PERIOD_MIN']; ?> мес.</p>
<p class="max"><?= $arParams['LEASE_PERIOD_MAX']; ?> мес.</p>
</div>
<p class="min"><?= $arParams['INITIAL_PAYMENT_MIN'];?>%</p>
<p class="max"><?= $arParams['INITIAL_PAYMENT_MAX'];?>%</p>
</div>
<div class="settings_box">
<p>Срок договора</p>
<p><output></output> мес.</p>
<div class="line">
<input id="calculation_lease_period" data-slider-name="lease_period" type="range" min="<?= $arParams['LEASE_PERIOD_MIN']; ?>" max="<?= $arParams['LEASE_PERIOD_MAX']; ?>" data-rangeslider value="<?= $arParams['lease_period']; ?>" />
<div class="settings_box">
<p>Выкупной платеж</p>
<p><output></output> %</p>
<div class="line">
<input id="calculation_redemption_payment" data-slider-name="redemption_payment" type="range" min="<?= $arParams['REDEMPTION_PAYMENT_MIN']; ?>" max="<?= $arParams['REDEMPTION_PAYMENT_MAX']; ?>" data-rangeslider value="<?= $arParams['redemption_payment']; ?>" />
</div>
<p class="min"><?= $arParams['REDEMPTION_PAYMENT_MIN']; ?>%</p>
<p class="max"><?= $arParams['REDEMPTION_PAYMENT_MAX']; ?>%</p>
</div>
<p class="min"><?= $arParams['LEASE_PERIOD_MIN']; ?> мес.</p>
<p class="max"><?= $arParams['LEASE_PERIOD_MAX']; ?> мес.</p>
</div>
<div class="settings_box">
<p>Выкупной платеж</p>
<p><output></output> %</p>
<div class="line">
<input id="calculation_redemption_payment" data-slider-name="redemption_payment" type="range" min="<?= $arParams['REDEMPTION_PAYMENT_MIN']; ?>" max="<?= $arParams['REDEMPTION_PAYMENT_MAX']; ?>" data-rangeslider value="<?= $arParams['redemption_payment']; ?>" />
<div class="calc_result">
<div class="result_box bolder">
<p>Ежемесячный платеж</p>
<p><span id="calculator_monthly_payment_value"><?= number_format($arResult['CALCULATION']['monthly_payment'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="result_box">
<p>Экономия по налогу на прибыль (до)</p>
<p><span id="calculator_tax_savings_value"><?= number_format($arResult['CALCULATION']['tax_savings'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="result_box">
<p>НДС к возмещению из бюджета (до)</p>
<p><span id="calculator_vat_reimbursement_value"><?= number_format($arResult['CALCULATION']['vat_reimbursement'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="calc_footer">
<a href="#order" class="button button-blue">Отправить заявку</a>
<button class="button button-blue" id="calculation_reset">Сбросить к базовым значениям</button>
</div>
<p class="min"><?= $arParams['REDEMPTION_PAYMENT_MIN']; ?>%</p>
<p class="max"><?= $arParams['REDEMPTION_PAYMENT_MAX']; ?>%</p>
</div>
</div>
<div class="calc_result">
<div class="result_box bolder">
<p>Ежемесячный платеж</p>
<p><span id="calculator_monthly_payment_value"><?= number_format($arResult['CALCULATION']['monthly_payment'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="result_box">
<p>Экономия по налогу на прибыль (до)</p>
<p><span id="calculator_tax_savings_value"><?= number_format($arResult['CALCULATION']['tax_savings'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="result_box">
<p>НДС к возмещению из бюджета (до)</p>
<p><span id="calculator_vat_reimbursement_value"><?= number_format($arResult['CALCULATION']['vat_reimbursement'], 0, '.', ' '); ?></span> ₽</p>
</div>
<div class="calc_footer">
<a href="#order" class="button button-blue">Отправить заявку</a>
<button class="button button-blue" id="calculation_reset">Сбросить к базовым значениям</button>
</div>
</div>
</div>
</div>
<? endif; ?>
<? $APPLICATION->IncludeComponent(
"evolution:catalog.other.positions",
"",

View File

@ -50,7 +50,8 @@ $this->setFrameMode(true);
<a name="order"></a>
<section id="order">
<div class="container">
<h2 class="section_title">Купить в лизинг?</h2>
<h2 class="order_title">У Вас появились вопросы?</h2>
<h3 class="order_title_sub">Всё о покупке автомобилей в лизинг</h2>
<div class="order_form">
<div class="order_email">
<p>Напишите на <a href="mailto:buy@evoleasing.ru">buy@evoleasing.ru</a> или заполните форму</p>

View File

@ -5490,6 +5490,13 @@ main .dropdown_blocks_list .dropdown_block .block_body .transaction_detail ul li
font-size: 26px;
line-height: 35px;
}
.recom_models h2 {
width: 100%;
margin-bottom: 0;
font-weight: 700;
font-size: 26px;
line-height: 35px;
}
.recom_models .other_item {
width: calc(33.333% - 6px);
overflow: hidden;
@ -5524,6 +5531,17 @@ main .dropdown_blocks_list .dropdown_block .block_body .transaction_detail ul li
line-height: 35px;
color: #0C0C0C;
}
.recom_models .other_item a h3 {
position: relative;
z-index: 2;
order: 2;
width: 100%;
font-weight: 700;
font-size: 20px;
line-height: 35px;
color: #0C0C0C;
margin-bottom: 0px;
}
.recom_models .other_item a img {
order: 1;
margin-bottom: 6px;

View File

@ -5896,41 +5896,49 @@ main .dropdown_blocks_list .dropdown_block .block_body {
}
.recom_models {
display: flex;
flex-wrap: wrap;
margin-top: 45px;
margin-bottom: 45px;
gap: 24px 9px;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
margin-bottom: 45px;
gap: 24px 9px;
@media all and (max-width: 767px) {
margin-top: 25px;
}
@media all and (max-width: 767px) {
margin-top: 25px;
}
.title_wrapper {
width: 100%;
margin-bottom: 0;
.title_wrapper {
width: 100%;
margin-bottom: 0;
.title {
margin-bottom: 0;
width: auto;
}
.title {
margin-bottom: 0;
width: auto;
}
.button {
padding: 0;
}
}
.button {
padding: 0;
}
}
.title {
width: 100%;
margin-bottom: 0;
font-weight: 700;
font-size: 26px;
line-height: 35px;
}
.title {
width: 100%;
margin-bottom: 0;
font-weight: 700;
font-size: 26px;
line-height: 35px;
}
.other_item {
width: calc(33.333% - 6px);
overflow: hidden;
h2 {
width: 100%;
margin-bottom: 0;
font-weight: 700;
font-size: 26px;
line-height: 35px;
}
.other_item {
width: calc(33.333% - 6px);
overflow: hidden;
@media all and (max-width: 767px) {
width: calc(50% - 5px);
@ -5944,29 +5952,41 @@ main .dropdown_blocks_list .dropdown_block .block_body {
width: 100%;
}
a {
display: flex;
flex-wrap: wrap;
text-decoration: none;
a {
display: flex;
flex-wrap: wrap;
text-decoration: none;
span {
position: relative;
z-index: 2;
order: 2;
width: 100%;
font-weight: 700;
font-size: 20px;
line-height: 35px;
color: #0C0C0C;
}
span {
position: relative;
z-index: 2;
order: 2;
width: 100%;
font-weight: 700;
font-size: 20px;
line-height: 35px;
color: #0C0C0C;
}
img {
order: 1;
margin-bottom: 6px;
width: 100%;
//height: 218px;
height: 175px;
object-fit: cover;
h3 {
position: relative;
z-index: 2;
order: 2;
width: 100%;
font-weight: 700;
font-size: 20px;
line-height: 35px;
color: #0C0C0C;
margin-bottom: 0px;
}
img {
order: 1;
margin-bottom: 6px;
width: 100%;
//height: 218px;
height: 175px;
object-fit: cover;
@media all and (max-width: 1500px) {
height: 175px;

View File

@ -297,6 +297,88 @@ body {
padding-right: 0;
}
}
.order_title {
font-size: 36px !important;
line-height: 0px !important;
margin-top: 28px !important;
font-weight: 700;
color: #0C0C0C;
position: relative;
}
.order_title.no-margin {
margin-bottom: 0;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
.order_title {
font-size: 36px !important;
}
}
@media all and (max-width: 1279px) {
.order_title {
font-size: 32px !important;
}
}
@media all and (max-width: 960px) {
.order_title {
font-size: 22px !important;
line-height: 0px !important;
}
}
@media all and (max-width: 767px) {
.order_title {
font-size: 22px !important;
line-height: 23px !important;
margin: 0px !important;
margin-bottom: 15px!important;
}
}
.order_title.wp {
padding-right: 210px !important;
}
@media all and (max-width: 1279px) {
.order_title.wp {
padding-right: 0 !important;
}
}
.order_title_sub {
font-size: 24px !important;
line-height: 10px !important;
font-weight: normal !important;
margin-bottom: 50px;
color: #0C0C0C;
position: relative;
}
.order_title_sub.no-margin {
margin-bottom: 0;
}
@media all and (max-width: 1279px) {
.order_title_sub {
font-size: 22px !important;
}
}
@media all and (max-width: 960px) {
.order_title_sub {
font-size: 20px!important;
line-height: 10px !important;
margin-bottom: 90px !important;
}
}
@media all and (max-width: 767px) {
.order_title_sub {
line-height: 20px !important;
font-size: 18px!important;
margin: 0px !important;
margin-bottom: 30px!important;
}
}
.order_title_sub.wp {
padding-right: 210px;
}
@media all and (max-width: 1279px) {
.order_title_sub.wp {
padding-right: 0;
}
}
.car_position_title {
font-size: 26px;
line-height: 35px;

View File

@ -251,6 +251,88 @@ body {
}
}
.order_title {
font-size: 36px !important;
line-height: 0px !important;
margin-top: 28px !important;
font-weight: 700;
color: #0C0C0C;
position: relative;
&.no-margin {
margin-bottom: 0;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
font-size: 36px !important;
}
@media all and (max-width: 1279px) {
font-size: 32px !important;
}
@media all and (max-width: 960px) {
font-size: 22px !important;
line-height: 0px !important;
}
@media all and (max-width: 767px) {
font-size: 22px !important;
line-height: 23px !important;
margin: 0px !important;
margin-bottom: 15px!important;
}
&.wp {
padding-right: 210px !important;
@media all and (max-width: 1279px) {
padding-right: 0 !important;
}
}
}
.order_title_sub {
font-size: 24px !important;
line-height: 10px !important;
font-weight: normal !important;
margin-bottom: 50px;
color: #0C0C0C;
position: relative;
&.no-margin {
margin-bottom: 0;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
}
@media all and (max-width: 1279px) {
font-size: 22px !important;
}
@media all and (max-width: 960px) {
font-size: 20px!important;
line-height: 10px !important;
margin-bottom: 90px !important;
}
@media all and (max-width: 767px) {
line-height: 20px !important;
font-size: 18px!important;
margin: 0px !important;
margin-bottom: 30px!important;
}
&.wp {
padding-right: 210px;
@media all and (max-width: 1279px) {
padding-right: 0;
}
}
}
.car_position_title {
font-size: 26px;
line-height: 35px;