Symfony Profiler

{% extends '@SyliusShop/layout.html.twig' %}
{% import '@SyliusUi/Macro/messages.html.twig' as messages %}
{% block content %}
<style>
.accord>div.active {
}
.accord>div:not(.active) {
height:0;
overflow:hidden;
margin:0;
transition: height 0.5s ease-in-out;
}
.accord>h2{
color:#003CBC;
font-size: 1.3125rem;
font-family: Poppins;
font-weight: 700;
letter-spacing: 0.02625rem;
cursor: pointer;
background-color: #F2F5FC;
padding:1.25rem 1.88rem;
margin-top:2.19rem;
margin-bottom:0;
}
.accord>h2+div>div{
background-color: #F2F5FC;
padding:1.88rem;
}
.accord>h2>img{
margin-right:1.87rem;
width:2.5rem;
}
#bitbag-faqs .accordion-button{
color:#000;
padding-left:0;
}
#bitbag-faqs .accordion-collapse p span{
font-size:0.9rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
}
#bitbag-faqs .accordion-button.active::after{
transform: rotate(180deg) !important;
}
#bitbag-faqs .accordion-collapse{
height:0;
overflow:hidden;
margin:0;
transition: height 0.5s ease-in-out;
}
#bitbag-faqs .collapse:not(.show) {
display: block !important;
}
</style>
<div class="ui stackable grid mt-5">
<h1 class="ui monster section dividing header">{{ 'sylius_pages.page.faqTitle'|trans }}</h1>
<div id="bitbag-faqs" class="ui sixteen wide column">
{% if resources|length > 0 %}
<div class="ui one">
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/crop_square.svg') }}" />{{ 'app.pages.faq.storyteller_operation'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position < 10 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/phone_iphone.svg') }}" />{{ 'app.pages.faq.app_operation'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 10 and frequentlyAskedQuestion.position < 20 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/menu_book.svg') }}" />{{ 'app.pages.faq.catalog'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 20 and frequentlyAskedQuestion.position < 30 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/local_mall.svg') }}" />{{ 'app.pages.faq.shop_operation'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 30 and frequentlyAskedQuestion.position < 40 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/list_alt.svg') }}" />{{ 'app.pages.faq.orders_and_deliveries'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 40 and frequentlyAskedQuestion.position < 50 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/account_circle.svg') }}" />{{ 'app.pages.faq.my_account'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 50 and frequentlyAskedQuestion.position < 60 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="accord">
<h2><img src="{{ asset('assets/shop/img/library_music.svg') }}" />{{ 'app.pages.faq.book_subscription_audios'|trans }}</h2>
<div>
<div class="calcHeight">
{% for frequentlyAskedQuestion in resources %}
{% if frequentlyAskedQuestion.position >= 60 and frequentlyAskedQuestion.position < 70 %}
<div class="w-100 d-block">
{% include '@BitBagSyliusCmsPlugin/Shop/FrequentlyAskedQuestion/Index/_show.html.twig' %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
{{ messages.info('sylius.ui.no_results_to_display') }}
{% endif %}
</div>
</div>
{% if resources|length > 0 %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{% for frequentlyAskedQuestion in resources %}
{
"@type": "Question",
"name": "{{ frequentlyAskedQuestion.question }}",
"acceptedAnswer": {
"@type": "Answer",
"text": "{{ frequentlyAskedQuestion.answer|striptags|escape }}"
}
}{% if not loop.last %},{% endif %}
{% endfor %}
]
}
</script>
{% endif %}
{% endblock %}
{% block javascripts %}
<script>
let accord = document.querySelectorAll(".accord>h2");
let ssQ = document.querySelectorAll(".accordion-button");
for(const acc of accord){
acc.addEventListener("click", function(){
this.classList.toggle('active');
if(this.classList.contains('active')){
let childDiv = this.nextElementSibling.querySelector("div.calcHeight");
let height = childDiv.offsetHeight;
this.nextElementSibling.style.height = height + "px";
}else{
this.nextElementSibling.style.height = "0px";
}
})
}
for(const s of ssQ){
s.addEventListener("click", function(){
this.classList.toggle('active');
let id = this.dataset.bsTarget;
let div = document.querySelector(id);
let heightParent = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.offsetHeight;
let sHeight = div.querySelector(".accordion-body").offsetHeight;
console.log(sHeight);
if(this.classList.contains('active')){
div.style.height = sHeight + "px";
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.height = (heightParent + sHeight + 20) + "px";
}
else{
div.style.height = "0px";
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.height = (heightParent - sHeight - 20) + "px";
}
})
}
</script>
{% endblock %}

themes/BootstrapChildTheme/BitBagSyliusCmsPlugin/views/Shop/FrequentlyAskedQuestion/index.html.twig line 1