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

延誉宝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>