{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
{% block page_product_detail_tabs_navigation_review %}
{{ parent() }}
{% endblock %}
{% block page_product_detail_tabs_content_review %}
{{ parent() }}
{% block page_product_detail_tabs_content_faq %}
{% set FaqsData = page.extensions['productFaqs'] %}
{% set faqQsBgColor = context.context.extensions['bcFaqsValue'].get('faqQsBgColor')['faqQsBgColor'] %}
{% set faqQsfontColor = context.context.extensions['bcFaqsValue'].get('faqQsfontColor')['faqQsfontColor'] %}
{% set faqAnsBgColor = context.context.extensions['bcFaqsValue'].get('faqAnsBgColor')['faqAnsBgColor'] %}
{% set faqAnsfontColor = context.context.extensions['bcFaqsValue'].get('faqAnsfontColor')['faqAnsfontColor'] %}
<style>
.faq-accordion-wrapper .accordionTitle{
color: {% if faqQsfontColor is not empty %}{{ faqQsfontColor }};{% else %}#fff;{% endif %}
background-color: {% if faqQsBgColor is not empty %}{{ faqQsBgColor }};{% else %}#576574;{% endif %}
}
.faq-accordion-wrapper .accordion .item .text{
color: {% if faqAnsfontColor is not empty %}{{ faqAnsfontColor }};{% else %}#444;{% endif %}
background: {% if faqAnsBgColor is not empty %}{{ faqAnsBgColor }};{% else %}#e4e7ea;{% endif %}
width:100%;
}
.faq-accordion-wrapper .top-content {
font-size: 16px;
}
</style>
<div class="tab-pane fade show"
id="tab1-tab-pane"
role="tabpanel"
aria-labelledby="tab1-tab">
{% block utilities_offcanvas %}
{% block utilities_offcanvas_close %}
<button class="btn btn-light btn-block offcanvas-close js-offcanvas-close sticky-top">
{% block utilities_offcanvas_close_icon %}
{% sw_icon 'x' style { 'size': 'sm' } %}
{% endblock %}
{% block utilities_offcanvas_close_text %}
{{ "general.offcanvasCloseMenu"|trans }}
{% endblock %}
</button>
{% endblock %}
{% block utilities_offcanvas_content %}
<script type="text/javascript">
// variables
setTimeout(function(){
var accordionBtn = document.querySelectorAll('.accordionTitle');
var allTexts = document.querySelectorAll('.text');
var accIcon = document.querySelectorAll('.accIcon');
// event listener
accordionBtn.forEach(function (el) {
el.addEventListener('click', toggleAccordion)
});
// function
function toggleAccordion(el) {
var targetText = el.currentTarget.nextElementSibling.classList;
var targetAccIcon = el.currentTarget.children[0];
var target = el.currentTarget;
if (targetText.contains('show')) {
targetText.remove('show');
targetAccIcon.classList.remove('anime');
target.classList.remove('accordionTitleActive');
}
else {
accordionBtn.forEach(function (el) {
el.classList.remove('accordionTitleActive');
allTexts.forEach(function (el) {
el.classList.remove('show');
})
accIcon.forEach(function (el) {
el.classList.remove('anime');
})
})
targetText.add('show');
target.classList.add('accordionTitleActive');
targetAccIcon.classList.add('anime');
}
}}, 3000);
</script>
<div class="offcanvas-content-container">
{% block page_product_detail_description_container %}
<div class="product-detail-description tab-pane-container">
{% block page_product_detail_description_title_tab %}{% endblock %}
{% block page_product_detail_description_content %}
{% block page_product_detail_description_content_text %}
<div id="faq-wrapper" class="faq-accordion-wrapper">
<div class="container">
<div class="top-content">
{% if FaqsData.get('bcfaqdesc') is not empty %}
{{ FaqsData.get('bcfaqdesc')|raw }}
<div class="lheight"></div>
{% endif %}
</div>
<ul class="accordion">
{% for i in 1..15 %}
{% if FaqsData.get('faqQs'~i) is not empty and FaqsData.get('faqAns'~i) is not empty %}
<li class="item">
<div class="accordionTitle">{{ FaqsData.get('faqQs'~i) }}<div class="accIcon"></div></div>
<div class="text {{ i==1 ? 'show' : ''}}">{{ FaqsData.get('faqAns'~i)|raw }}</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}