Responsive DIY Template Default for v1.5.x

[Adrian Ciocîrlan]

Which version of the DIY are you using?

The version via the download section includes an admin layout_controller.php file which adds an extra status to the page "Show this Box @ Min-Width" which allows you to hide specific side-boxes on both tablet and mobile devices.

The version via the the GIT link in my signature includes an admin layout_controller.php file which adds 3 extra statuses:

Desktop Status - Uses CSS to Hide Box @ 768px
Tablet Status - Uses PHP to never even load Box on Tablet Devices
Mobile Status - Uses PHP to never even load Box on Mobile Devices

to the page which allows you to hide specific side-boxes for specific devices. Even allows you to display on mobile devices but hide on tablet and desktop.

--------------------------------------------------------------------------------------

Without a mobile/tablet navigation menu in place you will want your categories to display, so add a anchor in the categories side-box, when clicked it will scroll to the say "breadcrumbs" right above page contents so the additional scrolling is bypassed.

Using the 2.1b on 1.5.1, indeed I need to keep my Categories menu (in this case the left side-box), I thought showing it only on the main page would do it, that's why i asked...

I want to give it a try and do what you said but I'm not sure I understand, "add an anchor" ?

A

[rbarbour]

Using the 2.1b on 1.5.1, indeed I need to keep my Categories menu (in this case the left side-box), I thought showing it only on the main page would do it, that's why i asked...

I want to give it a try and do what you said but I'm not sure I understand, "add an anchor" ?

A

In:
/includes/templates/YOUR_TEMPLATE_FOLDER/common/tpl_main_page.php

Find:

<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

Change to:

<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb" name="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

Then in:
/includes/templates/YOUR_TEMPLATE_FOLDER/sideboxes/tpl_categories.php

Find:

        // skip if this is for the document box (==3)
      } else {
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'; 

Change to:

        // skip if this is for the document box (==3)
      } else {
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . ' #navBreadCrumb">'; 

[Adrian Ciocîrlan]

In:
/includes/templates/YOUR_TEMPLATE_FOLDER/common/tpl_main_page.php

Find:

<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

Change to:

<!-- bof  breadcrumb -->
<?php if (DEFINE_BREADCRUMB_STATUS == '1' || (DEFINE_BREADCRUMB_STATUS == '2' && !$this_is_home_page) ) { ?>
    <div id="navBreadCrumb" name="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>
<?php } ?>
<!-- eof breadcrumb -->

Then in:
/includes/templates/YOUR_TEMPLATE_FOLDER/sideboxes/tpl_categories.php

Find:

        // skip if this is for the document box (==3)
      } else {
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'; 

Change to:

        // skip if this is for the document box (==3)
      } else {
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . ' #navBreadCrumb">'; 

Thank you,

It's what I need, but it only works on the subcategories page, i kinda wanted it to work on all pages or at least the pages that show products.Did I go wrong somewhere, now my code looks like this in the tpl_categories, it was a bit different than the one you said to look after:

// skip if this is for the document box (==3)
} else {
$content .= '<div class="betterCategories"><a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '#navBreadCrumb">';


link that dos it right: http://www.epiesedacia.ro/index.php?...#navBreadCrumb

A

[Adrian Ciocîrlan]

Hi,

Can you please bring some light into this, I really want to solve this scorll problem and I'm stuck, I was very happy to see it worked, but it only works on one page.

If it isn't possible to do the same on certain/all pages or it's very hard to code, at least let me know how do I use the responsive_default, mobile/tablet .php files to show the left categories side-boxes only on the home page.

Thank you!

[rbarbour]

Thank you,

It's what I need, but it only works on the subcategories page, i kinda wanted it to work on all pages or at least the pages that show products.Did I go wrong somewhere, now my code looks like this in the tpl_categories, it was a bit different than the one you said to look after:

// skip if this is for the document box (==3)
} else {
$content .= '<div class="betterCategories"><a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '#navBreadCrumb">';


link that dos it right: http://www.epiesedacia.ro/index.php?...#navBreadCrumb

A

It's not exactly a cut and dry method.

It works only if a category is selected via the category side-box. The #hash tag " #navBreadCrumb" would have to be added to specific areas of code to work elsewhere.

Version 2.1b includes a ADMIN file called layout_controller.php which allows you to hide side-boxes on mobile devices.

[rbarbour]

You could use jQuery to add the #hash

<script type="text/javascript"><!--//

(function($) {
$(document).ready(function() {
$("a").attr("href", function(i, href) {
if( window.location.hostname === this.hostname ) {
return href + "#navBreadCrumb";
}
}); 
  });

}) (jQuery);

//--></script>

[rbarbour]

You could use jQuery wrapped in the included mobile-detect class to just add the #hash on mobile devices

<?php if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) { ?>
<script type="text/javascript"><!--//

(function($) {
$(document).ready(function() {
$("a").attr("href", function(i, href) {
if( window.location.hostname === this.hostname ) {
return href + "#navBreadCrumb";
}
}); 
  });

}) (jQuery);

//--></script>
<?php } ?>

[rbarbour]

You could add the #hash to all internal links

/includes/functions/html_output.php

    if (!$static) {
      if (zen_not_null($parameters)) {
        $link .= 'index.php?main_page='. $page . "&" . zen_output_string($parameters) . '#navBreadCrumb';
      } else {
        $link .= 'index.php?main_page=' . $page . '#navBreadCrumb';
      }
    } else {
      if (zen_not_null($parameters)) {
        $link .= $page . "?" . zen_output_string($parameters) . '#navBreadCrumb';
      } else {
        $link .= $page . '#navBreadCrumb';
      }
    } 

[rbarbour]

You could add any number of mobile menus

[Adrian Ciocîrlan]

You could add the #hash to all internal links

/includes/functions/html_output.php

    if (!$static) {
      if (zen_not_null($parameters)) {
        $link .= 'index.php?main_page='. $page . "&" . zen_output_string($parameters) . '#navBreadCrumb';
      } else {
        $link .= 'index.php?main_page=' . $page . '#navBreadCrumb';
      }
    } else {
      if (zen_not_null($parameters)) {
        $link .= $page . "?" . zen_output_string($parameters) . '#navBreadCrumb';
      } else {
        $link .= $page . '#navBreadCrumb';
      }
    } 

Hello again and thank you very much!

1. I tried the html_output.php method and it works, but after I rewrite the links with CEON URI it doesn't work anymore on the rewritten links, only on the original zen cart type of links ...
I gues this is what I have to change: 'index.php?main_page=' ...
Any suggestion?

2. What file do I have to edit to modify the mobile-detect class? You said that I could do that too, but it seems to appear in more than one file...

Thanks