Nút Gọi Rung Ở Góc Màn Hình Cho Opencart

Chào bạn, mình vừa viết thêm một Module thủ công cho Opencart để tạo nút hotline rung lắc dính ở góc màn hình kể cả cuộn chuột thì nó vẫn dính 1 chỗ.

Hướng dẫn thêm Robots.txt cho Opencart 3
Cấu hình gửi mail cho Opencart sử dụng Gmail chuẩn nhất
Hướng dẫn cách bật seo URL trong Opencart 3

Chào bạn, mình vừa viết thêm một Module thủ công cho Opencart để tạo nút hotline rung lắc dính ở góc màn hình kể cả cuộn chuột thì nó vẫn dính 1 chỗ. Module có tên là Hotline Phone Ring. Dành cho các trang web cần thúc đẩy khách hàng gọi điện thoại.

Cái rung rung này thực chất là mình chuyển từ Plugin bên WP qua Opencart. Plugin WP của tác giả Nam NCN

Hiển thị trên mobile nó sẽ chỉ còn nút icon như thế này:

Và bây giờ là hướng dẫn thêm nút gọi vô website sử dụng mã nguồn Opencart. Ở đây mình xin hướng dẫn trên Opencart 3
Bước 1: Mở file footer.twig theo đường dẫn sau:
/home/usernamehost/tenmiencuaban.com/catalog/view/theme/default/template/common/footer.twig
Bước 2: Chèn CSS trước thẻ </body>

<style>




.hotline-phone-ring-wrap {




  position: fixed;




  bottom: 0;




  left: 0;




}








.hotline-phone-ring {




  position: relative;




  visibility: visible;




  background-color: transparent;




  width: 110px;




  height: 110px;




  cursor: pointer;




  z-index: 11;




  -webkit-backface-visibility: hidden;




  -webkit-transform: translateZ(0);




  transition: visibility .5s;




  left: 0;




  bottom: 0;




  display: block;




}








.hotline-phone-ring-circle {




 width: 85px;




  height: 85px;




  top: 10px;




  left: 10px;




  position: absolute;




  background-color: transparent;




  border-radius: 100%;




  border: 2px solid #e60808;




  -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;




  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;




  transition: all .5s;




  -webkit-transform-origin: 50% 50%;




  -ms-transform-origin: 50% 50%;




  transform-origin: 50% 50%;




  opacity: 0.5;




}








.hotline-phone-ring-circle-fill {




 width: 55px;




  height: 55px;




  top: 26px;




  left: 26px;




  position: absolute;




  background-color: rgba(230, 8, 8, 0.7);




  border-radius: 100%;




  border: 2px solid transparent;




  -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;




  animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;




  transition: all .5s;




  -webkit-transform-origin: 50% 50%;




  -ms-transform-origin: 50% 50%;




  transform-origin: 50% 50%;




}








.hotline-phone-ring-img-circle {




 background-color: #e60808;




 width: 33px;




  height: 33px;




  top: 37px;




  left: 37px;




  position: absolute;




  background-size: 20px;




  border-radius: 100%;




  border: 2px solid transparent;




  -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;




  animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;




  -webkit-transform-origin: 50% 50%;




  -ms-transform-origin: 50% 50%;




  transform-origin: 50% 50%;




  display: -webkit-box;




  display: -webkit-flex;




  display: -ms-flexbox;




  display: flex;




  align-items: center;




  justify-content: center;




}








.hotline-phone-ring-img-circle .pps-btn-img {




 display: -webkit-box;




  display: -webkit-flex;




  display: -ms-flexbox;




  display: flex;




}








.hotline-phone-ring-img-circle .pps-btn-img img {




 width: 20px;




 height: 20px;




}








.hotline-bar {




  position: absolute;




  background: #E88A25;




  background: -webkit-linear-gradient(left, #e88a25, #d40000);




  background: -o-linear-gradient(right, #e88a25, #d40000);




  background: -moz-linear-gradient(right, #e88a25, #d40000);




  background: linear-gradient(to right, #e88a25, #d40000);




  height: 40px;




  width: 200px;




  line-height: 40px;




  border-radius: 3px;




  padding: 0 10px;




  background-size: 100%;




  cursor: pointer;




  transition: all 0.8s;




  -webkit-transition: all 0.8s;




  z-index: 9;




  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);




  border-radius: 50px !important;




  border: 2px solid white;




  /* width: 175px !important; */




  left: 33px;




  bottom: 37px;




}








.hotline-bar > a {




  color: #fff;




  text-decoration: none;




  font-size: 15px;




  font-weight: bold;




  text-indent: 50px;




  display: block;




  letter-spacing: 1px;




  line-height: 38px;




  font-family: Arial;




}








.hotline-bar > a:hover,




.hotline-bar > a:active {




  color: #fff;




}








@-webkit-keyframes phonering-alo-circle-anim {




  0% {




    -webkit-transform: rotate(0) scale(0.5) skew(1deg);




    -webkit-opacity: 0.1;




  }




  30% {




    -webkit-transform: rotate(0) scale(0.7) skew(1deg);




    -webkit-opacity: 0.5;




  }




  100% {




    -webkit-transform: rotate(0) scale(1) skew(1deg);




    -webkit-opacity: 0.1;




  }




}




@-webkit-keyframes phonering-alo-circle-fill-anim {




  0% {




    -webkit-transform: rotate(0) scale(0.7) skew(1deg);




    opacity: 0.6;




  }




  50% {




    -webkit-transform: rotate(0) scale(1) skew(1deg);




    opacity: 0.6;




  }




  100% {




    -webkit-transform: rotate(0) scale(0.7) skew(1deg);




    opacity: 0.6;




  }




}




@-webkit-keyframes phonering-alo-circle-img-anim {




  0% {




    -webkit-transform: rotate(0) scale(1) skew(1deg);




  }




  10% {




    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);




  }




  20% {




    -webkit-transform: rotate(25deg) scale(1) skew(1deg);




  }




  30% {




    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);




  }




  40% {




    -webkit-transform: rotate(25deg) scale(1) skew(1deg);




  }




  50% {




    -webkit-transform: rotate(0) scale(1) skew(1deg);




  }




  100% {




    -webkit-transform: rotate(0) scale(1) skew(1deg);




  }




}








@media (max-width: 768px) {




  .hotline-bar {




    display: none;




  }




}    




</style>

Bước 3: Chèn code ngay sau css vừa thêm ở bước 2

<div class="hotline-phone-ring-wrap">


<div class="hotline-phone-ring">


    <div class="hotline-phone-ring-circle"></div>


    <div class="hotline-phone-ring-circle-fill"></div>


    <div class="hotline-phone-ring-img-circle">


      <a href="tel:0902428693" class="pps-btn-img">


        <img src="https://doannguyen.net/wp-content/plugins/hotline-phone-ring/assets/images/icon.png" alt="Số điện thoại" width="50" />


      </a>


    </div>


  </div>


    <div class="hotline-bar">


    <a href="tel:0902428693">


      <span class="text-hotline">0902428693</span>


    </a>


  </div>


  </div>



Nhớ xóa cache trong ( storage/cache) hoặc xem hướng dẫn xóa cache bằng nhều cách

Lưu ý: nhớ thay đường dẫn file “icon.png” và thay số điện thoại của bạn


Chúc bạn thành công!!

COMMENTS

WORDPRESS: 0
DISQUS: 0