Viktor Miller
1b41b72a3d
Replace mailto link with modal popup containing Formidable job application form. Modal stays open after submission to show success message. Changes: - Add modal popup with contact form on job detail pages - Implement AJAX form submission to prevent page reload - Auto-populate job_id field when modal opens - Add field key compatibility for both job_id and job_id2 - Fix form ID comparison to use loose equality - Keep modal open after submission to display success message - Add modal styling and close functionality Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
326 lines
9.4 KiB
PHP
326 lines
9.4 KiB
PHP
<?php
|
|
/**
|
|
* Template functionality for job offers
|
|
*
|
|
* @package DDHH_Job_Manager
|
|
*/
|
|
|
|
// Exit if accessed directly.
|
|
defined( 'ABSPATH' ) || exit;
|
|
|
|
/**
|
|
* Handles template display for job offers
|
|
*/
|
|
class DDHH_JM_Template {
|
|
|
|
/**
|
|
* Setup template hooks
|
|
*/
|
|
public static function setup_hooks() {
|
|
// Filter the content to add job details
|
|
add_filter( 'the_content', array( __CLASS__, 'add_job_details_to_content' ) );
|
|
}
|
|
|
|
/**
|
|
* Add job details to the content for single job_offer posts
|
|
*
|
|
* @param string $content Post content.
|
|
* @return string Modified content.
|
|
*/
|
|
public static function add_job_details_to_content( $content ) {
|
|
// Only modify content on single job_offer posts
|
|
if ( ! is_singular( 'job_offer' ) || ! in_the_loop() || ! is_main_query() ) {
|
|
return $content;
|
|
}
|
|
|
|
global $post;
|
|
|
|
// Get job meta data
|
|
$job_location = get_post_meta( $post->ID, 'job_location', true );
|
|
$job_type = get_post_meta( $post->ID, 'job_type', true );
|
|
$job_deadline = get_post_meta( $post->ID, 'job_deadline', true );
|
|
$job_contact_email = get_post_meta( $post->ID, 'job_contact_email', true );
|
|
$job_logo = get_the_post_thumbnail( $post->ID, 'job-logo' );
|
|
|
|
// Get author/organization info
|
|
$author = get_userdata( $post->post_author );
|
|
$author_name = $author ? $author->display_name : '';
|
|
$author_org = get_user_meta( $post->post_author, 'ddhh_org_name', true );
|
|
|
|
// Build job details HTML
|
|
ob_start();
|
|
?>
|
|
<div class="ddhh-job-offer-details">
|
|
<?php if ( $job_logo ) : ?>
|
|
<div class="job-logo">
|
|
<?php echo $job_logo; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="job-meta">
|
|
<?php if ( $author_org ) : ?>
|
|
<div class="job-meta-item">
|
|
<strong>Anbieter:</strong> <?php echo esc_html( $author_org ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $job_location ) : ?>
|
|
<div class="job-meta-item">
|
|
<strong>Standort:</strong> <?php echo esc_html( $job_location ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $job_type ) : ?>
|
|
<div class="job-meta-item">
|
|
<strong>Art:</strong> <?php echo esc_html( $job_type ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( $job_deadline ) : ?>
|
|
<div class="job-meta-item">
|
|
<strong>Bewerbungsfrist:</strong> <?php echo esc_html( date( 'd.m.Y', strtotime( $job_deadline ) ) ); ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="job-description">
|
|
<h3>Stellenbeschreibung</h3>
|
|
<?php echo wp_kses_post( $content ); ?>
|
|
</div>
|
|
|
|
<?php if ( $job_contact_email && is_user_logged_in() && current_user_can( 'read' ) ) : ?>
|
|
<div class="job-application-section">
|
|
<h3>Interesse?</h3>
|
|
<button type="button" class="ddhh-contact-button" onclick="ddhhOpenContactModal(<?php echo absint( $post->ID ); ?>)">
|
|
Jetzt Kontakt aufnehmen
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Contact Form Modal -->
|
|
<div id="ddhh-contact-modal-<?php echo absint( $post->ID ); ?>" class="ddhh-modal" style="display: none;">
|
|
<div class="ddhh-modal-content">
|
|
<span class="ddhh-modal-close" onclick="ddhhCloseContactModal(<?php echo absint( $post->ID ); ?>)">×</span>
|
|
<h3>Kontakt aufnehmen</h3>
|
|
<div class="ddhh-modal-body">
|
|
<?php
|
|
// Get the job application form ID
|
|
$form_id = DDHH_JM_Formidable::get_job_application_form_id();
|
|
if ( $form_id ) {
|
|
// Render the Formidable form with AJAX enabled to prevent page reload
|
|
echo do_shortcode( '[formidable id="' . absint( $form_id ) . '" job_id="' . absint( $post->ID ) . '" ajax="true"]' );
|
|
} else {
|
|
echo '<p>Formular konnte nicht geladen werden. Bitte kontaktieren Sie uns unter: <a href="mailto:' . esc_attr( $job_contact_email ) . '">' . esc_html( $job_contact_email ) . '</a></p>';
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<style>
|
|
.ddhh-job-offer-details {
|
|
margin: 2em 0;
|
|
}
|
|
.ddhh-job-offer-details .job-logo {
|
|
margin-bottom: 2em;
|
|
}
|
|
.ddhh-job-offer-details .job-logo img {
|
|
max-width: 200px;
|
|
height: auto;
|
|
}
|
|
.ddhh-job-offer-details .job-meta {
|
|
background: #f5f5f5;
|
|
padding: 1.5em;
|
|
margin-bottom: 2em;
|
|
border-radius: 4px;
|
|
}
|
|
.ddhh-job-offer-details .job-meta-item {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
.ddhh-job-offer-details .job-meta-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.ddhh-job-offer-details .job-meta-item strong {
|
|
display: inline-block;
|
|
min-width: 150px;
|
|
}
|
|
.ddhh-job-offer-details .job-description {
|
|
margin-bottom: 2em;
|
|
}
|
|
.ddhh-job-offer-details .job-application-section {
|
|
background: #e8f4f8;
|
|
padding: 1.5em;
|
|
border-left: 4px solid #0073aa;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.ddhh-job-offer-details .job-application-section h3 {
|
|
margin-top: 0;
|
|
}
|
|
.ddhh-job-offer-details .ddhh-contact-button {
|
|
background: #0073aa;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 30px;
|
|
font-size: 16px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
.ddhh-job-offer-details .ddhh-contact-button:hover {
|
|
background: #005a87;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.ddhh-modal {
|
|
position: fixed;
|
|
z-index: 9999;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.6);
|
|
}
|
|
.ddhh-modal-content {
|
|
background-color: #fefefe;
|
|
margin: 5% auto;
|
|
padding: 30px;
|
|
border: 1px solid #888;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
position: relative;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
}
|
|
.ddhh-modal-close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
}
|
|
.ddhh-modal-close:hover,
|
|
.ddhh-modal-close:focus {
|
|
color: #000;
|
|
}
|
|
.ddhh-modal-body {
|
|
margin-top: 20px;
|
|
}
|
|
.ddhh-modal h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function ddhhOpenContactModal(jobId) {
|
|
var modal = document.getElementById('ddhh-contact-modal-' + jobId);
|
|
if (modal) {
|
|
modal.style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Set the job_id in the hidden field
|
|
var jobIdField = modal.querySelector('input[id*="job_id"]');
|
|
if (jobIdField) {
|
|
jobIdField.value = jobId;
|
|
}
|
|
|
|
// Prevent form from redirecting on submit
|
|
var form = modal.querySelector('form.frm-show-form');
|
|
if (form && !form.dataset.ddhhHandled) {
|
|
form.dataset.ddhhHandled = 'true';
|
|
|
|
jQuery(form).on('submit', function(e) {
|
|
e.preventDefault();
|
|
console.log('Form submit intercepted - preventing page reload');
|
|
|
|
var $form = jQuery(this);
|
|
var formData = new FormData(this);
|
|
|
|
// Submit form via AJAX
|
|
jQuery.ajax({
|
|
url: $form.attr('action') || window.location.href,
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(response) {
|
|
console.log('Form submitted successfully via AJAX');
|
|
// Replace form content with response
|
|
var formContainer = modal.querySelector('.ddhh-modal-body');
|
|
if (formContainer) {
|
|
var tempDiv = document.createElement('div');
|
|
tempDiv.innerHTML = response;
|
|
var newForm = tempDiv.querySelector('form.frm-show-form');
|
|
if (newForm) {
|
|
formContainer.innerHTML = newForm.outerHTML;
|
|
} else {
|
|
// Show success message if no form in response
|
|
var successMsg = tempDiv.querySelector('.frm_message');
|
|
if (successMsg) {
|
|
formContainer.innerHTML = successMsg.outerHTML;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
error: function() {
|
|
console.error('Form submission failed');
|
|
alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function ddhhCloseContactModal(jobId) {
|
|
var modal = document.getElementById('ddhh-contact-modal-' + jobId);
|
|
if (modal) {
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
}
|
|
|
|
// Close modal when clicking outside of it
|
|
window.onclick = function(event) {
|
|
if (event.target.classList.contains('ddhh-modal')) {
|
|
event.target.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
}
|
|
|
|
// Handle successful form submission - keep modal open to show success message
|
|
jQuery(document).ready(function($) {
|
|
// Prevent redirect after form submission
|
|
$(document).on('frmBeforeFormRedirect', function(event, form, response) {
|
|
var formKey = $(form).find('input[name="form_key"]').val();
|
|
if (formKey === 'job_application') {
|
|
// Prevent the default redirect behavior
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$(document).on('frmFormComplete', function(event, form, response) {
|
|
// Check if this is the job application form
|
|
var formKey = $(form).find('input[name="form_key"]').val();
|
|
if (formKey === 'job_application') {
|
|
// Modal stays open so user can see success message
|
|
// User can close it manually by clicking X or outside the modal
|
|
console.log('Form submitted successfully, modal staying open');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
<?php
|
|
|
|
return ob_get_clean();
|
|
}
|
|
}
|