H5商城中增加自定義HTML，實現個性化商城首頁

 2021年4月7日  6082  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>