|
注意：内容涉及代码 务必先用空白页面演示无误后 再写入要用的页面 谨防出错
有赞自带的文本导航、图片导航页面
比较简单 比较单一
而让设计人员作导航图有比较麻烦
因此
我们特别做了一个万能的导航页面
适用于任何状况
后续也将逐步更新其他类型的页面
请多多注意帖子的最新更新内容及时间点
如有更新
将会在帖子标题出显示噢
先上效果图
可以扫描下方二维码看一下效果
是不是很美观呢？
我们看一下教程
第一步
登录有赞后台→店铺→微页面→新建微页面
选择空白模板
添加富文本
在右侧编辑框随意写些内容
第二步
在键盘上摁一下F12键
（以UC浏览器为例）
选择下图中右侧右上角的小箭头摁一下
移动至左侧编辑框内你刚才写入内容的地方
待内容指示颜色变了之后
鼠标左单击一下
这个时候你会看到
在右侧代码部分
会出现
<p>pp</p>的标记
选中该标记
点击右键选中图中示例
会出现一个编辑框
将代码复制进去即可噢
（复制到<p></p>之间）
复制进去之后，点击一下外面空白部分
在左侧编辑框之内便会看到导航列表
这个时候切记
再添加一个文本框之后
再上架
切记
代码下载地址：
可能有部分朋友不晓得如何修改代码部分
也有会修改的朋友
麻烦朋友们顶下帖子支持下
写代码不容易
只要帖子不沉
明天更新代码部分教程
并且
这个导航页面可以有各种升级小部件
多顶贴 多更新 -------------更新分割线----------------------------------------------------------------------------------------
下载安装之后，双击打开，将代码index.html文件拖拽进入编辑框
下图的样子
为了本地测试方便，建议大家下载一个谷歌浏览器
下载地址
使用起来很简单
将页面用谷歌浏览器打开
摁F12
然后点击下方图中的小手机的图标
就会看到页面在手机端的样子
为了大家往有赞后台复制的时候不至于出错
我在代码中加入了指示标签
如下图中
复制的时候，复制两个指示标签中间的内容
头部html标签不要复制
只复制div部分即可
由于列表模块个数不定
因此需要注意
在代码中我们已经加入了
<--！第一个-->这样的标记
如下图
第一个模块位置是死的，不要动
举个例子
假如你只需要3个模块
那么
把第三个往下都删除了就行
假如你需要30个模块
那么
你就需要复制模块了
复制的时候千万不要复制第一个
复制第二个
就是这个部分
上面截图中红框的代码
就是下图的模块
然后再说一下修改内容
不懂代码的尽量不要修改代码
容易错位
因为我们在写的时候也是经过很多测试
才找到了最适宜有赞的
修改内容仅需修改下图中部分即可
最后说一下修改头像
头像是需要上传有赞的
先登录有赞
点击店铺——我的文件——上传图片——图的链接
复制链接之后
将链接放置下图中位置
即完成了图片链接替换
【图片尽量用正方形 200*200大小】
------------更新分割线------------------------------------------------------
【8月22日更新回到顶部代码】 有的朋友的列表太长
从页面底部到顶部用手操不太方便
因此
我们更新了一个回到顶部代码
效果图如下
可以扫下方二维码查看效果
最新代码下载地址
-------更新分割线-------------------------------------------------------
【8月23日】更新
今天更新了客服悬浮框
如下图
扫下方二维码查看效果
这里存在一个问题
究竟用哪个软件充当客服的媒介
有的帖子是QQ
有的帖子是百度商桥
在这里我们用原生的有赞客服系统
即直接联系微信公众平台后台
这样是最省事最合理的选择
下面是教程
首先
登录有赞后台
设置—通用设置—联系卖家／在线客服 一定是开启状态
第二步
拿出手机 打开你的微信 进入你的有赞店铺
选择任意商品进入页面
在左下角可以看到“联系商家”的字样
点击一下
进入客服页面
点击右上角
选择“复制链接”
打开最新代码
找到“客服代码部分”
在下方的<a></a>标签中间
找到#
将链接替换即可
这样便完成了客服悬浮框
如何上传有赞后台见本帖子第一天内容
最新代码下载地址
为了方便交流
大家可以加我们微信
备注填写【有赞社区】
问题、需求都可以交流
PS：近期会更新一个多门店的导航页面 【带百度API定位导航功能+多城市列表功能】 看大家需要不需要 需要的话请留言或私信 关于功能拓展 大家也可以留言自己的需求噢
本帖最后由 哆咪-科技 于 2016-8-23 14:57 编辑 |
用手机打开
收藏
赞 2
···
回复
复制链接
新浪微博
QQ空间
微信扫码
赞 
回复
