Модуль виджета whatsapp для Opencart
Купить модуль(+установка) можно через мой кворк или обратившись ко мне напрямую. Ниже файлы для самостоятельной установки.
Версия: 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>