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&amp;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