Responsive DIY Template Default for v1.5.x

rbarbour:

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

Adrian Ciocîrlan:

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">';

rbarbour:

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

Find:

<div id="navBreadCrumb"><?php echo $breadcrumb->trail(BREAD_CRUMBS_SEPARATOR); ?></div>

> 
> Change to:
> ```php
<!-- 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:
> ```php
        // 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?main_page=index&cPath=625#navBreadCrumb

A

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!

Adrian Ciocîrlan:

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?main_page=index&cPath=625#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.

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>

Adrian Ciocîrlan:

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 } ?>

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';
      }
    }

Adrian Ciocîrlan:

You could add any number of mobile menus

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';
  }
}

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

I have upgraded successfully to Zencart v1.5.5 but was interested in changing my Abbington Mega site into a responsive one

Therefore my question is after reading the FAQ's I still wasn't sure.
To transform my site to either the included responsive classic or The Westminster New, Winchester Black, Winchester Responsive, and Responsive Sheffield Blue v2.0 do I:

1. Install a responsive plugin
2. Compare files between a new template and abbington mega (I use winmerge) and add all the differences into the new template files
3. Then select new template on admin

or
Is there a more elegant method to merge files for a new template?

How can you manage that on your demo the 3 columns of centerboxes go down to 1? Mine are only decreasing in size but continue being 3. I haven't found where to change those parameters. If I change them in admin, then it will change it to desktop, which is not what is wanted.