PHP in Template

[MateThemes]

Hello community!

I am quite new to PHP and I am still learning. So I run into following problem.

I have a Table in a Repeater Matrix. This Table displays some menu items of a restaurant cart. I want to show 5 items and the other cart items should be visible only a button is clicked (Typical hide/show jquery topic, as far as I see.)

Following markup I have in my RepeaterMatrix:

<div id="tm-menu-marketing" class="uk-section-default" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-small-top; delay: 200;">
    <div data-src="<?=urls()->templates?>/assets/images/home-menu-bg.svg" uk-img class="uk-background-norepeat uk-background-bottom-left uk-background-image@l uk-section uk-section-large">
        <div class="uk-container">
            <div class="uk-grid-large uk-grid-margin-large" uk-grid>
                <div class="uk-width-expand@m">
                    <div class="uk-text-small uk-margin uk-text-center" uk-scrollspy-class>
                        <span class="uk-heading-divider"><?php echo $page->menu_table_time ?></span>
                    </div>
                    <h2 class="uk-text-center" uk-scrollspy-class><?php echo $page->menu_table_headline ?></h2>
                    <ul class="uk-list uk-list-large uk-margin-large" uk-scrollspy-class>
                        <?php foreach($page->menu_tables as $menu_table) { ?>
                        <li class="el-item" uk-scrollspy-class>
                            <div class="uk-child-width-auto uk-grid-small uk-flex-bottom" uk-grid>
                                <div class="uk-width-expand">
                                    <span class="el-title uk-display-block" uk-leader><?php echo $menu_table->_menu_name ?></span>
                                </div>
                                <div>
                                    <div class="el-meta uk-text-primary"><?php echo $menu_table->_menu_price ?></div>
                                </div>
                            </div>
                        </li>
                        <?php } ?>
                    </ul>
                    <div class="uk-margin uk-text-center" uk-scrollspy-class>
                        <a id="loadMore" class="el-content uk-button uk-button-default uk-button-large" href="#">Komplette Speisekarte anzeigen</a>
                    </div>
                </div>
                <div class="uk-width-expand@m">
                    <div class="uk-text-small uk-margin uk-text-center" uk-scrollspy-class>
                        <span class="uk-heading-divider"><?php echo $page->menu_table_time_2 ?></span>
                    </div>
                    <h2 class="uk-text-center" uk-scrollspy-class><?php echo $page->menu_table_headline_2 ?></h2>
                    <ul class="uk-list uk-list-large uk-margin-large" uk-scrollspy-class>
                        <?php foreach($page->menu_tables_2 as $menu_table_2) { ?>
                            <li class="el-item" uk-scrollspy-class>
                                <div class="uk-child-width-auto uk-grid-small uk-flex-bottom" uk-grid>
                                    <div class="uk-width-expand">
                                        <span class="el-title uk-display-block" uk-leader><?php echo $menu_table_2->_menu_name_2 ?></span>
                                    </div>
                                    <div>
                                        <div class="el-meta uk-text-primary"><?php echo $menu_table_2->_menu_price_2 ?></div>
                                    </div>
                                </div>
                            </li>
                        <?php } ?>
                    </ul>
                    <div class="uk-margin uk-text-center" uk-scrollspy-class>
                        <a class="el-content uk-button uk-button-default uk-button-large">Komplette Speisekarte anzeigen</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now my question. How can I count the Table items, if I have 5 items a uk-hidden class should be added to the li element and then I would like to run the hide/show script.

$(function () {
    $("li").slice(0, 8).addClass('uk-hidden');
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("li:hidden").slice(0, 8).addClass('uk-hidden');
        if ($("li:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
    });
});

Does anyone have a clue?

Thank you in advance!

[flydev]

Hi,

You can add a variable which store the number of menu shown in your foreach() loop then add the class uk-hidden to the rest of items:

<?php 

$nMenu = 0; // number of menu shown

foreach(...) { 
  // [...]
  
  // check the var, if > 5 then add uk-hidden class to the elem
  $hidden = ($nMenu < 5) ? '' : ' uk-hidden';
  echo "<li class='someClass{$hidden}'>My Menu </li>";
  
  // [...]
  
  $nMenu++; // increment 

} // end foreach

 

[MateThemes]

16 hours ago, flydev ?? said:

Hi,

You can add a variable which store the number of menu shown in your foreach() loop then add the class uk-hidden to the rest of items:

<?php 

$nMenu = 0; // number of menu shown

foreach(...) { 
  // [...]
  
  // check the var, if > 5 then add uk-hidden class to the elem
  $hidden = ($nMenu < 5) ? '' : ' uk-hidden';
  echo "<li class='someClass{$hidden}'>My Menu </li>";
  
  // [...]
  
  $nMenu++; // increment 

} // end foreach

 

Thank you very much for your help! This works like a charm!!!