Symfony Profiler

{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('home')) }}">
{% endblock %}
{% block cssadicional %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
{% if home.bannerShow and home.bannerItemsActive %}
<section class="b1">
<div class="swiper b1__swiper">
<ul class="swiper-wrapper">
{% for item in home.bannerItemsActive %}
{% set bannerImgB1 = item.imgBg1|image_path ? asset(item.imgBg1|image_path): asset(item.img|image_path) %}
{% set bannerImgB2 = item.imgBg2|image_path ? asset(item.imgBg2|image_path): asset(item.img|image_path) %}
{% if item.type == 1 %}
<li class="swiper-slide b1__item">

{% if item.btnurl %}
<a href="{{ item.btnurl }}" target="{{ item.btnblank ? '_blank':'_self' }}">
{% else %}
<a href="jascript:void(0)">
{% endif %}
<picture>
<source media="(max-width:480px)" srcset="{{bannerImgB2}}" />
<source media="(max-width:768px)" srcset="{{bannerImgB1}}" />
<img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_path }}"/>
</picture>
</a>
</li>
{% else %}
<li class="swiper-slide b1__item">

<picture>
<source media="(max-width:480px)" srcset="{{bannerImgB2}}" />
<source media="(max-width:768px)" srcset="{{bannerImgB1}}" />
<img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_path }}"/>
</picture>
<div class="wancho">
<div class="b1__text">
<h1>{{item.title}}</h1>
{% if item.btnshow and item.btnurl %}
<a href="{{ item.btnurl }}" target="{{ item.btnblank ? '_blank':'_self'}}" class="general_button brown">{{item.btntext}}</a>
{% endif %}
</div>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="swiper-pagination"></div>
</div>
</section>
{% endif %}
{% if home.categoriesShow and categoriesHome %}
<section class="b2">
<article class="b2__ctn wancho">
<div class="b2__left">
{% if home.categoriesTitle %}
<h2>{{ home.categoriesTitle}}</h2>
{% endif %}
<ul class="b2__list flex">
{% for item in categoriesHome %}
<li class="b2__item b2__tab {{ loop.first ? 'active': '' }}" data-id="{{ loop.index }}">
<img src="{{ asset(item.logoColor|image_path) }}" alt="{{ item.title }}" />
<span>{{ item.title }}</span>
</li>
{% endfor %}
<li class="b2__item">
<a href="{{ path('trucks') }}">
<span>Ver todos</span>
</a>
</li>
</ul>
</div>
<div class="nav-buttons">
<div class="button-prev"></div>
<div class="button-next"></div>
</div>
</article>
<ul class="b2__swiper__container">
{% for item in categoriesHome %}
<li class="swiper b2__swiper {{ loop.first ? 'active': '' }}" data-id="{{ loop.index }}">
<ul class="swiper-wrapper">
{% for i in item.machines %}
<li class="swiper-slide">
<img src="{{ asset(i.imgList|image_path) }}" width="646" height="410" alt="{{ i.imgList|image_alt }}" />
<div>
<small>{{item.title}}</small>
<h3>{{ i.title }}</h3>
<a href="{{ path('truck', {'slug' : i.slug}) }}" class="general_button white">Ver modelo</a>
</div>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if home.servicesShow or home.promoShow or home.serviceShow %}
<section class="b3">
<article class="b3__ctn wancho">
{% if home.servicesShow and home.servicesItemsActive %}
<ul class="b3__servicios">
{% for item in home.servicesItemsActive %}
<li class="b3__servicios__item">
<a href="{{ item.btnurl }}" target="{{ item.btnBlank}}">

<img src="{{ asset(item.img|image_path ) }}" alt="{{ item.img|image_alt }}" class="b3__externo" />

{% if item.title %}
<h3>{{ item.title|block_title|raw }}</h3>
{% endif %}
{% if item.btntext and item.btnshow %}
<div class="general_button whiteFull">{{ item.btntext }}</div>
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if home.promoShow %}
{% set bannerImgB1 = home.promoImgB1|image_path ? asset(home.promoImgB1|image_path) : asset(home.promoImg|image_path) %}
{% set bannerImgB2 = home.promoImgB2|image_path ? asset(home.promoImg22|image_path) : asset(home.promoImg|image_path) %}
<a href="{{ home.promoUrl }}" target="{{ home.promoBlank ? '_blank':'_self' }}" class="b3__banner">
<picture>
<source media="(max-width:480px)" srcset="{{ bannerImgB1 }}" />
<source media="(max-width:768px)" srcset="{{ bannerImgB2 }}" />
<img src="{{ asset(home.promoImg|image_path) }}" />
</picture>
</a>
{% endif %}
{% if home.serviceShow %}
<div class="b3__extra">
<div class="b3__extra__info">
{% if home.serviceTitle %}
<h3>{{ home.serviceTitle }}</h3>
{% endif %}
{% if home.serviceText %}
<p>{{ home.serviceText }}</p>
{% endif %}
<a href="{{ path('services') }}" class="general_button white">{{ home.serviceBtnText|default('Ver todos') }}</a>
</div>
<ul class="b3__extra__list">
{% for item in servicesHome %}
<li class="b3__extra__item">
{% if item.serviceType == 'link'%}
{% set linkservice = item.serviceLink %}
{% elseif item.serviceType == 'wsp' %}
{% set linkservice = 'https://api.whatsapp.com/send?phone='~ item.serviceWspNum ~'&text=' ~ item.serviceWspMessage %}
{% else %}
{% set linkservice = path('service', {'slug' : item.slug }) %}
{% endif %}
<a href="{{ linkservice }}" target="{{ item.serviceTypeTarget ? '_blank' : '_self' }}">
<div class="b3__icon">
<img src="{{ asset(item.logoHome|image_path) }}" alt="{{ item.logoHome|image_path}}" class="blue" />
<img src="{{ asset(item.logoHomeColor|image_path) }}" alt="{{ item.logoHomeColor|image_path}}" class="brown" />
</div>
<h4>{{ item.title}}</h4>
<span>Ver servicio</span>
<div class="b3__img">
<img src="{{ asset(item.imgHome|image_path) }}" alt="{{ item.imgHome|image_path }}" />
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</article>
</section>
{% endif %}
<section class="b4 experiencias">
<div class="b4__fondo">
<img class="blue" src="{{STATIC_URL}}img/rectan.png" alt="Rectangulo" /><img
src="{{STATIC_URL}}img/truckline.png"
alt=""
/>
</div>
<article class="b4__ctn wancho flex jcsb">
<div class="b4__left">
<h5>{{ home.expTexto1Left }} <strong>{{ home.expTexto2Left }}</strong></h5>
{% if home.expTexto3Left %}
<h6>{{ home.expTexto3Left }}</h6>
{% endif %}
<a href="{{ path('about') }}" class="general_button whiteFull">{{ home.expBtnText|default('Conocenos') }}</a>
</div>
<div class="b4__right">
{% if home.expTitleRight %}
<h5>{{ home.expTitleRight }}</h5>
{% endif %}
<div class="b4__testimonio flex aic jcsb">
<div class="b4__testimonio__img">
<img id="test_img" src="" alt="testimonio" />
</div>
<div class="b4__testimonio__info">
<h6 id="test_title"></h6>
<div>
<p id="test_nombre"></p>
<p id="test_dni"></p>
</div>
</div>
</div>
<ul class="b4__list flex">
{% for item in home.expItemsActive %}
<li
data-nombre="{{ item.name }}"
data-dni="{{ item.numdoc }}"
data-texto="{{ item.title }}"
class="b4__item"
>
<img src="{{ asset(item.img|image_path) }}" alt="{{ item.img|image_alt }}" />
</li>
{% endfor %}
</ul>
</div>
</article>
</section>
{% if home.newsShow and info.blogShow and info.blogUrl %}
<section class="b5 noticias">
<article class="wancho">
<div class="flex jcsb">
{% if home.newsTitle %}
<h5>{{ home.newsTitle }}</h5>
{% endif %}
<div class="nav-buttons">
<div class="button-prev"></div>
<div class="button-next"></div>
</div>
</div>
<div class="swiper b5__swiper">
<ul class="swiper-wrapper" id="content-blog">
</ul>
</div>
<a href="{{ info.blogUrl }}" target="_blank" class="general_button white">{{ home.newsBtnText|default('Más noticias aquí') }}</a>
</article>
</section>
{% endif %}
{% endblock %}
{% block jsfinal %}
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script type="text/javascript">
//B1
const swiper__banner = new Swiper('.b1__swiper', {
// Optional parameters
loop: true,
simulateTouch: false,
effect: 'fade',
autoplay: {
delay: 5000,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: (index, className) => {
return `<span class="${className}">0${
index + 1
}<svg width="40px" height="40px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter x="-46.2%" y="-46.2%" width="192.3%" height="192.3%" filterUnits="objectBoundingBox" id="filter-1">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.072435462 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
<feMerge>
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="progress-/-0%" transform="translate(4.000000, 2.000000)">
<g id="Group-Copy-2" filter="url(#filter-1)">
<circle class="progress" cx="11" cy="13" r="16.6" stroke="#c68767" stroke-width="2" stroke-linecap="round" transform='rotate(-83 13 13)' />
</g>
</g>
</g>
</svg></span>`;
},
},
});
//B1
//b2
const tabCount = document.querySelectorAll('.b2__tab');
const swiperCount = document.querySelectorAll('.b2__swiper');
tabCount.forEach(tab => {
tab.addEventListener('click', () => {
tabCount.forEach(item => {
item.classList.remove('active');
});
tab.classList.add('active');
const getItemId = tab.dataset.id;
swiperCount.forEach(item => {
item.classList.remove('active');
});
const getSwiper = document.querySelector(`.b2__swiper[data-id="${getItemId}"]`);
// setTimeout(() => {
getSwiper.classList.add('active');
// }, 100);
});
});
swiperCount.forEach(swiperEl => {
const camion__swiper = new Swiper(swiperEl, {
loop: true,
slidesPerView: 1,
spaceBetween: 5,
// centerInsufficientSlides: true,
simulateTouch: false,
navigation: {
nextEl: `.b2 .button-next`,
prevEl: `.b2 .button-prev`,
},
on: {
init: setTimeout(() => {
document.querySelector('.b2__swiper__container').classList.add('initialized');
}, 700),
},
});
});
//b2
//b4
const itemsb4 = document.querySelectorAll('.b4__item');
itemsb4[0].classList.add('active')
setInfo(itemsb4[0]);
const listItem = document.getElementsByClassName('b4__list')[0];
listItem.addEventListener('click', event => {
if (event.target.className == 'b4__item') {
itemsb4.forEach(item => {
item.classList.remove('active');
});
event.target.classList.add('active');
setInfo(event.target);
}
});
if( $('#content-blog').length ) {
$.get("{{ path('blog_list') }}", function(html) {
$('#content-blog').html(html);
//+++ B7HOME +++
//<<< END >>>
})
}
function setInfo(item) {
const getNombre = item.dataset.nombre;
const getDni = item.dataset.dni;
const getText = item.dataset.texto;
const getImg = item.querySelector('img').src;
document.getElementById('test_nombre').innerText = getNombre;
document.getElementById('test_dni').innerText = (getDni ? 'DNI: ' + getDni : '');
document.getElementById('test_title').innerText = getText;
document.getElementById('test_img').setAttribute('src', getImg);
}
//b4
const swiper_news = new Swiper('.b5__swiper', {
loop: true,
spaceBetween: 24,
slidesPerView: 3,
navigation: {
nextEl: '.b5 .button-next',
prevEl: '.b5 .button-prev',
},
breakpoints: {
0: {
slidesPerView: 1,
},
580: {
slidesPerView: 2,
},
581: {
slidesPerView: 3,
},
},
});
WidthChange(1024, () => {
document.querySelector('.b2').appendChild(document.querySelector('.b2 .nav-buttons'));
document
.querySelector('.b3__extra')
.appendChild(document.querySelector('.b3__extra__info .general_button'));
});
WidthChange(580, () => {
document.querySelector('.b3').appendChild(document.querySelector('.b3__extra'));
});
</script>
{% endblock %}

templates/front/default/home.html.twig line 1