WHMCS产品用户自助备注插件
当用户购买产品多了以后,很难搞清楚每个产品对应的业务。例如:支持多站点的主机,用户可能无法记清对应主机上绑定的站点。这时,就需要一个为每个产品添加备注的功能。
主题模板修改:
以默认主题twenty-one为例,文件名:clientareaproducts.tpl
添加以下CSS:
#tableServicesList td {
cursor: default;
}
#tableServicesList td.remark span {
display: inline-block;
min-width: 5em;
cursor: pointer;
}
#tableServicesList tr:hover span.editremark::after,
#tableServicesList span.addremark::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 5px;
vertical-align: middle;
position: relative;
top: -1px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" /><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z" /></svg>') no-repeat;
}
#tableServicesList td.remark input {
width: 8em;
border: 1px solid #ccc;
border-radius: .25em;
padding: .25em .375em;
display: none;
}
#tableServicesList td.remark input:focus {
outline: none;
}
添加以下JS:
function clickableSafeRedirectNew(e, t, n) {
if (!e.target.classList.contains('remark') && !e.target.parentNode.classList.contains('remark')) {
clickableSafeRedirect(e, t, n);
}
}
jQuery(document).ready(function() {
document.querySelector('#tableServicesList td.remark').addEventListener('click', function() {
this.querySelector('span').style.display = 'none';
let input = this.querySelector('input');
input.style.display = 'inline';
let inputValue = input.value;
input.value = '';
input.focus();
input.value = inputValue;
}, true);
let editremark = document.querySelector('#tableServicesList td.remark input');
editremark.onblur = function() {
let input = this;
let parent = input.parentNode;
parent.querySelector('span').style.display = 'inline-block';
this.style.display = 'none';
let data = 'serviceid=' + input.getAttribute('data-id') + '&remark=' + input.value;
fetch('index.php?m=productremarks', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: data
})
.then(response => response.ok ? response.json() : undefined)
.then(result => {
let text;
if (result.status == 'success') {
text = result.remark;
input.value = text;
} else {
text = result.msg;
}
let span = parent.querySelector('span');
span.innerHTML = text;
span.classList.remove('addremark');
span.classList.add('editremark');
});
}
});
添加表格头:
<th>备注</th>
表格行的onclick事件修改如下:
<tr onclick="clickableSafeRedirectNew(event, 'clientarea.php?action=productdetails&id={$service.id}', false)">
添加单元格:
<td class="remark text-center">
<input type="text" name="remark" data-id="{$service.id}" value="{$service.remark}">
{if $service.remark}
<span class="editremark">{$service.remark}</span>
{else}
<span class="addremark">添加备注</span>
{/if}
</td>
前台产品列表页用户可添加/修改备注:
更新日志
2023年4月20日 ver 1.0
2023年5月10日 ver 2.0
¥
35
本源码仅供学习研究用,禁止用于非法用途;
禁止复制传播、二次销售本源码。
禁止复制传播、二次销售本源码。