Skip to content

Reorganize settings page and add modal customization options#4

Merged
KONFeature merged 4 commits intomainfrom
feat/reorganize-settings-page
Jul 24, 2025
Merged

Reorganize settings page and add modal customization options#4
KONFeature merged 4 commits intomainfrom
feat/reorganize-settings-page

Conversation

@KONFeature
Copy link
Contributor

Summary

  • Reorganized the Frak settings page for better UX and clarity
  • Added comprehensive modal customization options similar to PrestaShop plugin
  • Improved visual hierarchy and section organization

Changes Made

Settings Page Reorganization

  • Reordered sections: Website Info → Customisations → Advanced Config → Purchase Tracking
  • Merged WooCommerce and Webhook sections into unified "Purchase Tracking" section
  • Applied consistent styling with clear section boundaries

New Features Added

  • Modal Language Selector: Choose between Default, English, or French
  • Custom i18n Translations: Override default modal text for login, sharing, and rewards
  • Logo File Upload: Upload images directly with live preview (supports JPG, PNG, GIF, SVG)
  • Direct Button Position Control: Dropdown selector for left/right positioning
  • Auto WooCommerce Detection: Automatically enables tracking when WooCommerce is detected

Technical Improvements

  • Updated config generation to match PrestaShop structure
  • Proper i18n support with JSON parsing and HTML entity handling
  • Responsive design for all new elements
  • Enhanced JavaScript for dynamic field dependencies

Note

Sharing button configuration has been removed as it will be implemented as a separate WordPress component for the theme editor.

Test Plan

  • Verify settings page displays correctly with new layout
  • Test language selector updates config properly
  • Confirm i18n translations are saved and applied
  • Test logo file upload functionality
  • Verify WooCommerce auto-detection works
  • Check responsive design on mobile devices
  • Ensure all settings persist after save

🤖 Generated with Claude Code

KONFeature and others added 4 commits July 21, 2025 19:57
- Reordered sections: Website Info → Customisations → Advanced Config → Purchase Tracking
- Merged WooCommerce and Webhook sections into unified "Purchase Tracking" section
- Renamed "Floating Button" to "Customisations" with subsection structure
- Added automatic WooCommerce detection with visual status indicator
- Implemented consistent styling with clear section boundaries and visual hierarchy
- Added responsive CSS for better mobile experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Added modal language selector (Default/English/French)
- Added custom i18n translations table for modal text overrides
- Added logo file upload functionality with preview
- Moved floating button position from advanced config to direct dropdown
- Updated config generation to match PrestaShop structure with i18n support
- Added consistent styling for new form elements
- Auto-detects and enables WooCommerce tracking when plugin is active

Note: Sharing button configuration removed, will be implemented as separate WordPress component

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Added real-time updates of i18n object when translation fields change
- Collected i18n values from input fields dynamically
- Updated logo URL replacement to handle let declaration format
- Added input event handlers for all i18n translation fields

Users now see their custom translations immediately reflected in the advanced configuration textarea.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Created dedicated endpoint (/frak-config.js) for serving configuration
- Removed inline JavaScript injection from every page
- Added smart caching with ETag validation and 304 responses
- Implemented cache busting via version parameter (config hash)
- Added optional JavaScript minification for production
- Integrated with popular caching plugins (WP Rocket, W3TC, etc.)
- Added proper cache headers including CORS support
- Config now cacheable by browsers, CDNs, and caching plugins

Benefits:
- Better performance with separate cacheable config file
- Reduced page size (no inline JS)
- Cache-friendly for aggressive caching strategies
- Only config endpoint needs clearing on changes
- Easy debugging via direct endpoint access

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@KONFeature KONFeature merged commit 44709df into main Jul 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant