TypeRocket / typerocket

TypeRocket is a highly integrated MVC WordPress framework with beautiful UI components for the modern developer.
https://typerocket.com
454 stars 62 forks source link

Repeater field in frontend #225

Closed mbrughi closed 4 years ago

mbrughi commented 4 years ago

I try to work with repeater fields, I find it difficult to view the repeater fields in the frontend which in my opinion is not well documented, can you help me? This is my custom post to create sliders, very simple to create in the backend, but in the frontend I cannot view the slides, a blank page is perpetually presented to me.

$slider = tr_post_type('Slider', 'Sliders')
        ->setTitlePlaceholder(__('Enter slider title here', 'immo'))
        ->setIcon('images')
        ->setArgument('supports', ['title'] )
        ->setEditorForm(function() {
            $form = tr_form();
            $options1 = [
                __('left', 'immo') => __('left', 'immo'),
                __('center', 'immo') => __('center', 'immo'),
                __('right', 'immo') => __('right', 'immo')
            ];
            echo $form->repeater(__('Slides', 'immo'))->setFields([
                $form->image('Image'),
                $form->text(__('Title', 'immo')),
                $form->color(__('Title Color', 'immo')),
                $form->select('TitleAlignment')
                        ->setOptions($options1)
                        ->setHelp( __('Select title alignment', 'immo') )
                        ->setLabel( __('Title alignment', 'immo') ),
                $form->textarea(__('Text', 'immo')),        
                $form->color(__('Text Color', 'immo')),
                $form->select('TextAlignment')
                        ->setOptions($options1)
                        ->setHelp( __('Select text alignment', 'immo') )
                        ->setLabel( __('Text alignment', 'immo') ),            
                $form->color(__('Background slide color', 'immo')),
                $form->text(__('Button Text', 'immo')),
                $form->text(__('Button URL', 'immo')),
                $form->color(__('Button text color', 'immo')),
                $form->color(__('Button background color', 'immo')),
                $form->select('ButtonAlignment')
                        ->setOptions($options1)
                        ->setHelp( __('Select button alignment', 'immo') )
                        ->setLabel( __('Button alignment', 'immo') ),  
            ]);
        });

Test in frontend in in different ways to see something:

<?php

if( !empty($data['slides']) && count($data['slides']) > 1 ) :
    $slides = $data['slides'];

//var_dump($slides);
?>
<section class="hero-slider large-image">
<?php echo tr_posts_field('slides'); ?>
<?php foreach ($slides as $slide) : ?>

    <?php echo $slide ?>

<?php endforeach; ?>

</section>

<?php endif; ?>
kevindees commented 4 years ago

Hey @mbrughi

The repeater field returns an array. You will need to loop through that array to see the fields.

<section class="hero-slider large-image">
  <?php $slides = tr_posts_field('slides'); ?>
  <?php foreach ($slides as $slide) : ?>

    <?php var_dump( $slide ); ?>

  <?php endforeach; ?>
</section>

Does this work for you?

Thanks, Kevin

mbrughi commented 4 years ago

Hi @kevindees understood this and also tried it, but it keeps showing me blank page, I don't understand what happened, NB: with the other fields that are not repeaters everything seems to work correctly.

mbrughi commented 4 years ago

HI @kevindees can you post an example of repeater view in frontend?

mbrughi commented 4 years ago

Hi @kevindees this is the code of post slides I try in many modes but always it give blank page:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->

    <?php rock_post_thumbnail(); ?>

    <div class="entry-content">
        <h1> Test Slider </h1>  
        <?php
        if( !empty($data['slides']) && count($data['slides']) > 1 ) :
            $slides = $data['slides'];
        ?>  

        <section class="hero-slider large-image">
        <?php $slides = tr_posts_field('slides'); ?>
        <?php foreach ($slides as $slide) : 
              var_dump( $slide );
              endforeach; ?>
        </section>
        <?php endif; ?> 
        <?    
        the_content();

        wp_link_pages(
            array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'rock' ),
                'after'  => '</div>',
            )
        );
        ?>
    </div><!-- .entry-content -->

    <?php if ( get_edit_post_link() ) : ?>
        <footer class="entry-footer">
            <?php
            edit_post_link(
                sprintf(
                    wp_kses(
                        /* translators: %s: Name of current post. Only visible to screen readers */
                        __( 'Edit <span class="screen-reader-text">%s</span>', 'rock' ),
                        array(
                            'span' => array(
                                'class' => array(),
                            ),
                        )
                    ),
                    wp_kses_post( get_the_title() )
                ),
                '<span class="edit-link">',
                '</span>'
            );
            ?>
        </footer><!-- .entry-footer -->
    <?php endif; ?>
</article><!-- #post-<?php the_ID(); ?> -->
kevindees commented 4 years ago

Hey @mbrughi

If you remove your slider look you do not get a blank page correct? Also, do you have WP_DEBUG enabled? Without an error code, it is hard to help you track down the issue. Also, I do not see the WP loop or get_header() in your code... I'm assuming you have omitted this from your example.

Thanks, Kevin

mbrughi commented 4 years ago

Hi @kevindees the theme is simply underscores with debug enabled (there is no error) and the example read in V4 docs work correctly. https://ibb.co/z7trQDk https://ibb.co/XpPwyH9

this is the code i tried following your tutorial and that work:

in functions.php

/**
 * Load Custom Lib.
 */
require ('typerocket/init.php');

/**
 * Load Custom .
 */
require_once get_template_directory() . '/inc/slider.php';

/**
 * Load Custom .
 */
require_once get_template_directory() . '/inc/users.php';

in users.php

<?php
$team = tr_post_type('Person', 'Team');
$team->setId('tr_team');

$team->setIcon('users');
$team->setArgument('supports', ['title'] );

tr_meta_box('Team Details')->apply($team);
tr_taxonomy('Department')->apply($team);

function add_meta_content_team_details() {
    $form = tr_form();
    echo $form->text('Job Title');
}

$team->setTitlePlaceholder( 'Enter full name here' );

$team->setTitleForm(function(){
    $form = tr_form();
    echo $form->image('Photo');
    $editor = $form->editor('post_content');
    echo $editor->setLabel('About Person');
});

But. if, for example, I try to insert the slides into the single page of this example, nothing is displayed. I'm sure I'm doing something wrong but I don't understand what.

mbrughi commented 4 years ago

Hi @kevindees i found the problem. do not have to enter the condition in this way:

        <?php
        if( !empty($data['slides']) && count($data['slides']) > 1 ) :
            $slides = $data['slides'];
        ?>  

        <section class="hero-slider large-image">
        <?php $slides = tr_posts_field('slides'); ?>
        <?php foreach ($slides as $slide) : 
              var_dump( $slide );
              endforeach; ?>
        </section>
        <?php endif; ?> 

as I had done previously, but only in this way:

        <?php $slides = tr_posts_field("slides"); ?>
            <?php foreach ($slides as $slide) : ?>

            <?php var_dump( $slide ); ?>

            <?php endforeach; ?>

obviously inside the WP loop, otherwise it doesn't work.

but I must tell you that this thing was not understood well by the v4 docs in reference to the repeater field which is also a very powerful function of your typerocket.

Thank you again for creating this wonderful utility.