<? 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 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, 1000);

        }

        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();

    });

</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;

        }

    }

    p {

        color: #444 !important;

    }

    @media (max-width: 768px)  {

        .HeaderButtons .AccountDD {

            top: 6px !important;

        }

    }

    .AccountDD {

        margin: 14px 24px 0px !important;

    }

    .cat-but

    {

        margin-top: 8px !important;

    }

</style>

<div class="container-fluid">

    <div class="row">

        <div class="col-xs-12 p-0" style="">

            <img src="https://dr.deercase.com/image/catalog/Anasayfa-Banner/filtreler-ap/airpods-genel.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 = $(this).val();

                            }

                        });

                    });

                </script>

                <div class="CategorySelectbox__AREA">

                    <!-- Main Category -->

                    <select class="CategorySelectbox" id="category_select_box">

                        <option value="">Marka</option>

                    </select>

                    <div class="CategorySelectbox__Appearance">

                        <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>

                    </div>

                    <!-- Main Category -->

                    <select class="CategorySelectbox" id="category_select_box_2">

                        <option value="" selected="selected">Model</option>

                    </select>

                    <div class="CategorySelectbox__Appearance">

                        <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>

                    </div>

                    <select class="CategorySelectbox" id="category_select_box_3">

                        <option value="" selected="selected">Koleksiyon</option>

                    </select>

                    <div class="CategorySelectbox__Appearance">

                        <i class="CategorySelectbox__AppearanceIcon fa fa-chevron-down"></i>

                    </div>

                </div>

                <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);

                                }

                            });

                        }

                    });

                </script>

            </div>

            <span id="filter_id_selection" style="color: #ffffff;"></span>

            <div class="row" style="margin: 40px -15px 0px;">

                <div class="categories-carousel owl-carousel">

                    <?php foreach ($filters as $filter){ ?>

                    <div class="item p-10">

                        <a href="<?=$filter['filter_href'];?>">

                            <img src="<?=$filter['filter_image'];?>" alt="" class="w-100" style="border-radius: 10px; margin-bottom: 10px;" />

                            <strong style="font-size: 14px;"><?=$filter['filter_name'];?></strong>

                            <br class="visible-xs" />

                            <br class="visible-xs" />

                        </a>

                    </div>

                    <?php } ?>

                </div>

                <script>

                    jQuery (function ($) {

                        $('.categories-carousel').owlCarousel ({

                            items: 1,

                            responsive: {

                                0: {

                                    items: 2,

                                },

                                768: {

                                    items: 3

                                },

                                1024: {

                                    items: 4

                                },

                                1366: {

                                    items: 5

                                }

                            }

                        });

                    });

                </script>

            </div>

            <div class="row" style="display:none">

                <div class="col-xs-12" style="margin-bottom: 25px; margin-top:10px">

                    <img src="<?=$filter_info['image'];?>" alt="<?=$filter_info['name'];?>" class="w-100" style="border-radius: 15px;" />

                </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>



        <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">

                    <? if ($product ['product_type']): ?>

                    <? foreach ($product ['collection_color'] as $c_index => $color): ?>

                    <div class="dataLayerElement PS-<?= $product ['product_id']; ?> PS-<?= $product ['product_id'] . $color ['attribute_id']; ?> <?= ($color ['show'])? '':'d-none'; ?> image"

                         data-datalayerid="p<?=$product["product_id"]?>"

                    data-datalayeritemid="<?=$product["product_id"]?>"

                    data-datalayeritemname="<?=$product["name"]?>"

                    data-datalayerprice="<?=strtr($product["price"], [','=>'.', '₺'=>''])?>"

                    data-datalayeritembrand="<?=$product["manufacturer"]?>"

                    data-datalayeritemcategory="<?=$heading_title?>"

                    data-datalayeritemvariant="Kargo Bedava"

                    data-datalayeritemlistname="<?=$heading_title?>"

                    data-datalayerlocationid="feed"

                    data-datalayerindex="<?=$dataLayerIndex++?>"

                    data-datalayerviewevent="view_item_list"

                    data-datalayerselectevent="select_item"

                    " >

                    <a href="<?php echo $color['href']; ?>" id="ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>" class="custom-0004 owl-carousel">

                        <div>

                            <? if ($product ['product_type'] == '2'): ?>

                            <img class="GIFonPRODUCT" src="/catalog/view/theme/deercase/image/GIF_HarfYaz1.gif" alt="" />

                            <? elseif ($product ['product_type'] == '4' or $product ['product_type'] == '6'): ?>

                            <img class="GIFonPRODUCT" src="/catalog/view/theme/deercase/image/GIF_IsminiYaz.gif" alt="" />

                            <? elseif ($product ['product_type'] == '8'): ?>

                            <img class="GIFonPRODUCT" src="/catalog/view/theme/deercase/image/powerbank-ismini-yaz.gif" alt="" />

                            <? endif; ?>

                            <img data-src="<?php echo $color ['image']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />

                        </div>

                        <? foreach ($color ['images'] as $image): ?>

                        <div>

                            <img data-src="<?php echo $image ['popup']; ?>" alt="<?php echo $color ['name']; ?>" title="<?php echo $color ['name']; ?>" class="img-responsive owl-lazy" />

                        </div>

                        <? endforeach; ?>

                    </a>

                    <script>

                        jQuery (function ($) {

                            $('#ProductImageCarousel__<?= $index; ?>--<?= $product ['product_id'] . $color ['attribute_id']; ?>').owlCarousel ({

                                items: 1,

                                lazyLoad: true,

                                dots: true

                            });

                        });

                    </script>

                </div>

                <? endforeach; ?>

                <? else: ?>

                <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 lazy" />

                        <? foreach ($product ['images'] as $image): ?>

                        <img data-original="<?php echo $image ['popup']; ?>" src="/catalog/view/theme/deercase/image/placeholder250.png" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive lazy" />

                        <? endforeach; ?>

                    </a>

                    <script>

                        jQuery (function ($) {

                            $('#ProductImageCarousel__<?= $index; ?>').owlCarousel ({

                                items: 1,

                                dots: true

                            });

                        });

                    </script>

                </div>

                <? endif; ?>

                <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']; ?><span style="color:red;"><b> - 3 Al 2 Öde!</b></span>

                            <?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> - 3 Al 2 Öde!</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>

    <?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)

{

?>

<!-- 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>
    $('.filter_change').on('click', function (){

        var filter_id = $(this).attr('data-filter');

        $("#filter_id_selection").html(filter_id);



        var page = 0;

        var limit = '<?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("");



        processing = true;

        var dcModifiedUrl = updateURLParameter(window.location.href, 'filter', filter_id);

        dcModifiedUrl = updateURLParameter(dcModifiedUrl, 'limit', 100);

        dcModifiedUrl = updateURLParameter(dcModifiedUrl, 'page', 1);



        //console.log(dcModifiedUrl);



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

           item.remove();

        });*/



        page += 1;



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



        $.get(dcModifiedUrl, function(data) {

            var data = $(data);

            var newProds = data.find('#content .product-layout');



            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;

        });

    });







</script>





<script>

    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;

                }

            });

        }

    });

</script>

<?php echo $footer; ?>

