首頁 > ECSHOP 相關文章與模板 > Ecshop 綜合文章 > ECSHOP4-自定義頁首主廣告

ECSHOP4 頁首主廣告與之前的版本用法不太一樣，是由廣告位設定的，但使用起來覺得不太OK，特別是圖片的尺寸是固定的，很難控制隨視窗大小縮放，太大的圖片會拖慢網要載入速度，太小的圖片則會造成清晰度不足，因此我還是喜歡用 OwlCarousel2 這個插件，可以根據廣告位置的大小自動縮放尺寸，可指定大小螢幕同時顯示與滾動張數，支援手指潑動...

1、編輯跟目錄的 index.php 找到

    /* 首页主广告设置 */
    $smarty->assign('index_ad',     $_CFG['index_ad']);

改為

    /* 首页主广告设置 */
	/*
    $smarty->assign('index_ad',     $_CFG['index_ad']);
	*/
	/* 首頁主廣告設置 */
    $sql  = 'SELECT a.ad_id, a.position_id, a.media_type, a.ad_link, a.ad_code, a.ad_name, p.position_style, RAND() AS rnd FROM ' . $ecs->table('ad') . ' AS a LEFT JOIN ' . $ecs->table('ad_position') . ' AS p ON a.position_id = p.position_id WHERE enabled = 1 AND start_time <= "' . gmtime() . '" AND end_time >= "' . gmtime() . '" AND a.position_id = 1 ORDER BY rnd LIMIT 5';
	$res = $db->GetAll($sql);
	$ads = array();
	$position_style = '';
	foreach ($res AS $row)
	{
		$position_style = $row['position_style'];
		if ($row['media_type'] == 0) {
			$src = (strpos($row['ad_code'], 'https://') === false && strpos($row['ad_code'], 'https://') === false) ? DATA_DIR . "/afficheimg/$row[ad_code]" : $row['ad_code'];
			$ads[] = '<a href="affiche.php?ad_id='.$row[ad_id].'&uri=' .urlencode($row["ad_link"]).'" target="_blank"><img src="'.$src.'" alt="' .$row['ad_name'].'"  /><div class="text">'.$row['ad_name'].'</div></a>';
		}
	}
	$smarty->assign('ads', $ads);
	/* 首頁主廣告設置 */	

2、為了避免模板重寫時會覆蓋掉，請不要將庫項目放在可編輯區內

<!-- TemplateBeginEditable name="首頁主廣告" -->
.....這是可編輯區...
<!-- TemplateEndEditable -->

將以下的代碼放在首頁主廣告的區塊內即可

<!-- #BeginLibraryItem "/library/index_ad.lbi" --><!-- #EndLibraryItem -->

3、登入後台的【廣告設置】【廣告位置】【新增廣告位】，正常情況下，在安裝系統時就已經有ID為1的廣告位了
廣告位名稱(1)是給你識別用的，不可留空
廣告位寬度(2)、廣告位高度(3)，前台交由JS控制，因此隨便填個數字即可
廣告位描述(4)、廣告位模板(5)，預設即可
點擊圖片可以放大檢視


4、登入後台的【廣告設置】【廣告列表】【新增廣告】，雖然在安裝系統時就已經有預設的廣告，你也可以隨時刪除或更改
廣告名稱(1)，廣告名稱除作為辨別多個廣告條目之用，也會當作廣告的描述顯示在廣告中
廣告位置(2)，選取你在【廣告位置】新增的廣告位
開始日期(3)、結束日期(4)，廣告圖片只在開始與結束之間顯示
廣告連結(5)，當訪客點擊廣告時要連結的網頁
上傳該廣告的圖片檔案(6)，按【瀏覽】上傳一張做為輪播的廣告圖片，圖片網址(7)或者你也可以指定一個遠端的圖片網址做為廣告的圖片，每張廣告圖片的尺寸應該相同
是否開啟(8)，開啟或關閉廣告圖片顯示
手機端輪播圖顯示(9)，開啟後會在手機端以輪播圖的方式顯示
廣告聯絡人(10)、聯絡人Email(11)、聯絡電話(12)，這裡可以記錄廣告委託者資訊
點擊圖片可以放大檢視


5、將以下內容存成 index_ad.lbi 上傳至模板的 library 目錄內，在上傳之前你可以用文字編輯器修改為你想要的內容，例如：切換時間或換圖速度、圖片顯示張數...

<link href="{$public}css/owl.carousel.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$public}css/owl.theme.default.min.css" rel="stylesheet" type="text/css" media="all" />
<style>
	.owl-carousel .item .text {
		position: absolute;
		bottom:0;
		left: 0;
		font-size: 1.1rem;
		color: #fff;
		text-shadow: 1px 1px #000;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		padding: 3px 10px;
	}
</style>
<div class="owl-carousel">
	<!--{foreach from=$ads item=ad}-->
	<div class="item" style="position: relative;">
		{$ad}
	</div>
	<!--{/foreach}-->
</div>
<script type="text/javascript" src="{$public}js/owl.carousel.min.js"></script>
<script type="text/javascript">
	$(window).load(function() {
		// 輪播設定
		$(".owl-carousel").owlCarousel({
			loop: true, // 是否無限循環
			margin: 30, // 與右邊圖片的距離
			nav: true, // 導航文字
			autoplay:true, // 自動輪播
			autoplayTimeout: 5000, // 切換時間
			smartSpeed: 1500, //換圖速度
			autoplayHoverPause: true, // 滑鼠經過時暫停
			navText : ['<i class="bi bi-chevron-double-left"></i>','<i class="bi bi-chevron-double-right"></i>'], 	//HTML導航箭頭
			dots: false, 	//顯示圓點導航按鈕
			// 依寬度顯示不同數量
			responsive:{
				0:{
					items:1 // 手機顯示一張
				},
				768:{
					items:1 // 寬度768px以上顯示一張
				},
				1200:{
					items:2 // 寬度1200px以上顯示兩張
				}
			}
		});
		var owl = $(".owl-carousel").height();
		var prev = $(".owl-prev").height();
		$(".owl-prev, .owl-next").css("top", (owl-prev)/2);
	});
</script>

{$public}是指定模板資源的資料夾(模板目錄/public/*)，用來放置模板用到的CSS、JS、圖片或其他插件檔案，可以在 includes/lib_main.php 約 1676 行 $smarty->assign('searchkeywords', $searchkeywords); 之後加入：

$smarty->assign('public', 'themes/' . $GLOBALS['_CFG']['template'] . '/public/');

DEMO

如果你對ECSHOP4-自定義頁首主廣告 有任何問題請到討論區發帖。