---
category:
    shop_by_price: true
    products:
        limit: {{theme_settings.categorypage_products_per_page}}
---
{{inject "categoryProductsPerPage" theme_settings.categorypage_products_per_page}}
{{inject "categoryId" category.id}}
{{#partial "head"}}
    {{#if pagination.category.previous}}
        <link rel="prev" href="{{pagination.category.previous}}">
    {{/if}}
    {{#if pagination.category.next}}
        <link rel="next" href="{{pagination.category.next}}">
    {{/if}}
{{/partial}}

{{#partial "page"}}
<!--{{assignVar "foo" "cdn img/about-us-wide-banner.jpg"}}-->
<div class="breadCrumbMobileImg">
    {{#if category.image}}
    {{> components/common/responsive-img
    image=category.image
    default_image = theme_settings.default_image_brand
    fallback_size=theme_settings.zoom_size
    lazyload=theme_settings.lazyload_mode
    class="category-header-image"
    }}
    {{else}}
    <img src="/product_images/default_category_specialty.jpeg" alt="" style="width: 100%;">
    {{/if}}

    <h1>
        {{category.name}}
    </h1>
</div>

{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}

<div >
    {{#if category.description}}
    <div class="categoryDescription">
        {{{category.description}}}
    </div>
    <div class="categoryDescriptionExpand">Read More</div>
    <div class="categoryDescriptionClose">Hide</div>
    {{/if}}
</div>

<div class="page">
    {{#if category.faceted_search_enabled}}
        <aside class="page-sidebar" id="faceted-search-container">
            {{> components/category/sidebar}}
        </aside>
    {{else if category.subcategories}}
        <aside class="page-sidebar" id="faceted-search-container">
            {{> components/category/sidebar}}
        </aside>
    {{else if category.shop_by_price}}
        {{#if theme_settings.shop_by_price_visibility}}
             <aside class="page-sidebar" id="faceted-search-container">
                {{> components/category/sidebar}}
            </aside>
        {{/if}}
    {{/if}}

    <div class="page-content" id="product-listing-container">
        {{> components/category/product-listing }}
        {{{region name="category_below_content"}}}
    </div>
</div>

{{/partial}}
{{> layout/base}}


<!--<script-->
<!--        src="https://code.jquery.com/jquery-3.6.0.js"-->
<!--        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="-->
<!--        crossorigin="anonymous">-->

<!--</script>-->

<script>
  $(".categoryDescriptionExpand").click(function(){
    $(".categoryDescriptionExpand").hide();
    $(".categoryDescriptionClose").show();
    $(".categoryDescription").addClass("fullHeight");
  });

  $(".categoryDescriptionClose").click(function(){
    $(".categoryDescriptionExpand").show();
    $(".categoryDescriptionClose").hide();
    $(".categoryDescription").removeClass("fullHeight");
  });
</script>