00:00
我们前面准备好了商品的详情数据,那接下来呢,我们就来渲染页面,那为了能实时看到效果,我们先来启动一下我们这个重启一下我们这个商品服务以后我们只要修改页面,我们CTRLF9就行了,好,现在来到我们这个详情页,详情页呢是我们这个item.htm2,那么接下来就来一一来渲染,首先我们来看第一个,我们来先渲染我们这个商品的标题,把这个标题呢,CTRLC我来复制一下,我在这,CTRLF我来找一下标题,哎,标题呢就在这,那我们就要使用语法叫th test,我们使用simif的语法,但这个语法呢,大家注意我们这个语法controlr home来放到前边,我们得加入我们SIM live的名称空间,我们才会有提示,把这个名称空间我们来复制来放在到这,好,然后我们来找到我们这一块。我们th test,我们现在想取出我们这个文本内容,Th test,好,这个文本内容是什么?我们先来Dollar符大括号,我们这个页面呢,会放一个item这个信息,这个信息里边首先封装了有我们的基本信息来点进这里边,这里边呢,我们基本信息在info里边,好,我们item.info info里边呢有商品标题,直接SQ title没问题,然后呢,再接下来我们来看下边这个标题,完了呢,这个就是副标题,我们来CTRLC,我们来找一下。
01:30
好来CTRLC,好们来找一下我们这个副标题,副标题的在这,那么就可以来写一个th test来我们的副标标题Dollar符大括号,然后呢,我们的item点一个英符,有SQ title,还有我们这个sub title,这是我们的子标题,那子标题呢,接下来还有我们这个链接跳转,比如我们这个有什么优惠信息要跳转,我们也可以在这来显示跳转,那么这一块呢,就不加了,我直接这块去掉我们的数据库字段,也没有这个设计跳转,那接下来我们再来看,那接下来呢,就是我们的这个默认的商品图片,我们这个商品默认图片大图展示在这,来看一下这个商品图片呢,那就是这个是我们这个pro box啊,我们来找一下CTRLF来搜这个pro box在这,这是我们商品的整个大图图片,这大图图片呢,我们在这来THRC。
02:28
这个大图图片呢,我们可以直接在这来从基本信息中就可以拿到我们item里边,因为我们当前SKU都有它的默认图片,所以呢,我们点一个英符,这是我们的基本信息,它有一个SKU的图片,好,我们SKU默认图片一展示就行了,那下边的这个这个呢,还是我们这个默认图片的大图,上边这个应该是一个小图,我们来看一下效果啊,然后呢,这个是大图,下边这个什么whole box,它里边放着呢,是我们这个小图要进行展示的,所以我们这个后边的内容,比如这个还有一个show box,这个收box呢,就是我们这个大图放大以后的这个图片,我们现在看的是这个收box,那相当于放大后的大图图片,THSRC放大后的大图呢,那我们现在是默认图片,默认图片那肯定就是这个了,走只有我们这个切换显示了,我们这个放大后的大图才能动态变化。
03:28
来看一下,比如我们选中这个了,这个放大后的大图,那默认呢就会有变化,好,那这个呢,大图在这儿也设置好了,接下来所有图片的便历,我们先不便利图片,把基本信息能便利的都拿来,然后呢,接下来就是我们的价格,来CTRLC来复制一下CTRLC来CTRLF,我们在这来搜一下,价格这一块我们也来显示使用th test th test等于什么,我们Dollar服大括号还是从基本信息里边获取info info里边呢有我们的price,这是我们的价格信息,来直接CTRLF9把这个页面呢重新编译一下,来先看一下我们自己的效果好。
04:11
我们还是先来到我们这个古力商城,我们来到我们整个的这个商城,就叫古丽me.com,我们先来搜索,我们搜索到商品以后呢,我们来查询它的详情,我们来比如来搜索华为走。来点击搜索,然后呢,我们搜索到第一个华为手机,我们来点进来,我们查询一号,好,我们这个大图呢有了,包括我们这个标题在这有,我们这个副标题在这儿也有,然后呢,接下来这是我们的价格没问题,那我们发现这块价格呢有四个零,我们要给它格式化显示,那使用我们这个SIM live SIM live里边我们来看一下那数字的格式化,我们可以参照numbers这一块,Numbers呢,我们这儿有格式化,我们主要格式化呢,保留两位这个零就行了,所以我们格式化的是这个dima,我们就使用numbers format dima,然后呢,传一个三二,那这一块的我们的这个三二指的就是整数位,我们这个保留三位,小数位呢,保留两位,那我们就可以先来使用我们这个方法来进行格式化,来CTRLC来到这价格呢,我们先来使用这个string format diemma,好,然后我们要format的这个数字,就是我们取出了这个价格。
05:27
啊,然后呢,这个价格我们来整数位保留,如果我写一个三,我们超过这个位数,我们来看怎么办?小数位保留两位来看一下效果,CTRLF9我们看到这一块呢,传入的这也有提示,Target传的就是我们要转的这个数字,然后呢配就是我们整数位最小,诶它说的是整数位最小的位数Dis西玛就是小数位的这个位数,好我们来看一下,超出了呢,它肯定也能显示,我们来刷新一下,好我们现在就格式化好了,那我们现在这个格式化好以后,接下来你就来显示有货无货,来找一下这个无货,来搜一下CTRLF来搜索无货,这有货无货。
06:09
我们也可以从基本信息里边获取到,比如我们来写一个th test,我们Dollar福大括号SKU,好,我们的这个item里边点有一个info信息,Info信息里边呢,它有一个叫to,我们看一下有没有这个库存们看我们的这个返回结果,Ino信息,这ino信息里边呢,这有销量,诶这没有库存,所以有货没货呢,我们还得再查一遍,那么设计的上呢,我们就可以给这一块来加上我们这个是否有货无货信息,那么这个就叫布尔类型的汉字sto,诶是否有货我们可以来加上这个,那末日呢,我们都给它等一个处,如果我们不来查,我们都是有货,那我们页面呢就可以来写上来判断它呢,会有一个属性叫hands字sto。
07:00
我们刚加的这个属性VO叫汉字to。好,把这个汉字to来加上,如果它是处,那我们呢,就给它应该显示的是有货,返回呢有货。否则我们就返回的是无货,我们写一个三元运算CTRLF9,好,我让我们页面呢编一下,因为我们这个代码改了,我们这一块呢还会重启,好现在呢正在重启,我们现在来测试一下,我们还是来刷新我们这个页面,我来刷新来等待服务启动成功,现在还是连接拒绝,我们再来刷新一下。好,我发现呢,这一块显示,诶有货无货这一块呢,显示出问题了。那出问题的原因就是我们页面渲染这一块,我们来看一下页面渲染那当家汉字to在对象里边找不到,我们这个方法是sqo的这个实体,那么现在相当不是在英F里边存了,我们直接在item里边有这个汉字to属性,好item里边直接呢会帮我们来返回汉字to ctrl f9,我们来页面刷新一下走,好我们现在呢是有货,然后接下来我们就是在这一块,我们要便利,我们到底有哪些属性,以及我们有些对应的值,好我们在这来找一下选择颜色,CTRLC我复制一下CTRLF来找一下选择颜色,那到底这一块是选择什么呢?那我们就在这儿得取出我们的这个属性值,而且到底有多少个选择什么,我们是要遍历的,好我们把这一块呢,先拿来,这是第一个选择颜色,我们来说这还有个选择版本,既然还有选择内存,那我们把这些呢,我们来都说一下。
08:42
好,把这个内存我们全部呢删掉,就留上一个,然后接下来我们在这来进行遍历就行了。到底有多少种这个div,我们就来写一个TH,我们来进行遍历,当然在这个遍历之前,我们好像忘了写一步,那就是我们所有的图片,我在这呢也要展示,那好,我们接下来把所有的图片,所有的图片我们来找一下。
09:09
我们以前呢,所有图片的展示都是放在我们这一块啊,这一块呢,有非常多的图片来把它删掉,到底我们当前有多少个图片,我们要进行遍历,我们这个Li呢,我们就来写一个TH,我们先来遍历图片Dollar幅大括号,我们返回到这个页面的item,里边有我们所有的图片images。这images呢,每一个病例,那我们都得到我们的这个图片image。好,然后呢,接下来我们把图片呢,给这一放就行了,TSRC,那src的值,那就是我们当前正在遍历的这个图片路径,好,我就导了幅大括号来找到我们的这个图片在这。CTRLF9,好,我们先来看一下我们的效果。我们来刷新一下,先来看图片能不能遍历出来,好这一块呢,图片可以遍历出来,只不过我们这个图片路径不对,我们来检查元素看一下我们图片这一块呢,我们遍利出来得到的是一个这个实体类对象,对了,我们图片呢,是在这个image URL这一块封装着,所以我们在这拿到的是我们这个图片的实体类,我们来看一下我们封装的呢,是一个图片集合的实体类,而真正的路径在这儿,所以我们在这儿来遍历的时候,我们要拿到图片里边的image URL ctrl f9来看一下效果,好,我们来做一个刷新,好,现在我们这个图片有了,而且呢,我们这个其他图片,我们在有些图片呢是没有的,我们来看一下这个没有的原因,我们来检查元素来看这个没有的这个图片,这个图片它的路径,诶路径呢是取不到的,而我们这个图片路径都是取不到的,有的这个图片呢,有路径的能取到。
10:59
那没取到呢,原因是我们之前在做测试数据的时候,录出来有些图片呢是空的,所以我们最好在这来判断一下,如果我们这个th if,我们得到这个图片不为空,我们才给它来做这个事情,所以呢,我们来取出Dollar符大括号来判断它不为空,我们当前的这个图片,因为它是一个对象,这个对象的图片的路径URL,那我们就来string UUS来判断,Strings点有一个is empty,只要图片的路径不是空的,那我们才有必要来进行显示,A empty,好,它不是空,那我们就可以来显示这个Li ctrl f9,好,我们来看一下页面效果来刷新,好,那么现在呢,有的图片我们在这展示出来就行了,好,这些图片呢,没问题,大图在这儿也都展示,然后接下来我们就来遍利这些属性,来找到这些属性来CTRLF选择颜色,好,现在可以来遍历了,这些属性呢,我们接下。
11:59
把他们之前的都删掉了,我们接下来要遍历多少属性,我们就在这写TH图片遍历完了,我们接下来遍历属性item item里边我们封装了一个叫at tr,我们主要呢是我们的销售属性,是我们的cell at tr,来看一下我们的cell at tr这个集合里边我们来给它遍利,我们就叫at tr来看一下这个集合里边的数据,我们cell at tr里边还是一个集合,集合里边封装了属性的名和们这个属性的值,而我们所有可供选择的属性值,我们是以逗号分割分装的,所以呢,我们在这就来遍历,遍历呢,我们现在到底是选择什么来拿到它的这个名字,使用这种写法直接刀了福大括号,我们拿到at tr里边的at tr name,这就是我们的属性名。
12:54
CTRLF9,我们来给大家看一下效果,好,我们来刷新走。
13:00
选择颜色,选择版本没问题,加这一块的所有值,那我们就得便利,这一块的值呢,到底有多少个这个DD,我们呢得确定一下,我们先把其他的这个DD呢,我们都来删掉,好把这个DD删掉,留上一个,有多少个我们就直接在这来遍历THTH呢,我们就叫each,关键我们要遍历的是什么?是我们这个at tr,我们这个at tr里边呢,我们有at tr value6我们当前正在遍历的这个at tr元素啊,他们有at tr values,但是这个values我们是以逗号分割的,所以呢,我们想要获取所有的这个值,我们可以这样来,Dollar符大括号,我们要便利的元素来看一下string里边能不能帮我们来进行分割,String它里边呢,来找一下有没有split相应的方法。如果它能帮我们几时间进行分割得到一个数组,那就好了,我们看到呢,这有一个叫list split,我们用逗号分割我们指定的字符串,最终会返回一个list数组,所以呢,我们可以使用这个方法CTRLC来复制过来,好,我们要遍历的是我们自己分割的数组,我们分割的是哪个就是它,然后呢,我们要以逗号分割得到的数组,我们就来进行变历,然后呢,得到的每一个其实就是一个Y6值,然后我们把这个Y6值呢,我们就在这儿来进行展示,Y6值那是在这儿来进行展示的,我们直接双中括号,我们Dollar符大括号,取出我们的这个Y6值就行了。
14:38
那这一块图片呢,我们就先不加了,我把这一块直接注掉好。我们把这一块的Y6值拿过来,CTRLF9来看一下页面效果好,我们在这来刷新走。好,我们现在呢,发现我们遍利出来这个颜色亮黑色,诶我们这个没分割出来,那我们就来遍历一下,我们遍利的是这个at tr的value,我们不能拿at tr在这分割,那应该是at tr点一个,我们里边呢有个at tr的values,把它呢一分割CTRLF9。
15:12
写的有问题,好我们再来刷新一下,看一下效果走好我们发现呢,我们选择颜色就有这两个,亮黑色,星河银,罗兰紫,翡翠冷,然后呢,我们的版本那就在这儿,那这就是我们这个页面的便利,那接下来我们再把其他的都取出来,商品介绍这一块主要是所有的图片,好来找到CTRLF来找商品介绍,好商品介绍这一块呢,有商品介绍规格包装,我们现在主要来看这个商品介绍,那这个介绍的所有图片它都在哪放着呢?好我们来找一下,来右键审查元素,我们来看它这些图片的路径,它是在哪一块封装着我们整个的介绍来看,这是P好我们的这个image,这是我们的介绍图,我们介绍呢actives,那就是这一块,那么这个Li呢,就是商品的介绍,那下边这一块呢,就是商品的其他信息,什么规格包装啦,这是包装,这是评价,那介绍就在这。
16:13
CRLF,我们来搜一下CTRLF,它就要介绍actives啊,就在这,好,我们所有的介绍信息这一块呢,是我们的相当于一些属性的快速描述,那这块的数据呢,我们就不要了,如果大家想要直接去来数据库来查出来就行了,因为我们每一个属性呢,都有这个描述,因为我们每一个属性呢都有一个字段,这个字段代表我们是不是快速的展示到我们这个描述上来,我们这儿有一个叫受DEC,有了就在那展示一下,那我把这两个呢,我先来注掉。然后接下来我们再来看,我们现在呢,想要便利的就是我们这个整个商品的图片介绍,这个图片介绍是我们这一块,我们来看一下我们的页面效果检查元素们的这个图片呢,是这个什么叫5亿BF,所以商品的整个介绍图都是这一张大图,诶5亿BF那就是它,那我们有多少个商品介绍,我们就得在这遍历,我们TH1我们还是来遍历,遍历什么呢?来看一下我们返回的这个数据里边,我们有这个商品的介绍,商品介绍里边呢,这是一个文本,这个文本里边我们其实封装了我们整个商品的图片,我们来看一下这个介绍,当然这个图片呢,如果多个图片我们还是以逗号分割的,所以我们要逗号分割它的这个值。
17:33
相当于要取出它的值,好我们在页面呢就来获取一下,首先Dollar福大括号我们先获取,我们是我们的item item里边我们的商品介绍,介绍呢我们是在这个叫describe这个里边封装着,好它里边呢又有一个属性就叫描述,而这个描述呢是逗号分割的好多图片,所以我们继继续来给它进行分割,还是利用我们这个strength这个方法。
18:03
好,我们把这个分割出来的图片,我们来进行遍历就行了,好,那我们要遍历的呢,就是这个,我把这个剪切过来,好,我们要遍历的是这个,然后我们呢,把这个一分割,把多余的到F大括号一删,好,然后呢,我们接下来便利便利什么呢。这就是我们的图片描述,Describe这个呢描述,然后呢,我们遍历出来的这个图片路径THRC,这个路径呢,那就应该是我们指定的这个描述。好,来到符大括号,我们在这来看一下CTRLF9。我们来看一下页面效果,原来呢这一块描述,这是这一块华为什么MATE10,我们现在来看一下这个描述,来刷新一下,我们来看我们页面的展示,好现在呢,这个产品描述,这就是我们之前自己来录的整个描述图片,那这就有了商品介绍呢,这就有了接下来是规格包装,那当我们来点击规格包装的时候呢,会切换到我们这个规格包装,而规格包装呢是在这一块,我们来可以看一下它在规格里边,在这呢有描述,规格里边呢有多少规格,我们发现呢,这都会有一个便历,好这呢都有一个遍历,我们把这些规格的便历,我们就留上一个就行了,把这块都删掉。
19:23
走,把这一块呢,我们全部都来删,删除掉好,删除掉这一块也一样,那最终呢,都只留一个规格,这挺多的,我们把这个规格全部删掉,留上一个,到底有多少个规格,我们要进行遍历,好,我们来重新把它展开,所以我们就来遍历,来写TH。那么这些规格属性呢,我们都在VO的,这有一个叫group atts里边封装着,我先来遍利它,那do福大括号item里边点一个,那么这个叫groups at t VO,好。然后呢,我们遍历出每一个规格,好,我们就叫规格。
20:04
那我们拿到这个规格以后,我们先要第一个拿到我们的规格的分组,我们这一块分组呢,我们就来写一个th test。好,Test呢,我们怎么拿到分组,直接在规格里边,我来do了幅大括号点,那它呢,有一个属性叫at tr group name,相当于我们能拿到分组,而分组里边到底有多少的属性,我们在这呢也要便利。好,我们先来看一下这一块的效果,CTRLF9,我们来刷新一下我们这个页面,当我们来点击规格与包装的时候。那应该显示我们的规格,只不过我们这一块呢,它没有显示,我们来改一下这个效果,这效果呢,主要是我们这个规格与包装,这个里边呢,它有一个这个超链接地址,一点以后就跳了,我们把这个去掉,来看一下CTRLF,我们来搜规格与包装,好我们来找到我们把这一块的整个链接地址,我们来给它删掉,CTRLF9包括呢,我们这一块的所有的链接地址,有地方的我们都给它删掉啊,要不然就出现问题了。好来CTRLF9我们来刷新一下我们的页面来刷新,好我们现在来看效果,这是商品介绍,我点规格包装,诶发现呢过来了,过来呢,接下来我们便利的这些东西,我们有主体品牌这些这些数据在哪呢?我们来右键审查元素,我们好像刚才遍历的这些不对。
21:28
好,我们的这些数据呢都在这,我们有一个叫规格box在这个里边,好,我们来CTRLF,我们来找一下CTRLF走规格box在这。诶,我们确实呢是在便利这,但是我们这个规格box,我们发现只有一个class等于规格box,我们遍历的这个是class等于规格box,还有规格BOX1,诶这有问题,好我们来找一下,那就在这,那说明我们之前遍历的不对,那把这个不对的这一块的遍历我们就可以不要了,呃,住掉或者啥都行,好我们来加上这个,现在呢,我们这个主体到底有多少种规格,我们现在留一个,我们把其他的呢删掉,们先来删除掉其他的规格,好到最后一个在这结束,然后呢,我们来留上一个规格,我们来开始遍历TH,那我们要遍历呢,是Dollar符大括号我们item里边,那我们所有的属性分组都在这个group at tr里边,然后呢,我们就叫group,这是我们的分组,好,我们现在呢就叫group,然后呢,我们这个组名是什么,我们在这来TH我们的test。
22:37
这个test呢,组名呢,就是我们这个Dollar福大克号group,点我里边有group name,这是我们的组名,然后接下来所有的这些属性该怎么办?我们来看这个DT是我们这个属性的名,DD是它的值,我们都是这么对应的,还是一样留上一个好,它的语法是这样好,那我们接下来要进行遍历这些属性,那每一个呢,我们来加一个div吧,这样方便便利,好。
23:06
然后呢,属性和属性值对应是多少?来看一下这个是有多少div,我们来遍历TH,我们现在呢拿到当前分组了,因为我们给这个当前分组里边我们来看一下当前分组拿到里边还封装了HTS,这是它的属性,所以我们这个当前分组点一个at ts,我们遍历到这个属性,然后呢们来整一个at tr,这是我们的属性,拿到以后呢,我们th test分别获取它的名跟值就行了,好,Dollar符大括号at tr的我们这个属性名,我们叫at tr name,还有它所有可能的值at tr value6,好,我们给这来一放at tr at tr value6CTRLF9来刷新一下页面,看一下效果。好,我们来刷新。现在呢,我们来看一下效果规格包装,诶,我发现呢,这一块展示的就是我们自己便利出来的结果,没问题。
24:07
那至此呢,我们整个商品详情页的数据我们就遍历出来了,当然一些其他的细化的一些展示,大家还可以继续来写,那下节课呢,我们来做这个功能,那现在来看,那现在呢是星河营八加256G,我们这星河营八加256G,但是呢,我们还可以来切换到其他,比如我点了新合营八加128G,现面我们再来看别的SKU,那么这一块呢,展示了我们当前SKU对应的所有SKU,所有可能的销售属性组合,那在这呢,应该还可以动态切换,那下节课我们就来做动态切换的功能。
我来说两句