This step is for creating a category Menu slider. To do this go to Dashboard-->Reactive Templates-->All Grid Shortcodes-->Add New Grid Shortcode.

Now go to your home page and click edit page. Add a fancy title block. Your fancy title layout should be listing fancy title. Then add a new row and paste Grid Shortcode key you just have created previously.Then click update. Below is the sample of a screenshot.Now go to home page and you will see the category menu slider.You may notice that Explore By Type is not similar to our demo. But there is a procedure to match it with our demo. To achieve this at first write a new category menu grid template. So go to Dashboard-->Reactive Templates-->All Category Templates-->Add New Category Template.

<div class="reactive-container-fluid turbo-category-menu-listing">
  <# if(data.view == 'list') { #>
  <div class="reactive-row reactiveGridBlock {{ data.listClass }} owl-carousel category-menu-carousel owl-theme">
    <# } else { #>
    <div class="reactive-row reactiveGridBlock owl-carousel category-menu-carousel owl-theme">
      <# } #>
      <# 
              var siteUrl = REACTIVE.site_url;
            var redirectPage = REACTIVE.redirectPages && REACTIVE.redirectPages.length ? REACTIVE.redirectPages[0] : '';
            var listingPage = REACTIVE.redirectPages && REACTIVE.redirectPages.length ? `${siteUrl}/${redirectPage}` : '';
            var categoryTaxonomy = data.categorySettings.esternalPreLoad && data.categorySettings.esternalPreLoad.split(",").length >1 ? data.categorySettings.esternalPreLoad.split(",")[1] : '';
            var texCategory = `?tex_${categoryTaxonomy}=`;
            var texCategoryUrl = `${listingPage}/${texCategory}`
      #>
      <# _.each(data.categories, function( category ) { #>

          <#
            var totallCategories = category.posts.length;
            var categoryUrl = `${texCategoryUrl}${category.slug}`;
        #>
        <!-- Grid -->
          <div key=src={{ category.ID }} data-uid={{ category.ID }} class="reactiveCatGridType-Simple fadeIn">
          <div class="reactiveGridContent">
            <a href="{{categoryUrl}}" target="_blank">
              <# if(category.term_meta && category.term_meta.thumbnail_id) { #>
                <img src={{ category.term_meta.thumbnail_id }}>
              <# } else {#>
                <img src={{ data.gridPlaceHolder }}>
              <# } #>
                <div class="img-caption">
                  <h3 class="catTitle">{{ category.name }}</h3>
                  <p class="totallCat">
                    <# if (totallCategories > 1) { #>
                      {{ totallCategories }} cars
                    <# } else { #>
                      {{ totallCategories }} car
                    <# } #>
                  </p>
                </div>
            </a>
         </div>
        </div>
        <!-- Grid End -->
    <# }) #>
   </div>
</div>

Now go to your home page and click on setting bar under your category title Explore By Type.

In External Grid Settings go to Settings tab then select Grid Type Taxonomy then product_cat.Now go to Layouts tab and choose Category Layout you just have created previously. Then click on save button.Now go to home page and see the view of Explore By Type. Now it is similar to our demo.

results matching ""

    No results matching ""