H5商城中增加自定义HTML,实现个性化商城首页

2021年4月7日   5274   8

延誉宝SaaS云软件为电商和会员系统搭建提供了丰富的所见即所得的设置选项,商城运营推广过程中,免费商城系统为基础会员提供了H5商城和小程序商城模板,也是商城APP的开发基础,不同平台共用一个后台。

延誉宝SaaS云软件为电商和会员系统搭建提供了丰富的所见即所得的设置选项,特使是对于商城首页的排版设计,除了基础设置项之外,商城运营推广过程中,还可以通过增加自定义HTML代码,让H5商城实现个性化首页定制。

设置路径: 延誉宝SaaS云>>商城设置>>商城模板>>首页模板选项>>HTML代码内容

传送门:一键直达 https://yanyubao.tseo.cn/Supplier/Index/shop_index/setting_type/index_option.html

前提:启用模板26 。

“通版商城V2”的富媒体组件也支持HTML代码的二次渲染,除了JavaScript代码,其他部分都兼容,在APP和小程序中都可以自由定制欢迎界面。

可以在这里增加自定义HTML代码,实现商城首页的个性化展示。

以下是部分设置案例推荐:

示例01:实现商城首页任意排版

可以通过HTML代码中引入图片,实现商城首页的任意排版。考虑SEO因素,也可以直接嵌入文本内容。

代码如下,因为要做到多张图片的无缝拼接,所以这里代码中不要换行:

<img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN018L30uZ1CXGGAgNl0v_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01rVO30Z1CXGGFtVdBO_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i1/791260090/O1CN01PzE6LJ1CXGGNq77fS_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i1/791260090/O1CN01OnQPYn1CXGGBZ1yAe_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN018oJlXL1CXGGCm4aYt_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01xzGJ8W1CXGG8aHgXZ_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN01RGs74b1CXGGAgPETG_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01CAZzZM1CXGGBhc58P_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01j9IpCL1CXGG2u40Rk_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i4/791260090/O1CN01aGyghJ1CXGGESqBhz_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01L7Zx7v1CXGGGCc163_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i3/791260090/O1CN01olDXqc1CXGGB3xThq_!!791260090.png” alt=”” style=”width:100%;” /><img src=”https://img.alicdn.com/imgextra/i2/791260090/O1CN01QOn6Zp1CXGGB3ysyA_!!791260090.png” alt=”” style=”width:100%;” />

示例02:实现商城首页的跑马灯

本案例实现在商城的顶部实现跑马灯效果,展示最近成交的订单信息,是商城促销的一种方式。

代码如下:

<div style="display: none;position: absolute;
 top: 50px;
 left: 20px; z-index:1000;color:#fff;" id='divTestDisplay'>我要显示的文字</div> 
<script type="text/javascript">
var ad_list =['新订单来自FR.A 4分钟前~',
'新订单 来自你来自何方 7分钟前',
'新订单 来自玲玲玲玲A 9分钟前'];

console.log(ad_list);

window.onload = function () {
 setTimeout(show, 500);
 }
 //显示
 function show() {

// 获取随机数
var rand = Math.floor( Math.random() * ad_list.length );

console.log('====>>>'+rand );



var data_str = ad_list[rand];
console.log('====>>>'+data_str );

document.getElementById('divTestDisplay').innerHTML = data_str;
 document.getElementById('divTestDisplay').style.display = "block";
 setTimeout(hide, 1000);
 }
 //隐藏
 function hide() {
 document.getElementById('divTestDisplay').style.display = "none";
 setTimeout(show, 1000);
 }
</script>

更多示例:持续更新中

免费商城系统为基础会员提供了H5商城和小程序商城模板,也是商城APP的开发基础,不同平台共用一个后台。跳转原文地址:http://www.abot.cn/2468.html   持续关注后续商城自定义HTML精彩案例更新。

 创建于2021年3月3日    由admin于2021年4月7日最后编辑   5274   8

微信扫一扫,小程序中发表评论!
免费手机网站模板 X
小程序在线为您服务!