Jump to content
MateThemes

PHP in Template

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

 

  • Like 1

Share this post


Link to post
Share on other sites
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!!!

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...