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

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

As if were not all busy with a ton of repo's and loose ends to tie - here's some more food for thought

 

I have been making the elements generally found on the home page (heading, customer_greeting, text_main, new_products) to take advantage of the content modules introduced in 2.3.4 - I even place extra markup in each module to give one the ability to add their own before and after content - the idea is you can place your own opening div with desired markup, or omit completely.

 

This gives you the ability to bundle the modules together in any sort of layout desired. By default upon initial installation of the content module, the before content is '<div class=\"contentText\">' and after content is '</div>'.

 

Ive been able to place the main text on one side with a neat tidy stack of new products to the other side - thats just a small example - the outcomes are limitless - just craft the before/after content with the sort order of each content module, and you can create all kinds of layouts.

 

SO - also have been experimenting with acidvertigo's classes created for 2.4 . I made a new class for manufacturers and use it to output the manufacturer_info content box data. Now the idea is to create new content modules for the product_info page. If done the way I explained above, then the layouts that can be achieved will be practically unlimited.

 

With that said I do see a need to clean up some parts of the community build in order to take better advantage of the content modules (if it makes the upgrade to 2.3.4).

  • Some of the info boxes were coded to display in the product info page. These should be reverted back to box modules only, and a new set of content modules created for use in their place.
  • Some new box modules were introduced that display only in the header. These should be moved to content modules with a header group.
  • The infoboxes and footer follow the same pattern - and my suggestion is the same.

Using the classes - including the newly implemented category_tree -  and content modules we could have a pretty damn robust community build going on here.

 

 

Well, for the time being I'll let this simmer while I return to the admin work.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

@ - dont do too much work on that area ... cm_modules for header and footer are next on my list.


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

For better clarification of before/after content  here is what I did to the content's template module of customer_greeting:

<?php
  if ( defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT . "\n";
  }
  
  echo $greeting_string;
    
  if ( defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT . "\n";
  }

and again for text_main:

<?php
  if ( defined('MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_TEXT_MAIN_BEFORE_CONTENT . "\n";
  }
  
  echo MODULE_CONTENT_INDEX_TEXT_MAIN;
    
  if ( defined('MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT') && tep_not_null(MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT) ) {
    echo MODULE_CONTENT_INDEX_TEXT_MAIN_AFTER_CONTENT . "\n";
  }

It may seem like a lot of extra markup - but it prevents having any hard coded opening/closing elements and I think from a design and layout perspective it really opens the doors to building up the page - without having to create a type of drag and drop feature.

 

 

I could open the customer greeting with a before div tag with class of col-md-6, omit the after content, have the text_main loaded with no before content, and then make the after content the closing div that corresponds to the opening div in the customer_greeting module.

 

SO then I would have half the page dedicated to these two modules and beside that could place something else in the remaining col-md-6 space.

 

 

 

 

 

 

 

I wouldnt limit it to page modules alone - for example - the footer content modules have some hard coded classes for their width in place - a suggested one could be placed in the default install - but then we always have the ability to redo it as desired directly from the module interface.

 

Heres also the markup for the main content module for cm_index_customer_greeting:

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_index_customer_greeting {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_index_customer_greeting() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_INDEX_CUSTOMER_GREETING_TITLE;
      $this->description = MODULE_CONTENT_INDEX_CUSTOMER_GREETING_DESCRIPTION;

      if ( defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_INDEX_CUSTOMER_GREETING_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS == 'True');
      }
    }

    function execute() {
      global $oscTemplate, $customer_id, $customer_first_name;

      if (tep_session_is_registered('customer_first_name') && tep_session_is_registered('customer_id')) {
        $greeting_string = sprintf(MODULE_CONTENT_INDEX_TEXT_GREETING_PERSONAL, tep_output_string_protected($customer_first_name), tep_href_link(FILENAME_PRODUCTS_NEW));
      } else {
        $greeting_string = sprintf(MODULE_CONTENT_INDEX_TEXT_GREETING_GUEST, tep_href_link(FILENAME_LOGIN, '', 'SSL'), tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));
      }

      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/customer_greeting.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
    }

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS');
    }

    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Customer Greeting', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS', 'True', 'Should the customer greeting be shown on the index page?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
	  tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Before Content', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT', '<div class=\"contentText\">', 'Insert here item such as opening div tag with desired class, leave blank for nothing.','6', '0', 'tep_draw_textarea_field(\'configuration[MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT]\', false, 30, 3, ', now())");   
	   tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('After Content', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT', '</div>', 'Insert here item such as closing div tag, leave blank for nothing.', '6', '0', 'tep_draw_textarea_field(\'configuration[MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT]\', false, 30, 3, ',  now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_INDEX_CUSTOMER_GREETING_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_CONTENT_INDEX_CUSTOMER_GREETING_STATUS','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_BEFORE_CONTENT','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_AFTER_CONTENT','MODULE_CONTENT_INDEX_CUSTOMER_GREETING_SORT_ORDER');
    }
  }
?>

Edited by WebSource 5

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites
  • Some of the info boxes were coded to display in the product info page. These should be reverted back to box modules only, and a new set of content modules created for use in their place.
  • Some new box modules were introduced that display only in the header. These should be moved to content modules with a header group.
  • The infoboxes and footer follow the same pattern - and my suggestion is the same.

 

So far:

 

Footer Content Modules:

Generic Text (replaces bm_text from 2334bs)

Information Links (pretty much you'd choose this OR the usual side column information box)

Contact Us

To Do:

Best Sellers

Account

Order History

 

Footer Extra Modules:

Copyright

Payment Icons

To Do:

None

 

 

 

 


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

I see you went with a width to determine class used. I think that is probably the best way of handling things in the header and footer.

 

The only place I see having to get extreme as my example is on the actual page where there will / SHOULD be a need to organize presentation. And I do know its really overkill on my part - but thats what I tend to do!


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Bear in mind that the site owner (or template maker etc etc) can also go direct into the template file for the module and change things in there.  

 

I can make it easy for the average Joe to go into the admin, turn on a box and make it 2/3 of the footer, then add another box and make it 1/3.  More than this is (I think) not needed in this area.  

 

I have not yet thought about the product page or the index page.


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

Bear in mind that the site owner (or template maker etc etc) can also go direct into the template file for the module and change things in there.  

 

I can make it easy for the average Joe to go into the admin

 

Those 2 statements have been my dilemma. I prefer to change the code in the module 100% over anything else. But keeping it simple for the average Joe makes it complicated. In fact, the more I think about adding before and after content spots, I'm now seeing that I have probably made it even more complicated because unless one knows bootstrap, or whatever framework, it would probably be even more difficult to arrange everything as wanted.

 

I forgot a very important rule here: KISS

 

Revert in process.

 

SO now let me overthink again!

 

Maybe the product info page could be structured in a way like the admins dashboard where everything is arranged in one slot or another grid type fashion - but that's probably BS too.

 

Here we go:

F@#*! IT - They need to be setup to look just like the default install. Then when one is building their site, they can go in and manually change the HTML in the module.

 

Besides that, shop owners and themers will more than likely be putting together their own custom modules for desired presentation.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

It's the problem I've been describing for years - when we coders try to make things more simple "press this button to do X", it actually makes the codebase a lot more complicated, and will lead to the type of situation that Magento users find themselves in => if it's doable from the admin panel it's easy, if you need to do something else, start crying.

 

In other words, my lemons and melons analogy ... if coders give you a variety of melons, but you the shopowner needs a lemon ...

 

I do want to do something to allow placement of content in certain pages, I think it's going to be more like a "block system" so that the shopowner could do:

 

product title 75% product price 25%

 

description 50% image 50%

 

buy button 100%

 

Reviews 75% write review button 25%

 

if we keep it as ucomplicated as we can while also giving the shopowner some ability to easily change the product page layout, I think we're on the right track. So we can give the ability to give a width (and shopowners will need to know that 100% total, and the next "block" drops to a new line) and the ability to sort the "blocks" easily so that the shopowner could put (for example) the buy button above the description and so on.

 

Thoughts ?


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

I think that approach would be a win/win situation, and it sort of falls in the same as the login form content module - but with bootstrap is better as we don't need to write any javascript for alpha or omega classes.

 

I have already created content modules for everything on the product_info page - past and present. If you send me a snippet of the code you used for the footer module widths, I'll place that in my existing work.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

I did something very similar using the 960gs grid widths. It works very well for rearranging the page on the fly. Using percentages would be even easier. Good idea.

 

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

I have already created content modules for everything on the product_info page - past and present. If you send me a snippet of the code you used for the footer module widths, I'll place that in my existing work.

 

I'll be committing those changes shortly - just need to smooth out a few bumps in the road prior to doing so.


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

2334BS is now updated to 234BS, thanks to @ 


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

Good deal - I did notice a small bug after the initial commit but was waiting before adding more :

 

Pretty simple - the required aria-required="true"' needs removed from gender radio's in modules/checkout_new_address.php

 

It prevents a user from leaving the page if selecting an existing address or just changing their mind.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

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

May be a seller wants something like that:

 

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/3-implementation-in-a-real-design/index.html

 

even a 'simplified' version of:

 

http://neokoenig.github.io/jQuery-gridmanager/demo/simple.html

 

No more numbers, % or know if bootstrap has 12 or 14 colums. I think.

 

I think that prestashop does somethink like that (a 'live editor'  for the front page).

 

A 'live previev' (in products_info or even index - including columns) will be 'the paradise' of all (including coders) :thumbsup:

Edited by Antonio Garcia

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

No pierdas el tiempo. Si quieres usar la versión más estable de osCommerce (la realizada por la comunidad, que además es 'responsive', la 2.3.4.1BS Edge) pincha aquí y aquí para descargarte el idioma Español.

Share this post


Link to post
Share on other sites

As if were not all busy with a ton of repo's and loose ends to tie - here's some more food for thought

 

I have been making the elements generally found on the home page (heading, customer_greeting, text_main, new_products) to take advantage of the content modules introduced in 2.3.4 - I even place extra markup in each module to give one the ability to add their own before and after content - the idea is you can place your own opening div with desired markup, or omit completely.

 

This gives you the ability to bundle the modules together in any sort of layout desired. By default upon initial installation of the content module, the before content is '<div class=\"contentText\">' and after content is '</div>'.

 

 

I think this was done by me a couple of months ago: http://forums.oscommerce.com/topic/397516-2334bs-template-and-modules/

Share this post


Link to post
Share on other sites

I think this was done by me a couple of months ago: http://forums.oscommerce.com/topic/397516-2334bs-template-and-modules/

Hi @@piernas,

 

Yes I see you did write some for use with the box modules. However, I am more or less referring to the use of new content modules as introduced in osCommerce V2.3.4.

 

You'll see somewhere else in the thread I have suggested removing any box modules that were previously made to display content in places other than the left/right column in favor of using the new content system.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Share this post


Link to post
Share on other sites

Ah, didn't see the content modules you mention. Seems that things moves fast and I didn't notice. I'll take a look to the 2.3.4 code to see those changes.

 

Is developement being organized in some way apart from this forum? I don't want to code something that's already obsolete. I'm getting lost with 2.3.4 and 2.3.3.4 being modified at the same time.

Edited by piernas

Share this post


Link to post
Share on other sites

@@opus_uno2001 it is definitely doable...I have a shop set up that way so I can update my existing 2.2 version of osC to 2.3.3.4 BS but at some point I will drop the old version. If you plan to do it with similar versions of osC it should be a breeze. What is your reason for wanting to run 2 front ends? Bootstrap can be used by mobile, tablet and desktop users...it fits itself to the different screen sizes. There is no need for separate front ends if that was your concern.

 

Dan

 

PS: If you have additional questions you might want to start your own thread...I think Bert wants this thread to be used just for issues relating to bugs and/or suggestions concerning the development of 2.3.3.4BS itself.

Share this post


Link to post
Share on other sites

Just downloaded and installed the latest version from Github. While I have not researched the upgrade from the standard osC 2.3.3.4 to 2.3.4, I do have a couple of quick observations:

 

1) The readme.md file still says it is 2.3.3.4bs

 

2) I do not see a user.css file in the /catalog directory. Is it just missing, or is this function no longer used?

 

More to come, I'm sure ...

 

Malcolm


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 "Frozen" release here

Share this post


Link to post
Share on other sites

2) I do not see a user.css file in the /catalog directory. Is it just missing, or is this function no longer used?

Malcolm

Yes, I missed the user.css too! But no problem - create a new one (or copy it from your previous BS2334) and add an entry to your template_top.php after <link href="custom.css" rel="stylesheet">

                                    <link href="user.css" rel="stylesheet">

 

I think it was a very good idea of burt to say "Keep the core including the custom.css untouched and write all your style changes into the user.css". This way you can simply transfer your styles from shop to shop and also very simply restore the original state of BS2334.

 

J.J.

Edited by De Dokta

Share this post


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

×