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

Making changes to page layout the simple way.

Recommended Posts

For those who are not programmers making changes to the bootstrap page layout can be daunting. It’s not easy keeping track of columns and <div>’s!

Not to worry there is a nice GUI tool that lets you make a page layout’s by simply moving things onto the page and giving you the code needed to make the page.

Its not going to be perfect for everyone but I’m sure it will help some people.

Its free for personal use. The example below shows 2 simple columns side by side, but it could be as complex as you like.

You can get it here https://pingendo.com/index.html

 

image.thumb.png.2e015b1bd156c281ee1548d1178f5a03.png


 

Share this post


Link to post
Share on other sites

This gives a better idea of what can be done with a drag and drop bootstrap page layout. In just a few minutes you can produce a completely new layout of the product info page. Using this method you can give your site a more custom look and feel that the stock install.

Bootstrap is just a framework built using HTML5, you can use HTML5 to make small changes directly or use this type of Bootstrap tool to make big changes.

Remember the tool is simply giving you a new layout, you will need to insert the php code into the correct sections.

It is also very useful for adding product descriptions that require more than simple text. Adding new custom pages is also much simpler using a tool like this.   

image.thumb.png.01b7bccc21b1d023d7fb270b22f5e1fb.png

 

This is how it will look in the browser.

image.thumb.png.e76143e8a929c1192d6268692894355a.png


 

Share this post


Link to post
Share on other sites

hi thanks

this looks great

if this is used to redo the template of product info page.

 

whats the best way to re introduce the PHP code bits back in?

as there is a fair bit of php code that spits out some html and other fields on the page.

ive always found this page tricky to edit and keep track of div tags

 

 

On 8/13/2018 at 6:25 PM, JcMagpie said:

For those who are not programmers making changes to the bootstrap page layout can be daunting. It’s not easy keeping track of columns and <div>’s!

Not to worry there is a nice GUI tool that lets you make a page layout’s by simply moving things onto the page and giving you the code needed to make the page.

Its not going to be perfect for everyone but I’m sure it will help some people.

Its free for personal use. The example below shows 2 simple columns side by side, but it could be as complex as you like.

You can get it here https://pingendo.com/index.html

 

image.thumb.png.2e015b1bd156c281ee1548d1178f5a03.png

 

Share this post


Link to post
Share on other sites
Posted (edited)

Well you just add the required code into the relavent sections on the page, As you can see from the example above you will see the rsults on sreen so will see any cokup you make 😊 I'm not saying it's simple, layout with bootstrap never is, but it gives you more freedom to make a custom layout that just moving the sections around.

Oh if you plan on doing this your probably better of using the none moduler Product Info page 😊 as doing this to the moduler one is a bit pointless, unless

you whant to make changes to each section?

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

And @burt may have a BS v4 version out before long, just so you're aware that some changes may be needed to the code before too long. Just be aware of that before you do any custom coding, and plan to stay current on Edge/CE/Frozen.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites
Posted (edited)

Bootstrap 4 is a major rewrite of the framework and it’s not backward compatible.

Even among the bootstrap enthusiasts the general view is only use 4 on new projects or major updates.

If you have a fully working site, then the move is not required! A current CE site will not work with Bootstrap 4.

The average shop-owner will be hard pressed to see the difference between 3 and 4.

Oh and for those who have attempted to make changes to Bootstrap 3 layout  😊 Bootstrap 4 is not customizable via a web interface like Bootstrap 3.

Edited by JcMagpie

 

Share this post


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

Bootstrap 4 is a major rewrite of the framework and it’s not backward compatible.

Even among the bootstrap enthusiasts the general view is only use 4 on new projects or major updates.

If you have a fully working site, then the move is not required! A current CE site will not work with Bootstrap 4.

The average shop-owner will be hard pressed to see the difference between 3 and 4.

Oh and for those who have attempted to make changes to Bootstrap 3 layout  😊 Bootstrap 4 is not customizable via a web interface like Bootstrap 3.

I have been running BS4 on osCommerce for a while now. I said before the difference between 3 and 4 is huge. Alignment issues that we had with BS3 are just no more - thanks to the flex system. No need for equal height scripts, and so much more.

 

Share this post


Link to post
Share on other sites
Posted (edited)

I had a try a few months ago on the test site, just too many changes to get even the stock layout to work properly, I used this online tool to help with

conversion but still too much work so gave up.😊

http://upgrade-bootstrap.bootply.com/

So how long did it take you to convert? Did it have much impact on add-on you were using.

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

It took me approximately 2 or 3 days, no more. But i have experience bootstrapping other projects like forum software that i use as well. osCommerce really is a small project in comparison. The addons that i use, not many, i convert likewise.

What makes osCommerce difficult to convert is that in some places the HTML is still inter-twined with the code - even in the community edition.

Share this post


Link to post
Share on other sites

 

25 minutes ago, Hotclutch said:

HTML is still inter-twined with the code

Yep! that was the main stumbling block for me, it was taking longer to find the relevant html for each output and unpick it from the php than the actual conversion.

Also reusing some of the php especially when it’s used for output is not easy with some of the Bootstrap classes, Modal is a pain, to out put a form on a modal you end up having to rewrite much of the code as they all use template top and stuff, I certainly would not have achieved much in 2 days on CE.😂

Silly question but if you have already done the convert to BS4 why is it beeing done again?

 


 

Share this post


Link to post
Share on other sites
9 minutes ago, JcMagpie said:

Silly question but if you have already done the convert to BS4 why is it beeing done again?

How do you mean?

Share this post


Link to post
Share on other sites

 

19 hours ago, MrPhil said:

And @burt may have a BS v4 version out before long, just so you're aware that some changes may be needed to the code before too long.

Well I was under the impression that that was the next big update for CE?


 

Share this post


Link to post
Share on other sites

That may be, but i want my installation to be the way i want it to be now - and there's no guarantee if/when anything will be released here. I won't be upgrading to such an update if it comes out.

Share this post


Link to post
Share on other sites

Ok I understand. I too have frozen my live sites for now as they work and are stable apart from a few issues such as PayPal.

I would imagine any shop owner who has just spent several months getting the shop converted and up and running in Gold/ Edge/ Froze/ CE or whatever is not going to be rushing to do that work all overall again.😊


 

Share this post


Link to post
Share on other sites

Especially with the holiday shopping season fast approaching... they're out of time this year to make major changes, and right now they want to make sure their store is stable and ready for hordes of customers.

Regarding my comments on BSv4, it sounds like they could involve massive changes to osC. It could take Gary a while to code and test. Any further work by a store owner (custom code or add-ons) might end up being tossed out the window once they upgrade to a BSv4 version of osC. Just be aware of this before plunging into any major work on the BSv3 code.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×