{% extends '@DcSite/Subaru/base.html.twig' %}
{% block title %}
{% include '@DcSiteBundle/Modules/acessories/module/block-seo.html.twig' %}
{% endblock title %}
{% block seo %}
{% endblock seo %}
{% block ogtagDynamic %}
{% include '@DcSiteBundle/Modules/acessories/module/og-tag-dnamic.htm.twig' %}
{% endblock ogtagDynamic %}
{% block canonical %}
<link rel="canonical" href="{{ url(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}"/>
{% endblock canonical %}
{% block css %}
<link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/toyota_odessa/reset.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/bundles/core/css/modules/slick/slick.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/bundles/core/css/modules/slick/slick-theme.min.css') }}">
<link rel="stylesheet" href="{{ asset('/bundles/dcsite/css/toyota_odessa/service/accessories-catalog.css') }}">
{% endblock %}
{% block content %}
<section class="breadcrumbs__new">
{% set contentId = 1 %}
<div class="container">
<ol class="global_breadcrumbs__new" itemscope itemtype="https://schema.org/BreadcrumbList">
<li class="marker__none" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ path('subaru_homepage') }}">
<span class="breadcrumbs__link" itemprop="name">SUBARU</span></a>
<meta itemprop="position" content="{{ contentId }}"/>
</li>
{% if breadcrumbs is defined %}
{% for item in breadcrumbs %}
{% set contentId = contentId + 1 %}
<div class="arrow-bcs"> ❯</div>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
{% if item.parent is null %}
<a itemprop="item" href="{{ path('shop_accessory_catalog') }}">
<span class="breadcrumbs__link" itemprop="name">{{ item.title(app.request.locale) }}</span></a>
{% else %}
<a itemprop="item" href="{{ path('shop_accessory_category', {categoryUrl:item.url}) }}">
<span class="breadcrumbs__link" itemprop="name">{{ item.title(app.request.locale) }}</span></a>
{% endif %}
<meta itemprop="position" content="{{ contentId }}"/>
</li>
{% endfor %}
{% elseif model is defined %}
<div class="arrow-bcs"> ❯</div>
<li class="marker__none" itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="{{ path('shop_accessory_catalog') }}">
<span class="breadcrumbs__link" itemprop="name">{{ 'configurator.tabs.acc'|trans({}, 'dc_base') }}</span>
</a>
<meta itemprop="position" content="{{ contentId }}"/>
</li>
{% endif %}
{% set contentId = contentId + 1 %}
<div class="arrow-bcs"> ❯</div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
{% if model is defined %}
<a itemprop="item" href="{{ path('subaru_shop_accessory_model', {'modelUrl': model.url}) }}">
{% elseif category is defined %}
<a itemprop="item" href="{{ path('shop_accessory_catalog') }}">
{% else %}
<a itemprop="item" href="#" style="{{ variation is defined ? '' : 'color: #ABABAB;' }}">
{% endif %}
{% if category is defined %}
<span class="breadcrumbs__link" itemprop="name">{{ category.title(app.request.locale) }}</span>
{% endif %}
{% if model is defined %}
<span class="breadcrumbs__link" itemprop="name">{{ model.title }}</span>
{% endif %}
<meta itemprop="position" content="{{ contentId }}"/>
</a>
</a>
</a>
</li>
{% if variation is defined %}
<div class="arrow-bcs"> ❯</div>
<li itemprop="item" class="marker__none" itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span style="color: #ABABAB;" class="breadcrumbs__link" itemprop="name">{{ variation.years }}</span>
<meta itemprop="position" content="{{ contentId }}"/>
</li>
{% endif %}
</ol>
</div>
</section>
{% include '@DcSiteBundle/Modules/acessories/accessories-catalog.html.twig' %}
{% endblock %}
{% block pageJs %}
<script>
app.onCustomEvent('appInit', function () {
app.loadJs('{{ asset('/bundles/dcsite/js/accessories-filter.js') }}', function () {
initAccessoriesFilters({
initUrl: '{{ path('base_accessories_filter_init') }}',
baseAccessoryUrl: '{{ path('shop_accessory_catalog') }}',
buildUrl: '{{ path('base_accessories_filter_build_url') }}',
params: {{ baseParams|json_encode|raw }},
categoryUrl: '{{ app.request.get('categoryUrl') }}',
modelUrl: '{{ app.request.get('modelUrl') }}',
filterParams: {{ filterParams|json_encode|raw }},
currentVariation: {{ variation is defined ? variation|json_encode|raw : '[]' }},
carModels: {{ accessoryModel is defined ? accessoryModel|json_encode|raw : '[]' }},
modelVariations: {{ modelVariations is defined ? modelVariations|json_encode|raw : '[]' }},
});
});
app.loadJs('{{ asset('bundles/core/js/modules/slick/slick.js') }}', function () {
$('.accessories-slider').slick({
slidesToShow: 11,
slidesToScroll: 1,
fade: false,
infinite: false,
swipe: false,
variableWidth: true,
arrows: true,
prevArrow: '<img class="acces-slick-arrows slick-prev" src="{{ asset('/bundles/dcsite/img/toyota_odessa/acces-prev.svg') }}" alt="prev">',
nextArrow: '<img class="acces-slick-arrows slick-next" src="{{ asset('/bundles/dcsite/img/toyota_odessa/acces-next.svg') }}" alt="next">',
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 8,
slidesToScroll: 1,
variableWidth: false,
swipe: true,
fade: false,
arrows: true
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 5,
slidesToScroll: 1,
variableWidth: false,
swipe: true,
fade: false,
arrows: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
variableWidth: false,
swipe: true,
fade: false,
arrows: true
}
},
{
breakpoint: 568,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: false,
swipe: true,
fade: false,
arrows: true
}
}
]
});
$(".accessories__filter__mobile").click(function(){
$(".accessories__catalog__filter__wrapper").addClass("active");
});
$(".catalog__filter__close").click(function(){
$(".accessories__catalog__filter__wrapper").removeClass("active");
});
});
});
</script>
{% endblock %}