Модуль виджета 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>
