<div id="moreLikeThis" class="section_offset">
   <div class="tabs products " >
      <ul class="tabs_nav clearfix " >
         <li style="width: 235px;"><a href="#tab-5">You Might Also Like</a></li>
      </ul>

      <div class="tab_containers_wrap" >
         <div id="tab-5" class="tab_container" style="width:235px;">
            <div class="owl_carousel carousel_in_tabs type_2 likecontent">

            </div>
         </div>
      </div>

   </div>
</div>



<script type="text/javascript">
   jQuery().ready(function () {
      
      $("#moreLikeThis").load("/products/similarProduct.json",{maxResult:8,pageNo:0,productId:${GoodsDetailsForm.id}})



@RequestMapping(value = "similarProduct.json", method = RequestMethod.POST)
public String getSimilarProduct(HttpServletRequest request,
                                ModelMap model,
                                @RequestParam(value = "maxResult") int maxResult,
                                @RequestParam(value = "pageNo") int pageNo,
                                @RequestParam(value = "productId", defaultValue = "0") long productId,
                                HttpSession session) {
    Locale currentLocale = getRequestLanguage(session, request);
    ProductJsons productJsons = null;
    productJsons = extendProductService.moreLikeTag(productId, maxResult, currentLocale.toString());
    if (productJsons != null) {
        if (productJsons.getProductJsonList() != null) {
            ArrayList<Long> ids = new ArrayList<>();
            for (ProductJson productJson : productJsons.getProductJsonList()) {
                ids.add(productJson.getId());
            }
            model.addAttribute("ratingMap", getAverageRatingById(ids));
            model.addAttribute("checkWish", checkWishById(ids));
            model.addAttribute("productJsons", productJsons);
        }
    }
    return "moreLikeThis";
}


moreLikeThis.jsp



<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:if test="${not empty productJsons and not empty productJsons.productJsonList}">
<div class="tabs products" style="height: 450px;">
   <ul class="tabs_nav clearfix">
      <li style="width: 235px;"><a href="#tab-5">You Might Also Like</a></li>
   </ul>
   <div class="tab_containers_wrap">
      <div id="tab-5" class="tab_container">

         <div class="owl_carousel carousel_in_tabs type_2 likecontent">

            <c:forEach items="${productJsons.productJsonList}" var="product">
                  <c:choose>
                     <c:when test="${not empty product.promotionPrice.price}">
                        <c:set var="price" value="${currency.symbol}${product.promotionPrice.price}"></c:set>
                     </c:when>
                     <c:otherwise>
                        <c:set var="price" value="${currency.symbol}${product.displayPrice.price}"></c:set>
                     </c:otherwise>
                  </c:choose>
                  <div class="product_item">
                     <div class="p_w_picpath_wrap">
                        <img class="img_zoom" data-zoom-p_w_picpath="${p_w_picpathHost}${product.displayImage.url}" src="${p_w_picpathHost}${product.displayImage.smallUrl}" alt="">
                     </div>
                     <div class="description">
                        <a class="product_title"
                           href="/shop/product/${fn:replace(product.productDisplayName.name, " ", "-")}/${product.id}"
                           title="${product.productDisplayName.name}">${product.productDisplayName.name}</a>
                        <div class="clearfix product_info">
                           <p class="product_price alignleft"><b>${price}</b></p>
                           <c:set value="${ratingMap.get(product.id)}" var="rating"></c:set>
                           <c:choose>
                              <c:when test="${not empty rating}">
                                 <div class="rating-box">
                                    <div class="rating" style="width: ${rating.rating*20}%;"></div>
                                 </div>
                              </c:when>
                              <c:otherwise>
                                 <div class="rating-box">
                                    <div class="rating" style="width: 100%;"></div>
                                 </div>
                              </c:otherwise>
                           </c:choose>
                        </div>
                        <div class="clearfix action">
                           <a href="/shop/product/${fn:replace(product.productDisplayName.name, " ", "-")}/${product.id}"
                              class="button_red middle_btn">VIEW DETAILS</a>
                        </div>
                     </div>
                  </div>

               </c:forEach>


         </div>


      </div>
   </div>
</div>
</c:if>
<script type="text/javascript">
   jQuery().ready(function () {

      $('.carousel_in_tabs.type_2, .owl_carousel.four_items').owlCarousel({
         responsive: {
            0: {
               items: 1
            },
            490: {
               items: 2
            },
            684: {
               items: 3
            },
            992: {
               items: 4
            }
         },
         loop:true,
         nav: true,
         navText: [],
         rtl: window.ISRTL ? true : false
      });
   })
</script>