EE Custom Category URLs with Pagination

lunchtogo

{!-- Global Variables --}
{preload_replace:template_group="food-wine"}
{preload_replace:template="lunchtogo"}

{embed="_partials/_head" body_id="lunchtogo" 
    {if segment_3 == ""}                            {!-- Lunch Home --}
        body_class="l-lunch lunch-home"
    {if:elseif segment_3 != "" AND segment_4== ""}  {!-- Lunch Category View --}
        body_class="l-lunch lunch-cat"
    {if:elseif segment_4 != ""}                     {!-- Lunch Product View --}
        body_class="l-lunch lunch-detail"
    {/if}
}

<section id="content">

    <h1>Business Lunnches</h1>

    {embed="_partials/_lunch-menu"}
    
    <section id="main" role="main">
        
        <div id="main-wrap">

            <div id="title-block">
                <h2>Lunchtogo</h2>
            </div>

            <div class="inner-wrap">
                
                {!-- Lunchtogo Home ************************************************************************ --}
                {!-- If segment 2 is "lunchtogo" and segment 3 contains no category: we're home! --}
                {if segment_2 != "" AND segment_3 == ""}

                    {!-- Content here... --}

                {!-- Lunchtogo Category View *************************************************************** --}
                {!-- If segment 3 contains a category and segment 4 contains no product name: we're browsing a category --}
                {if:elseif segment_3 != "" AND segment_4 == ""}     

                    {!-- Low Seg2Cat template variable --}
                    <h3>{segment_3_category_name}</h3>

                    <div id="lead-time">
                        <p>Lead time<span class="time">3 Days</span><span class="info">What is this?</span></p>
                    </div> <!-- // #lead-time -->

                    {!-- This is where pagination will eventually need to go --}
                    {!-- <div class="pagination-top">
                        <p>Page 1 of 3 <span class="pages"><a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a></span></p>
                    </div> --} <!-- // .pagination -->

                    <ul id="products">

                    {exp:ab_entry_ids col_name="cat_id" sql="SELECT cat_id FROM exp_categories WHERE cat_url_title = '{segment_3}'"}
                        {exp:channel:entries channel="store_lunchtogo" category_id="{ab_cat_id}" limit="2"}

                        {paginate}
                            {if abp_has_previous}
                                <a class="next" href="{abp_previous_link}">&larr; prev</a>
                            {if:else}
                                <span class="atStart">&larr; prev</span>
                            {/if}
                            {abp_pages padding="no"}
                                {if abp_is_current}
                                    <span class="this-page">{abp_num}</span>
                                {if:else}
                                    <a href="{abp_link}">{abp_num}</a>
                                {/if}
                            {/abp_pages}
                            {if abp_has_next}
                                <a class="next" href="{abp_next_link}">next &rarr;</a>
                            {if:else}
                                <span class="atStart">next &rarr;</span>
                            {/if}
                            <div class="results">({abp_total_entries} entries)</div>
                        {/paginate}

                        <li>
                            {food_product_image}
                                <a href="#"><img class="thumb" src="{food_image}" alt="{food_image_desc}" /></a>
                            {/food_product_image}
                            <h4><a href="#">{title}</a></h4>
                            {exp:store:product entry_id="{entry_id}"}
                                <p class="price">{regular_price}</p>
                            {/exp:store:product}
                            <ul class="symbols">
                                <li><a href="#"><img src="/assets/images/icon-vegetarian.png" alt="Icon" width="18" /></a></li>
                                <li><a href="#"><img src="/assets/images/icon-gluten.png" alt="Icon" /></a></li>
                                <li><a href="#"><img src="/assets/images/icon-home-freezing.png" alt="Icon" /></a></li>
                            </ul>
                            <form class="add-to-cart" action="" method="post">
                                <div>
                                    <input type="text" name="" id="" size="8" placeholder="Qty" />
                                    <input type="submit" name="submit" value="Add" class="btn-submit" />
                                </div>
                            </form>
                        </li>

                        {/exp:channel:entries}
                    {/exp:ab_entry_ids}
                    {!-- {/exp:query} --}

                    </ul> <!-- // #products -->

                    {!-- Pagination will also need to be repeated at the bottom too --}
                    {!-- <div class="pagination-bottom">
                        <p>Page 1 of 3 <span class="pages"><a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a></span></p>
                    </div> --} <!-- // .pagination -->
                
                {!-- Lunchtogo Product View ***************************************************************** --}
                {!-- If segment 4 contains a product name: we're looking at the product page. --}
                {if:elseif segment_4 != ""}

                    {!-- Content here... --}
                    
                    {/exp:channel:entries}

                {/if} {!-- // view rendering --}

            </div> <!-- // #inner-wrap -->

        </div> <!-- // #main-wrap -->
        
    </section> <!-- // #main -->
                
</section> <!-- // #content  -->

{embed="_partials/_newsletter"}
        
{embed="_partials/_foot"}

URLs follow this pattern: http://site.com/{template_group}/{template}/{category}/{pagination}

The template group in this case is "food-wine" and the template is "lunchtogo".