Official osCommerce 2.3.4.1 made responsive in 60 min using Unsemantic and w3.css

[♥JcMagpie]

Official osCommerce 2.3.4.1 made responsive in 60 min using Unsemantic and w3.css

This was done just as a bit of fun to see what was involved and what could be done with Official osCommerce.

Was started in another thread but moved out to let people comment without interfering with original thread.

The results were achived with about 1 hours work and required small edits of about 5-6 files.

As you will see it's not perfect but does show what can be done with just a little effort with a stock install of Official osCommerce 2.3.4.1

 

Should you do it? 😊  that's entirely up to you. feel free to take a look at the test site and any feedback is welcome good or bad.

 

Thanks to @Hotclutch for the W3.CSS pointer.

 

https://jcmagpie.co.uk/

 

[Hotclutch]

Nice. I see you did all the boxes.

<div class="w3-card w3-margin-bottom">

<header class="w3-container w3-blue">
  <h6><?php echo 'Payment Methods'; ?></h6>
</header>

<div class="w3-container w3-center">
  <p><?php echo 'We only accept payment by EFT.'; ?></p>
</div>

</div>

1) Notice the <p> tag. Try to keep that because it gives some padding in the box body.

2) We used w3-blue (or you used w3-light-gray). We can use instead w3-card-header

then put in stylesheet.css

.w3-card-header {
    color: #fff!important;
    background-color: #2196F3!important;
}

Now it is very easy to change the theme color.

[Hotclutch]

My mistake, in the other post i did not put the <p> tags: so

    function execute() {
      global $PHP_SELF, $oscTemplate;

      if ( (substr(basename($PHP_SELF), 0, 8) != 'checkout') && tep_not_null(MODULE_BOXES_CARD_ACCEPTANCE_LOGOS) ) {
        $output = '<div class="w3-card w3-margin-bottom">' .
                  '  <header class="w3-container w3-blue"><h6>' . MODULE_BOXES_CARD_ACCEPTANCE_BOX_TITLE . '</h6></header>' .
                  '  <div class="w3-container w3-center"><p>';

        foreach ( explode(';', MODULE_BOXES_CARD_ACCEPTANCE_LOGOS) as $logo ) {
          $output .= tep_image(DIR_WS_IMAGES . 'card_acceptance/' . basename($logo));
        }

        $output .= '  </p></div>' .
                   '</div>';

        $oscTemplate->addBlock($output, $this->group);
      }
    }

 

[♥JcMagpie]

Yes I noticed that I just used a little css to add some padding in the user.css got the same result but yes the <p> works.

.w3-center {
    text-align: center !important;
    padding: 1rem;
}

 

[♥JcMagpie]

Also just spotted that osC official comes with banner manager ready to use which is nice 😊. Just add image out of the box and off you go.

[Antonio Garcia]

22 hours ago, JcMagpie said:

This was done just as a bit of fun to see what was involved and what could be done with Official osCommerce.

 

Are you contemplating to do the same with the ADMIN area?

If only involves 4-5 files of change & 1 hour of work, I think that I worth the task.

I LOVE the new bootstrap 4 admin area but it need a carefully search of the duplicate code in the admin/includes and revamp with B4 all the remaining (non default) pages... and also it should be fine for Gold, Edge, Frozen, Phoenix, and the rest of the variants (as the admin is almost identical).

 

[Hotclutch]

I think Zahid is giving the wrong impression of how long it would take to produce a responsive (front or backend). It's at least a few days work if you know the framework and osC well.

[Yurius]

Explain to me what is the secret meaning of creating a bootstrap for admin? Does anyone have such a rush that you need to start administering from a mobile phone at the same second?

[♥JcMagpie]

22 minutes ago, Antonio Garcia said:

Are you contemplating to do the same with the ADMIN area?

No I have no wish to do that with the admin, this was just an quick look at what is involved in making official responsive, As I have never used 2.3.4.1 official, my last version was 2.2a .

It all depends what you need, 60 min or so  is all it took to get a new stock official website with basic responsiveness to the point it will work on mobile. If you wish to make is all singing all dancing then as Ashley @Hotclutch has said its a few days work at most.

For a developer it should be a walk in the park. For a user with some code experiance make it a couple of weeks to be safe?

As you can see on the test site I have spent a few more hours just adding a few bells and whistles to it just for fun. You can spend as much or as little time as you like. I found w3css very easy to work with once Ashley had pointed it out to me.

Now if anyone askes can I make my existing official osC website responsive they can just look at the test site, then either give it a shot or for sure get a developer to do it for them properly 😊. Thank you  Ashley for the pointers helped save some time.

That's all just a bit of fun that may or maynot help someone.

[Hotclutch]

1 hour ago, Yurius said:

Explain to me what is the secret meaning of creating a bootstrap for admin? Does anyone have such a rush that you need to start administering from a mobile phone at the same second?

For me the reason to BS the admin would be for the sake of having a matching front-end completing a professional look. But i agree with you if you are suggesting that not many people would administer from a (small) phone.

[MrPhil]

I could see a brick-and-mortar store owner walking through the aisles, cross-checking on their phone what their e-site offers, and doing at least minor updates in admin. Therefore, it might not be so far-fetched to want to be able to do admin on a phone. Of course, they could also just jot down notes on a pad, and do everything back in the office.

[Yurius]

What you saw is the exception rather than the rule. The exception only confirms the rule.  However, maybe I'm wrong.

[♥JcMagpie]

 

10 hours ago, Hotclutch said:

I think Zahid is giving the wrong impression of how long it would take to produce a responsive (front or backend). It's at least a few days work if you know the framework and osC well.

No that was an honest statement for the state i posted before, As I have spent a little more time on it I have updated the site to reflect this so people should get a realistic view of what is showing now. Only small changes.

Updated navbar and added new header, Also clean up display of cards and indexed products.

 

 

[Hotclutch]

html_output.php

I have not tested this, but you can try replacing tep_draw_button function

with:

////
// Output a jQuery UI Button
  function tep_draw_button($title = null, $icon = null, $link = null, $priority = null, $params = null, $style = null) {
    static $button_counter = 1;

    $types = array('submit', 'button', 'reset');

    if ( !isset($params['type']) ) {
	  $params = array('type' => '');	
      $params['type'] = 'submit';
    }

    if ( !in_array($params['type'], $types) ) {
      $params['type'] = 'submit';
    }

    if ( ($params['type'] == 'submit') && isset($link) ) {
      $params['type'] = 'button';
    }

    if (!isset($priority)) {
      $priority = 'secondary';
    }

    $button = NULL;

    if ( ($params['type'] == 'button') && isset($link) ) {
      $button .= '<a id="btn' . $button_counter . '" href="' . $link . '"';

      if ( isset($params['newwindow']) ) {
        $button .= ' target="_blank" rel="noopener"';
      }
    } else {
      $button .= '<button ';
      $button .= 'type="' . tep_output_string($params['type']) . '"';
    }

    if ( isset($params['params']) ) {
      $button .= ' ' . $params['params'];
    }

    $button .= ' class="w3-btn ';

    $button .= (isset($style)) ? $style : 'w3-border w3-white';

    $button .= '">';

    if (isset($icon) && tep_not_null($icon)) {
      $button .= '<span class="' . $icon . '" aria-hidden="true"></span> ';
    }

    $button .= $title;

    if ( ($params['type'] == 'button') && isset($link) ) {
      $button .= '</a>';
    } else {
      $button .= '</button>';
    }

    $button_counter++;

    return $button;
  }

 

[♥JcMagpie]

Works fine thank's,

[greasemonkey]

I mean no disrespect - but gotta ask why waste your time (it is your time to waste)? It’s still won’t run without modification on newer versions of PHP and there is an available alternative already done  that is being actively developed. 

It’s right here in the downloads page...just like everyone always wanted... sanctioned by HPDL. 

https://www.oscommerce.com/Products

 

[♥JcMagpie]

On 7/8/2019 at 12:34 PM, JcMagpie said:

This was done just as a bit of fun to see what was involved and what could be done with Official osCommerce.

No need for you worry to about me wasting time, it's never wasted when you are learning. No issues with PHP working fine.

[♥JcMagpie]

24 minutes ago, greasemonkey said:

It’s right here in the downloads page...just like everyone always wanted... sanctioned by HPDL. 

No the Official osC is still the same and as the title of this thread clearly states I'm working on the Official Version.

[greasemonkey]

Like I said, it’s your time. 

Correct me if I’m wrong, however it’s only running on PHP 7 because of the 2.3.4“.1” hotfix that suppresses the errors. 

My point is.... it is not, and won’t ever be again, under development and is essential un-changed in the past 8 years. Should you scroll down just a few inches before you took the screen cap you can see the activity developed CE - which I know you’ve wrote several addons for. 

It just doesn’t make sense to me... “but as you were”. 

[nsf43]

Is this the right place to ask "css" questions?

[piernas]

On 7/9/2019 at 2:26 PM, Hotclutch said:

For me the reason to BS the admin would be for the sake of having a matching front-end completing a professional look. But i agree with you if you are suggesting that not many people would administer from a (small) phone.

In my case updating stock from the warehouse with a tablet or changing an order status with the phone while I'm travelling saves a lot of time - now I can't live without those features. For other tasks like adding products it's not that useful, but a cleaner and quicker interface on a PC without those side boxes and static menu helps a lot to work quicket, too.