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

Admin to Bootstrap NO HTML changes

Recommended Posts

Convert via jQuery your osCommerce admin to bootstrap the easy way, tutorial below the video.

screenshot-oscommerce-responsive-admin-no-html-changes.thumb.png.cfbf1a3c93fb0ab9e578ba61aee46f99.png

Video updated to V8

https://youtu.be/7v7LvPLyRYQ

 

admin/includes/stylesheet.css 

(back-up & Replace):

/*
  $Id$

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

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

/* body { font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.7em; } */
body {
  display: none;
}
/* links */
a { color: #000000; font-weight: normal; text-decoration: none; }
a:hover { text-decoration: underline; }

a.headerLink { color: #ffffff; font-weight: bold; text-decoration: none; }
a.headerLink:hover { text-decoration: underline; }

a.menuBoxHeadingLink { color: #616060; font-weight: bold; text-decoration: none; }
a.menuBoxHeadingLink:hover { }

a.menuBoxContentLink { color: #616060; font-weight: normal; text-decoration: none; }
a.menuBoxContentLink:hover { text-decoration: underline; }

a.splitPageLink { color: #0000FF; font-weight: normal; text-decoration: none; }
a.splitPageLink:hover { text-decoration: underline; background-color: #FFFF33; }

/* menu box */
.menuBoxHeading { color: #616060; background-color: #ffffff; }
.menuBoxContent { color: #616060; }

/* page */
/*body { background-color: #ffffff; color: #000000; margin: 0px; }*/
/*.headerBar { background-color: #B3BAC5; }*/

/*.headerBarContent { color: #ffffff; font-weight: bold; padding: 2px; }*/
/*.columnLeft { background-color: #F0F1F1; border-color: #999999; border-width: 1px; border-style: solid; padding: 2px; }*/
/*.pageHeading { font-size: 1.5em; color: #727272; font-weight: bold; }*/

/* data table 
.dataTableHeadingRow { background-color: #C9C9C9; }
.dataTableHeadingContent { color: #ffffff; font-weight: bold; }
.dataTableRow { background-color: #F0F1F1; }
.dataTableRowSelected { background-color: #DEE4E8; }
.dataTableRowOver { background-color: #FFFFFF; cursor: pointer; cursor: hand; }
.dataTableContent { color: #000000; }
*/

/* info box 
.infoBoxHeading { color: #ffffff; background-color: #B3BAC5; }
.infoBoxContent { color: #000000; background-color: #DEE4E8; }
*/

/* message box */
.messageBox { }
.messageStackError, .messageStackWarning { background-color: #ffb3b5; }
.messageStackSuccess { background-color: #99ff00; }

/* forms 
CHECKBOX, INPUT, RADIO, SELECT, TEXTAREA, FILE { font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; }
FORM { display: inline; }
*/
/* account 
.formArea { background-color: #f1f9fe; border-color: #7b9ebd; border-style: solid; border-width: 1px; }
.formAreaTitle { font-family: Tahoma, Helveticy, Verdana, Arial, sans-serif; font-weight: bold; }
*/
/* attributes */
/*.attributes-odd { background-color: #f4f7fd; }*/
/*.attributes-even { background-color: #ffffff; }*/

/* miscellaneous */
.specialPrice { color: #ff0000; }
.oldPrice { text-decoration: line-through; }
.fieldRequired { color: #ff0000; }
.errorText { color: #ff0000; }

/* new messageStack styles 
.secInfo, .secSuccess, .secWarning, .secError {
  border: 1px solid;
  margin: 10px 0px;
  padding: 5px 10px 5px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.secInfo {
  border-color: #00529B;
  background-image: url('../images/ms_info.png');
  background: url('../images/ms_info.png') no-repeat 10px center, url('../images/ms_info_bg.png') repeat-x; 
  background-color: #BDE5F8;
}

.secSuccess {
  border-color: #4F8A10;
  background-image: url('../images/ms_success.png');
  background: url('../images/ms_success.png') no-repeat 10px center, url('../images/ms_success_bg.png') repeat-x; 
  background-color: #DFF2BF;
}

.secWarning {
  border-color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('../images/ms_warning.png');
  background: url('../images/ms_warning.png') no-repeat 10px center, url('../images/ms_warning_bg.png') repeat-x; 
  background-color: #FEEFB3;
}

.secError {
  border-color: #D8000C;
  background-image: url('../images/ms_error.png');
  background: url('../images/ms_error.png') no-repeat 10px center, url('../images/ms_error_bg.png') repeat-x; 
  background-color: #FFBABA;
}

.secInfo p, .secSuccess p, .secWarning p, .secError p {
  padding: 2px;
}

#adminAppMenu {
  float: left;
  width: 190px;
  padding: 5px;
}

#adminAppMenu h3 {
}

#adminAppMenu ul {
  list-style: none;
  margin: -5px 0 -5px -10px;
  padding: 0;
}

#contentText {
  margin-left: 200px;
}*/

/* Custom jQuery UI */
.ui-widget { }
.ui-dialog { min-width: 500px; }

/* buttons 
.tdbLink a { }

.tdbLink button { }
*/
.selectwidthauto{ width:auto !important; }

 

in admin/includes/template_top.php :

[Viewport]

DIRECTLY AFTER:
 

<head>

ADD:

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[bootstrap css]

BEFORE:

<link rel="stylesheet" type="text/css" href="includes/stylesheet.css">

ADD:

<link href="../ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

[Font-awesome css]

BEFORE:

<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.min.js', '', 'SSL'); ?>"></script>

ADD:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

[Flot chart resize fix]

AFTER:

<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.time.min.js', '', 'SSL'); ?>"></script>

ADD:

<script type="text/javascript" src="<?php echo tep_catalog_href_link('ext/flot/jquery.flot.resize.min.js', '', 'SSL'); ?>"></script>

OPTIONAL SUMMERNOTE WYSIWYG

DIRECTLY ABOVE

</head>

ADD:

        <!-- include summernote css/js-->
        <link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
        <script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>        

 

admin/includes/template_bottom.php

BEFORE:

</body>

ADD:

<script>
	$(function() {
	//Prepare the DOM
	$(document).on("click", ".menu", function(){ osCMenu(this); });
	
	$('body').prepend( "<div id='container-wrapper' class='container-fluid'><div class='row'></div></div>" );
	columnLeft = $("<div class='col-md-2 menu-col'/>");
	columnCenter = $("<div class='col-md-10 body-content-col'/>");
	$('body .row').append(columnLeft, columnCenter);
	
	//Administrator Header Bar
	$('body').css('padding-top', '70px');	
	$('#adminAppMenu').appendTo('.menu-col');	
	//prepare table conversion
	$('table tbody tr.headerBar').parent().parent().addClass('table-2-nav');		
	
	//Convert logo to brand
	$('.table-2-nav a:first').addClass('navbar-brand');
	$('.table-2-nav img:first').addClass('img-responsive').css('margin-top','-15px');
	
	//wrap the logo and build the default nav
	$('.table-2-nav a:first').wrap( "<nav class='navbar navbar-default navbar-fixed-top'><div class='container-fluid'><div class='navbar-header'></div></nav>" );
	
	//extend nav with toggle bar-button
	$('.navbar-header').prepend( "<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1' aria-expanded='false'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></button> ");
	
	//create the visible navigation menu
	$('nav div:first').append("<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'><ul class='nav navbar-nav navbar-nav-left'></ul><ul class='nav navbar-nav navbar-nav-right pull-right'></ul></div>");
	
	//collect links
	var navLeftLinks = $('#bs-example-navbar-collapse-1 ul.navbar-nav-left');
	var navRightLinks = $('#bs-example-navbar-collapse-1 ul.navbar-nav-right');
	$('.table-2-nav .headerBarContent:first a').each(function () {
		var $this = $(this);
		var list = $("<li/>");
		list.append( $this );
		navLeftLinks.append(list);
	});
	navLeftLinks.prepend('<li><a href="#" class="menu"><i class="fa fa-caret-square-o-left" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="Show/Hide menu"></i></a></li>');
	
	var str = "<?php echo HEADER_TITLE_ADMINISTRATION; ?>";
	var newhtml = $('ul.navbar-nav-left').html().replace(str, '<i class="fa fa-home" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="'+str+'"></i>');
	$('ul.navbar-nav-left').html(newhtml);
	
	var str = "<?php echo HEADER_TITLE_ONLINE_CATALOG; ?>";
	var newhtml = $('ul.navbar-nav-left').html().replace(str, '<i class="fa fa-cart-arrow-down" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="'+str+'"></i>');
	$('ul.navbar-nav-left').html(newhtml);
	
	var str = "<?php echo HEADER_TITLE_SUPPORT_SITE; ?>";
	var newhtml = $('ul.navbar-nav-left').html().replace(str, '<i class="fa fa-life-ring" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="'+str+'"></i>');
	$('ul.navbar-nav-left').html(newhtml);
	$('[data-toggle="tooltip"]').tooltip();
	
	navLeftLinks.css('font-size','20px')
	
	//Collect log-in/-off link with Administrator name
	NavText = $('.table-2-nav .headerBarContent:nth-child(2)').html();
	NavTextPlaceHolder = $("<p class='navbar-text navbar-right'>");
	NavTextPlaceHolder.append( NavText );
	navRightLinks.prepend(NavTextPlaceHolder);
	$('.navbar-text a:first').addClass('navbar-link');
	
	//Show the Bootstrapped navigation bar
	$( "nav" ).insertBefore( $( ".table-2-nav" ) );
	
	//Admin Language in navbar
	$("form[name=adminlanguage]").addClass('navbar-form navbar-right').prepend( "<div class='input-group language'></div>" );
	$('select[name=language]').appendTo('.input-group.language');
	$( "form[name=adminlanguage]" ).insertBefore( "nav ul.navbar-nav-right" );
	
	//Convert osCommerce's page-headers to bootstrap	
	$('table .pageHeading:first').contents().unwrap().wrap( "<div class='page-header'><h1></h1></div>");
	$('.page-header').prependTo('.body-content-col').css('padding-bottom','0').css('margin','0');
	
	//Search field in navbar
	$("form[name=search]").addClass('navbar-form navbar-search-form navbar-left').prepend( "<div class='input-group search'></div>" );
	$('input[name=search]').before(function () {
        return $('<span class="input-group-addon search"/>', {
            for: this.name
        }).addClass('selectwidthauto').append(this.previousSibling);
	}).addClass('form-control selectwidthauto');
	$("span.search").prependTo('.input-group.search');
	$('input[name=search]').appendTo('.input-group.search');
	$( "form[name=search]" ).insertAfter( "nav ul.navbar-nav-left" );
	
	//Categories GoTo select in navbar
	$("form[name=goto]").addClass('navbar-form navbar-left').prepend( "<div class='input-group goto'></div>" );
	$('select[name=cPath]').before(function () {
        return $('<span class="input-group-addon goto"/>', {
            for: this.name
        }).addClass('selectwidthauto').append(this.previousSibling);
	}).addClass('form-control selectwidthauto');
	$("span.goto").prependTo('.input-group.goto');
	$('select[name=cPath]').appendTo('.input-group.goto');
	$( "form[name=goto]" ).insertAfter( "nav .navbar-search-form" );
	
	//Orders Search field in navbar
	$("form[name=orders]").addClass('navbar-form navbar-search-form navbar-left').prepend( "<div class='input-group orders'></div>" );
	$('input[name=oID]').before(function () {
        return $('<span class="input-group-addon orders"/>', {
            for: this.name
        }).addClass('selectwidthauto').append(this.previousSibling);
	}).addClass('form-control selectwidthauto');
	$("span.orders").prependTo('.input-group.orders');
	$('input[name=oID]').appendTo('.input-group.orders');
	$( "form[name=orders]" ).append('<input type="hidden" name="action" value="edit">').insertAfter( "nav ul.navbar-nav-left" );	
	
	//Categories GoTo select in navbar
	$("form[name=status]").addClass('navbar-form navbar-left').prepend( "<div class='input-group status'></div>" );
	$('select[name=status]').before(function () {
        return $('<span class="input-group-addon status"/>', {
            for: this.name
        }).addClass('selectwidthauto').append(this.previousSibling);
	}).addClass('form-control selectwidthauto');
	$("span.status").prependTo('.input-group.status');
	$('select[name=status]').appendTo('.input-group.status');
	$( "form[name=status]" ).insertAfter( "nav .navbar-search-form" );
	
	//Remove osCommerce's table-based navigation
	$('.table-2-nav').remove();
	
	//Bootstrap the osCommerce's primary content table (center table)
	$('table tbody tr.dataTableHeadingRow').parent().parent().addClass('bootstrapped-table table table-responsive table-condensed table-hover table-striped table-bordered');
	$('table tbody tr.dataTableRowSelected').addClass('warning')	
	
	//Bootstrap the osCommerce's right table (edit data)
	$('table tbody tr.infoBoxHeading').parent().parent().addClass('infoBox-table info-table table table-responsive table-condensed table-bordered');
	$('.info-table').next("table").addClass('infoBoxContent-table table table-responsive table-condensed table-bordered');
	$('.info-table').next("form").addClass('form-table');
	$('.form-table').children("table").addClass('info-table table table-responsive table-condensed table-bordered ');
	
	//Bootstrap the osCommerce's formArea tables (Customers edit)	
	$( ".formArea table" ).addClass('table table-responsive table-condensed table-hover table-striped table-bordered')	

	//Bootstrap jQuery-ui buttons
	$( "a.ui-button" ).removeAttr('class').addClass('btn btn-default').css({'margin-right': '4px'});		
	$( "button.ui-button" ).removeAttr('class').addClass('btn btn-primary').css({'margin-right': '4px'});	
	$( "#filters .btn" ).addClass('btn-sm')
	//jQuiry-UI button icons
	$( "span.ui-icon" ).addClass('pull-left');
	
	//bootstrap pageNavigation links
	$( "form[name=pages]" ).addClass( "form-inline" );
	$( ".splitPageLink" ).addClass('btn btn-default');		
	$( "select" ).addClass('form-control selectwidthauto');
	
	//$( "input[type=radio]" ).wrap( "<div class='radio'><label></label></div>" );    
	//$( "input[type=checkbox]" ).wrap( "<div class='checkbox-inline'></div>" );    
	
	//build table headings
	$('.bootstrapped-table').each(function(){
		$(this).prepend('<thead></thead>')
		$(this).find('thead').append($(this).find("tr:eq(0)"));
	});
	$(".dataTableHeadingRow td").each(function() {
		$(this).replaceWith('<th>' + $(this).html() + '</th>'); 
	});
	$('.infoBox-table').each(function(){
		$(this).prepend('<thead></thead>')
		$(this).find('thead').append($(this).find("tr:eq(0)"));
	});
	
	//convert message tables to bootstrap
	//old message styles
	$('table tbody tr.messageStackSuccess').parent().parent().addClass('message-table table').insertAfter('.page-header');
	$('table tbody tr.messageStackError').parent().parent().addClass('message-table table').insertAfter('.page-header');
	$('table tbody tr.messageStackWarning').parent().parent().addClass('message-table table').insertAfter('.page-header');
	//new message styles
	$('.secInfo').toggleClass('secInfo alert alert-info');
	$('.secSuccess').toggleClass('secSuccess alert alert-success');
	$('.secWarning').toggleClass('secWarning alert alert-warning');
	$('.secError').toggleClass('secError alert alert-danger');
	
	//add colspan to fist th on the orders section_products_content tab
	$('#section_products_content table tr th:first').attr('colspan', '2');
	$('#section_products_content table').removeClass('table-bordered table-striped table-hover');	
	
	//Convert New Product to Bootstrap	
	$("form[name=new_product] table table").addClass('table table-responsive table-condensed  table-bordered');	
	//$("form[name=new_product] table table tr").removeAttr('bgcolor');	
	//Convert BannerManager to Bootstrap	
	$("input[name=banners_title]").closest('table').addClass('table table-responsive table-condensed  table-bordered');	
	
	//Convert osCommerce's footer to bootstrap	
	$('table:last td').wrapInner( "<footer class='footer'><div class='container'><p class='text-muted text-center'></p></div></footer>" );
	$('footer').insertAfter('body #container-wrapper');	
	
	//Put osCommerce's content to bootstrap column
	$('#contentText').appendTo('.body-content-col');	
	
	//clean-up tables
	$('.table')
		.removeAttr('border')
		.removeAttr('width')
		.removeAttr('height')
		.removeAttr('cellspacing')
		.removeAttr('cellpadding');		
	$("img[src='images/pixel_trans.gif']").remove();	
	$('td.pageHeading').remove();	
	$('fieldset').removeAttr('style');
	$('legend').removeAttr('style');	
	$('tr').removeAttr('onmouseover').removeAttr('onmouseout');
	$('table:last').remove();
	
	//Convert inputs and textarea's
	$("input[type=text]").addClass('form-control  selectwidthauto');	
	$("textarea").addClass('form-control');	
	//load summernote wysiwyg
	$("textarea[name^=categories_description]").addClass('summernote');
	$("textarea[name^=products_description]").addClass('summernote');
	$("textarea[name=comments]").addClass('summernote');
	$("textarea[name=banners_html_text]").addClass('summernote');
	
	//replace oscommerce's images with font-icons
	$("img[src='images/icon_up.gif']").replaceWith("<i class='fa fa-long-arrow-up' aria-hidden='true'></i>");
	$("img[src='images/icon_down.gif']").replaceWith("<i class='fa fa-long-arrow-down' aria-hidden='true'></i>");
	
	if (localStorage.getItem("adminToggleAppMenu") === null) {
	  localStorage.setItem('adminToggleAppMenu', 1)
	}    
	if (localStorage.getItem("adminToggleAppMenu") == 0) {
		$(".menu i").removeClass('fa-caret-square-o-left').addClass('fa-caret-square-o-right');
		$(".menu-col").hide();
         $("body .body-content-col").removeClass('col-md-10').addClass('col-md-12');
   }
    if (localStorage.getItem("adminToggleAppMenu") == 1) {
		$(".menu i").removeClass('fa-caret-square-o-right').addClass('fa-caret-square-o-left');;
		$(".menu-col").show();
		$("body .body-content-col").removeClass('col-md-12').addClass('col-md-10');
    }
	if($('form[name=login]').length > 0){
		$('.page-header').addClass('text-center');
		$('table')
		.removeAttr('border')
		.removeAttr('width')
		.removeAttr('height')
		.removeAttr('cellspacing')
		.removeAttr('cellpadding');
		$('table .infoBox-table').remove();
		$('table .info-table').css({'width': '50%', 'margin': '0 auto', 'margin-top': '50px', 'margin-bottom': '50px'});
		$('form[name=login]').insertAfter('#contentText');
		$("input[type=password]").addClass('form-control  selectwidthauto');
		$(".body-content-col").toggleClass("col-md-10 col-md-12")
		columnLeft.remove();
	}
	
	//convert jquery-ui accordion to bootstrap collapse
	$( "#adminAppMenu" ).accordion('destroy').addClass('panel-group').attr('role', 'tablist').attr('aria-multiselectable', 'true');
	$('#adminAppMenu h3').each(function(i) {
		
        $(this).attr('id', 'page'+(i+1)).addClass('panel-title').find('a')
		.attr('role', 'button').attr('data-toggle', 'collapse')
		.attr('data-parent', '#adminAppMenu')
		.attr('href', '#collapse_'+(i+1))
		.attr('aria-expanded', 'false')
		.attr('aria-controls', 'collapse_'+(i+1))
		.parent().next()
		.attr('id', 'collapse_'+(i+1)).attr('class', 'panel-collapse collapse').attr('role','tabpanel').attr('aria-labelledby','heading_'+(i+1));
		$(this).wrap('<div class="panel panel-default"><div class="panel-heading" role="tab" id="heading_'+(i+1)+'"></div></div>');
		$('#collapse_'+(i+1)+' ul').addClass('list-group').find('li').addClass('list-group-item');
		$('#collapse_'+(i+1)).insertAfter('#heading_'+(i+1));
	});
	
	//Keep state of collapse menu via localStorage
	var adminCollapseAppMenu = localStorage.getItem('adminCollapseAppMenu');
	if (!adminCollapseAppMenu) {
		adminCollapseAppMenu = [];
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
	} else {
		adminCollapseAppMenuArray = JSON.parse(adminCollapseAppMenu);
		var arrayLength = adminCollapseAppMenuArray.length;
			for (var i = 0; i < arrayLength; i++) {
				var panel = '#'+adminCollapseAppMenuArray[i];
				$(panel).addClass('in');
			}
	}

	$('#adminAppMenu').on('shown.bs.collapse', '.panel-collapse', function() {
		adminCollapseAppMenu = JSON.parse(localStorage.getItem('adminCollapseAppMenu'));
		if ($.inArray($(this).attr('id'), adminCollapseAppMenu) == -1) {
			adminCollapseAppMenu.push($(this).attr('id'));
		};
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
	});
	$('#adminAppMenu').on('hidden.bs.collapse', '.panel-collapse', function() {
		adminCollapseAppMenu = JSON.parse(localStorage.getItem('adminCollapseAppMenu'));
		adminCollapseAppMenu.splice( $.inArray($(this).attr('id'), adminCollapseAppMenu), 1 ); 
		localStorage.setItem('adminCollapseAppMenu', JSON.stringify(adminCollapseAppMenu));
	});

});
//Prevent jQuery-UI's CSS showing up on pageLoad
$(window).load(function() {
	// When the page has loaded
	$("body").fadeIn(100);
});
</script>
<?php 
	if (tep_session_is_registered('admin')) {
?>
	<script>
		function osCMenu() {
			event.preventDefault();

			if (localStorage.getItem("adminToggleAppMenu") == 1 ? localStorage.setItem('adminToggleAppMenu', 0) : localStorage.setItem('adminToggleAppMenu', 1));
			if (localStorage.getItem("adminToggleAppMenu") == 1 ? $(".menu i").removeClass('fa-caret-square-o-right').addClass('fa-caret-square-o-left') : $(".menu i").removeClass('fa-caret-square-o-left').addClass('fa-caret-square-o-right'));
			if (localStorage.getItem("adminToggleAppMenu") == 1 ? $(".menu-col").show() : $(".menu-col").hide());
			$(".body-content-col").toggleClass("col-md-10 col-md-12")

			
		}
	</script>
<?php 
	} 
?>
<script src="../ext/bootstrap/js/bootstrap.min.js"></script>

 

OPTIONAL SUMMERNOTE WYSIWYG

if you choose to want the wysiwyg:

BEFORE

<script src="../ext/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

ADD:

<script>
  $(function(){
      //SUMMERNOTE WYSIWYG OPTIONAL:
      $('.summernote').summernote();
  });
</script>

 

Edited by wHiTeHaT
Code updated v8.1

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

I think it could be a temporary solution until the administration is converted into boostrap.


Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

Tuto for 2.4 :
- How to Display a new page with app
- How to make Header Tags under app APP
- How to make a
boostrap modal with external element

Share this post


Link to post
Share on other sites

I think this is an excellent compatibility fix. It modernizes the backend, allows you to integrate newer bootstrap styled pages, and gradually get rid of the old stuf - if and when time allows. I can see removing old stuff from the most frequently used pages, and not bother with the less frequently used pages and let jquery do it's magic.:cool:


KEEP CALM AND CARRY ON
FYI Upgrade to the highest PHP version you can( PHP 5.5/5.6 or 7.1  and get big performance improvements for free)

But be aware php 5.5 is more strict about things.
UTF8-without BOM, no extra spaces allowed at the beginning or end of your php file, or your redirects wont work.
No double declarations of functions allowed - used to slip through the cracks ...

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

!!!!!!!!!! First post is updated with the code below !!!!!!!!!!!!!!!!!!

i removed the class "info" from the first table row and replaced according to bootstrap standard to be a thead.

$('.bootstrapped-table').each(function(){
        $(this).prepend('<thead></thead>')
        $(this).find('thead').append($(this).find("tr:eq(0)"));
	})

converted inputs to bootstrap and use width's for inputs and selects.

$( "select" ).addClass('selectwidthauto');
$( "input[type=text]" ).addClass('form-control').addClass('selectwidthauto');

css added:

.selectwidthauto { width:auto !important; }

 

Edited by wHiTeHaT

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

I think the whole admin can be changed to bootstrap like this.

As long as we now how to find the elements.

Stuff that needs to be worked out:

-select menus

-Text and images BEFORE select menus and input fields.

Perhaps we can localize also per page the tables.

Same as i did to create thead's can be done same for the tfoot.

But not all pages require them and some pages have more then one row that could represent a part of a tfoot.


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

@wHiTeHaT I Like this idea as a patch without having to actually change all the HTML. Of course it would be better to actually change the HTML but for now this could be nice. It certainly makes it less painful to look at. 

I was thinking that you could throw a hook into the admin that could take care of this all for you. That way you can avoid actually editing the original files. Just upload the hook and go. 

You can disable the original stylesheet via jQuery like so

$('link[href="stylesheet.css"]').prop('disabled', true);

That would of course go in the hook as well. 

I use my admin header_tags mod so I could do it with a header_tag instead of a hook.


Matt

Share this post


Link to post
Share on other sites

@mattjt83 good idea,

 

For now i wanna keep it a little plain.

currently working on the admin navigation to make it a bootstrap nav.

I think asoon as we sorted out exactly what can/must and is possible to change, can wrap all into a module/hook :thumbsup:


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

X-MASS BONUSSSSSSSSSSSSSS

after:

<script>
$(function() {

 

ADD:

	//Admin Header Bar
	$('body').css('padding-top', '70px');
	$('table tbody tr.headerBar').parent().parent().addClass('table-2-nav');		
	$('.table-2-nav a:first').addClass('navbar-brand');
	$('.table-2-nav img:first').css('margin-top', '-15px');
	$('.table-2-nav a:first').wrap( "<nav class='navbar navbar-default navbar-fixed-top'><div class='container-fluid'><div class='navbar-header'></div></nav>" );
	$('.navbar-header').prepend( "<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1' aria-expanded='false'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span></button> ");
	$('nav div:first').append("<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'><ul class='nav navbar-nav navbar-nav-left'></ul><ul class='nav navbar-nav navbar-nav-right pull-right'></ul></div>");
	var navLeftLinks = $('#bs-example-navbar-collapse-1 ul.navbar-nav-left');
	var navRightLinks = $('#bs-example-navbar-collapse-1 ul.navbar-nav-right');

	$('.table-2-nav .headerBarContent:first a').each(function () {
		var $this = $(this);
		var list = $("<li/>");
		list.append( $this );
		navLeftLinks.append(list);
	});

	NavText = $('.table-2-nav .headerBarContent:nth-child(2)').html();
	NavTextPlaceHolder = $("<p class='navbar-text navbar-right'>");
	NavTextPlaceHolder.append( NavText );
	navRightLinks.prepend(NavTextPlaceHolder);
	
	$('.navbar-text a:first').addClass('navbar-link');	
	$( "nav" ).insertBefore( $( ".table-2-nav" ) );
	$('.table-2-nav').remove();
/////////////////////////////////////

 

Edited by wHiTeHaT

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites
On 12/24/2017 at 10:28 PM, wHiTeHaT said:

$('.bootstrapped-table').each(function(){
        $(this).prepend('<thead></thead>')
        $(this).find('thead').append($(this).find("tr:eq(0)"));
	})

converted inputs to bootstrap and use width's for inputs and selects.


$( "select" ).addClass('selectwidthauto');
$( "input[type=text]" ).addClass('form-control').addClass('selectwidthauto');

Could you let me know what the above replaces I didn't understand

"i removed the class "info" from the first table row"

Many thanks and Merry Christmas

Share this post


Link to post
Share on other sites

@douglaswalker i perhaps was not clear in that post.

With Updated code!!!!!

i ment... the code in the first post was updated with the code i wrote in the post you point to.


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

Updated code...........

Now nav includes when applicable, the admin language select-menu, the search form (orders/users/etc) and the categories goto select-menu.


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

Updated code (V4):

-Stylesheet changes

-Cleaned up osCommerce's tables.

-Kind off Responsive now by introducing Bootstrap Container/Row/Column

Very cool, i like it!!!!!!!

Edited by wHiTeHaT

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

@greasemonkey , not sure if you already used the code before or just tried.

But the javaScript for the osCommerce logo should be:

//Convert logo to brand 
$('.table-2-nav a:first').addClass('navbar-brand'); 
$('.table-2-nav img:first').css('margin-top','-15px');

 


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites
49 minutes ago, greasemonkey said:

@wHiTeHaT looking very nice....

I guess there is there no way to have an admin module work like a header_tag module would on the catalog side?

Also, the logo dimensions off....  I believe it should be 50 x 200.

@greasemonkey I came up with this last year and use it on my shop with no issues: https://forums.oscommerce.com/topic/409416-admin-header_tag-modules/?do=findComment&comment=1743384

its not perfect but works really well for me. 

Also with my snippet to disable the original stylesheet you can insert your own which saves you from having to edit the core file. 

Nice work so far @wHiTeHaT

Edited by mattjt83

Matt

Share this post


Link to post
Share on other sites

I went ahead and tried the code that has been provided. I get some strange results. The left hand menu gets duplicated and shown twice on the page and the navbar on top is crazy.

Screen Shot 2017-12-27 at 8.23.09 AM.png

Screen Shot 2017-12-27 at 8.27.18 AM.png


Matt

Share this post


Link to post
Share on other sites

@mattjt83 The navbar is to large cause you not use the default oscommerce's menu (you added extra links, perhaps need converted to a dropdown then).

Did you took the latest updated code from the FIRST post, regarding the duplicated menu.

Edited by wHiTeHaT

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

Looking even better now that you have col-md-2 menu-col - in particular the categories page looks great - maybe make your padding-top 100px? (allows the search and cat dropdown to take space in the navbar without missing the top container).

however the orders page needs some work.... it would seem orderTabs etc is being pushed down below col-md-2 menu-col

Edited by greasemonkey

Share this post


Link to post
Share on other sites
5 hours ago, wHiTeHaT said:

@mattjt83 The navbar is to large cause you not use the default oscommerce's menu (you added extra links, perhaps need converted to a dropdown then).

Did you took the latest updated code from the FIRST post, regarding the duplicated menu.

Yes I used the latest code you had posted. I know my shop is heavily modded so I wanted to see how it would handle it. 

What you have done is no small task. Thanks for your effort :)


Matt

Share this post


Link to post
Share on other sites

I just installed a fresh copy and tested to be sure i did not made any mistakes.

But all works as expected.

 

@greasemonkey You sure you took the latest code from the FIRST post, my orders pages looking good my end.

Quote

maybe make your padding-top 100px? (allows the search and cat dropdown to take space in the navbar without missing the top container).

I not understand?

The search and the category dropdown are within the navbar.

 

Quote

 

however the orders page needs some work.... it would seem orderTabs etc is being pushed down below col-md-2 menu-col


 

The Tabs are within the .body-content-col

This part grabs all the left-over  content within #contentText'

$('#contentText').appendTo('.body-content-col');

Perhaps visualizing the problems via screenshots or video would help better. 

Edited by wHiTeHaT

CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

Share this post


Link to post
Share on other sites

There is one issue i cannot track myself yet.

It seems that the Default stock Banner-Manager (New/Edit) have a problem with the form.

On my end when i click to edit a banner the form have no content between the <form></form> tags.

<form name="new_banner" action="http://localhost/Responsive-osCommerce/admin/banner_manager.php?page=1&action=update" method="post" enctype="multipart/form-data"></form>

Because of that it is hard to trace the correct table to be converted.


CONTACT ME as i am for HIRE

Get the latest osC code (the community-supported responsive version - EDGE) here:

https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

 

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

×