Liên hệ quảng cáo
Liên hệ quảng cáo

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ỗ. 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!!







Nội dung chính
      Bài đăng mới hơn Bài đăng cũ hơn
      0 Nhận xét