登入 註冊
 

讓 ECSHOP 對話框更漂亮
閱讀 52 次 0 會員 與 1 訪客 正在閱讀本文。
七月 13, 2019, 03:36:36 下午

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




    請先https://github.com/t4t5/sweetalert/archive/master.zip 下載 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);
   



記錄