Jump to content
Latest News: (loading..)
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

Hi,

After getting past the installation issues, I am trying to redesign the layout of the header (first) and having some problems with it. I found a great source of information regarding how the Bootstrap CSS grid is designed:

https://getbootstrap.com/docs/3.3/css/

However, I am having a tough time finding where all the sub-modules and elements are structured within the header. If I know this piece, then I can use CSS based on the grid to position them where I need them.

The /includes/template_top.php file requires the /includes/header.php file, which calls $oscTemplate->getContent('header');

I get that all the 5 header templates for the header are located via /includes/modules/content/header/templates/... However, where are all these header sub-modules / elements / templates,.. structured into the actual header? There has to be a file where these elements are all compiled to form the header. Any help would be greatly appreciated.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&geo=US&q=oscommerce

Share this post


Link to post
Share on other sites
4 hours ago, Demitry said:

Hi,

After getting past the installation issues, I am trying to redesign the layout of the header (first) and having some problems with it. I found a great source of information regarding how the Bootstrap CSS grid is designed:

https://getbootstrap.com/docs/3.3/css/

However, I am having a tough time finding where all the sub-modules and elements are structured within the header. If I know this piece, then I can use CSS based on the grid to position them where I need them.

The /includes/template_top.php file requires the /includes/header.php file, which calls $oscTemplate->getContent('header');

I get that all the 5 header templates for the header are located via /includes/modules/content/header/templates/... However, where are all these header sub-modules / elements / templates,.. structured into the actual header? There has to be a file where these elements are all compiled to form the header. Any help would be greatly appreciated.

 

The template function you have quoted returns what has been added to it by the execute functions of each installed/enabled content header module according to sort order. What you get is basically a sequence of divs with the column widths that you have defined, which fill up the header section of the page one after the other. There isn't a structure, just a sequence.


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (2.3.4.1 CE) here: https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Share this post


Link to post
Share on other sites
4 hours ago, Demitry said:

@BrockleyJohn

John,

so where do I alter this sequence?

 

by changing the sort order of the modules in admin / modules / content


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (2.3.4.1 CE) here: https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Share this post


Link to post
Share on other sites
On 9/4/2017 at 1:18 AM, Druid6900 said:

I have, what I hope, is a simple problem.

I have uploaded my store logo and set it for 12, for full width.

However, it only extends half way across the screen.

Is there a way to correct this, or, failing that, at least center it on the screen?

I'm using 2.3.4 Gold BS-3

Thanks...

Is the image you are using for your logo the same width as the page?


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

OK, so, basically, I have to double the size of the logo, since it only extends halfway across the screen at the moment.

That may be easier than trying to figure out how to center the current one.


No Good Deed EVER Goes Unpunished

Share this post


Link to post
Share on other sites

@BrockleyJohn

John, thank you ...that helps a little bit, though there is still the issue of how to insert an element in between other elements.

 

@Druid6900

Unless someone has a better solution, here is a simple CSS hack that will work, though you have to test it on mobile as well.

In the user.css file add the following line:

.storeLogo { top:0; left:50%; margin-left:-100px }

Then change the margin-left value to whatever the width of your logo is divided by half. I used the width of the osCommerce logo, which is 200px, and divided by half is 100px.

Though I have to add that centering your logo is not a good idea for page layout because it leaves a lot of empty white space to the left & right of the logo. And everything above-the-fold is valuable page real estate.

 

Edited by Demitry

osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&geo=US&q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry

I just double the size of the image and it fits across the whole screen and resizes correctly on different devices.

Thanks guys.


No Good Deed EVER Goes Unpunished

Share this post


Link to post
Share on other sites

To center an image inside a div, eg if the div is 12 wide and the image is (eg) half...

Place a center-block class on the image.

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites
6 hours ago, Demitry said:

@BrockleyJohn

John, thank you ...that helps a little bit, though there is still the issue of how to insert an element in between other elements.

This is precisely what the sort order achieves...  

Module A = sort order 100, column width 4

Module B = sort order 150, column width 4

Module C = sort order 200, column width 4

Let us say that you want to add in another module in between B and C:

Module A = sort order 100, column width 4

Module B = sort order 150, column width 4

NEW Module = sort order 175, column width 4

Module C = sort order 200, column width 4

Now Module C drops to start a new Row.  

This is unwanted, what you want is to have these 4 modules all in one row:

Change column width of all 4 modules

Module A = sort order 100, column width 3

Module B = sort order 150, column width 3

NEW Module = sort order 175, column width 3

Module C = sort order 200, column width 3

But now you change your mind and want the NEW module BEFORE Module A

Change the sort order of the new module

NEW Module = sort order 75, column width 3

Module A = sort order 100, column width 3

Module B = sort order 150, column width 3

Module C = sort order 200, column width 3

It's so very simple...on the face of it.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@burt

Hi Burt,

Thank you for that explanation and it certainly make it easier, however, I seem to be missing one piece here. This is likely a dumb question,.. but ordering the sort-order of these loaded elements is performed in the admin section, so how do you add a new module to that?

I was thinking of possibly adding a couple of new elements and the only way to do that without having it managed as a module in the admin area, is to code it into one of the existing module templates.

Because BS-Edge strives to be a modular design where developers can add their own modules as contributions, is there any documentation on requirements/guidelines for structuring new modules that would abide by the osC design and code integrity?

 

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&geo=US&q=oscommerce

Share this post


Link to post
Share on other sites

You would make a module.  You would then install it.

If you are a developer...this should be straightforward.

If you are not a developer...it won't be.

From the very start I advised that making things simple in the admin area would make things much harder to code.  
Shop-owners are not expected to code anything, so why are you doing that?  You just need to click click...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Anyone have a clean brand new version of responsive they could quickly test for a bug?

From the admin just try and upload/save a NEW logo.... brow

When I do so I'm being returned to: admin/FILENAME_STORE_LOGO?action=save

obviously not a good URL since filename has been removed.

Looking at the code in admin/store_logo.php I do see a reference to filename

 

        if ($store_logo->parse()) {
          if ($store_logo->save()) {
            $messageStack->add_session(SUCCESS_LOGO_UPDATED, 'success');
            tep_db_query("update configuration set configuration_value = '" . tep_db_input($store_logo->filename) . "' where configuration_value = '" . STORE_LOGO . "'");
          } else {
            $error = true;
          }
        } else {
          $error = true;
        }

 

Share this post


Link to post
Share on other sites

I don't see that in my copy. Maybe something you have added has introduced it. In that case, the easiest solution is to install the Compatibility Addon. Install it in the Admin as well as the Catalog side.

Regards

Jim


See my profile for a list of my addons and ways to get support.

Share this post


Link to post
Share on other sites
42 minutes ago, kymation said:

I don't see that in my copy. Maybe something you have added has introduced it. In that case, the easiest solution is to install the Compatibility Addon. Install it in the Admin as well as the Catalog side.

Regards

Jim

the code is copied off github

https://github.com/gburton/Responsive-osCommerce/blob/master/admin/store_logo.php

Or do you mean you don't experience the problem in your fresh copy?

Edited by greasemonkey

Share this post


Link to post
Share on other sites

I don't see FILENAME_STORE_LOGO anywhere in my copy or in the code for store_logo.php on Github. The redirect link in that file is:

tep_redirect(tep_href_link('store_logo.php'));

which has the filename spelled out, not the older constant value. So either you've changed something or something really odd is happening. Maybe your server is haunted with the spirit of v1.3.4?

Regards

Jim


See my profile for a list of my addons and ways to get support.

Share this post


Link to post
Share on other sites

@burt,

What's the status of this project? Will you continue with it or will it just became 2.3.6 and finish your community version effort?

I'f love to see the admin side integrated with bootstrap like 2.4 is.

Share this post


Link to post
Share on other sites

No plans.  Project is at the end of the road.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Any particular reason for this css:

@media only screen and (max-width: 768px)
custom.min.css:6
.row.list-group {
    -webkit-flex-direction: column;
    flex-direction: column;
}

which results in this on portrait iPad?

Just checking before I remove it on my installation :-)

ipad_css.PNG


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

@frankl that code has to do with the new approach to the perceived equal height problem.  I hated the .js approach to it, so changed it to a .css solution.  See 

The particular piece of code you posted appears to be code I added to force the layout into one column in small devices.  Instead of fully removing, try change 768 to a lower number (ie works on mobile phone, but won't work on portrait ipad)...

Report back if you can ?


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@burt

Replacing it with

@media only screen and (min-width: 320px) and (max-width: 479px) { .row.list-group{-webkit-flex-direction:column;flex-direction:column;}}

fixes iPad portrait, but iPhone 6 landscape looks a little different. I'm not concerned, I wouldn't think many people would browse websites in landscape mode on their smart phones :)

 

 

ipadportrait.PNG

6slandscape.PNG


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

@frankl

 

Hi Frank,

What software are those screenshots from (to test a site in different type of mobile browsers)? I use Opera Mobile Emulator, but the mobile versions available for testing are outdated. Thanks.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&geo=US&q=oscommerce

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×