Custom CTGY Page Template Help - Product grid gone wonky

[lynnephelps]

I made a copy of my category page, as I needed a version that did not display the product code. I tried to make a faithful copy, but there is no duplicate function in Pages and clearly I have missed something. FYI, we do not sell to the general public, so MIVA developers (I miss them) had previously removed/supressed shopping cart features.

In my copy of the CTGY Page, the product grid is no longer lined up in neat rows of 4. The only change is supposed to be that the product code is not listed. I don't know what to look for. You can see it here:
https://www.sy-klone.com/videos.html

Here is my regular CTGY page with nice neat rows.
https://www.sy-klone.com/xlr-products-all.html

I can post the page template code here also if that is what is needed.

[lynnephelps]

<div class="row filter-items-container">
<nav class="column half medium-one-fifth large-one-fifth per-page np">
    <mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
        <form method="post" action="&mvte:urls:_self:auto;" class="nm">
            <input type="hidden" name="Search" value="&mvte:global:Search;">
            <input type="hidden" name="Sort_By" value="&mvte:global:Sort_By;">
            <!-- <label for="l-per-page" class="medium uppercase">Per Page</label> -->
            <select name="Per_Page" id="l-per-page" class="input-medium" onChange="this.form.submit();">
                <option <mvt:if expr="g.Per_Page EQ 50">selected</mvt:if> value="50">50 items/page</option>
                <option <mvt:if expr="g.Per_Page EQ 100">selected</mvt:if> value="100">100 items/page</option>
                <option <mvt:if expr="g.Per_Page EQ -1">selected</mvt:if> value="-1">View All</option>
            </select>
            <noscript><button>Go</button></noscript>
        </form>            
        <!-- end per-page -->
    </mvt:if>
</nav>
<div class="column half medium-one-fifth large-one-fifth sorting np">
    <mvt:if expr="l.settings:category_listing:products_on_page_count GT 1">
        <form method="post" action="&mvte:urls:_self:auto;" class="nm">
            <input type="hidden" name="Search" value="&mvte:global:Search;">
            <input type="hidden" name="Per_Page" value="&mvte:global:Per_Page;">
            <!-- <label for="l-sort-by" class="medium uppercase">Sort By</label> -->
            <select name="Sort_By" id="l-sort-by" class="input-medium" onChange="this.form.submit();">
                <mvt:if expr="ISNULL g.Sort_By">
                    <option value="disp_order" selected="selected">Sort By&hellip;</option>
                <mvt:else>
                    <option value="disp_order">Sort By&hellip;</option>
                </mvt:if>
                <mvt:if expr="g.Sort_By EQ 'newest'">
                    <option value="newest" selected="selected">Newest</option>
                <mvt:else>
                    <option value="newest">Newest</option>
                </mvt:if>

                <!-- HIDE SHOPPING RELATED OPTIONS
                <mvt:if expr="g.Sort_By EQ 'bestsellers'">
                    <option value="bestsellers" selected="selected">Best Selling</option>
                <mvt:else>
                    <option value="bestsellers">Best Selling</option>
                </mvt:if>
                <mvt:if expr="g.Sort_By EQ 'price_asc'">
                    <option value="price_asc" selected="selected">Lowest Price</option>
                <mvt:else>
                    <option value="price_asc">Lowest Price</option>
                </mvt:if>
                <mvt:if expr="g.Sort_By EQ 'price_desc'">
                    <option value="price_desc" selected="selected">Highest Price</option>
                <mvt:else>
                    <option value="price_desc">Highest Price</option>
                </mvt:if>
                 END HIDE SHOPPING RELATED OPTIONS -->                

                <mvt:if expr="g.Sort_By EQ 'name_asc'">
                    <option value="name_asc" selected="selected">Name Ascending</option>
                <mvt:else>
                    <option value="name_asc">Name Ascending</option>
                </mvt:if>
                <mvt:if expr="g.Sort_By EQ 'name_desc'">
                    <option value="name_desc" selected="selected">Name Descending</option>
                <mvt:else>
                    <option value="name_desc">Name Descending</option>
                </mvt:if>

                <!-- ADD SORT BY CODE OPTIONS -->
                <mvt:if expr="g.Sort_By EQ 'code_asc'">
                    <option value="code_asc" selected="selected">Code Ascending</option>
                <mvt:else>
                    <option value="code_asc">Code Ascending</option>
                </mvt:if>
                <mvt:if expr="g.Sort_By EQ 'code_desc'">
                    <option value="code_desc" selected="selected">Code Descending</option>
                <mvt:else>
                    <option value="name_desc">Code Descending</option>
                </mvt:if>
                <!-- END SORT BY CODE OPTIONS -->
            </select>
            <noscript><button>Go</button></noscript>
        </form>
        <!-- END SORTING -->
    </mvt:if>
</div>
<!-- BEGIN PAGINATION -->
<div class="column hide medium-show medium-three-fifths large-three-fifths align-right page-links">
    <mvt:if expr="l.settings:category_listing:page_links:last_page GT 1">
        <span class="page-links-container top-page-links">
            <mvt:if expr="l.settings:category_listing:page_links:current_page NE 1">
                <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:prev_link_params;" class="page-links-previous"><span data-icon="&#x34;"></span> Prev</a>
            <mvt:else>
                <span class="page-links-previous page-links-deactivated"><span data-icon="&#x34;"></span> Prev</span>
            </mvt:if>
            <mvt:if expr="NOT l.settings:category_listing:page_links:contains_first">
                <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:first_link_params;" class="page-links-inactive">1</a><a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:first_link_params;" class="page-links-inactive hellip">&hellip;</a>
            </mvt:if>
            <mvt:foreach iterator="pages" array="category_listing:page_links:pages">
                <mvt:if expr="l.settings:category_listing:page_links:current_page EQ l.settings:pages:page_num">
                    <span class="page-links-active">&mvte:pages:page_num;</span>
                <mvt:else>
                    <a href="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;" class="page-links-inactive">&mvte:pages:page_num;</a>
                </mvt:if>
            </mvt:foreach>
            <mvt:if expr="NOT l.settings:category_listing:page_links:contains_last">
                <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:last_link_params;" class="page-links-inactive hellip">&hellip;</a><a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:last_link_params;" class="page-links-inactive">&mvte:category_listing:page_links:last_page;</a>
            </mvt:if>
            <mvt:if expr="l.settings:category_listing:page_links:current_page NE l.settings:category_listing:page_links:last_page">
                <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:next_link_params;" class="page-links-next">Next <span data-icon="&#x35;"></span></a>
            <mvt:else>
                <span class="page-links-next page-links-deactivated">Next <span data-icon="&#x35;"></span></span>
            </mvt:if>
        </span>
        <!-- END PAGE LINKS -->
    </mvt:if>
</div>
</div>
<!-- end filter-items-container -->

<!-- BEGIN PRODUCT LISTINGS -->
<div id="js-product-list" class="row bg-white category-product-layout">
    <mvt:foreach iterator="product" array="category_listing:products">
        <div class="column half medium-one-third large-one-fourth category-product">
            <div class="flag">
                <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
                    <mvt:assign name="l.settings:product:src" value="l.settings:product:imagetypes:main" />
                <mvt:else>
                    <mvt:assign name="l.settings:product:src" value="g.theme_path $ '/images/img_no_thumb.jpg'" />
                </mvt:if>
                <a href="&mvte:product:link;" class="category-product-image-wrapper">
                    <img src="&mvt:product:src;" alt="&mvte:product:name;">
                </a>
                <div class="category-product-cta-wrapper">
                    <button type="button" class="button category-product-cta-button category-product-cta-quickview js-quick-view" data-product-link="&mvte:urls:PROD:auto_sep;Product_Code=&mvte:product:code;&amp;show=quickview">
                        <span class="levels-icon-eye"></span>
                        <span class="category-product-cta-quickview-text"> Quickview</span>
                    </button>

                <!-- COMMENTING OUT SHOPPING BUTTONS

                                        <form action="&mvte:urls:BASK:auto;" method="POST" class="category-product-form">
                        <input type="hidden" name="Action" value="ADPR">
                        <input type="hidden" name="Product_Code" value="&mvte:product:code;">
                        <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;">
                        <input type="hidden" name="Quantity" value="1">
                        <button class="button category-product-cta-button category-product-cta-button-adpr">
                            <span data-icon="&#xe07a;"></span><span class="category-product-cta-adpr-text"> Add to Cart</span>
                        </button>
                    </form>
                                -->

                </div>
            </div>
            <!-- COMMENTING OUT PRODUCT CODE
            <p class="category-product-code"><a href="&mvte:product:link;">&mvt:product:code;</a></b></p>
            END COMMENT OUT PRODUCT CODE -->
                                <p class="category-product-code"><a href="&mvte:product:link;">&mvt:product:name;</a></p>

                       <!-- COMMENTING OUT PRICE

            <p>
                <mvt:if expr="l.settings:product:base_price GT l.settings:product:price">
                    <span class="category-product-retail-price">&mvt:product:formatted_base_price;</span> <span class="category-product-sale-price">&mvt:product:formatted_price;</span>
                <mvt:else>
                    <span class="category-product-price">&mvt:product:formatted_price;</span>
                </mvt:if>
                <mvt:if expr="l.settings:product:customfield_values:customfields:product_flag">
                    <mvt:do file="g.Module_Feature_URI_UT" name="l.settings:clean_flag" value="tolower(URI_Slugify(l.settings:product:customfield_values:customfields:product_flag))" />
                    <span class="category-product-flag &mvt:clean_flag;">&mvt:product:customfield_values:customfields:product_flag;</span>
                </mvt:if>                
            </p>
                        -->

        </div>
    </mvt:foreach>
</div>
<!-- end category-product listings -->
<mvt:if expr="l.settings:category_listing:page_links:last_page GT 1">
<div class="row bg-white filter-items-container bottom-pagination">
    <mvt:if expr="l.settings:category_listing:page_links:last_page GT 1">
        <div class="column whole align-center medium-align-right page-links">
            <span class="page-links-container">
                <mvt:if expr="l.settings:category_listing:page_links:current_page NE 1">
                    <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:prev_link_params;" class="page-links-previous"><span data-icon="&#x34;"></span> Prev</a>
                <mvt:else>
                    <span class="page-links-previous page-links-deactivated"><span data-icon="&#x34;"></span> Prev</span>
                </mvt:if>
                <mvt:if expr="NOT l.settings:category_listing:page_links:contains_first">
                    <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:first_link_params;" class="page-links-inactive">1</a><a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:first_link_params;" class="page-links-inactive hellip">&hellip;</a>
                </mvt:if>
                <mvt:foreach iterator="pages" array="category_listing:page_links:pages">
                    <mvt:if expr="l.settings:category_listing:page_links:current_page EQ l.settings:pages:page_num">
                        <span class="page-links-active">&mvte:pages:page_num;</span>
                    <mvt:else>
                        <a href="&mvte:urls:_self:auto_sep;&mvte:pages:link_params;" class="page-links-inactive">&mvte:pages:page_num;</a>
                    </mvt:if>
                </mvt:foreach>
                <mvt:if expr="NOT l.settings:category_listing:page_links:contains_last">
                    <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:last_link_params;" class="page-links-inactive hellip">&hellip;</a><a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:last_link_params;" class="page-links-inactive">&mvte:category_listing:page_links:last_page;</a>
                </mvt:if>
                <mvt:if expr="l.settings:category_listing:page_links:current_page NE l.settings:category_listing:page_links:last_page">
                    <a href="&mvte:urls:_self:auto_sep;&mvte:category_listing:page_links:next_link_params;" class="page-links-next">Next <span data-icon="&#x35;"></span></a>
                <mvt:else>
                    <span class="page-links-next page-links-deactivated">Next <span data-icon="&#x35;"></span></span>
                </mvt:if>
            </span>
        <!-- end page-links -->
        </div>
    </mvt:if>
</div>
<!-- end filter-items-container bottom-pagination -->

</mvt:if>

[jsdva]

Try giving the new category the same body id/class.

Jamie

[lynnephelps]

Thanks for the suggestion, but they look the same to me.

Here is the body tag from my custom (misbehaving) page:

<body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:code)" /> &mvte:category:code;"

And here is the body tag from the CTGY page that is ok:

<body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:code)" /> &mvte:category:code;">

[lynnephelps]

I really miss the old version 5 templates, I understood those really well.

[jsdva]

I'm still seeing
<body id="js-CTGY-NOCODE" class="ctgy-nocode videos"> on your videos page and
<body id="js-CTGY" class="ctgy XLR-PROD-ALL"> on the category that you like the product alignment. So your css/id between the two category pages is still not the same.

[lynnephelps]

I guess that miva script snippet in the body tag code is pulling in the template name (ctgy or ctgy-nocode) and the category name (videos or XLR-PROD-ALL).

So your suggestion would be to hardcode the page name part to ctgy, like this?

 
 <body id="js-&mvte:page:code;" class="ctgy &mvte:category:code;">

[lynnephelps]

I really appreciate your help and patience!

[lynnephelps]

Or like this?

 
 <body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:ctgy)" /> &mvte:category:code;">

[jsdva]

Hard coding should work yes. This will keep your styles/functions of the ctgy page template.

Also, I see you have an inline style on your columns for ctgy:

<div class="column half medium-one-third large-one-fourth category-product" style="height: 303px;">

Add that to ctgy-nocode.

Hope this helps,

Jamie

[Bruce - PhosphorMedia]

Jamie is correct. the main issue is you need a min-height declaration on your category items. Any time you use a 'float' for column layout, a min-height is recommended unless you know your content is the same for each item.

[lynnephelps]

Thank you SO MUCH. You are brilliant. The min-height completely sorted the problem. I am so happy!
I need to find some good online CSS training to help me understand the maze of CSS files in my Levels ready-theme. Any resource recommendations?

[Bruce - PhosphorMedia]

Thank you SO MUCH. You are brilliant. The min-height completely sorted the problem. I am so happy!
I need to find some good online CSS training to help me understand the maze of CSS files in my Levels ready-theme. Any resource recommendations?

https://www.w3schools.com/css/

To me, its one of the best online tutorials. (Its still my go to reference whenever i have one of those 'moments'.)

The 'try it' feature is really great/necessary to really understand the true nature of CSS/HTML.

[lynnephelps]

Thank you Bruce! I'll check it out!