淘宝天猫多商品列表展示

淘宝天猫商品页面多个商品与价格列表显示效果

< Feedback on 淘宝天猫多商品列表展示

Review: Good - script works

§
Posted: 03.06.2021.

商品属性价格有时候显示,有时候不显示
测试链接:https://detail.tmall.com/item.htm?id=638356883124&sku_properties=20509:389276485
当第一次打开这个链接的时候,会显示价格,但是按F5刷新,或者选择其他商品属性时,这个价格就没有了。

§
Posted: 03.06.2021.

另外,选中时,右下角有个红色打勾的图形,这个图形的z-index比价格的优先级低了,会被价格挡住

§
Posted: 03.06.2021.

还有,就是按F5刷新页面,有时候脚本不会加载出来,有时候又能够加载出来,具体表现就是脚本加载算不上100%稳定。

§
Posted: 03.06.2021.

测试链接:
https://item.taobao.com/item.htm?id=20014322332
https://item.taobao.com/item.htm?id=43915467229

无法获得价格,且字体并非加粗和加大。

我以上测试环境是win10,ff87,暴力猴v2.13.0

§
Posted: 03.06.2021.
EinskangAuthor
§
Posted: 04.06.2021.

感谢反馈!
第一个问题,https://detail.tmall.com/item.htm?id=638356883124&sku_properties=20509:389276485,我这边重复试验没问题,可能是环境问题,电脑运行速度的快慢影响代码执行的时机,后续慢慢提升稳定性;
第二个问题,我这边是能够看到红色打勾的图形的,可能是我增加了背景色的原因,现在删掉,后续如果还存在这个问题麻烦再反馈给我;
第三个问题,是个边界测试没有覆盖到的BUG,已修复,请升级2.1版本;
第四个问题,这类商品每次切换种类都会刷新整个页面,究其原因就是每次页面只返回了当前选中的这个商品的价格信息,没有返回其他商品的价格,暂时没办法解决,后续有时间再看看。

§
Posted: 04.06.2021.

部分页面,图标及文字会出现重叠的问题。
测试链接:
https://detail.tmall.com/item.htm?id=44492593861&skuId=3164744054268

§
Posted: 04.06.2021.
Edited: 04.06.2021.

像这种商品属性,既有文字又有图形的,有图形的文字与没图形的首个文字没能对齐,而且这个页面的字体样式跟天猫的并不统一。

EinskangAuthor
§
Posted: 05.06.2021.

已经修复,请更新2.2版本。

§
Posted: 05.06.2021.

针对文字头部无法对齐的情况,建议在taobao下样式添加这样一段内容:
#detail .tb-key .tb-prop .tb-img .tb-txt span {
margin: 35px !important;
}
而在tianmao则是这段:
.J_TSaleProp.tb-img li.tb-txt a span{
margin-left: -5px !important;
}
.J_TSaleProp:not([class*="tb-img"]) li a span {
margin-left: -9px !important;
}

测试链接:
https://item.taobao.com/item.htm?id=43915467229
https://detail.tmall.com/item.htm?id=40893713217
https://detail.tmall.com/item.htm?id=603253694386
https://detail.tmall.com/item.htm?id=574140777819

另外,像天猫超市没有效果,测试链接:https://chaoshi.detail.tmall.com/item.htm?id=610291958468

§
Posted: 06.06.2021.

上一楼的margin: 35px应该改为margin-left: 35px

EinskangAuthor
§
Posted: 09.06.2021.

感谢反馈。
针对文字头部无法对齐的情况,你提供的样式表有些边际条件展示效果不好,还请继续完善。
针对天猫超市没有效果的情况,天猫超市的页面链接与一般的天猫商品页面链接不一样,现在已经包含进去。

另外你提供的这个天猫超市的商品,与上面我回复你的第四个问题相同,“这类商品每次切换种类都会刷新整个页面,究其原因就是每次页面只返回了当前选中的这个商品的价格信息,没有返回其他商品的价格,暂时没办法解决,后续有时间再看看。”

这是你提供的样式表在你提供的天猫超市页面的显示方式。

§
Posted: 09.06.2021.

除了使用你的脚本,我自己另外弄了个样式搭配,具体样式是这样的,效果如图:

@-moz-document domain("detail.tmall.com") {
.tb-prop li a:hover,
.tb-prop li.tb-selected a,
.tb-prop li.tb-selected a:hover,
.tm-bundle-dialog .bundle-items .bundle-item .tm-meta li.tb-selected a,
.tm-bundle-dialog .bundle-items .bundle-item .tm-meta li.tb-selected a:hover,
#detail .tb-sku .tm-relate-list .tm-relate-current span,
#detail .tb-sku .tm-relate-list a:hover {
border: 2px solid #FF0036!important;
margin: 0!important;
}
.tb-prop li a,
#detail .tb-sku .tm-relate-list li a,
#detail .tb-sku .tm-relate-list li span {
border: 2px solid rgba(184, 183, 189, 0.4) !important;
margin: 0!important;
}
#detail .tb-property .tb-key li.tb-out-of-stock a,
#detail .tb-property .tb-key li.tb-out-of-stock a:hover {
border: 2px dashed rgba(184, 183, 189, 0.4)!important;
margin: 0!important;
}
.tm-relate-list > li > a,
.tm-relate-list > li > span,
.J_TSaleProp > li > a > span {
font-size: 14px !important;
}
.tb-prop .tb-selected i {
bottom: 1px !important;
right: 1px !important;
}
.J_TSaleProp.tb-img li.tb-txt a span{
margin-left: -5px !important;
}
.J_TSaleProp:not([class*="tb-img"]) li a span {
margin-left: -9px !important;
}
}

@-moz-document domain("item.taobao.com") {
#detail .tb-key .tb-prop .tb-img .tb-selected:not([class*="tb-txt"]) a,
#detail .tb-key .tb-prop .tb-img li:not([class*="tb-txt"]) a,
#detail .tb-key .tb-prop .tb-img li:not([class*="tb-txt"]) a:hover {
padding: 1px !important;
}
#detail .tb-key .tb-prop li:not([class*="tb-out-of-stock"]):not([class*="tb-selected"]) a {
border: 2px solid #DCDCDC !important;
}
#detail .tb-key .tb-prop li a {
padding: 2px 5px !important;
}
#detail .tb-key .tb-prop li:not([class*="tb-out-of-stock"]) a:hover,
#detail .tb-key .tb-prop .tb-img .tb-selected a {
border: 2px solid #F40 !important;
}
#detail .tb-key .tb-prop .tb-img .tb-txt a {
padding: 0px 6px !important;
}
#detail .tb-key .tb-prop .tb-out-of-stock a,
#detail .tb-key .tb-prop .tb-out-of-stock a:hover {
border: 2px dashed #DEDEDE;
padding: 2px 5px !important;
}
.tb-other-discount-content .J_coin {
height: 25px !important
}
.J_TSaleProp > li > a > span {
font-size: 14px !important;
}
#detail .tb-key .tb-prop .tb-img .tb-txt span {
margin-left: 35px !important;
}
}

Post reply

Sign in to post a reply.