Como añadir los pasos del proceso de reserva

En el Theme de Mybooking tenemos una funcionalidad que añade los pasos del proceso de reserva y gestiona su estado. Sin embargo si estamos utilizando un Theme o un Childtheme que no hereda del Theme de Mybooking podemos extender esta funcionalidad directamente desde el plugin.

Para hacerlo tenemos que realizar una serie de pasos:

1 - Añadir la función callback y la acción en el fichero functions.php

2 - Sobrescribir el fichero en la carpeta mybooking-templates

Añadir la función callback y la acción en el fichero functions.php

// Append the steps
if ( !function_exists( 'mybooking_plugin_reservation_process_header_callback' ) ) {
  function mybooking_plugin_reservation_process_header_callback() {
    $template_path = 'mybooking-templates/';
    $template_name = 'mybooking-reservation-steps.php';
    $template_file = locate_template( array($template_path . $template_name, $template_name ) );
    if ( file_exists( $template_file ) ) :
      // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
      include $template_file;
    endif;
  }
}
add_action( 'mybooking_plugin_reservation_process_header', 'mybooking_plugin_reservation_process_header_callback');

Una vez añadido este código en el fichero functions.php del Theme o el ChildTheme activo en la web el plugin ejecutará la acción durante el proceso de renderizado de la cabecera añadiendo el HTML contenido en la plantilla.

Sobreescribir el fichero en la carpeta mybooking-templates del Theme o el Childtheme

Como podemos ver en la función callback la plantilla que se insertará al ejecutarse se llama mybooking-reservation-steps.php por lo que el nombre del fichero a añadir en la carpeta tiene que tener este nombre para que lo encuentre.

Dentro de este fichero podemos empezar añadiendo esta estructura para después editarla personalizandola o dandole los estilos propios de la web. Hay que tener en cuenta que los estilos que dan forma a los pasos no estarán presentes en nuestro Theme pero podemos copiarlos del Theme de Mybooking desde el repositorio añadiendolos en nuestra hoja de estilo o maquetarlos como deseemos.

<div class="steps-bg-color">
  <div class="steps-wrapper">
    <div id="steps">
      <?php
      $mybooking_step_classes = get_body_class();
      $mybooking_choose_active = '';
      $mybooking_complete_active = '';
      $mybooking_summary_active = '';
      if ( in_array('choose_product',$mybooking_step_classes) ) {
        $mybooking_choose_active = 'active';
      } elseif ( in_array('complete',$mybooking_step_classes) ) {
        $mybooking_complete_active = 'active';
      } elseif ( in_array('summary',$mybooking_step_classes) ) {
        $mybooking_summary_active = 'active';
      } ?>
      <div data-desc="<?php echo esc_attr_x( 'Place and date', 'reservation_step', 'mybooking' ) ?>" class="step"><?php echo esc_html_x('1','renting_reservation_steps', 'mybooking');?></div>
      <div data-desc="<?php echo esc_attr_x( 'Select product', 'reservation_step', 'mybooking' ) ?>" class="<?php echo esc_attr( $mybooking_choose_active ) ?> step"><?php echo esc_html_x('2','renting_reservation_steps', 'mybooking');?></div>
      <div data-desc="<?php echo esc_attr_x( 'Complete reservation', 'reservation_step', 'mybooking' ) ?>" class="<?php echo esc_attr( $mybooking_complete_active ) ?> step"><?php echo esc_html_x('3','renting_reservation_steps', 'mybooking');?></div>
      <div data-desc="<?php echo esc_attr_x( 'Summary', 'reservation_step', 'mybooking' ) ?>" class="<?php echo esc_attr( $mybooking_summary_active ) ?> step"><?php echo esc_html_x('4','renting_reservation_steps', 'mybooking');?></div>
    </div>
  </div>
</div>