艺灵设计

全部文章
×

制作淘宝天猫店铺中自定义购物车代码

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-12-29 08:50:16 - 阅: - 评:0 - 积分:0

好久没有发布教程文章了,今天继上次分享的《制作天猫淘宝店铺中单个宝贝收藏代码》教程后,再来发布篇《淘宝天猫店铺中自定义购物车代码》教程文章。

在分享前先来看下这个购物车代码的效果图:
 

类似这样的效果大家应该不陌生吧。不得不说,这个功能对用户体验非学友好!用户可以直接在当前页面点击购物车图片就可以在弹出层中选择尺码、颜色及件数等其它选项,然后直接点击“加入购物车”即可。如果不想购买此宝贝,还可以点击右上角的x关掉弹出层。是不是很方便?

对淘宝比较熟悉的同学会发现详情页有一个“加入购物车”按钮,但不幸的是:跟上节课一样,右键复制不了代码......原因你懂的。如图:
 

既然复制不了链接,那怎么制作这个代码呢?

前面说过,这些技巧性功能特效都是我从设计师模板中研究出来的。不卖关子了,直接上代码比较明了。

  1. <a class="J_CartPluginTrigger" href="宝贝链接"><!--自定义内容--> </a>

注意上面代码中的红色class类名J_CartPluginTrigger,这个要比昨天的简单,不用替换id,只需要添加此类class名即可!

这么简单?!我和我的小伙伴们都惊呆了!

实话告诉你,就这么简单,不服不行。最后来一张应用到淘宝店铺中的效果图:
 

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2014-12-29/237.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 制作淘宝店铺加入购物车代码 天猫店铺自定义购物车源码 淘宝天猫店铺装修教程 J_CartPluginTrigger

上一篇: 制作天猫淘宝店铺中单个宝贝收藏代码   下一篇: 制作淘宝天猫店铺中宝贝分享代码

评论区