Announcement

Collapse
No announcement yet.

Custom CTGY Page Template Help - Product grid gone wonky

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Custom CTGY Page Template Help - Product grid gone wonky

    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.
    Lynne Phelps
    Sy-Klone International
    www.sy-klone.com
    Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

    #2
    Code:
    <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>
    Lynne Phelps
    Sy-Klone International
    www.sy-klone.com
    Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

    Comment


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

      Jamie
      Jamie Donaldson
      JSDVS Web Design / Development
      Web Design | Web Development | E-commerce Design & Integration

      Comment


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

        Here is the body tag from my custom (misbehaving) page:
        Code:
        <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:
        Code:
        <body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:code)" /> &mvte:category:code;">
        Lynne Phelps
        Sy-Klone International
        www.sy-klone.com
        Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

        Comment


          #5
          I really miss the old version 5 templates, I understood those really well.
          Lynne Phelps
          Sy-Klone International
          www.sy-klone.com
          Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

          Comment


            #6
            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.
            Jamie Donaldson
            JSDVS Web Design / Development
            Web Design | Web Development | E-commerce Design & Integration

            Comment


              #7
              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?
              Code:
               
               <body id="js-&mvte:page:code;" class="ctgy &mvte:category:code;">
              Lynne Phelps
              Sy-Klone International
              www.sy-klone.com
              Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

              Comment


                #8
                I really appreciate your help and patience!
                Lynne Phelps
                Sy-Klone International
                www.sy-klone.com
                Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

                Comment


                  #9
                  Or like this?
                  Code:
                   
                   <body id="js-&mvte:page:code;" class="<mvt:eval expr="tolower(l.settings:page:ctgy)" /> &mvte:category:code;">
                  Lynne Phelps
                  Sy-Klone International
                  www.sy-klone.com
                  Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

                  Comment


                    #10
                    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
                    Jamie Donaldson
                    JSDVS Web Design / Development
                    Web Design | Web Development | E-commerce Design & Integration

                    Comment


                      #11
                      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.
                      Bruce Golub
                      Phosphor Media - "Your Success is our Business"

                      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                      phosphormedia.com

                      Comment


                        #12
                        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?
                        Lynne Phelps
                        Sy-Klone International
                        www.sy-klone.com
                        Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

                        Comment


                          #13
                          Originally posted by lynnephelps View Post
                          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.
                          Bruce Golub
                          Phosphor Media - "Your Success is our Business"

                          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                          phosphormedia.com

                          Comment


                            #14
                            Thank you Bruce! I'll check it out!
                            Lynne Phelps
                            Sy-Klone International
                            www.sy-klone.com
                            Reduce Costs and Increase Uptime with Air Precleaners for Engines & HVAC

                            Comment

                            Working...
                            X