Awesome Support Frontend Enhancer

A comprehensive WordPress plugin that enhances the frontend display of Awesome Support with customizable features including column visibility, reply controls, and advanced styling options.

Features

🎯 Modular Architecture

• Extensible design with separate modules for each feature set
• Hook-based system using WordPress do_action() and apply_filters()
• Easy to extend with custom modules and functionality

🌍 Translation Ready

• Full Internationalization Support with proper text domains
• German Translation (de_DE) included
• Translation files provided (POT template + German PO/MO files)
• Localized JavaScript strings for admin interface

📊 Ticket Table Columns Module

• Column Visibility Control: Show/hide specific columns in ticket lists
• 10 Configurable Columns: ID, Title, Status, Date, Last Reply, Replies Count, Agent, Priority, Department, Product
• Admin Interface: Easy checkbox selection with select all/deselect all options
• Frontend Filtering: Automatically applies to [ticket-list], [tickets], and [awesome-support] shortcodes

🔒 Reply Permissions Module

• Consecutive Reply Prevention: Stops clients from replying until agent responds
• Character Limits: Configurable maximum reply length (100-5000 characters)
• Live Character Counter: Real-time feedback with visual progress bar
• German Localization: "Bitte warten Sie auf eine Antwort vom Coach" message
• Form Validation: Both frontend and backend validation

🎨 Frontend Styling Module

• CSS Variables System: Consistent theming across all elements
• Color Picker: Primary color selection with live preview
• Border Radius Control: Adjustable rounded corners (0-25px)
• Font Size Settings: Customizable base font size (10-20px)
• Custom CSS: Advanced CSS editor with syntax validation
• Smart Loading: Only loads CSS on ticket-related pages

Installation

1. Upload the plugin files to /wp-content/plugins/awesome-support-frontend-enhancer/
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Navigate to Awesome Support → Frontend Enhancer to configure options

Language Support

The plugin automatically loads translations based on your WordPress language settings:

• English (default)
• German (de_DE) - Included
• Other languages - Translate using the provided POT file

To add a new translation:

1. Copy languages/as-frontend-enhancer.pot to as-frontend-enhancer-[locale].po
2. Translate the strings using a tool like Poedit
3. Compile to .mo file and place in the languages/ folder

Requirements

• WordPress 5.0 or higher
• PHP 7.4 or higher
• Awesome Support plugin (active)

Plugin Architecture

Main Class: AS_Frontend_Enhancer

The core plugin class handles:

• Module loading and initialization
• Dependency checking
• Options management
• Extensibility hooks

Modules

1. Ticket Table Columns (ASFE_Ticket_Table_Columns)

// Get module instance
$columns_module = AS_Frontend_Enhancer::get_instance()->get_module('ticket_table_columns');

// Check if column is visible
$is_visible = $columns_module->is_column_visible('status');

// Add custom column
$columns_module->add_column('custom_field', array(
    'label' => 'Custom Field',
    'description' => 'Custom field description',
    'selector' => '.custom-field-class'
));

2. Reply Permissions (ASFE_Reply_Permissions)

// Get module instance
$reply_module = AS_Frontend_Enhancer::get_instance()->get_module('reply_permissions');

// Check if user can reply
$can_reply = $reply_module->can_user_reply($ticket_id, $user_id);

// Get character limit
$max_length = $reply_module->get_max_reply_length();

3. Frontend Styling (ASFE_Frontend_Styling_Module)

// Get module instance
$styling_module = AS_Frontend_Enhancer::get_instance()->get_module('frontend_styling');

// Get current primary color
$primary_color = $styling_module->get_primary_color();

// Update styling settings
$styling_module->update_settings(array(
    'primary_color' => '#ff0000',
    'border_radius' => 10
));

Admin Coordinator (ASFE_Admin_Coordinator)

Handles the admin interface and coordinates between modules:

• Settings page rendering
• Form processing
• Settings import/export
• Module status display

Extensibility Hooks

Actions

// Plugin initialization
do_action('as_frontend_enhancer_loaded', $plugin_instance);
do_action('as_frontend_enhancer_init', $plugin_instance);

// Module loading
do_action('as_frontend_enhancer_modules_loaded', $modules);
do_action('as_frontend_enhancer_module_initialized', $module_id, $module_instance);

// Settings
do_action('as_frontend_enhancer_options_initialized', $options);
do_action('as_frontend_enhancer_option_updated', $key, $value);

// Module-specific actions
do_action('asfe_ticket_table_columns_loaded', $module_instance);
do_action('asfe_reply_permissions_loaded', $module_instance);
do_action('asfe_frontend_styling_loaded', $module_instance);

Filters

// Plugin configuration
apply_filters('as_frontend_enhancer_available_modules', $modules);
apply_filters('as_frontend_enhancer_should_load_module', $should_load, $module_id, $config);
apply_filters('as_frontend_enhancer_default_options', $defaults);

// Module-specific filters
apply_filters('asfe_available_ticket_columns', $columns);
apply_filters('asfe_reply_permissions_agent_roles', $roles);
apply_filters('asfe_frontend_styling_generated_css', $css, $settings);

Creating Custom Modules

1. Create Module File

// includes/modules/custom-module.php
class ASFE_Custom_Module extends ASFE_Base {

    protected function init_hooks() {
        // Initialize your hooks here
        add_action('init', array($this, 'custom_init'));
        do_action('asfe_custom_module_loaded', $this);
    }

    public function custom_init() {
        // Your initialization code
    }
}

2. Register Module

// Add to available modules
add_filter('as_frontend_enhancer_available_modules', function($modules) {
    $modules['custom_module'] = array(
        'file' => 'custom-module.php',
        'class' => 'ASFE_Custom_Module',
        'enabled' => true,
        'admin_only' => false,
        'priority' => 50
    );
    return $modules;
});

3. Add Admin Settings

// Add settings section
add_action('asfe_admin_settings_sections', function() {
    // Your admin settings HTML
});

// Process settings
add_action('asfe_admin_process_settings', function($post_data) {
    // Process your settings
});

CSS Variables

The plugin uses CSS variables for consistent theming:

:root {
    --asfe-primary-color: #007cba;
    --asfe-border-radius: 6px;
    --asfe-font-size: 14px;
}

/* Use in your custom CSS */
.my-custom-element {
    background-color: var(--asfe-primary-color);
    border-radius: var(--asfe-border-radius);
    font-size: var(--asfe-font-size);
}

Settings Structure

Settings are stored in a hierarchical structure:

$options = array(
    'version' => '1.0.0',
    'modules' => array(
        'ticket_table_columns' => array(
            'enabled' => true,
            'visible_columns' => array('id', 'title', 'status', 'date')
        ),
        'reply_permissions' => array(
            'enabled' => true,
            'prevent_consecutive_replies' => true,
            'enable_character_limit' => true,
            'max_reply_length' => 800
        ),
        'frontend_styling' => array(
            'enabled' => true,
            'primary_color' => '#007cba',
            'border_radius' => 6,
            'font_size' => 14,
            'enable_custom_css' => true,
            'custom_css' => ''
        )
    )
);

JavaScript Integration

Reply Controls

// Access configuration
const maxLength = asfe_reply_vars.max_length;
const warningMessage = asfe_reply_vars.warning_message;

// Hook into character counter updates
$(document).on('asfe_character_counter_updated', function(e, currentLength, maxLength) {
    // Your custom logic
});

Admin Interface

// Access admin configuration
const ajaxUrl = asfe_admin.ajax_url;
const nonce = asfe_admin.nonce;

// Hook into settings updates
$(document).on('asfe_settings_updated', function(e, settings) {
    // Your custom logic
});

Troubleshooting

Common Issues

1. Styles not loading: Check if pages contain ticket shortcodes
2. Modules not loading: Verify Awesome Support is active
3. Settings not saving: Check user permissions and nonce validation

Debug Mode

Enable WordPress debug mode to see detailed error messages:

// wp-config.php
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);

Hooks for Debugging

// Log module loading
add_action('as_frontend_enhancer_module_loaded', function($module_id, $config) {
    error_log("Module loaded: {$module_id}");
});

// Log option updates
add_action('as_frontend_enhancer_option_updated', function($key, $value) {
    error_log("Option updated: {$key} = " . print_r($value, true));
});

Contributing

1. Fork the repository
2. Create a feature branch
3. Follow the modular architecture patterns
4. Add appropriate hooks and filters
5. Include unit tests if possible
6. Submit a pull request

License

GPL v2 or later

Support

For support and feature requests, please use the plugin's support forum or create an issue in the repository.

Changelog

1.0.0

• Initial release with modular architecture
• Ticket table columns module
• Reply permissions module
• Frontend styling module
• Admin coordinator system
• Comprehensive hook system for extensibility