商品详情模板由哪些构成

商品详情模板由哪些构成,第1张

商品详情页项目架构应该由以下几方面构成。

1:商品的基本信息是用户在商城首页输入手机后再搜索引擎中返回商品结构,搜索引擎索引中只保存商品列表中的一部分商品展示信息,当用户点击一个商品就进入了商品详情页.

点击进入后第一个展示的就是商品的基本信息包括sku(颜色,尺寸等)规格参数,这些基本信息可以在商品显示商品详情页面的时候就查询显示个用户看.

2:商品描述的内容往往比较多,如果在加载商品详情页面的时候就显示出来就影响加载速度,为了快速响应用户,商品的描述可以延迟加载,延迟一秒钟加载。用js控制页面加载完

一秒钟以后再去用ajax去调用本项目的controller,controller去调用远程的rest接口获取然后返回商品描述html显示在页面上面,

设置延迟一秒钟可以用js的setTimeout方法,setTimeout设置延迟一秒钟,setTimeout只会执行一次.

这里的查询还可以通过jsoup直接调用远程rest服务.这里推荐使用调用前面说的controller方式。

3:商品的规格参数和评论等其他的tabs信息(按需加载)可以按需加载,当用户点击商品规格这些tabs标签页是在去加载,如果用户不点击就不用去查询,可以减少服务器压力。

同样这里的查询和商品2中的一样,可以ajax查询本地controller在去调用rest服务,也可以在页面上面直接使用jsoup跨域去调用远程的rest服务.

https://www.cnblogs.com/ganbo/p/6944332.html

太大的 发不上来...

发一部分给你吧.

<html><head>

<!--eBay V3- msxml 4.0 XXXXXXXXXXXXXXXXXXXXXXXXXX-->

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"><meta name="description" content="eBay: Find BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE in the Home Garden , Yard, Garden Outdoor Living , Patio Garden Furniture , Hammocks category on eBay."><meta name="keywords" content="BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE, Home Garden, Yard, Garden Outdoor Living, Patio Garden Furniture, Hammocks"><title>BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE - eBay (item 140261481011 end time Aug-26-08 22:00:49 PDT)</title><!--srcId: ViewItem--><meta http-equiv="Pragma" content="no-cache"><meta name="Arg1" content="uu.rpn276"><script><!--

var iframeApproved = truevar nodefaultcss = true

//--></script><script language="javascript" src="http://include.ebaystatic.com/js/e551/us/features/viewitem/view_item_e5511us.js"></script><style type="text/css"><!--

.ebay{font-family:Arial,Helvetica,sans-serif}

.ebay{font-family:Arial,Helvetica,sans-serif}

.ebay .standard,.ebay p,.ebay td,.ebay div,.ebay span,.ebay ul,.ebay ol,.ebay dl{font-size:x-smallfont-family:Arial}

.ebay .standard1{font-size:x-smallfont-family:Arial}

.ebay a:active,.ebay a:link,.ebay a:visited{color:#0000CC}

.ebay a:visited{color:#990099}

.ebay pre{font-family:"Courier New",Courier,monospacefont-size:x-small}

.ebay h1,.ebay .pagetitle{font-size:mediumfont-weight:bold}

.ebay h1,.ebay .itemTitle{font-family:Arial,Helvetica,sans-seriffont-size:mediumfont-weight:boldmargin-bottom:2px}

.ebay h2,.ebay .sectiontitle{font-size:smallfont-weight:bold}

.ebay .givingBarSectiontitle{font-size:smallfont-weight:boldcolor:#999999}

.ebay .givingBarSectionSubTitle{font-family:verdanafont-size:10pxcolor:#999999}

.ebay h2,.ebay .itemSpecifics{font-family:Arial,Helvetica,sans-seriffont-size:x-smallfont-weight:boldmargin-bottom:0px}

html>body .ebay .itemSpecifics{font-size:small !important}

.ebay h3,.ebay th,.ebay .standardtitle{font-weight:bold}

.ebay .emphasized{color:#009900font-weight:bold}

.ebay .error{color:#FF0000}

.ebay .help{color:#666666}

.ebay .pipe{color:#9999FF}

.ebay .button,.ebay .navigation{font-family:Verdanafont-size:xx-small}

.ebay .textbox{font-family:Verdanafont-size:xx-smallcolor:#000000}

.ebay .textboxhelp{font-family:Verdanafont-size:xx-smallcolor:#666666}

.ebay .nomargin{margin:0px}

.ebay .cssMessage{display:none}

.ebay .optInLayer{color:#999999text-align:rightborder:1px solid #CCCCCCpadding:5px 5px 5px}

.ebay .hrthick{ text-align: rightwidth: 100%height: 2pxborder: solid #9999CC 1pxbackground: #9999CC}

.ebay .hrthin{ text-align: rightwidth: 100%height: 2pxborder: solid #DCDCFE 1pxbackground: #DCDCFE}

.ebay .hrwhite{ text-align: rightwidth: 100%height: 2pxbackground: #ffffffborder: 1px solid #ffffff}

.ebay .hrgray{ text-align: rightwidth: 100%height: 1pxbackground: #bbbbbbborder: 1px solid #bbbbbb}

.ebay .titleRow{ border-top:2px solid #9999ccborder-bottom:2px solid #9999ccmargin-top:4px}

.ebay .titleColumn{border-top:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderLeft{border-left:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderRight{border-right:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderBottom{border-bottom:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderLeftBottom{border-bottom:1px solid #9999ccborder-left:1px solid #9999ccbackground-color:#eeeef8}

.ebay .borderRightBottom{border-bottom:1px solid #9999ccborder-right:1px solid #9999ccbackground-color:#eeeef8}

.RetroStyle2 {font: Terminalfont-family: Terminalcolor: #00FF00background-color: #000000font-size: 22px}

.BasicStyle {font: Tahomafont-family: Tahomacolor: #5F8F8Fbackground-color: Blackfont-size: 20px}

.titlePadding {padding-top:4pxpadding-bottom:4px}

.ebay .shipFootNote{font-family:verdanafont-size:10pxcolor:#999999padding-bottom:20px}

.ebay .shipFootNote1{font-family:verdanafont-size:10pxcolor:#999999padding:0 15px 20px 15px}

.ebay .grayOut{font-family:arialfont-size: 13pxcolor:#cccccc}

.ebay .grayText{font-family:arialfont-size: 13pxcolor:#999999}

.ebay .insuranceText{ font-family:arialfont-size: 10pxcolor:#999999}

.ebay .titlePurchase{color:#515151}

.ebay .shipPadding { padding-top:5pxpadding-bottom:5px}

.ebay .shipPadding1 { padding:20px 15px 10px 15px}

.ebay .shipHeaderFont { font-family:arial font-size: 13px padding-bottom:4px}

.ebay .shipSecFont{ font-family:arial font-size: 13px padding-left:4px}

.ebay .indentation{ padding-left:8px}

.ebay .LessIndentation{ padding-left:4px}

.ebay .extraIndentation{padding-left:12px}

.ebay .ViShipSecBorder{border-bottom:0px solid #ccccccborder-left:1px solid #ccccccborder-right:1px solid #ccccccborder-top:0pxpadding:0px}

.ebay .ViShipSecHeaderBorder{border-width: 1pxborder-color: #ccccccborder-style: solidpadding:8px}

.ebay .ViShipSecTdBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecThBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0pxpadding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecTdRightBorder{border-bottom:1px solid #e5e5e5border-left:1px solid #e5e5e5border-right:0px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViShipSecTdLeftBorder{border-bottom:1px solid #e5e5e5border-left:0px solid #e5e5e5border-right:1px solid #e5e5e5border-top:0px solid #e5e5e5padding:5pxfont-family:arial font-size: 13pxtext-align:left}

.ebay .ViMessageSecHeaderBorder{border-width: 1pxborder-color: #ccccccborder-style: solid}

.refreshlinkText{font-family:Verdanafont-size:xx-smallcolor:#FFFFFFpadding-left:3pxpadding-right:4px}

#divrefresh a:active{font-family:Verdanafont-size:xx-smalltext-decoration:underlinecolor:#FFFFFF}

#divrefresh a:visited{font-family:Verdanafont-size:xx-smalltext-decoration:nonecolor:#FFFFFF}

#divrefresh a:link{font-family:Verdanafont-size:xx-smalltext-decoration:nonecolor:#FFFFFF}

#divrefresh a:hover{font-family:Verdanafont-size:xx-smalltext-decoration:underlinecolor:#FFFFFF}

.greyboldsmall{font:bold small Arial, Helvetica, sans-serifcolor:#666666}

.overlay {background:transparentposition:absolute}

.overlay .contentbox {width:100%position: relative}

.overlay .contentbox .content { padding:5pxborder:1px solid #666background: #fffborder-width: 0 1px}

.overlay .contentbox *, .overlay .shadowbox * {position:relative}

.overlay .shadowbox {width:100%position:absolutetop:7pxleft: 7pxopacity:.15filter: "alpha(opacity=15)"-moz-opacity:0.15}

.overlay .shadowbox .content {background: #000padding:10px}

.overlay .contentbox .n { border-top:1px solid #666margin: 0 5pxbackground: #fff}

.overlay .contentbox .s { border-bottom:1px solid #666margin: 0 5pxbackground: #fffposition:relative}

.overlay .shadowbox .n, .overlay .shadowbox .s {margin: 0 5pxbackground: #000}

.cn, .scn {margin:0padding:0height:5pxdisplay:blockfont-size:0line-height:0%}

.cn {background: transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayCorners.gif) no-repeat}

.scn {background: transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayShade.gif) no-repeat}

.overlay .n .cn .cn, .overlay .n .scn .scn { background-position:0 0width:5pxmargin-left: -5px}

.overlay .n .cn, .overlay .n .scn { background-position:100% -20pxmargin-right: -5px}

.overlay .s .cn, .overlay .s .scn { background-position:100% -30pxmargin-right: -5px}

.overlay .s .cn .cn, .overlay .s .scn .scn { background-position:0 -10pxwidth:5pxmargin-left: -5px}

.overlayPos {position:absolutemargin-left:190px_margin-left:-80pxmargin-top:-15px_margin-top:-2px}

.arrowTL, .arrowTR, .arrowBL, .arrowBR {background:transparent url(http://pics.ebaystatic.com/aw/pics/globalAssets/imgOverlayPoints.gif) no-repeatwidth:22pxheight:25pxposition:absolute}

.arrowTL {top:12pxleft:-21pxbackground-position:0px 0px}

.arrowTR {top:12pxright:-21pxbackground-position:100% -30px}

.arrowBL {bottom:12pxleft:-21pxbackground-position:0px -60px}

.arrowBR {bottom:12pxright:-21pxbackground-position:100% -90px}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6274738.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存