Question

这用于产品比较功能。产品具有产品代码，名称，图像URL，评论，价格等属性。我的产品比较面板将为我计划在会话中存储的每个产品仅提供一些功能。可以使用JQuery完成吗？战略应该是什么？

更新

组件控制器

@Override
    protected void fillModel(final HttpServletRequest request, final Model model,
            final ProductCompareComponentModel component)

final Cookie[] cookies = request.getCookies();
        String productList = null;
        boolean cookieFound = false;

        logger.info("Displaying session value for product compare" + sessionService.getAttribute("sessionProductCode"));
        if (cookies != null)
        {
            logger.info("Cookies not null");
            for (final Cookie cookie : cookies)
            {
                logger.info("Cookie name" + cookie.getName());
                if (cookie.getName().equals("productList") && cookie.getValue() != null)
                {
                    cookieFound = true;
                    productList = cookie.getValue().toString();
                    logger.info("Product List value" + cookie.getValue().toString());

                }
            }
        }

if (cookieFound == false)
        {
            if (sessionService.getAttribute("sessionProductCode") != null)
            {
                productList = sessionService.getAttribute("sessionProductCode");
            }
        }

        final ArrayList<ProductCompareDTO> prodCompareMapPanelView = populateCompareMap(productList);

        if (component.getDisplayType().toString() == CommonConstants.COMPARE_VIEW_PANEL)
        {
            logger.info("Displaying panel view ");
            model.addAttribute("prodCompareMapPanelView", prodCompareMapPanelView);
        }
        else

        if (component.getDisplayType().toString() == CommonConstants.COMPARE_VIEW_FULL)
        {
            logger.info("Displaying full view ");
        }

        model.addAttribute("displaytype", component.getDisplayType().toString());
        model.addAttribute("maxCount", component.getMaxProductCount());
    }

组件JSP

    <c:choose>
        <c:when test="${not empty maxCount && not empty displaytype}">


            <div id="compare-pane" class="row comparePanel1">
                <button type='button' onclick='doComparePanelClose()'>Close
                    Compare Panel</button>

                <c:if test="${displaytype == 'PANELVIEW'}">

                    <c:forEach items="${prodCompareMapPanelView}" var="mapEntry">
                        <div class="col-sm-4" id="innerdiv${mapEntry.code}">

                            <c:if test="${(not empty mapEntry.name)}">
                            ${mapEntry.name}
                            </c:if>
                            <c:if test="${not empty mapEntry.thumbnail }">
                                <img src="${mapEntry.thumbnail}" />
                                <button id="close${mapEntry.code}" class="compareButton"
                                    type="submit" data-product-id="${mapEntry.code}"
                                    onclick="closeCompareProductPanel('${mapEntry.code}');">Close
                                    X</button>
                            </c:if>
                        </div>

                    </c:forEach>

                </c:if>

                <div id="bottomInnerComparePanel1">*Compare upto ${maxCount }
                    products</div>
                <button id="comparesubmit" class="compareButton" type="submit"
                    onclick="compareSubmit();">See Comparison ></button>

            </div>
            <c:url value="/search/compare" var="compareUrl" />
            <form id="compareForm" method="get" action="${compareUrl}"
                target="_blank">

                <c:if test="${displaytype == 'FULLVIEW'}">
                </c:if>
            </form>
        </c:when>

    </c:choose>

SearchPageController

    @SuppressWarnings("boxing")
        @RequestMapping(value = "/compare", method = RequestMethod.GET)
        public String compareProducts(@RequestParam(value = "prevPage", defaultValue = StringUtils.EMPTY) final String prevPage,
                final Model model, final HttpSession session, final HttpServletRequest request)
                throws CMSItemNotFoundException, UnsupportedEncodingException
        {
        // fetching product list from sesssion and returning Product Data map

    final Map<String, List<ProductClassificationData>> productClassDataMap = new HashMap<String, List<ProductClassificationData>>();
            final Map<String, HashSet<String>> prodClassMap = new TreeMap<String, HashSet<String>>();
            final String lastCode = null;

            final Cookie[] cookies = request.getCookies();
            String productList = null;
            boolean cookieFound = false;

            if (cookies != null)
            {
                logger.info("Cookies not null");
                for (final Cookie cookie : cookies)
                {
                    logger.info("Cookie name" + cookie.getName());
                    if (cookie.getName().equals("productList") && cookie.getValue() != null)
                    {
                        cookieFound = true;
                        productList = cookie.getValue().toString();
                        logger.info("Product List value" + cookie.getValue().toString());

                    }
                }
            }

    if (StringUtils.isNotBlank(productList))
            {
                final String[] values = productList.split("\\|");
                final String PRODUCT_COMPARE_PAGE = "productComparePage";
                storeCmsPageInModel(model, getContentPageForLabelOrId(PRODUCT_COMPARE_PAGE));
                setUpMetaDataForContentPage(model, getContentPageForLabelOrId(PRODUCT_COMPARE_PAGE));
                final List<ProductData> productDatalList = new ArrayList<ProductData>();
                final List<String> productCodesList = new ArrayList<String>();
                for (final String productcode : values)
                {
                    ProductData productData = null;
                    final List<ProductOption> options = new ArrayList<>(
                            Arrays.asList(ProductOption.BASIC, ProductOption.CLASSIFICATION, ProductOption.PRICE, ProductOption.STOCK));
                    if (productcode != null && "".equalsIgnoreCase(productcode))
                    {
                        productData = productFacade.getProductForCodeAndOptions(productcode, options);
                        productDatalList.add(productData);
                        productCodesList.add(productcode);
                    }
                }
    // fetch feature data and add it to model

    }

final int mapSize = finalDataList.size();
            model.addAttribute("finalDataList", finalDataList);
            model.addAttribute("mapSize", mapSize);
            model.addAttribute("compareCodeList", productCodesList);
            model.addAttribute("compareCodeListSize", productCodesList.size());
            model.addAttribute("prodDataList", productDatalList);
        }

        return getViewForPage(model);
   }

当用户点击“查看比较按钮”时，我将重定向到新页面productComparePage.jsp，我想在其中显示产品及其所有属性的完整比较。但是现在我再次从搜索页面控制器重定向到组件控制器。我在这个新页面上再次获得了Panel视图。

Answer 1

您可以使用cookie来存储对象。你可以在互联网上找到很多例子。与this，this一样。您不应将每个产品数据存储在cookie中。

我的建议

创建产品比较面板/组件，它应始终位于屏幕上。
每当使用选择任何产品时，它应该添加到您的比较面板并将该产品代码（SKU），名称，图像src存储在cookie中。确保始终使用Cookie数据显示产品比较面板，因此即使页面刷新，它也会起作用。就像这样，你必须处理删除事件。
当用户点击比较按钮时，您可以使用所选产品代码列表（来自Cookie）进行ajax调用，并获取产品数据对象以呈现比较页面或只是将数据提交给控制器和显示比较页面。

但是，有大量的开源插件可以帮助您完成工作。

产品比较Hybris

更新

1 个答案: