Версия: Ocstore2.3

Тип модуля:для мобильных устройств

В течение минуты «загорается» и напоминает, чтобы пользователь может написать в Whatsapp. Напоминание закрывается по нажатию на кретстик

По нажатию на иконку происходит перенаправление на вотсаповскую форму

Телефон отправки сообщения и текст задаются настройками модуля в админке

Файлы модуля

Контроллер в админке

<?php
class ControllerExtensionModuleMobutpanel extends Controller {
	private $error = array();

	public function index() {
		$this->load->language('extension/module/mobutpanel');
		$this->load->model('extension/module');

		if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) {
			if (!isset($this->request->get['module_id'])) {
				$this->model_extension_module->addModule('mobutpanel', $this->request->post);
			} else {
				$this->model_extension_module->editModule($this->request->get['module_id'], $this->request->post);
			}
			// $this->session->data['success'] = $this->language->get('text_success');

			$this->response->redirect($this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=module', true));
		}


		$data['entry_phone'] = $this->language->get('entry_phone');
		$data['entry_message'] = $this->language->get('entry_message');
		$data['entry_status'] = $this->language->get('entry_status');
		$data['entry_name'] = $this->language->get('entry_name');

		$data['text_edit'] = $this->language->get('text_edit');
		$data['heading_title'] = $this->language->get('heading_title');
		$data['text_enabled'] = $this->language->get('text_enabled');
		$data['text_disabled'] = $this->language->get('text_disabled');

		$data['button_save'] = $this->language->get('button_save');
		$data['button_cancel'] = $this->language->get('button_cancel');

		if (isset($this->error['warning'])) {
			$data['error_warning'] = $this->error['warning'];
		} else {
			$data['error_warning'] = '';
		}
		if (isset($this->error['name'])) {
			$data['error_name'] = $this->error['name'];
		} else {
			$data['error_name'] = '';
		}

		if (isset($this->error['phone'])) {
			$data['error_phone'] = $this->error['phone'];
		} else {
			$data['error_phone'] = '';
		}		
		if (isset($this->error['message'])) {
			$data['error_message'] = $this->error['message'];
		} else {
			$data['error_message'] = '';
		}

		$data['breadcrumbs'] = array();

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_home'),
			'href' => $this->url->link('common/dashboard', 'token=' . $this->session->data['token'], true)
		);

		$data['breadcrumbs'][] = array(
			'text' => $this->language->get('text_extension'),
			'href' => $this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=module', true)
		);

		if (!isset($this->request->get['module_id'])) {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('extension/module/mobutpanel', 'token=' . $this->session->data['token'], true)
			);
		} else {
			$data['breadcrumbs'][] = array(
				'text' => $this->language->get('heading_title'),
				'href' => $this->url->link('extension/module/mobutpanel', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], true)
			);
		}


		if (!isset($this->request->get['module_id'])) {
			$data['action'] = $this->url->link('extension/module/mobutpanel', 'token=' . $this->session->data['token'], true);
		} else {
			$data['action'] = $this->url->link('extension/module/mobutpanel', 'token=' . $this->session->data['token'] . '&module_id=' . $this->request->get['module_id'], true);
		}

		$data['cancel'] = $this->url->link('extension/extension', 'token=' . $this->session->data['token'] . '&type=module', true);

		if (isset($this->request->get['module_id']) && ($this->request->server['REQUEST_METHOD'] != 'POST')) {
			$module_info = $this->model_extension_module->getModule($this->request->get['module_id']);
		}
		if (isset($this->request->post['name'])) {
			$data['name'] = $this->request->post['name'];
		} elseif (!empty($module_info)) {
			$data['name'] = $module_info['name'];
		} else {
			$data['name'] = '';
		}

		if (isset($this->request->post['phone'])) {
			$data['phone'] = $this->request->post['phone'];
		} elseif (!empty($module_info)) {
			$data['phone'] = $module_info['phone'];
		} else {
			$data['phone'] = '7';
		}		

		if (isset($this->request->post['message'])) {
			$data['message'] = $this->request->post['message'];
		} elseif (!empty($module_info)) {
			$data['message'] = $module_info['message'];
		} else {
			$data['message'] = 'Здравствуйте! Хочу получить консультацию.';
		}	

		if (isset($this->request->post['status'])) {
			$data['status'] = $this->request->post['status'];
		} elseif (!empty($module_info)) {
			$data['status'] = $module_info['status'];
		} else {
			$data['status'] = '';
		}

		$data['header'] = $this->load->controller('common/header');
		$data['column_left'] = $this->load->controller('common/column_left');
		$data['footer'] = $this->load->controller('common/footer');

		$this->response->setOutput($this->load->view('extension/module/mobutpanel', $data));
	}

	protected function validate() {
		if (!$this->user->hasPermission('modify', 'extension/module/mobutpanel')) {
			$this->error['warning'] = $this->language->get('error_permission');
		}
		if ((utf8_strlen($this->request->post['name']) < 3) || (utf8_strlen($this->request->post['name']) > 64)) {
			$this->error['name'] = $this->language->get('error_name');
		}
		if (!$this->request->post['phone']) {
			$this->error['phone'] = $this->language->get('error_phone');
		}		
		if (!$this->request->post['message']) {
			$this->error['message'] = $this->language->get('error_message');
		}

		return !$this->error;
	}
}

Вьюшка в админке

<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <button type="submit" form="form-special" data-toggle="tooltip" title="<?php echo $button_save; ?>" class="btn btn-primary"><i class="fa fa-save"></i></button>
        <a href="<?php echo $cancel; ?>" data-toggle="tooltip" title="<?php echo $button_cancel; ?>" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
      <ul class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
        <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
        <?php } ?>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <?php if ($error_warning) { ?>
    <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $error_warning; ?>
      <button type="button" class="close" data-dismiss="alert">×</button>
    </div>
    <?php } ?>
    <div class="panel panel-default">
      <div class="panel-body">
        <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-special" class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-name"><?php echo $entry_name; ?></label>
            <div class="col-sm-10">
              <input type="text" name="name" value="<?php echo $name; ?>" placeholder="<?php echo $entry_name; ?>" id="input-name" class="form-control" />
              <?php if ($error_name) { ?>
              <div class="text-danger"><?php echo $error_name; ?></div>
              <?php } ?>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-phone"><?php echo $entry_phone; ?></label>
            <div class="col-sm-10">
              <input type="text" name="phone" value="<?php echo $phone; ?>" placeholder="<?php echo $entry_phone; ?>" id="input-phone" class="form-control" />
              <?php if ($error_phone) { ?>
              <div class="text-danger"><?php echo $error_phone; ?></div>
              <?php } ?>
            </div>
          </div>          
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-phone"><?php echo $entry_message; ?></label>
            <div class="col-sm-10">
              <input type="text" name="message" value="<?php echo $message; ?>" placeholder="<?php echo $entry_message; ?>" id="input-phone" class="form-control" />
              <?php if ($error_message) { ?>
              <div class="text-danger"><?php echo $error_message; ?></div>
              <?php } ?>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="input-status"><?php echo $entry_status; ?></label>
            <div class="col-sm-10">
              <select name="status" id="input-status" class="form-control">
                <?php if ($status) { ?>
                <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                <option value="0"><?php echo $text_disabled; ?></option>
                <?php } else { ?>
                <option value="1"><?php echo $text_enabled; ?></option>
                <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                <?php } ?>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<?php echo $footer; ?>

Контроллер на фронтенде

<?php
class ControllerExtensionModuleMobutpanel extends Controller {
	public function index($setting) {
			$data['phone'] = $setting['phone'];
			$data['message'] = $setting['message'];
			if($this->isMobile()){
			    return $this->load->view('extension/module/mobutpanel', $data);
			}
			
		}

		public function isMobile() { 

			return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", /*$_SERVER["HTTP_USER_AGENT"]*/$this->request->server['HTTP_USER_AGENT']);
			}
	}

Вьюшка на фронтенде

<style>

.callbackkiller {
  box-sizing: content-box !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  transform-origin: 50% 50% 0px;
  -webkit-box-shadow: 0 3px 12px rgba(0,0,0,.15);
  -moz-box-shadow: 0 3px 12px rgba(0,0,0,.15);
  box-shadow: 0px 3px 12px rgba(0,0,0,0.15);
  white-space: normal;
}

.close {
  text-shadow: none;
}

.callbackkiller, .callbackkiller * {
  color: #333 !important;
  font-family: CBKOpenSans,CBKRobotoLight,sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}
.cbk-phone, .cbk-phone:hover {
  background-color: transparent !important;
  bottom: 5%;
  border-radius: 60px !important;
  -webkit-border-radius: 60px !important;
  color: #fff;
  display: block;
  font-size: 22px !important;
  height: 120px !important;
  left: auto;
  outline: none !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  right: 20%;
  text-decoration: none;
  top: auto;
  width: 120px !important;
  z-index: 9999 !important;
  transition: none;
  -webkit-transition: none;
}
.cbk-phone-pulse, .cbk-phone-waves, .cbk-phone-wild, .multi-button-waves {
  overflow: visible !important;
}
.callbackkiller.whatsapp {
  display: none !important;
}
/* @media all and (max-width:767px) */
.callbackkiller.whatsapp {
  display: block !important;
}
.cbk-phone.cbk-phone-xs, .cbk-phone.cbk-phone-xs:hover {
  height: 60px !important;
  width: 60px !important;
  position: absolute;
}
/* @media all and (max-width:767px) */
.callbackkiller.cbk-phone.cbk-phone-pulse {
  --box-shadow-color:  0 9px 16px rgba(19,156,20,.6);
}
.callbackkiller.cbk-phone.cbk-phone-pulse {
  --box-shadow-color: 0 9px 16px rgba(255,34,65,.6);
  -webkit-animation: envybox-phone-pulse 12s infinite ease-in;
  -moz-animation: envybox-phone-pulse 12s infinite ease-in;
  -ms-animation: envybox-phone-pulse 12s infinite ease-in;
  -o-animation: envybox-phone-pulse 12s infinite ease-in;
  animation: envybox-phone-pulse 12s infinite ease-in;
  -webkit-backface-visibility: visible !important;
}
.callbackkiller.cbk-phone.cbk-phone-pulse {
  --box-shadow-color:  0 9px 16px rgba(19,156,20,1) !important;
}
/* @media all and (max-width:767px) */
.callbackkiller.whatsapp.cbk-phone.cbk-phone-xs {
  height: 57px !important;
  width: 57px !important;
  display: block;
  position: fixed;
  bottom: 10%;
  right: 4%;
  transform: scale(1);
  z-index: 5;
}

ul.tabs li span, .front_slider_wrapp .extended_pagination span, a, a span {
  -webkit-transition: color ease-out 0.07s;
  -moz-transition: color ease-out 0.07s;
  -o-transition: color ease-out 0.07s;
  transition: color ease-out 0.07s;
}
/* @media all and (max-width:767px) */
.callbackkiller .whatsapp-notifier {
  display: block;
  width: 227px;
  position: relative;
  top: 30px;
  left: -188px;
  overflow: hidden;
}
/* @media all and (max-width:767px) */
.callbackkiller .whatsapp-notifier__inner-wrapp {
  position: relative;
  background: #139c14;
  padding: 5px 5px 5px 15px;
  border-radius: 13px;
  right: -250px;
}
.alert .alert-link, .close {
  font-weight: 700;
}
.close, .list-group-item > .badge {
  float: right;
}
.close {
  font-size: 21px;
  line-height: 1;
  color: #000;
  text-shadow: 0px 1px 0px #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.callbackkiller span {
  -webkit-transform: none !important;
  transform: none !important;
}
/* @media all and (max-width:767px) */
.callbackkiller .whatsapp-notifier__close {
  z-index: 999;
  opacity: 1;
  font-size: 18px;
  color: #aeaeae !important;
  width: 25px;
  height: 24px;
  text-align: center;
  position: relative;
  right: 195px;
  top: -2px;
}
/* @media all and (max-width:767px) */
.callbackkiller .whatsapp-notifier__body {
  color: #fff !important;
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  text-align: center;
}
/* @media all and (max-width:767px) */
.callbackkiller .whatsapp__message-count {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff360e;
  font-size: 12px;
  line-height: 21px;
  color: #fff !important;
  text-align: center;
  z-index: 1000000;
  right: 0px;
  display: none;
}
.cbk-phone .cbk-phone-bgr {
  background-color: #f44336;
  border-radius: 60px !important;
  -webkit-border-radius: 60px !important;
  height: 100% !important;
  opacity: 0.95;
  width: 100% !important;
}
.cbk-phone .cbk-phone-bgr, .cbk-phone .cbk-phone-phone {
  left: 0px !important;
  position: absolute !important;
  top: 0px !important;
  z-index: 9997 !important;
}
.cbk-phone .cbk-phone-bgr {
  background-color: rgba(19, 156, 20, 1) !important;
}
.callbackkiller.cbk-phone.cbk-phone-pulse .cbk-phone-circle {
  background-color: rgba(19, 156, 20, 1) !important;
}
/* @media all and (max-width:767px) */
.callbackkiller.whatsapp.cbk-phone .cbk-phone-bgr, .callbackkiller.whatsapp.cbk-phone.cbk-phone-pulse .cbk-phone-circle, .callbackkiller.whatsapp.cbk-phone.cbk-phone-pulse .cbk-phone-second_circle, .callbackkiller.whatsapp.cbk-phone.cbk-phone-pulse .cbk-phone-third_circle {
  background-color: rgba(19, 156, 20, 1) !important;
}
.cbk-multi-button-circle, .cbk-phone-circle {
  transform-origin: center center 0px !important;
  -moz-transform-origin: center center !important;
  -webkit-transform-origin: center center 0px !important;
  -o-transform-origin: center center !important;
  -ms-transform-origin: center center !important;
}
.cbk-phone-pulse .cbk-phone-circle {
  display: none;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0;
  animation-play-state: running;
  animation-duration: 12s;
  animation-name: envybox-circle-pulse;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  background-color: #a71933;
  pointer-events: none;
}
.callbackkiller.cbk-phone.cbk-phone-pulse .cbk-phone-circle {
  display: block;
  -webkit-backface-visibility: visible !important;
}
.cbk-phone .cbk-phone-phone {
  height: 60px !important;
  margin: 24px;
  width: 60px !important;
}
.cbk-phone .cbk-phone-content div {
  display: block;
  opacity: 0;
  position: absolute !important;
  -webkit-transform-origin: center center 0px;
  transform-origin: center center 0px;
  transform: perspective(400px) rotateY(-180deg) scale(0.4);
  -moz-transform: perspective(400px) rotateY(-180deg) scale(.4);
  -ms-transform: perspective(400px) rotateY(-180deg) scale(.4);
  -webkit-transform: perspective(400px) rotateY(-180deg) scale(0.4);
  -o-transform: perspective(400px) rotateY(-180deg) scale(.4);
  -khtml-transform: perspective(400px) rotateY(-180deg) scale(.4);
  -webkit-transition: all .8s cubic-bezier(.19,1,.22,1);
  -moz-transition: all .8s cubic-bezier(.19,1,.22,1);
  -o-transition: all .8s cubic-bezier(.19,1,.22,1);
  transition: all .8s cubic-bezier(.19,1,.22,1);
}
.cbk-phone.cbk-phone-xs .cbk-phone-phone {
  height: 30px !important;
  margin: 12px;
  width: 30px !important;
}
.cbk-phone .cbk-phone-content div.cbk-rotate-icon {
  display: block !important;
  opacity: 1 !important;
  transform: perspective(400px) rotateY(0deg) scale(1) !important;
  -moz-transform: perspective(400px) rotateY(0) scale(1) !important;
  -ms-transform: perspective(400px) rotateY(0) scale(1) !important;
  -webkit-transform: perspective(400px) rotateY(0deg) scale(1) !important;
  -o-transform: perspective(400px) rotateY(0) scale(1) !important;
  -khtml-transform: perspective(400px) rotateY(0) scale(1) !important;
  -webkit-transform-style: preserve-3d !important;
  -ms-transform-style: preserve-3d !important;
  -o-transform-style: preserve-3d !important;
  transform-style: preserve-3d !important;
  -webkit-transition: opacity 3s cubic-bezier(.19,1,.22,1);
}
/* @media all and (max-width:767px) */
.callbackkiller.whatsapp.cbk-phone.cbk-phone-xs .cbk-phone-phone {
  margin: 5px 0 0 6px;
  height: 45px !important;
  width: 45px !important;
}
/* @media all and (max-width:767px) */
.callbackkiller.whatsapp.cbk-phone.cbk-phone-xs .cbk-phone-phone img {
  width: 100%;
}
</style>


<span class="callbackkiller whatsapp cbk-phone cbk-phone-xs cbk-phone-pulse cbk-phone-text-none"><a rel="nofollow" href="https://api.whatsapp.com/send?phone=<?=$phone;?>&text=<?= $message; ?>"><div class="whatsapp__message-count">1</div><div class="cbk-phone-bgr"></div><div class="cbk-phone-content"><div class="cbk-phone-phone cbk-rotate-icon"><img src="/image/mobutpanel_whatsapp.png" alt="whatsapp"></div></div><div class="cbk-phone-circle"></div><div class="cbk-phone-second_circle"></div><div class="cbk-phone-third_circle"></div></a><div class="whatsapp-notifier"><div class="whatsapp-notifier__inner-wrapp"><span class="whatsapp-notifier__close close close-fb">x</span><a rel="nofollow" href="https://api.whatsapp.com/send?phone=<?=$phone;?>&text=<?= $message; ?>"><div class="whatsapp-notifier__body">Написать в WhatsApp</div></a></div></div></span><!--/noindex--><!--googleon: all--><!--googleoff: all--><!--noindex--><div class="ktodostavit_frame popup"></div><!--/noindex--><!--googleon: all--><div id="fade_detail"></div>


<script type="text/javascript">
    /* whatsapp widget */
    $(".whatsapp-notifier__close").on("click", function () {
        $( ".whatsapp-notifier__inner-wrapp" ).animate({ right: "-250px" }, 1000);

        setTimeout(function () {
            $(".whatsapp-notifier__inner-wrapp").animate({ right: "0" }, 1000);
        }, 25000);
    });
    
    setTimeout(function () {
        $(".whatsapp__message-count").show();
    }, 10000);

    setTimeout(function () {
        $(".whatsapp-notifier__inner-wrapp").animate({ right: "0" }, 1000);
    }, 12000);
    /* /whatsapp widget */
</script>