Various questions about layout / translation

Apologies for the confusion with step 7. Could you clarify where exactly you expect to see this list?

I would imagine an extra step before the final form. So basically workflow would change from :

• choose services -> choose slots -> add personal information in form -> confirmation

to :

• choose services -> choose slots -> get a summary of all booked slots (either validate or go back to modify) -> add personal information in form -> confirmation

Thank you again for your suggestion. We’ll discuss this with the team next days and I will let you know.

Hello,

First, thank you once again for your suggestions – they definitely help improve the product.

Regarding point 7, after discussing it with the team, we decided not to include it. The reasons are:

1) each additional step in the form can negatively impact the user experience, and
2) we haven’t received similar requests from other customers.

However, if you have any ideas on how to display the time slots list without adding a separate step, please feel free to share them!

Given the quality of your product (compared to the others I tried), that’s the least I can do ??

I perfectly understand that, thanks for your (fast) answer anyway ! Maybe there could have a way to include it as part of the 3rd step, just at the beginning of the form ? As you support both default from and custom from contact form 7, I have no idea about how this could be easily done (shortcode ? filter ?)

Just to confirm – should the list of time slots be displayed before the form fields?

I think so. It would looks nicer if it is “integrated” in the form layout, but having it just above seems much less work. My guess is to provide some filter with current submission data (ie, list of chosen timeslots), and display the result above the form. This way it does not change anything by default but allow people to customize the summary as they wish, without messing with the form itself (which seems much more complex)

Thank you for clarifying. Same as for point 6 you can filter the template file of the booking form title

$file_name = apply_filters(
    'wbk_template_file',
    $file_name,
    $template,
    $data
);

This is how HTML for the form title is prepared:

 $html = WBK_Renderer::load_template('frontend/form_title', [
     $service_ids,
     $time,
     $category_id,
]);

Hope this helps.

I’m still playing with filter, works for my needs, thanks ??

In meantime I noticed a small bug with summary in thank you message :

                    <li>
                        <span class="list-icon-w">
                            <img src="<?php echo WP_WEBBA_BOOKING__PLUGIN_URL . '/public/images/calendar-icon.png' ?>" alt="star">
                        </span>
                       <?php echo wp_date( $time_format, $booking->get_start(), new DateTimeZone( date_default_timezone_get() ) ); ?>
                    </li>
                    <li>
                        <span class="list-icon-w">
                            <img src="<?php echo WP_WEBBA_BOOKING__PLUGIN_URL . '/public/images/clock-black-icon.png' ?>" alt="star">
                        </span>
                        <?php echo wp_date( $date_format, $booking->get_start(), new DateTimeZone( date_default_timezone_get() ) ); ?>
                    </li>

I’d expect calendar icon for date, and clock icon for time ??

• This reply was modified 2 months, 3 weeks ago by sp4rky35.

Could you please clarify whether the issue is resolved in the code you provided?

Nop it isn’t, this is your code, unmodified. You can see than first image is “calendar icon” but format is $time_format, and the icon is clock but format is date format. I ‘d have expected calendar for date and clock for time ??

Ah, thanks for this notice! We will include the fix in the next release.

Yw ! Btw, my point 7 is solved with a customer template like :

if ( !defined( 'ABSPATH' ) ) exit;
$services_ids = $data[0];
$times = $data[1];
$category_id = $data[2];

// Build a service -> [list,of,times] dict
$times_by_service =  array();
foreach ($services_ids as $slot_id => $service_id) {
	// Get existing slots for this service, if any
	$slots = $times_by_service[$service_id] ?? [];
	// Append this slot time
	$slots[] = $times[$slot_id];
	// and store it in array again
	$times_by_service[$service_id] = $slots;
}

$time_format = WBK_Format_Utils::get_time_format();
$date_format = WBK_Format_Utils::get_date_format();
foreach ($times_by_service as $service_id => $slots){
	$service = new WBK_Service( $service_id );
	if( !$service->is_loaded() ){
		continue;
	}
?>
	<h4><?php echo esc_html( $service->get_name() ) ?></h4>
<ul>
<?php
	foreach ($slots as $slot) {
		?><li>
<?php echo wp_date( $date_format, $slot, new DateTimeZone( date_default_timezone_get() ) ); ?>
 à
<?php echo wp_date( $time_format, $slot, new DateTimeZone( date_default_timezone_get() ) ); ?>
</li>
<?php
	}
?>
</ul>
<?php
}
    $html = WBK_Placeholder_Processor::process_not_booked_item_placeholders( $services_ids, $times, $category_id );
    if( get_option ('wbk_mode', 'webba5' ) !=  'webba5' ){
          $html .= '<hr class="wbk-form-separator">';

    } else {
        $html = '<p class="first-text-w">' . $html . '<p>';
    }
    echo $html;

?>

Still many improvements (no need 2 different date/time formatting for ex, and css is terrible), but it does work ??

Happy to hear solution worked for you for the point 7:)

Hi again, noticed another small bug.

On mobile, the code to define the next step name does not work on 3rd step.

# in wbk5-frontend.js

       this.container.find('.current-step-w').html(acive_step_title)
        var next_li = this.container
            .find('.appointment-status-list-w > li.active-w')
            .nextAll('li')

        if (next_li.length > 0) {
            var next_text = this.container.find('.button-next-w').html()
            this.container
                .find('.next-step-w')
                .html(next_text + ': ' + next_li.find('.text-title-w').html())
        }

As there is no else, the p.next-step-w content is not deleted / updated for last step (confirmation / submission), so when you’re on 3rd step, you still see a “Next : 3rd-step-name”