目前位置: 首頁 > ECSHOP響應式模版 > 讓 ECSHOP 對話框更漂亮

讓 ECSHOP 對話框更漂亮 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2017-08-11

你還在使用傳統的對框嗎?是不是覺得有點醜了,用 sweetaler 來美化一下即可,在 ECSHOP 中對話框還真不少,你可以針對長使用的頁面修改即可(如商品詳情頁的加入購物車與收藏最愛),使用方法極為簡單,由於不依賴 jquery 因此不必擔心衝突問題...



請先下載 sweetaler ,解壓縮之後將 dist 目錄上傳至 ECSHOP 根目錄,然後編輯麼目錄的 library/page_header.lbi,在最前面加入:

  <script src="public/js/sweetalert.min.js"></script>
  <link rel="stylesheet" href="public/css/sweetalert.css">
  <script type="text/javascript">swal.setDefaults({confirmButtonText :	"確定" , cancelButtonText :	"取消"	}); </script>

 

接著只需將彈出框的 alert 改為 swal 即可 這是最簡單的修改,如果你希望有更多的呈現方式,請參考 這個頁面 的語法修改

對話框的語法多數藏在 JS 檔中,例如商品詳情頁的加入購物車與收藏最愛都是調用 common.js,因此你可以該檔中找到修改的地方:

      switch(result.confirm_type)
      {
        case '1' :
          		swal({
  title: "下一步?",
  text: result.message,
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  closeOnConfirm: false
},
function(){
  location.href = cart_url;
});
          break;
        case '2' :
          		swal({
  title: "下一步?",
  text: result.message,
  type: "info",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
 closeOnConfirm: true,
},
function(isConfirm){
  if (!isConfirm) {
	     location.href = cart_url;
  }
});
          break;
        case '3' :
          location.href = cart_url;
          break;
        default :
          break;
      }
........
 swal(result.message);
 

 



如需轉載請註明出處 : https://we-shop.net/article-322-%E8%AE%93+ECSHOP+%E5%B0%8D%E8%A9%B1%E6%A1%86%E6%9B%B4%E6%BC%82%E4%BA%AE.html
本站提供ECSHOP技術支援, 是網路開店最佳選擇

只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!