Responsive DIY Template Default for v1.5.x

picandnix:

I echo these wishes, our thoughts are with you Raymond.

Also from this side of the ocean

tom97zr2:

thanks alot for this! I've created a test site on another folder ...com/responsivetest so I can test and use this. after installation, following the instructions on your site, what would I do next? sorry newbie question. I'm using a zj_black template and have made a bunch of changes/customizing to the files to get my site how I want it and live. Do I basically just merge your responsive code into my zj_black folder files and go from there(I know I'll have to add files like different product info template files for better mobile view, thanks for your explaining about that), or copy my files to responsive_template_default folders and merge the code? Sorry still learning, have read a good bit. Thanks!

The easiest way would be to merge 2.1 code with the zj_black template code.

I only posted 2.0 > 2.1 code changes on my website, their are several newly added files in 2.1 which will be available in the plugin section of Zen Cart once approved.

Design75:

Also from this side of the ocean

uswebworx:

Prayers for you and thank you for everything!

DivaVocals:

Ditto!:smile:

picandnix:

I echo these wishes, our thoughts are with you Raymond.

keneso:

Really sorry to hear about your illness, hopefully is nothing serious; wish you the best.
Get well soon.

:smile: Thank you!

Hey rbarbour, have you seen or worked with the new mobile detect version 2.7.8? One thing I see different is the first line of code is session_start(); in an example at https://github.com/serbanghita/Mobile-Detect/blob/master/examples/session_example.php

http://mobiledetect.net/

I got my site just about done, but having a little problem, and wondering if this new version would fix it, I think I need it to start a session right away when the website first loads on a device, it doesn't seem to do that until another display mode link is clicked. I'm using your example footer code to use different header files for each device. Problem is my phone won't load the mobile header until after I click the my view tablet or view full site link and then click mobile view, then it will show the mobile header. I have to delete from your code " && $_SESSION['display_mode']=='isMobile' " in order to get my mobile header to load right away when you viewing on my phone after clearing the cookies. But problem then is if I click tablet view or full site view, that mobile header will stay and it won't show my tablet or full site header due to the changed code below which basically says to always show the mobile header if a mobile device is detected. So then it looks almost pointless to even allow the user to click tablet view or full site view since nothing changes until they turn their phone sideways. Also the header displays weird sometimes because of the mobile detect code I am changing around which changes the if statements for the responsive stylesheets to make it all work how I want it to.

if ($detect->isMobile() && !$detect->isTablet() or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){

I realize I may have to use css to change my header for each device, but I don't want it to load the bigger pictures in the mobile view that I use in the header for the full site and tablet site. Or maybe instead of calling in different header files I can use the if statements and mobile detect code to only call in those bigger pictures if a tablet device is detected or "else" when no phone or tablet is detected.

Thanks again for any help!

I figured it out and got it to work right, I had to add more else if statements to your example code, and will need to do this everywhere different files are called upon like for for example the product info display files for different devices. If there is a way to start the session when it detects a device then this extra code wouldn't be needed. I also had to do this to the code in the html header file to load the correct stylesheets so my headers would look right.

if ($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){

require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else if ($detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

require($template->get_template_dir('tpl_header_tablet.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_tablet.php');

} else if ($_SESSION['display_mode']=='isDesktop'){

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');

} else if ($detect->isMobile()){

require($template->get_template_dir('tpl_header_mobile.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_mobile.php');

} else if ($detect->isTablet()){

require($template->get_template_dir('tpl_header_tablet.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header_tablet.php');

} else {

require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');

}

I have not tested the newest version of mobile detect yet.

The php if statements I provide in 2.0a /common/tpl_header.php file work correctly.

My site examples are still 2.0 version examples and I will update ASAP.

if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $detect->isTablet() && $_SESSION['display_mode']=='isMobile' or $_SESSION['display_mode']=='isMobile'){

//MOBILE DEVICE CODE

} else if($detect->isMobile() && $_SESSION['display_mode']=='isTablet' or $detect->isTablet() && $_SESSION['display_mode']=='isTablet' or $_SESSION['display_mode']=='isTablet'){

//TABLET DEVICE CODE

} else if($detect->isMobile() && !$detect->isTablet() && $_SESSION['display_mode']=='isDesktop' or $detect->isTablet() && $_SESSION['display_mode']=='isDesktop'){

//DESKTOP DEVICE CODE

} else { 

//DESKTOP DEVICE CODE

}

Remember full site won't work if testing on a desktop. Your UA must be detected as a Mobile Device first.

Ya at first I was confused and thought the mobile detect wasn't working, then did some tests with the responsive_mobile.php file and code example changes to see it was working. Then took me two days to figure out all the code changes to make it work correctly haha.

Another cool thing I did was I duplicated the column grid layout add on files and upload a new similar sql, changing it a little bit, so my site shows 3 columns per row for my desktop/full site and 2 columns per row for the tablet view when in landscape view, and then thanks to the responsive code it shows one column per row for tablets and phones in the portrait view. And I can change the 4 column grid layout settings for desktop and tablets in my admin.

tom97zr2:

Another cool thing I did was I duplicated the column grid layout add on files and upload a new similar sql, changing it a little bit, so my site shows 3 columns per row for my desktop/full site and 2 columns per row for the tablet view when in landscape view, and then thanks to the responsive code it shows one column per row for tablets and phones in the portrait view. And I can change the 4 column grid layout settings for desktop and tablets in my admin.

Very cool indeed.

I am currently working on a similar plugin.

It currently displays

rows: (1 product per row)
grid: (3 products per row)
gallery: (2 products per row)

All using the same modules/product_listing.php file

Eventually I want to include the mobile detect class and admin controls to limit display view on specific devices @ shop owners discretion.

I am still not 100% and haven't had much time to wrap it up though.

You can check it out here.

Hi,

Are there any plans to change this template to use CSS/JS Loader?

Thanks

OLCS:

Hi,

Are there any plans to change this template to use CSS/JS Loader?

Thanks

If you mean bundle in the CSS/JS Loader, I hope NOT..

OLCS:

Hi,

Are there any plans to change this template to use CSS/JS Loader?

Thanks

You can use the CSS/JS Loader module with this template package by merging any common files.

Thanks,

Anne

exactly there's no need to bundle these two together> picaflor-azul:

You can use the CSS/JS Loader module with this template package by merging any common files.

Thanks,

Anne

OLCS:

Hi,

Are there any plans to change this template to use CSS/JS Loader?

Thanks

No plans to incorporate any plugins into this template package for that is not it's primary purpose.

Besides I am not a fan of CSS/JS Loader or any plugin that requires another to function.

However you may include, merge, add, edit, alter, change, experiment, re-write, claim as your own or whatever you feel necessary at your own accord to this template package.

picaflor-azul:

You can use the CSS/JS Loader module with this template package by merging any common files.

Thanks,

Anne

Thanks for coming back to me Anne. I thought you might be able to merge the files. I am a total novice however and couldn't work out what I was doing. All I have done is install this responsive template and then went to install CSS/JS Loader however they one duplicate file between them -
\includes\templates\YOUR_TEMPLATE\common\html_header. I had no idea what I was meant to be merging where! Think I will have to pay someone to do it for me.

OLCS:

Thanks for coming back to me Anne. I thought you might be able to merge the files. I am a total novice however and couldn't work out what I was doing. All I have done is install this responsive template and then went to install CSS/JS Loader however they one duplicate file between them -
\includes\templates\YOUR_TEMPLATE\common\html_header. I had no idea what I was meant to be merging where! Think I will have to pay someone to do it for me.
If you PM me your email address I will send you the html_header.php I merged

rbarbour:

No plans to incorporate any plugins into this template package for that is not it's primary purpose.

Besides I am not a fan of CSS/JS Loader or any plugin that requires another to function.

However you may include, merge, add, edit, alter, change, experiment, re-write, claim as your own or whatever you feel necessary at your own accord to this template package.

Hi rharbour, thanks for your response.

I am not a fan of CSS/JS loader either. I agree I don't like the idea of modules that rely on others in order to work. There are just multiple modules I wished to use with this template that do use CSS/JS loader and I am not sure how I get them both working together. I thought if there were plans ahead to change this module to use it I wouldn't need to worry.

Think I might need to pay someone to get it all working for me!

OLCS:

Hi rharbour, thanks for your response.

I am not a fan of CSS/JS loader either. I agree I don't like the idea of modules that rely on others in order to work. There are just multiple modules I wished to use with this template that do use CSS/JS loader and I am not sure how I get them both working together. I thought if there were plans ahead to change this module to use it I wouldn't need to worry.

Think I might need to pay someone to get it all working for me!

Must be one of the Numinix modules. They force you to use this plugin with several of their adds-ons whether you want it or not.. (which is why some of their modules - many of which I'd like to use - are not my list of modules to avoid..)

Design75:

If you PM me your email address I will send you the html_header.php I merged

Thank you Design75, that's really kind of you. I have just sent you a PM :)