TypeScript Integrations
The Phenix Design System provides seamless integration between its TypeScript framework and various third-party systems. This page documents how Phenix integrates with WordPress, sliders, and other essential tools.
Integration Structure
The integration modules are located in the src/scripts/integration/
directory and include:
File | Purpose |
---|---|
wordpress.ts | WordPress-specific integrations |
blocks.ts | Gutenberg blocks front-end scripts |
woocommerce.ts | WooCommerce functionality |
slider.ts | Splide slider integration |
| utilities.ts
| Utility integrations | | loader.ts
| Page and content loading system |
WordPress Integration
The WordPress integration (wordpress.ts
) enables seamless interaction between Phenix components and WordPress core functionality:
// Main integration initializer
Phenix(document).ready(() => {
// Initialize WordPress-specific features
});
Key WordPress Features
- Admin Bar Handling: Adjusts layout when the WordPress admin bar is present
- Comment System Enhancements: Improves the native WordPress comment forms
- Customizer Preview Support: Real-time preview of theme customizations
- Blocks Integration: Front-end functionality for Phenix blocks
- Page Transitions: Smooth page transitions for WordPress sites
Blocks Integration
The Blocks integration (blocks.ts
) provides front-end functionality for Gutenberg blocks:
// Table of contents generator
let postContent = document.querySelector(".entry-content"),
content_menu = document.querySelector('#table-of-content-list');
if (postContent && content_menu) {
// Get Headlines
let headlines = postContent.querySelectorAll('h2, h3, h4');
// Process headlines into a table of contents
}
Key features include:
- Table of contents generation
- Modal popup handling
- Accordion and tabs functionality
- Responsive menu controls
- Scroll effects for blocks
WooCommerce Integration
The WooCommerce integration (woocommerce.ts
) enhances the eCommerce experience:
// Add to cart functionality
Phenix.prototype.pds_add_to_cart = function(options = {}) {
// Implementation for AJAX add to cart
};
// Remove from cart functionality
Phenix.prototype.pds_remove_from_cart = function(options = {}) {
// Implementation for AJAX remove from cart
};
// Toggle wishlist functionality
Phenix.prototype.pds_toggle_wishlist = function(options = {}) {
// Implementation for wishlist management
};
Key features include:
- AJAX cart management (add/remove)
- Wishlist functionality
- Quick view product details
- Cart count updates
- Product filtering and sorting
- Mini cart functionality
Slider Integrations
Phenix offers integration with popular slider libraries:
Splide Slider
The Splide integration (slider.ts
) provides advanced slider functionality:
// Initialize Splide slider
Phenix.prototype.slider = function(options = {}) {
// Implementation for slider functionality
return this.forEach((element) => {
// Initialize Splide with options
});
};
Key features include:
- Responsive sliders
- Custom navigation and pagination
- Auto-play options
- Fade and slide effects
- Touch and swipe support
- Grid layouts for sliders
Utilities Integration
The Utilities integration (utilities.ts
) provides general utility functions:
// Initialize utilities
Phenix.prototype.utilities = function() {
// Make external links open in new tab
const externalLinks = document.querySelectorAll('a[href^="http"]');
// Create animated counters
Phenix('.px-counter').forEach((element) => {
// Counter implementation
});
// Other utility initializations
};
Key features include:
- External link handling
- Counter animations
- Equal height elements
- "To Top" button functionality
- Responsive table handling
- Lazy loading
Loader Integration
The Loader integration (loader.ts
) manages page and content loading:
// Initialize page loader
Phenix.prototype.loader = function(options = {}) {
// Implementation for loading screens and transitions
};
Key features include:
- Page loading animations
- AJAX content loading
- Loading progress indicators
- Transition effects
- Background loading for assets
Dynamic JS/CSS Loading
The framework includes a dynamic import system for loading JavaScript and CSS files:
// Import external library
Phenix(document).import(
"library-name", // ID for the import
"js", // Type (js/css)
"path/to/library.js", // Source URL
() => {
// Callback when loaded
},
{
integrated: true, // Whether to use the built-in library path
module: false // Whether to load as ES6 module
}
);
This allows for:
- On-demand loading of external libraries
- Conditional loading based on feature detection
- Reduced initial page load time
- Management of dependencies
WordPress-Specific Data Access
When working within WordPress, you can access specific data:
// Access WordPress data through global variable
declare var PDS_WP_KEY: any;
// Example usage
const siteURL = PDS_WP_KEY.site_url;
const restURL = PDS_WP_KEY.rest_url;
const nonce = PDS_WP_KEY.nonce;
This allows access to:
- WordPress REST API URL
- Site URL
- Security nonces
- Theme directory paths
- User information
Integration Best Practices
- Conditional Loading: Only load integrations when the related elements exist on the page
- Performance First: Minimize JavaScript execution during initial page load
- Graceful Degradation: Ensure basic functionality works even if JavaScript fails
- WordPress Hooks: Use WordPress hooks when available instead of reinventing functionality
- CSS Class Conventions: Follow the Phenix class naming conventions for integration components
Implementation Examples
Initialize WordPress-Enhanced Features
// In custom-scripts.ts
import Phenix from '.';
Phenix(document).ready(() => {
// Initialize sliders
Phenix('.px-slider').slider();
// Initialize WordPress-specific features
const wpBlocks = document.querySelector('.wp-block');
if (wpBlocks) {
// WordPress-specific initializations
}
// WooCommerce integration
const wooPage = document.querySelector('.woocommerce');
if (wooPage) {
// WooCommerce-specific initializations
}
});
Create Custom Integration
You can create your own integration with third-party libraries:
// Custom integration example
import Phenix from 'path/to/phenix';
// Extend Phenix with custom integration
Phenix.prototype.customIntegration = function(options = {}) {
return this.forEach((element) => {
// Implementation details
});
};
// Usage
Phenix('.custom-elements').customIntegration({
// Custom options
});