Ü Detay Akordion
Ürün detay tabların akordion olarak gösterilmesi#
Ürün detay sayfası alt alta yapılan tablar için bu yapı kullanılabilir. Birine tıklandığında diğeri kapanır.
smarty
<div class="col-12 product-detail-tab-container">
<div class="w-100">
<div id="product-detail-tab" class="accordion-wrapper list-style-none d-flex flex-wrap">
<div class="w-100 ">
<a class="d-flex align-items-center active" id="tab-product-features" href="#product-features" data-toggle="accordion">{#features#}</a>
</div>
<div id="product-features" class="w-100 p-1 border accordion-body show">
<div id="product-fullbody" class="mb-1">
{$P.DETAIL}
</div>
{if $P.IS_PRODUCT_SIZE_ACTIVE == true || $P.WEIGHT != '' || $P.WARRANTY_INFO != '' || $P.DELIVERY_INFO != ''}
<div class="col-12 col-md-4 mb-1 border border-bottom-0">
{if $P.IS_PRODUCT_SIZE_ACTIVE == true}
<div class="row border-bottom fw-semibold">
<div class="col-6 py-1 border-right">{#dimension#}</div>
<div class="col-6 py-1">{$P.WIDTH} x {$P.HEIGHT} x {$P.DEPTH}</div>
</div>
{/if}
{if $P.WEIGHT != ''}
<div class="row border-bottom fw-semibold">
<div class="col-6 py-1 border-right">{#weight#}</div>
<div class="col-6 py-1">{$P.WEIGHT}</div>
</div>
{/if}
{if $P.WARRANTY_INFO != ''}
<div class="row border-bottom fw-semibold">
<div class="col-6 py-1 border-right">{#warranty#}</div>
<div class="col-6 py-1">{$P.WARRANTY_INFO}</div>
</div>
{/if}
{if $P.DELIVERY_INFO != ''}
<div class="row border-bottom fw-semibold">
<div class="col-6 py-1 border-right">{#delivery#}</div>
<div class="col-6 py-1">{$P.DELIVERY_INFO}</div>
</div>
{/if}
</div>
{/if}
{if $FILTER_PROPERTY_LIST|@count > 0}
<div class="col-12 col-md-8 border border-bottom-0">
<div class="row border-bottom">
<div class="p-1 fw-bold text-primary text-underline">{#features#}</div>
</div>
{foreach $FILTER_PROPERTY_LIST as $F}
{if $F.VALUE != ''}
<div class="row border-bottom fw-semibold">
<div class="col-6 py-1 border-right">{$F.KEY}</div>
<div class="col-6 py-1">{$F.VALUE}</div>
</div>
{/if}
{/foreach}
</div>
{/if}
</div>
{if $P.IS_DISPLAY_PRODUCT != true}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-payment" href="#product-payment" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/installment-list?isHtml=1&product={$P.ID}">{#payment#}</a>
</div>
<div id="product-payment" class="w-100 p-1 border accordion-body"></div>
{/if}
{if $IS_COMMENT_RATE_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-comments" href="#product-comments" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/comments?product={$P.ID}">{#comments#}{if $P.COMMENT_COUNT > 0} ({$P.COMMENT_COUNT}){/if}</a>
</div>
<div id="product-comments" class="w-100 p-1 border accordion-body"></div>
{/if}
{if $IS_RECOMMENDATION_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-recommend" href="#product-recommend" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/recommend?product={$P.ID}">{#recommend#}</a>
</div>
<div id="product-recommend" class="w-100 p-1 border accordion-body"></div>
{/if}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-return" href="#product-return" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/product-return?product={$P.ID}">{#product_return#}</a>
</div>
<div id="product-return" class="w-100 p-1 border accordion-body"></div>
{if $P.DOCUMENT_INFO != ''}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-document" href="#product-document" data-toggle="accordion">{#document#}</a>
</div>
<div id="product-document" class="w-100 p-1 border accordion-body">
{$P.DOCUMENT_INFO}
</div>
{/if}
{if $P.IS_VIDEO_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-video" href="#product-video" data-toggle="accordion">{#video#}</a>
</div>
<div id="product-video" class="w-100 p-1 border accordion-body">
{if $P.VIDEO_INFO.Baslik}
<div class="block-title mb-1">{$P.VIDEO_INFO.Baslik}</div>
{/if}
{if $P.VIDEO_INFO.Embed}
<div class="w-100 video-popup">{$P.VIDEO_INFO.Embed}</div>
{/if}
</div>
{/if}
{if $IS_CALL_ME_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-callme" href="#product-callme" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/call-me?product={$P.ID}">{#callme#}</a>
</div>
<div id="product-callme" class="w-100 p-1 border accordion-body"></div>
{/if}
{if $IS_QUICK_MESSAGE_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-quick-message" href="#product-quick-message" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/quick-message?product={$P.ID}">{#quick_message#}</a>
</div>
<div id="product-quick-message" class="w-100 p-1 border accordion-body"></div>
{/if}
{if $IS_SUGGESTION_BOX_ACTIVE == 1}
<div class="w-100">
<a class="d-flex align-items-center" id="tab-product-suggestion-box" href="#product-suggestion-box" data-toggle="accordion" data-href="/srv/service/content-v5/sub-folder/{$BLOCK.PAGE_ID}/{$BLOCK.PARENT_ID}/suggestion-box?product={$P.ID}">{#suggestion_box#}</a>
</div>
<div id="product-suggestion-box" class="w-100 p-1 border accordion-body"></div>
{/if}
</div>
</div>
</div>
js
const detailAccordionLoader=function(title) {
let appendContent = document.querySelector(title.dataset.content) || document.querySelector(title.getAttribute('href')),
property = title.dataset.property;
if((title?.dataset.href || '').trim() != '' && !T(title).hasClass('loaded') && appendContent) {
axios.get(title?.dataset.href).then(response => {
appendContent.innerHTML = property ? response.data[property] : response.data;
T(title).addClass('loaded');
evalScripts(appendContent.innerHTML);
}).catch(error => console.log(`Tab content not loaded => ${error}`));
}
};
T(`.product-detail-tab-container [data-toggle="accordion"]`).on('click', function(e) {
detailAccordionLoader(this)
});
scss
#product-detail-tab {
[data-toggle="accordion"]{
padding:1rem;
border: 1px solid #ddd;
}
.accordion-body{
max-height: 300px;
overflow: auto;
}
}