{{assignVar 'isConfigurable' categoriesConfig }}
<section  class="indexcarour productCarousel divsection" id="shop_by" catstr="{{getVar 'isConfigurable'}}">
    {{#each categories}}
        {{#contains    (getVar 'isConfigurable')  this.id}}
        <div class="productCarousel-slide js-product-slide"  productid="{{this.id}}" productname="{{this.name}}">
            {{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1) product=../this}}
        </div>
        {{/contains}}
    {{/each}}
</section>
<!--
<div class="namediv">
    <h5 id="productname" class="namespan"></h5>
    <p id="productid" class="productidclass"></p>
    <a id="carhref" class="learndiv listItem-button">LEARN MORE</a>
</div> -->
<section class="product-content_carousel">
    {{#each categories}}
        {{#contains    (getVar 'isConfigurable')  this.id}}
        <div class="productItem" id="{{this.id}}" >
            <h5 class="productName">{{this.name}}</h5>
            <div class="productDesc">{{{this.description}}}</div>
            <a class="productAction" href="{{this.url}}">LEARN MORE</a>
        </div>
        {{/contains}}
    {{/each}}
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $('.shop-categories .productCarousel-slide .card-figure__link').attr('href', 'javascript:void(0)');

    $('#shop_by').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        centerMode: true,
        centerPadding: '200px',
        arrows: true,
        infinite: true,
        asNavFor: '.product-content_carousel',
        focusOnSelect: true,
        dots: false,
        arrows: true,
        adaptiveHeight: true,
        responsive: [
            {
                breakpoint: 800,
                settings: {
                    slidesToShow: 1,
                    centerPadding: '60px'
                }
            }
        ]
    })
    $('.product-content_carousel').slick({
        slidesToScroll: 1,
        slidesToShow: 1,
        asNavFor: '#shop_by',
        fade: true,
        adaptiveHeight: true,
        arrows: false
    })
</script>