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

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

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

接著只需將彈出框的 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);
 

教學

相關文章