<? if ($products && 0 < count ($products) && $products [0]["product_type"] == 5): ?>
<style>
    @media (max-width: 768px)
    {
        .product-thumb .image {
            transform: scale(1) !important;
        }
    }
</style>
<? endif; ?>
<?php
$product_ids=array();
$dataLayerIndex=1;
echo $header; ?>
<script>
    let isFilterSelected = false;
    let viewedElements = [];
    let viewedElementsCount = 0;
    let itemDatalayerIndex = [];
    let dataLayerSituationEventIndex = 0;
    let breadCrumbAllText = 'Anasayfa';
    let timer;
    function isScrolledIntoView(element)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();//$(elem).height(); //top only
//console.log($(element).data('datalayerid')+' - wTop:'+docViewTop+' wButtom:'+docViewBottom+' eTop:'+elementTop+' eBut:'+elementBottom);
        return (elementBottom>0 && elementTop>0 && (elementBottom < docViewBottom) && (elementTop > docViewTop));
    }
    function getDataLayerItemData(element) {
        let itemData = {};
//promotion
        if ($(element).data('datalayerpromotionid')) {
            itemData.promotion_id = $(element).data('datalayerpromotionid');
        }
        if ($(element).data('datalayerpromotionname')) {
            itemData.promotion_name = $(element).data('datalayerpromotionname');
        }
        if ($(element).data('datalayercreativename')) {
            itemData.creative_name = $(element).data('datalayercreativename');
        }
//product
        if ($(element).data('datalayeritemid')) {
            itemData.item_id = $(element).data('datalayeritemid');
        }
        if ($(element).data('datalayeritemname')) {
            itemData.item_name = $(element).data('datalayeritemname');
        }
        if ($(element).data('datalayerprice')) {
            itemData.price = $(element).data('datalayerprice');
        }
        if ($(element).data('datalayeritembrand')) {
            itemData.item_brand = $(element).data('datalayeritembrand');
        }
        if ($(element).data('datalayeritemcategory')) {
            itemData.item_category = breadCrumbAllText; //$(element).data('datalayeritemcategory');
        }
        if ($(element).data('datalayeritemvariant')) {
            itemData.item_variant = $(element).data('datalayeritemvariant');
        }
        if ($(element).data('datalayeritemlistname')) {
            itemData.item_list_name = $(element).data('datalayeritemlistname');
        }
//common
        if ($(element).data('datalayerlocationid')) {
            itemData.location_id = $(element).data('datalayerlocationid');
        }
        if ($(element).data('datalayerindex')) {
            itemData.index = $(element).data('datalayerindex');
        }
        return itemData;
    }
    function dataLayerItemPush(eventName, items ) {
        let params = {
            "event": eventName,
            "ecommerce": {
                "items": items
            }
        };
        window.dataLayer.push(params);
//console.log('*dl['+eventName+'] -> index:'+items[0].index);
    }
    function dataLayerCheckVisibleElements() {
        $('.dataLayerElement').each(function (index, element) {
            let id=$(element).data('datalayerid');
            let viewEvent = $(element).data('datalayerviewevent');
            let data=getDataLayerItemData(element);
            if (isScrolledIntoView(element) && !viewedElements[id]) {
                //console.log('--> ' + id);
                //elementDataObjects.push(data);
                dataLayerItemPush(viewEvent, [data]);
                itemDatalayerIndex[id] = window.dataLayer.length;
                viewedElements[id] = true;
                viewedElementsCount++;
            }
        });
    }
    $(window).scroll(function () {
        dataLayerCheckVisibleElements();
    });
    function firstItemCheck() {
        dataLayerCheckVisibleElements();
        if (viewedElementsCount == 0) {
            timer = setTimeout(firstItemCheck, 100);
        }
        else {
            clearTimeout(timer);
        }
    }
    $(document).ready(function () {
        $(".dataLayerElement").click(function () {
            let id=$(this).data('datalayerid');
            let selectEvent = $(this).data('datalayerselectevent');
            let data=getDataLayerItemData(this);
            dataLayerItemPush(selectEvent, [data]);
            //alert(id);//debug
        });
        firstItemCheck();

        $("#ScrollToTop").remove();

        setTimeout(function(){ checkFixedMenu(); },1000);
        //checkFixedMenu();
    });
</script>
<div class="container-fluid p-0 bread_backg">
    <div class="container">
        <ul class="breadcrumb">
            <?php
        foreach ($breadcrumbs as $breadcrumb) { ?>
            <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
            <?php } ?>
        </ul>
    </div>
</div>
<script>
    window.dataLayer.push({
        "event": "situation",
        "pageType": "Product Listing",
        "siteServer": "s1",
        "userSituation": "<?=$dataLayer['userType']?>",
        "userId": "<?=$dataLayer['customer_id']?>",
        "userHashedEmail": "<?=$dataLayer['emailHash']?>",
        "breadcrumb": "Anasayfa"
    });
    dataLayerSituationEventIndex = window.dataLayer.length;
</script>

<!--<style>
    .samdsamgkvdssa {
        margin: 0;
    }
    @media (min-width: 769px)
    {
        .samdsamgkvdssa {
            margin: -10px 0 25px;
        }
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 p-0" style="">
            <img src="https://deercase.com/image/catalog/Anasayfa-Banner/filtreler/wb-web-slider.jpg" alt="" class="w-100 samdsamgkvdssa" />
        </div>
    </div>
</div>-->

<? if ($description): ?>
<div>
    <?= $description; ?>
</div>
<? endif; ?>
<div class="container">
    <div class="row"><?php echo $column_left; ?>
        <?php if ($column_left && $column_right) { ?>
        <?php $class = 'col-sm-6'; ?>
        <?php } elseif ($column_left || $column_right) { ?>
        <?php $class = 'col-sm-9'; ?>
        <?php } else { ?>
        <?php $class = 'col-sm-12'; ?>
        <?php } ?>
        <div id="content" class="text-center <?php echo $class; ?> category-page"><?php echo $content_top; ?>
            <div class="<?php if($hide_cat==1){ echo 'd-none';} ?>">
                <h1 class="h1_category"><?php echo $heading_title; ?></h1>
                <!--<h3><?php echo $text_refine; ?></h3> Alt Kategoriler -->
                <script type="text/javascript">
                    $(function () {
                        $.ajax({
                            url: 'index.php?route=product/category/switchCategory',
                            dataType: 'json',
                            type: 'POST',
                            data: {category_id : '<?=$category_id;?>'},
                            success: function(json){
                                if(json['all_categories']){
                                    json['all_categories'].forEach(function (item, index) {
                                        if(item.category_id == json['category_id']){
                                            $('#category_select_box').append('<option value="'+ item.href +'" selected="selected" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                        }else {
                                            $('#category_select_box').append('<option value="'+ item.href +'" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                        }
                                    });
                                    //Sub Category
                                    if(json['sub_categories']){
                                        json['sub_categories'][json['category_id']].forEach(function (item, index) {
                                            if(item.category_id == json['sub_category_id']){
                                                $('#category_select_box_2').append('<option value="'+ item.href +'" selected="selected" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                            }else {
                                                $('#category_select_box_2').append('<option value="'+ item.href +'" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                            }
                                        })
                                    }
                                    //Sub Category
                                    //Sub Category 2
                                    if(json['sub_categories2'][json['sub_category_id']]){
                                        json['sub_categories2'][json['sub_category_id']].forEach(function (item, index) {
                                            if(item.category_id == json['sub_category_id2']){
                                                $('#category_select_box_3').append('<option value="'+ item.href +'" selected="selected" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                            }else {
                                                $('#category_select_box_3').append('<option value="'+ item.href +'" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                            }
                                        })
                                    }
                                    else {
                                        $('#category_select_box_3').hide();
                                        $('#category_select_box_3').next ().hide();
                                    }
                                    //Sub Category 2
                                }
                                if(json['breadcrumbs']){
                                    breadCrumbAllText = 'Anasayfa / ';
                                    json['breadcrumbs'].forEach(function (item, index) {
                                        $('.breadcrumb').append('<li><a href="'+ item.href +'">'+ item.text +'</a></li>');
                                        breadCrumbAllText += item.text + ' / ';
                                    });
                                    //dataLayer breadcrumb update
                                    breadCrumbAllText = breadCrumbAllText.slice(0,-3);
                                    window.dataLayer[dataLayerSituationEventIndex-1].breadcrumb = breadCrumbAllText;
                                    //update items categories
                                    window.dataLayer.forEach(function (e, index) {
                                        if (typeof window.dataLayer[index].ecommerce !== 'undefined') {
                                            window.dataLayer[index].ecommerce.items[0].item_category = breadCrumbAllText;
                                        }
                                    });
                                }
                            }
                        });


                        $('#category_select_box').on('change', function () {
                            //Collection Select Check control
                            var selected = $(this).children("option:selected").attr('data-id');
                            var asked = $('#category_select_box_3').children("option:selected").text(); //attr('data-id');
                            if(asked == 'Koleksiyon'){
                                category_id = $(this).children("option:selected").attr('data-id');
                                $.ajax({
                                    url: 'index.php?route=product/category/getSubCategories',
                                    dataType: 'json',
                                    type: 'POST',
                                    data: {category_id : category_id },
                                    success: function(json){
                                        $('#category_select_box_2').html('');
                                        $('#category_select_box_2').append('<option value="0" data-id="0">Model Seçiniz</option>');
                                        json['categories'].forEach(function (item, index) {
                                            $('#category_select_box_2').append('<option value="'+ item.href +'" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                        });
                                    }
                                });
                            }else{
                                $.ajax({
                                    url: 'index.php?route=product/category/findsamecategories',
                                    dataType: 'json',
                                    type: 'POST',
                                    data: {category_id : selected, asked : asked },
                                    success: function(json){
                                        if(json['sub_categories']){
                                            $('#category_select_box_2').html('');
                                            json['sub_categories'][selected].forEach(function (item, index) {
                                                if(item.category_id == json['sub_category_id']){
                                                    $('#category_select_box_2').append('<option value="'+ item.href +'" selected="selected" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                                }else {
                                                    $('#category_select_box_2').append('<option value="'+ item.href +'" data-id="'+ item.category_id +'">'+ item.name +'</option>');
                                                }
                                            });
                                            $('#category_select_box_2').trigger('change')
                                        }
                                    }
                                });
                            }
                        });
                        //$('#category_select_box, #category_select_box_3').on('change', function () {
                        $('#category_select_box_3').on('change', function () {
                            const url = $(this).val();
                            location.href = url;
                        });
                        $('#category_select_box_2').on('change', function () {
                            var selected = $(this).children("option:selected").attr('data-id');
                            var asked = $('#category_select_box_3').children("option:selected").text(); //attr('data-id');
                            if(asked != 'Koleksiyon'){
                                $.ajax({
                                    url: 'index.php?route=product/category/findsamecategory',
                                    dataType: 'json',
                                    type: 'POST',
                                    data: {category_id : selected, asked : asked },
                                    success: function (json) {
                                        if (json['url']) {
                                            location.href = json['url'];
                                        }else{
                                            location.href = 'index.php?route=product/category/findsamecategoryNotFound';
                                        }
                                    }
                                });
                            }else {
                                location.href = $(this).val();
                            }
                        });
                    });
                </script>
                <div class="CategorySelectbox__AREA">
                    <div class="selectbox-wrapper">
                        <select class="CategorySelectbox mb-0" id="category_select_box">
                            <option value="">Marka</option>
                        </select>
                    </div>
                    <div class="selectbox-wrapper">
                        <select class="CategorySelectbox mb-0" id="category_select_box_2">
                            <option value="" selected="selected">Model</option>
                        </select>
                    </div>
                    <div class="selectbox-wrapper">
                        <select class="CategorySelectbox mb-0" id="category_select_box_3">
                            <option value="" selected="selected">Koleksiyon</option>
                        </select>
                    </div>
                </div>
                <style>
                    select.CategorySelectbox {
                        border: none;
                    }
                </style>
                <script>
                    /*jQuery (function ($) {
                        if ($(window).width () <= 768)
                        {
                            $('#ScrollToTop').css ('bottom', '70px');
                            var CategorySelectboxAREA_Sticky = false;
                            var CategorySelectboxAREA_Distance = $('.CategorySelectbox__AREA').position ().top + $('.CategorySelectbox__AREA').height ();
                            $(window).scroll (function () {
                                if ((CategorySelectboxAREA_Distance * 2 < $(window).scrollTop ()) && (! CategorySelectboxAREA_Sticky))
                                {
                                    CategorySelectboxAREA_Sticky = true;
                                    $('.CategorySelectbox__AREA').addClass ('CategorySelectbox__AREA--Active');
                                    $('.CategorySelectbox__AREA').css ('bottom', ($('.CategorySelectbox__AREA').height () + 100) * -1);
                                    $('.CategorySelectbox__AREA').removeAttr ('style');
                                }
                                if (($(window).scrollTop () < CategorySelectboxAREA_Distance) && CategorySelectboxAREA_Sticky)
                                {
                                    $('.CategorySelectbox__AREA').css ('bottom', ($('.CategorySelectbox__AREA').height () + 100) * -1);
                                    setTimeout (function () {
                                        $('.CategorySelectbox__AREA').removeClass ('CategorySelectbox__AREA--Active');
                                        $('.CategorySelectbox__AREA').removeAttr ('style');
                                        CategorySelectboxAREA_Sticky = false;
                                    }, 250);
                                }
                            });
                        }
                    });*/

                    var filterIds = [];
                    var filterLoadIndex = 0;
                </script>
            </div>
            <div class="row" style="margin-top: 40px;">
                <div class="categories-carousel owl-carousel">
                    <?php foreach ($filters as $filter){ ?>
                    <div class="item p-10 text-left">
                        <a href="javascript:void(0)" data-filter="<?=$filter['filter_id'];?>" class="filter_change">
                            <img src="<?=$filter['filter_image'];?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px; box-shadow: 0 0 10px #000;" />
                            <strong style="font-size: 14px;"><?=$filter['filter_name'];?></strong>
                            <br />
                            <u>Koleksiyonu Gör</u>
                            <br class="visible-xs" />
                            <br class="visible-xs" />

                            <script>filterIds.push(<?=$filter['filter_id'];?>)</script>

                        </a>
                    </div>
                    <?php } ?>
                </div>

                <style>
                    .categories-carousel .owl-carousel .owl-nav button.owl-prev {
                        padding: 15px!important;
                    }
                    .categories-carousel .owl-carousel .owl-nav button.owl-next {
                        padding: 15px!important;
                    }
                    .categories-carousel .owl-nav {
                        justify-content: space-between !important;
                        display: flex !important;
                        width: 100% !important;
                        position: absolute;
                        top: 110px;
                    }
                    .categories-carousel .owl-nav .owl-prev,
                    .categories-carousel .owl-nav .owl-next {
                        font-size: 70px !important;
                        outline: 0 !important;
                    }

                    .categories-carousel-bottom {
                        margin-bottom: 25px !important;
                        padding-top: 60px !important;
                    }

                    @media screen and (min-width: 768px) {
                        .categories-carousel .owl-stage-outer {
                            margin-left: 35px;
                            margin-right: 30px;
                        }
                    }

                    @media screen and (max-width: 768px) {
                        .categories-carousel {
                            margin-bottom: -25px !important;
                            padding-top: 0 !important;
                        }
                        .categories-carousel .owl-stage, .categories-carousel-bottom .owl-stage {
                            left: -15px !important;
                        }
                        .categories-carousel .owl-nav {
                            display: none !important;
                        }
                        .fixed-categories-carousel .owl-stage {
                            left: -15px !important;
                        }
                        .fixed-categories-carousel .item.p-10 {
                            padding-bottom: 0px !important;
                        }

                        #ScrollToTop {
                            margin-bottom: 110px;
                        }

                    }
                </style>

                <!--
                <div class="fixed-categories-carousel owl-carousel"
                     style="position:fixed; bottom: 0px; background-color: white; margin-bottom: 0; z-index:999;">
                    <?php // foreach ($filters as $filter){ ?>
                    <div class="item p-10">
                        <a href="javascript:void(0)" data-filter="<?=$filter['filter_id'];?>" class="filter_change fixed_filter_change_add">
                            <img src="<?=$filter['filter_image'];?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px;" />

                        </a>
                    </div>
                    <?php // } ?>
                </div>
                -->

                <script>
                    jQuery (function ($) {
                        $('.categories-carousel').owlCarousel ({
                            items: 1,
                            //autoplay: true,
                            nav: true,
                            responsive: {
                                0: {
                                    items: 2,
                                    stagePadding: 30
                                },
                                768: {
                                    items: 3
                                },
                                1024: {
                                    items: 4
                                },
                                1366: {
                                    items: 5
                                }
                            }
                        });

                        $('.categories-carousel-bottom').owlCarousel ({
                            items: 1,
                            responsive: {
                                0: {
                                    items: 2,
                                    stagePadding: 30
                                },
                                768: {
                                    items: 3
                                },
                                1024: {
                                    items: 4
                                },
                                1366: {
                                    items: 5
                                }
                            }
                        });

                        /*$('.fixed-categories-carousel').owlCarousel ({
                            items: 1,
                            slideTransition: 'linear',
                            responsive: {
                                0: {
                                    items: 4,
                                    stagePadding: 15
                                },
                                768: {
                                    items: 8
                                }
                            }
                        });*/


                        $(window).scroll (function () {
                            checkFixedMenu();
                        });



                    });

                    function checkFixedMenu() {
                        if ($(window).height() < $(window).scrollTop()) {

                            if ($(window).width() < 768)
                                $('.fixed-categories-carousel').show();

                        } else {

                            //if ($(window).width() < 768)
                            $('.fixed-categories-carousel').hide();

                        }
                    }
                </script>
            </div>
            <a name="wbBannerStart"></a>
            <div class="row" id="filterBannerAndHtmlContainer">
                <!--<div class="col-xs-12" id="filterBannerContainer" style="margin-bottom: 25px; margin-top:10px; position: absolute;">
                    <img src="<?=$filter_info['image'];?>" alt="<?=$filter_info['name'];?>" class="w-100 hidden-xs" id="filterBannerImage" style="border-radius: 15px;" />
                </div>-->

                <style type="text/css">.prl {
                        padding-left: 20px;
                        padding-right: 40px;
                        padding-bottom: 40px;
                    }
                    .brc {
                            font-size: 18px;
                            line-height: 32px;
                            width: 100%;
                            text-align:center
                    }
                    .cl-bs {
                        color:white;
                        text-align: right;
                        margin-bottom: 0px !important;
                        padding-top: 25px;
                        text-shadow: 0 0 10px black;
                    }
                    .cl-p {
                        color:white
                    }
                    @media (max-width: 960px) {
                        .prl {
                            padding-left: 10px;
                            padding-right: 15px;
                            padding-bottom: 20px;
                        }
                        .cl-bs {
                            color:black;
                            text-align: center;
                            padding-top:0px;
                            padding-right: 0px;
                            margin-top: 0px;
                        }
                        .cl-p {
                            color:black
                        }
                        .brc {
                            font-size: 15px;
                            line-height: 26px;
                            width: 100%;
                            float: center;
                            text-align: center;
                        }
                        .mb-h1 {
                            font-size: 25px

                        }
                    }
                </style>
                <div id="customHtmlCodeContainer">
                    <?=html_entity_decode($filter_info['html_code'])?>
                </div>

            </div>
            <div class="row d-none">
                <div class="col-md-2 col-sm-6 hidden-xs">
                    <div class="btn-group btn-group-sm">
                        <button type="button" id="list-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_list; ?>"><i class="fa fa-th-list"></i></button>
                        <button type="button" id="grid-view" class="btn btn-default" data-toggle="tooltip" title="<?php echo $button_grid; ?>"><i class="fa fa-th"></i></button>
                    </div>
                </div>
            </div>
            <?php if ($show_products) { ?>
            <?php } else { ?>
            <?php if ($category_list) { ?>
            <?php foreach ($category_list as $c_key => $category_lists) { ?>
            <!-- . -->
            <div class="row">
                <div class="col-xs-12 text-center" ><hr>
                    <h2 class="h1_category"><a href="<?= $category_lists ['href']; ?>"><?=$category_lists['name']?></a></h2><hr>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 ">
                    <a href="<?= $category_lists ['href']; ?>">
                        <img data-original="<?php echo $category_lists['banner']; ?>"
                             alt="<?php echo $category_lists['name']; ?>" class="dataLayerElement w-100 lazy d-none"
                             />
                        <?php /*
                        data-datalayerid="c<?=$category_lists['category_id']?>"
                        data-datalayerpromotionid="<?=$category_lists['category_id']?>"
                        data-datalayerpromotionname="<?=$category_lists['name']?>"
                        data-datalayercreativename="<?=$category_lists['name']?>"
                        data-datalayerlocationid="feed"
                        data-datalayerindex="<?=$dataLayerIndex++?>"
                        data-datalayerviewevent="view_promotion"
                        data-datalayerselectevent="select_promotion"
                        */?>
                    </a>
                </div>
                <div class="col-sm-6">
                    <div id="CProducts__<?=$c_key;?>" class="owl-carousel custom-0004 custom-0004--Full pt-20">
                        <?php foreach ($category_lists['products'] as $product_c) {
                        $product_ids[] = $product_c['product_id'];  ?>
                        <div class="product dataLayerElement"
                             >
                        <?php /*
                        data-datalayerid="p<?=$product_c["product_id"]?>"
                            data-datalayeritemid="<?=$product_c["product_id"]?>"
                            data-datalayeritemname="<?=$product_c["name"]?>"
                            data-datalayerprice="<?=strtr($product_c["price"], [','=>'.', '₺'=>''])?>"
                            data-datalayeritembrand="<?=$category_lists["name"]?>"
                            data-datalayeritemcategory="<?=$category_lists["name"]?>"
                            data-datalayeritemvariant="Kargo Bedava"
                            data-datalayeritemlistname="<?=$heading_title?>"
                            data-datalayerlocationid="feed"
                            data-datalayerindex="<?=$dataLayerIndex++?>"
                            data-datalayerviewevent="view_item_list"
                            data-datalayerselectevent="select_item"
                        */ ?>
                        <!--<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_c['product_id']; ?>');" class="btnWish"><i class="fa fa-heart-o"></i></button>-->
                        <div class="product-thumb">
                            <a href="<?php echo $product_c['href']; ?>">
                                <? if ($product_c ['product_type'] == '2'): ?>
                                <img class="GIFonPRODUCT_C" src="/catalog/view/theme/deercase/image/GIF_HarfYaz1.gif" alt="" />
                                <? elseif ($product_c ['product_type'] == '4' or $product_c ['product_type'] == '6'): ?>
                                <img class="GIFonPRODUCT_C" src="/catalog/view/theme/deercase/image/GIF_IsminiYaz.gif" alt="" />
                                <? elseif ($product_c ['product_type'] == '4' or $product_c ['product_type'] == '8'): ?>
                                <img class="GIFonPRODUCT_C" src="/catalog/view/theme/deercase/image/powerbank-ismini-yaz.gif" alt="" />
                                <? endif; ?>
                            </a>
                            <style>
                                .GIFonPRODUCT_C {
                                    position: absolute;
                                    width: 100%;
                                    z-index: 9;
                                    left: 0;
                                    top: 0;
                                }
                            </style>
                            <div class="image">
                                <a href="<?php echo $product_c['href']; ?>">
                                    <img data-original="<?php echo $product_c['thumb']; ?>" alt="<?php echo $product_c['name']; ?>"
                                         title="<?php echo $product_c['name']; ?>" class=" img-responsive lazy" />
                                </a>
                            </div>
                            <div>
                                <div class="caption">
                                    <h4>
                                        <a href="<?php echo $product_c['href']; ?>">
                                            <?php echo $product_c['name']; ?>
                                        </a>
                                    </h4>
                                    <?php if (!$product_c['special']) { ?>
                                    <?php echo $product_c['price']; ?>
                                    <p class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
                                    <?php if($product_c['quantity'] == 0){ ?>
                                    <p style="font-weight: 700; color:red;">TÜKENDİ!</p>
                                    <?php } ?>
                                    <?php } else { ?>
                                    <span class="price-new"><?php echo $product_c['special']; ?></span> <span class="price-old"><?php echo $product_c['price']; ?></span>
                                    <p class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</p>
                                    <?php if($product_c['quantity'] == 0){ ?>
                                    <p style="font-weight: 700; color:red;">TÜKENDİ!</p>
                                    <?php } ?>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>
                    </div>
                    <?php } ?>
                </div>
                <h4 class="h4_category"><a class="btn btn-primary" href="<?= $category_lists ['href']; ?>"><i class="fa fa-angle-right"></i> Tümünü Gör</a></h4>
            </div>
        </div>
        <style>
            .h4_category {
                text-decoration: underline !important;
                margin-left: 20px !important;
            }
            @media (min-width: 768px) { {.h4_category {margin-left: 0px !important;}}
        </style>
        <script>
            jQuery (function ($) {
                $('#CProducts__<?=$c_key;?>').owlCarousel ({
                    responsive: {
                        0: {
                            items: 2
                        },
                        768: {
                            items: 3
                        }
                    },
                    dots: true
                });
            });
        </script>
        <?php } ?>
        <!-- . -->
        <?php }
$product_ids=json_encode($product_ids);
?>
        <?php } ?>
        <div class="row" id="ap_products">
            <?php
if ($show_products) {
?>
            <?php foreach ($products as $index => $product) {
            $product_ids[] = $product['product_id'];
            ?>
            <div class="product-layout product-list col-lg-3 col-md-3 col-sm-4 col-xs-6 d-none"><!--
<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');" class="btnWish"><i class="fa fa-heart-o"></i></button>-->
                <!--<?= $product ['model']; ?>-->
                <div class="product-thumb <? if ($sub_category_id2 >= 1806 and $sub_category_id2 <= 1926 or $sub_category_id2 >= 2038 and $sub_category_id2 <= 2155 ) { ?>pb-50<?php } else { ?>pb-105<?php } ?> pb-105_m mb-20">

                <div class="image">
                    <a href="<?php echo $product['href']; ?>" id="ProductImageCarousel__<?= $index; ?>" class="custom-0004 owl-carousel">
                        <img data-original="<?php echo $product ['thumb']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive productFirstImage" />
                        <? foreach ($product ['images'] as $image): ?>
                        <img data-src="<?php echo $image ['popup']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive owl-lazy" />
                        <? endforeach; ?>
                    </a>
                    <script>
                        jQuery (function ($) {
                            $('#ProductImageCarousel__<?= $index; ?>').owlCarousel ({
                                items: 1,
                                lazyLoad: true,
                                dots: true
                            });
                        });
                    </script>
                </div>

                <div class="custom-0007 d-none">
                    <? if ($product ['product_type']): ?>
                    <? if ($sub_category_id2 >= 1806 and $sub_category_id2 <= 1926 or $sub_category_id2 >= 2038 and $sub_category_id2 <= 2155 ) { ?>
                    <style type="text/css">.pb-50{padding-bottom: 50px!important;}</style>
                    <?php } else {
if($show_color_attribute)
{
?>
                    <div class="FlexScroller <?= (($category_id >= 2689 && $category_id <= 2692) || ($category_id >= 3023 && $category_id <= 3025) ?'d-none':'') ?>  <?= (4 < count($product ['collection_color']))? '': 'justify-content-center'; ?> <?= (count($product ['collection_color']) < 2) || (count($product ['collection_color']) > 7) ? 'd-none': ''; ?>">
                        <? foreach ($product ['collection_color'] as $color): ?>
                        <? if ($color ['show']): ?>
                        <div class="PP__CaseCircle_Cat">
                            <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= (isset($product['product_id'])) ? $product['product_id']:0  ?>, <?=(isset($color['product_id']))? $color['product_id']:0 ?>, '<?=$color['attribute_name']?>');">
                                <img src="<?= $color ['attribute_image']; ?>" alt="" />
                            </a>
                        </div>
                        <? endif; ?>
                        <? endforeach; ?>
                        <? foreach ($product ['collection_color'] as $color): ?>
                        <? if (! $color ['show']): ?>
                        <div class="PP__CaseCircle_Cat">
                            <a href="javascript: PS (<?= $product ['product_id'] . $color ['attribute_id']; ?>, <?= (isset($product['product_id'])) ? $product['product_id']:0  ?>, <?=(isset($color['product_id']))? $color['product_id']:0 ?>, '<?=$color['attribute_name']?>');">
                                <img src="<?= $color ['attribute_image']; ?>" alt="" />
                            </a>
                        </div>
                        <? endif; ?>
                        <? endforeach; ?>
                    </div>
                    <?php } } ?>
                    <? endif; ?>
                    <div class="caption">
                        <h4>
                            <? if ($product ['product_type']): ?>
                            <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                            <a class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?>" href="<?php echo $color ['href']; ?>"><?php echo $color ['name']; ?></a>
                            <? endforeach; ?>
                            <? else: ?>
                            <a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a>
                            <? endif; ?>
                        </h4>
                        <?php if ($product['price']) { ?>
                        <? if ($product ['product_type']): ?>
                        <? foreach ($product ['collection_color'] as $c_index => $color): ?>
                        <p class="PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '': 'd-none'; ?> price">
                            <?php if (!$color['special']) { ?>
                            <?php echo $color['price']; ?>
                            <?php if($product['quantity'] == 0){ ?>
                                <span style="font-weight: 700; color:red;">TÜKENDİ!</span>
                            <?php }else{ ?>
                                <span style="color:red;"><b class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</b></span>
                            <?php } ?>
                            <?php } else { ?>
                            <span class="price-new"><?php echo $color['special']; ?></span> <span class="price-old"><?php echo $color['price']; ?></span>
                            <span style="color:red;"><b class="campaign_text" style="font-weight: 700; color:red;"> - 3 Al 2 Öde! Ücretsiz Kargo!</b></span>

                            <?php } ?>
                        </p>
                        <? endforeach; ?>
                        <? else: ?>
                        <p class="price">
                            <?php if (!$product['special']) { ?>
                            <?php echo $product['price']; ?>
                            <?php } else { ?>
                            <span class="price-new"><?php echo $product['special']; ?></span> <span class="price-old"><?php echo $product['price']; ?></span>
                            <?php } ?>
                        </p>
                        <? endif; ?>
                        <?php } ?>
                    </div>
                </div>
            </div>
        </div>
        <?php }
$product_ids=json_encode($product_ids);
?>
        <?php } ?>
        <script>
            var PS = function (AttrPrd_ID, Product_ID, variantProductId, variantAttributeName) {
                var targetIndex = $('.PS-' + Product_ID).find ('.owl-carousel:visible').find ('.owl-item.active').index ();
                console.log (targetIndex);
                window.dataLayer[ itemDatalayerIndex['p'+Product_ID]-1 ].ecommerce.items[0].item_id = variantProductId;
                window.dataLayer[ itemDatalayerIndex['p'+Product_ID]-1 ].ecommerce.items[0].item_varyant = variantAttributeName;
                $('.PS-' + Product_ID).addClass ('d-none');
                $('.PS-' + AttrPrd_ID).removeClass ('d-none');
                $(document).scrollTop ($(document).scrollTop () + 1);
                $(document).scrollTop ($(document).scrollTop () - 1);
                $('.PS-' + AttrPrd_ID).find ('.owl-carousel').trigger ('to.owl', [targetIndex, 0]);
            };
        </script>
    </div>

            <div class="row">
                <div class="categories-carousel-bottom owl-carousel">
                    <?php foreach ($filters as $filter){ ?>
                    <div class="item p-10 text-left">
                        <a href="javascript:void(0)" data-filter="<?=$filter['filter_id'];?>" class="filter_change">
                            <img src="<?=$filter['filter_image'];?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px; box-shadow: 0 0 10px #000;" />
                            <strong style="font-size: 14px;"><?=$filter['filter_name'];?></strong>
                            <br />
                            <u>Koleksiyonu Gör</u>
                            <br class="visible-xs" />
                            <br class="visible-xs" />

                            <script>filterIds.push(<?=$filter['filter_id'];?>)</script>

                        </a>
                    </div>
                    <?php } ?>
                </div>
            </div>

    <?php echo $content_bottom; ?></div>
<?php echo $column_right; ?></div>
</div>
<script>
    jQuery (function ($) {
        $('.product-layout').removeClass ('d-none');
        $('.GIFonPRODUCT').click (function () {
            window.location.href = ('/' + $(this).next ('.product-thumb').find ('div:not(.d-none)').children ('a').attr ('href'));
        });
    });
</script>
<?php
if($CretioOneTag_status && $product_ids)
{
?>

   <style type="text/css">
                    <? /*.custom-0007 {
                                    bottom: 40px !important;
                                } */ ?>
                    @media (max-width: 768px) {
                        .custom-0007 {
                            bottom: 30px !important;
                        }
                        .pb-105_m {
                                padding-bottom: 80px !important;
                            }
                        }
                        .pb-105 {
                            padding-bottom: 70px !important;
                        }
                    </style>
<!-- Criteo Category / Listing Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
    window.criteo_q.push(
        { event: "setAccount", account: '<?php echo $CretioOneTag_id ?>'}, // You should never update this line
        { event: "setEmail", email: "" }, // Can be an empty string
        { event: "setSiteType", type: deviceType},
        { event: "viewList", item: <?php echo $product_ids ?> });
</script>
<!-- END Criteo Category / Listing Tag -->
<?php
}
?>
<script>
    window.onpopstate = function(event) { <? # tarayıcıda geri gidildiğinde sayfa yenilenmesi için event -Can 1.02.2022 ?>
        location.reload();
    };

    $('.filter_change').on('click', function (){
        isFilterSelected=true;
        var filter_id = $(this).attr('data-filter');
        $("#filter_id_selection").html(filter_id);

        var page = 0;
        var limit = 500;//'<?php echo $limit; ?>';

        var productDiv = $('#content .product-layout');
        var classes = productDiv.attr('class');
        var lastProduct = productDiv.last();
        var delay = 0;
        var wrapNewProducts = 0;

        $('#ap_products').html("");
        $('#filterBannerContainer').html("");
        $('#customHtmlCodeContainer').html("");

        processing = true;
        var dcModifiedUrl = updateURLParameter(window.location.href, 'filter', filter_id);
        dcModifiedUrl = updateURLParameter(dcModifiedUrl, 'limit', 500);
        dcModifiedUrl = updateURLParameter(dcModifiedUrl, 'page', 1);

        <? # .categories-carousel ile içerik değiştirildiğinde tarayıcı geçmişine işlenmesi. başlangıç -Can 1.02.2022 ?>
        const url = new URL(window.location);
        url.searchParams.set('filter', filter_id);
        window.history.pushState({}, '', url);
        <? # .categories-carousel ile içerik değiştirildiğinde tarayıcı geçmişine işlenmesi. son -Can 1.02.2022 ?>

        /*$.each($('#content .product-layout') , function (index, item){
           item.remove();
        });*/

        page += 1;

        dcModifiedUrl = dcModifiedUrl + ' #content .product-layout';

        scrollToAnchor('wbBannerStart');

        $('#ap_products').append('<div id="dcloading-icon" class="clearfix" style="clear:both;width:100%;"><?php echo $dc_loading_icon; ?></div>');

        $.get(dcModifiedUrl, function(data) {
            var data = $(data);
            var newProds = data.find('#content .product-layout');
            var newBanner = data.find('#filterBannerImage');
            var customHtmlCode = data.find('.row .prl');

            $('#dcloading-icon').remove();

            $('#filterBannerContainer').html(newBanner);
            $('#customHtmlCodeContainer').html(customHtmlCode);

            newProds.each(function(){
                $(this)
                    .removeAttr('class')
                    .addClass(classes + ' dc-new-product dc-pre-wrapped animated');
                if(delay){
                    $(this).css({
                        animationDelay: delay + 'ms'
                    });
                }
            });

            $('#dcloading-icon').remove();
            if($('[data-toggle="tooltip"]').length){
                $('[data-toggle="tooltip"]').tooltip({container: 'body'});
            }
            if(wrapNewProducts){
                lastProduct.parent().after(newProds);
                var preWrapProducts = $('.dc-pre-wrapped');
                for(var i = 0; i < preWrapProducts.length; i+= wrapCount) {
                    preWrapProducts.slice(i, i + wrapCount).wrapAll('<div class="' + wrapperClass + ' dc-new-wrapper"></div>');
                }
                $('.dc-pre-wrapped').removeClass('dc-pre-wrapped');
            } else {
                //lastProduct.after(newProds);
                $('#ap_products').html(newProds);
            }


            processing = false;
        });
    });


    jQuery (function ($) {
        if ($(window).width() <= 768)
        {
            $('.hidden-in-category').hide ();
            $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
            $('#cart').addClass ('--in-category');
            var lastScrollTop = 0, delta = 5;
            $(window).scroll(function(){
                var nowScrollTop = $(this).scrollTop();
                if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
                    if (nowScrollTop > lastScrollTop){
                        $('.hidden-in-category').hide ();
                        $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
                        $('#cart').addClass ('--in-category');
                    } else {
                        $('.hidden-in-category').show ();
                        $('.custom-0001--DEACTIVE').removeClass ('custom-0001--DEACTIVE').addClass ('custom-0001');
                        $('#cart').removeClass ('--in-category');
                    }
                    lastScrollTop = nowScrollTop;
                }
            });
        }
    });

    function scrollToAnchor(aid){
        var aTag = $("a[name='"+ aid +"']");
        $('html,body').animate({scrollTop: aTag.offset().top},'slow');
    }

    <?php //if (isset($tpl_name) && $tpl_name == 'category_wb'){ ?>
        var isCategoryWb='yes';
    <?php //} ?>

    $(window).scroll(function () {
            checkProductScroll();
    });

    function checkProductScroll() {
        $(".productFirstImage").each(function () {

            if (isScrolledIntoView(this, true)) {
                var imgUrl = $(this).data('original');
                $(this).attr('src', imgUrl);
            }

        });
    }

    setInterval(function () {
        checkProductScroll();
    }, 2000);

</script>
<?php echo $footer; ?>
