Hybris 中的产品比较

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>

搜索页面控制器

    @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，我想在其中显示产品及其所有属性的完整比较。但是现在我再次从搜索页面控制器重定向到组件控制器。我在这个新页面上再次获得了面板视图。

Answer 1

您可以使用 cookie 来存储对象。您可以在 Internet 上找到许多示例。喜欢this、this。您不应将每个产品数据存储在 cookie 中。

我的建议

• 创建产品比较面板/组件，应始终显示在屏幕上。

• 每当用户选择任何产品时，它都应该添加到您的比较面板并将该产品代码 (SKU)、名称、图像 src 存储在 cookie 中。确保产品比较面板始终使用 cookie 数据显示，因此即使页面刷新，它也能正常工作。像这样，你必须处理删除事件。

• 当用户点击比较按钮时，您可以使用所选产品代码列表（来自 cookie）进行 ajax 调用，并获取产品数据对象以呈现您的比较页面或简单地将数据提交给您的控制器和显示比较页面。

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