Make custom fields in client area product details editable?

[DusanP]

Hello

I have created custom select fields for product in Setup->Product/Services->Product/Services->Edit Product->Custom Fields tab, and that field value is shown in the client area product details section. However, i need to make that select field editable for the client.

So basically i need to show full custom field and not just value, and save button that will save the new value to that custom field.

I know that i need to change the clientareaproductdetails.tpl template,so i have tried creating the HTML form input but i think that my form action (or something else) is wrong.

Any ideas how can i do this? Or some examples?

Thanks

[Kian]

Probably you're using the wrong approach.

Products/Services Custom Fields are not meant to be edited by customers. Of course it would be possible to make these fields editable but it's a pain in the ... Basically you have to reinvent the wheel. In the foreach inside clientareaproductdetails.tpl you have to re-create "manually" all the possible input types (text, textarea, dropdown, radio, password), preserve regex validations (if in use), visibility, key-value pairs for dropdowns and all other stuff. Not to mention that WHMCS will not magically save your changes therefore you also have to code your one action hook and custom script to save all values that have been updated.

If you want customers to edit fields "linked" to specific products/services you should use Configurable Options (Setup > Products/Services > Configurable Options).

Edited July 10, 2018 by Kian

[DusanP]

18 hours ago, Kian said:

Probably you're using the wrong approach.

Products/Services Custom Fields are not meant to be edited by customers. Of course it would be possible to make these fields editable but it's a pain in the ... Basically you have to reinvent the wheel. In the foreach inside clientareaproductdetails.tpl you have to re-create "manually" all the possible input types (text, textarea, dropdown, radio, password), preserve regex validations (if in use), visibility, key-value pairs for dropdowns and all other stuff. Not to mention that WHMCS will not magically save your changes therefore you also have to code your one action hook and custom script to save all values that have been updated.

If you want customers to edit fields "linked" to specific products/services you should use Configurable Options (Setup > Products/Services > Configurable Options).

Thank you Kian for your reply. I know about Configurable Options, but it really doesn't work for me.

I saw some similar post where  someone said it can be done, but there where no example of it, so i thought it was not that hard.

[Kian]

Well it's not that hard. Probably it's just boring as hell 🤢 Let's see if I can give you a basic example. Open templates/{YOUR-TEMPLATE}/clientareaproductdetails.tpl and look for this section of code.

{if $customfields}
    <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
        {foreach from=$customfields item=field}
            <div class="row">
                <div class="col-sm-5">
                    <strong>{$field.name}</strong>
                </div>
                <div class="col-sm-7 text-left">
                    {$field.value}
                </div>
            </div>
        {/foreach}
    </div>
{/if}

Change it as follows:

{if $customfields}
    <form action="test.php?id={$smarty.get.id}" method="post">
        <input type="hidden" name="action" value="updateCustomField">
        <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
            {foreach from=$customfields item=field}
               	<div class="row">
                    <div class="col-sm-5">
                        <strong>{$field.name}</strong>
                    </div>
                    <div class="col-sm-7 text-left">
                        {$field.input}
                    </div>
                </div>
            {/foreach}
        </div>
    </form>
{/if}

Your Custom Fields will look like this:

Now focus on the action of the form. I made it post all values to a page named test.php in the root directory of WHMCS. Here I can print the selected values...

Here you go. You can now run a query on tblcustomfieldsvalues to update all the values. Of course you should pass also other variables and validate fields. Obviously you can achieve the same result also with an action hook instead of making all the things in a dedicated php file.

Edited July 11, 2018 by Kian

[DusanP]

On 7/11/2018 at 10:09 PM, Kian said:

Well it's not that hard. Probably it's just boring as hell 🤢 Let's see if I can give you a basic example. Open templates/{YOUR-TEMPLATE}/clientareaproductdetails.tpl and look for this section of code.

{if $customfields}
    <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
        {foreach from=$customfields item=field}
            <div class="row">
                <div class="col-sm-5">
                    <strong>{$field.name}</strong>
                </div>
                <div class="col-sm-7 text-left">
                    {$field.value}
                </div>
            </div>
        {/foreach}
    </div>
{/if}

Change it as follows:

{if $customfields}
    <form action="test.php?id={$smarty.get.id}" method="post">
        <input type="hidden" name="action" value="updateCustomField">
        <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
            {foreach from=$customfields item=field}
               	<div class="row">
                    <div class="col-sm-5">
                        <strong>{$field.name}</strong>
                    </div>
                    <div class="col-sm-7 text-left">
                        {$field.input}
                    </div>
                </div>
            {/foreach}
        </div>
    </form>
{/if}

Your Custom Fields will look like this:

Now focus on the action of the form. I made it post all values to a page named test.php in the root directory of WHMCS. Here I can print the selected values...

Here you go. You can now run a query on tblcustomfieldsvalues to update all the values. Of course you should pass also other variables and validate fields. Obviously you can achieve the same result also with an action hook instead of making all the things in a dedicated php file.

Thank you so much. You helped me allot!

[notelseit]

not being a good programmer how do I save data?

[Sive.Host]

On template Six clientareaproductdetails.tpl as @Kian mentioned, around line 371 replace with this tag:

 

{if $customfields}
    <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions} in active{/if} text-center" id="additionalinfo">
        <form method="post" action="clientarea.php?action=productdetails&id={$id}">
            <input type="hidden" name="customfieldupdate" value="true" />
            {foreach from=$customfields item=field}
                <div class="row">
                    <div class="col-sm-5">
                        <strong>{$field.name}</strong>
                    </div>
                    <div class="col-sm-7 text-left">
                        {if $field.type == "textarea"}
                            <textarea name="customfield[{$field.id}]" rows="3" class="form-control">{$field.value}</textarea>
                        {else}
                            <input type="text" name="customfield[{$field.id}]" value="{$field.value}" class="form-control" />
                        {/if}
                    </div>
                </div>
            {/foreach}
            <div class="row">
                <div class="col-sm-12 text-right">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </form>
    </div>
{/if}

 

 

 

Then to save using hook, create a file in the includes/hooks directory, for example, customfieldsupdate.php.

<?php

use WHMCS\Database\Capsule;

add_hook('ClientAreaPageProductDetails', 1, function($vars) {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['customfieldupdate'])) {
        $serviceId = (int)$_GET['id'];
        $customfields = $_POST['customfield'];
        
        foreach ($customfields as $fieldId => $value) {
            Capsule::table('tblcustomfieldsvalues')
                ->where('relid', $serviceId)
                ->where('fieldid', (int)$fieldId)
                ->update(['value' => $value]);
        }
        
        // Redirect to avoid form resubmission
        header('Location: clientarea.php?action=productdetails&id=' . $serviceId);
        exit();
    }
});