Jump to content

Blesta Integration 3.3.x (Advanced)


Michael

Recommended Posts

Part 1!
 
So you want to integrate your website into Blesta. Well first off copy all your images / css / javascript into the /app/views/client/bootstrap/
 
And empty your Blesta's structure.pdt and use the following base template:

<!DOCTYPE html>
<html dir="<?php echo (in_array($this->_("AppController.lang.dir", true), array("ltr", "rtl")) ? $this->_("AppController.lang.dir", true) : "ltr");?>">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " ~ " : "") . $this->Html->_($system_company->name, true);?></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="<?php echo $this->view_dir;?>images/favicon.ico" />

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

		<!-- Begin Content -->
		<div class="container">
			<div class="row<?php echo (!$this->Html->ifSet($show_header, true) ? " login" : "");?>">
				<?php
				if (!empty($active_nav['secondary'])) {
				?>
					<div class="col-md-3">
						<div class="list-group">
							<?php
							foreach ($active_nav['secondary'] as $link => $value) {
							?>
								<a href="<?php $this->Html->_($link);?>" class="list-group-item left-nav <?php echo ($value['active'] ? "active" : "");?>">
									<i class="<?php $this->Html->_($value['icon']);?>"></i> 
									<?php
									$this->Html->_($value['name']);
									?>
								</a>
							<?php
							}
							?>
						</div>
					</div>
					<div class="col-md-9">
						<div class="row">
							<?php echo $content;?>
						</div>
					</div>
				<?php
				}
				else {
					echo $content;
				}
				?>
			</div>
		</div>
		
		<div class="modal fade" id="global_modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="global_modal_title"></h4>
					</div>
					<div class="modal-body"><i class="fa fa-spinner fa-spin"></i></div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>

  <?php echo $this->Javascript->getFiles("body");?>
  <?php echo $this->Javascript->getInline();?>
  <?php echo $this->Html->ifSet($body_end);?>
    </body>
</html>

Then add your CSS to the head section:

		<!-- Meta Tags -->
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="description" content="  " />
		<meta name="keywords" lang="en" content="  " xml:lang="en" />
		<meta name="revisit-after" content="1 month" />
		<meta name="rating" content="Safe For Kids" />
		<meta name="author" content="Licensecart" /> 
  		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

                  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

  		<!-- CSS Files -->
		<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
		<link href="css/global.css" rel="stylesheet">
		<link href="css/nivo-lightbox.css" rel="stylesheet">
		<link rel="stylesheet" href="css/default/default.css" type="text/css" />
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

		<!-- Facebook Tags -->
		<meta property="og:site_name" content="Licensecart" />
		<meta property="og:image" content="https://licensecart.com/imgs/Facebook.png" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="https://licensecart.com/" />
		<meta property="og:title" content="Licensecart, the number one for Blesta Licenses and SSL Certificates." />
		
    </head>
    <body>

Now add the Blesta files at the bottom of the head and the start of the body:

		
		<?php
		echo $this->Javascript->getFiles("head");
		echo $this->Html->ifSet($custom_head);
		?>
		
		<!--[if lt IE 9]>
			<script src="<?php echo $this->view_dir;?>javascript/html5shiv.js" type="text/javascript"></script>
			<script src="<?php echo $this->view_dir;?>javascript/respond.min.js" type="text/javascript"></script>
		<![endif]-->
		<?php echo $this->Html->ifSet($head);?>
    </head>
    <body>
	<?php echo $this->Html->ifSet($body_start);?>

Now add the Blesta CSS above or below your CSS whichever is easier to help override any CSS you need to.

<!-- Blesta Files -->
		<link href="<?php echo $this->view_dir;?>css/styles.css" rel="stylesheet" type="text/css" />
		<link href="<?php echo $this->view_dir;?>css/slider.css" rel="stylesheet" type="text/css" />
		<?php
		// Theme CSS
		if (isset($theme_css)) {
		?>
		<link href="<?php $this->Html->_($theme_css);?>" rel="stylesheet" type="text/css" media="screen" />
		<?php
		}
        if ($this->_("AppController.lang.dir", true) == "rtl") {
        ?>
        <link href="<?php echo $this->view_dir;?>css/rtl.css" rel="stylesheet" type="text/css" media="screen" />
        <?php
        }
		?>

Finally add your javascript to the footer bellow the Blesta JS already there. (If needed you can put the Blesta JS at the bottom of yours.)

  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookie.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookiecuttr.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/nivo-lightbox.min.js"></script>
  <script type="text/javascript">$('.tooltips').tooltip()</script>
  <script type="text/javascript">$(document).ready(function(){$('a').nivoLightbox();});</script>
  <script type="text/javascript">$(document).ready(function () {$.cookieCuttr();});</script>
  <script type="text/javascript">$(document).on('click', '.yamm .dropdown-menu', function(e) {e.stopPropagation()})</script>

And add your footer code above the Blesta:

<div class="footerjumbotron">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase-mini blesta-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/interworx"><div class="sprites1 showcase-mini interworx-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/litespeed"><div class="sprites1 showcase-mini litespeed-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/kernelcare"><div class="sprites1 showcase-mini kernelcare-mini"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase blesta"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/interworx"><div class="sprites1 showcase interworx"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/litespeed"><div class="sprites1 showcase litespeed"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/kernelcare"><div class="sprites1 showcase kernelcare"></div></a>
      </div>
    </div>
  </div>
</div>
<footer>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
        <p>© 2014 Licensecart. All Rights Reserved.</p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <p class="footright"><a href="//blesta.com/" target="_blank"><img class='pull-right' style='text-align: right !important;background-color: #ffffff;margin-top:-10px !important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='Powered by Blesta' src='<?php echo $this->view_dir;?>img/poweredbyblestasmall.png' /></a></p>
      </div>
    </div>
</div>
</footer>

Now please add the following to your links 

<?php echo $this->view_dir;?>

So overall it should look like this:

<!DOCTYPE html>
<html dir="<?php echo (in_array($this->_("AppController.lang.dir", true), array("ltr", "rtl")) ? $this->_("AppController.lang.dir", true) : "ltr");?>">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title><?php echo (($page_title = (isset($page_title) ? $page_title : $this->_($page_title_lang, true, $get_params))) ? $this->Html->_($page_title, true) . " | " : "") . $this->Html->_($system_company->name, true);?></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="<?php echo $this->view_dir;?>images/favicon.ico" />

		<!-- Meta Tags -->
		<meta http-equiv="X-UA-Compatible" content="chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="description" content="  " />
		<meta name="keywords" lang="en" content="  " xml:lang="en" />
		<meta name="revisit-after" content="1 month" />
		<meta name="rating" content="Safe For Kids" />
		<meta name="author" content="Licensecart" /> 
  		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
		<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
		<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
		<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
		<!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
		<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

		<!-- Blesta Files -->
		<link href="<?php echo $this->view_dir;?>css/styles.css" rel="stylesheet" type="text/css" />
		<link href="<?php echo $this->view_dir;?>css/slider.css" rel="stylesheet" type="text/css" />
		<?php
		// Theme CSS
		if (isset($theme_css)) {
		?>
		<link href="<?php $this->Html->_($theme_css);?>" rel="stylesheet" type="text/css" media="screen" />
		<?php
		}
        if ($this->_("AppController.lang.dir", true) == "rtl") {
        ?>
        <link href="<?php echo $this->view_dir;?>css/rtl.css" rel="stylesheet" type="text/css" media="screen" />
        <?php
        }
		?>

  		<!-- CSS Files -->
		<link href='//fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="//cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
		<link href="css/global.css" rel="stylesheet">
		<link href="css/nivo-lightbox.css" rel="stylesheet">
		<link rel="stylesheet" href="css/default/default.css" type="text/css" />
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">

		<!-- Facebook Tags -->
		<meta property="og:site_name" content="Licensecart" />
		<meta property="og:image" content="https://licensecart.com/imgs/Facebook.png" />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="https://licensecart.com/" />
		<meta property="og:title" content="Licensecart, the number one for Blesta Licenses and SSL Certificates." />

		<?php
		echo $this->Javascript->getFiles("head");
		echo $this->Html->ifSet($custom_head);
		?>
		
		<!--[if lt IE 9]>
			<script src="<?php echo $this->view_dir;?>javascript/html5shiv.js" type="text/javascript"></script>
			<script src="<?php echo $this->view_dir;?>javascript/respond.min.js" type="text/javascript"></script>
		<![endif]-->
		<?php echo $this->Html->ifSet($head);?>
    </head>
    <body>
	<?php echo $this->Html->ifSet($body_start);?>

		<!-- Begin Content -->
		<div class="container">
			<div class="row<?php echo (!$this->Html->ifSet($show_header, true) ? " login" : "");?>">
				<?php
				if (!empty($active_nav['secondary'])) {
				?>
					<div class="col-md-3">
						<div class="list-group">
							<?php
							foreach ($active_nav['secondary'] as $link => $value) {
							?>
								<a href="<?php $this->Html->_($link);?>" class="list-group-item left-nav <?php echo ($value['active'] ? "active" : "");?>">
									<i class="<?php $this->Html->_($value['icon']);?>"></i> 
									<?php
									$this->Html->_($value['name']);
									?>
								</a>
							<?php
							}
							?>
						</div>
					</div>
					<div class="col-md-9">
						<div class="row">
							<?php echo $content;?>
						</div>
					</div>
				<?php
				}
				else {
					echo $content;
				}
				?>
			</div>
		</div>
		
		<div class="modal fade" id="global_modal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="global_modal_title"></h4>
					</div>
					<div class="modal-body"><i class="fa fa-spinner fa-spin"></i></div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>

<div class="footerjumbotron">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase-mini blesta-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/interworx"><div class="sprites1 showcase-mini interworx-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/litespeed"><div class="sprites1 showcase-mini litespeed-mini"></div></a>
      </div>
      <div class="col-xs-6 visible-xs-inline">
        <a href="//licensecart.com/kernelcare"><div class="sprites1 showcase-mini kernelcare-mini"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/blesta-monthly"><div class="sprites1 showcase blesta"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/interworx"><div class="sprites1 showcase interworx"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/litespeed"><div class="sprites1 showcase litespeed"></div></a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 hidden-xs">
        <a href="//licensecart.com/kernelcare"><div class="sprites1 showcase kernelcare"></div></a>
      </div>
    </div>
  </div>
</div>
<footer>
<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8 col-lg-9">
        <p>© 2014 Licensecart. All Rights Reserved.</p>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <p class="footright"><a href="//blesta.com/" target="_blank"><img class='pull-right' style='text-align: right !important;background-color: #ffffff;margin-top:-10px !important;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='Powered by Blesta' src='<?php echo $this->view_dir;?>img/poweredbyblestasmall.png' /></a></p>
      </div>
    </div>
</div>
</footer>

  <?php echo $this->Javascript->getFiles("body");?>
  <?php echo $this->Javascript->getInline();?>
  <?php echo $this->Html->ifSet($body_end);?>

  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookie.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/jquery.cookiecuttr.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>js/nivo-lightbox.min.js"></script>
  <script type="text/javascript">$('.tooltips').tooltip()</script>
  <script type="text/javascript">$(document).ready(function(){$('a').nivoLightbox();});</script>
  <script type="text/javascript">$(document).ready(function () {$.cookieCuttr();});</script>
  <script type="text/javascript">$(document).on('click', '.yamm .dropdown-menu', function(e) {e.stopPropagation()})</script>
    </body>
</html>

CONFLICTS!!!
You will have fun playing around with your Javascript and Blesta's Javascript to get it working however it's easier if everything is as above to play around with it.
 
You can find out by logging into your client area as a customer. If the right hand side doesn't work, then you need to play with sections. The above is Bootrstrap, Javascript, Blesta's Javascript and Finally our custom code.
 
 
Part 2!
 
So now we have the core we need the navigation for us to browse. You want to have a menu for when your logged in and not you can use the following structure:



<?php if (!$this->Html->ifSet($logged_in)) { ?>

Navigation when your are NOT logged in.

<?php }else{ ?>

Navigation when you are logged in.

<?php } ?>

Here's my navigation:

	<?php if (!$this->Html->ifSet($logged_in)) { ?>
	<div class="navbar navbar-default yamm lc-nav">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
              <a href="./" class="navbar-brand visible-lg" style="margin-top: -4px;margin-right: 20px;"><div class="sprites1 lc-logo lclogo"></div></a>
              <a href="./" class="navbar-brand visible-sm visible-xs" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
              <a href="./" class="navbar-brand visible-md" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
          </div>
          <div id="navbar-collapse-grid" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Blesta <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-menu">
                    <div class="row">
                      <div class="col-sm-4"><a href="//licensecart.com/blesta-monthly"><i class="fa fa-shopping-cart"></i> Blesta Monthly License</a></div>
                      <div class="col-sm-4"><a href="//licensecart.com/blesta-owned"><i class="fa fa-shopping-cart"></i> Blesta Owned License</a></div>
                      <div class="col-sm-4"><a href="//licensecart.com/blesta-one-time"><i class="fa fa-shopping-cart"></i> Blesta One-Time License</a></div>
                    </div>
                    <div class="row">
                      <div class="col-sm-4"><a href="//licensecart.com/blesta-license-manager"><i class="fa fa-exchange"></i> Blesta License System</a></div>
                      <div class="col-sm-4"><a href="//licensecart.com/blesta-project-manager"><i class="fa fa-briefcase"></i> Blesta Project Management</a></div>
                      <div class="col-sm-4"><a href="//licensecart.com/community-addons"><i class="fa fa-puzzle-piece"></i> Blesta Third Party Addons</a></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Other Products <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-menu">
                    <div class="row">
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/interworx"><i class="fa fa-cogs"></i> InterWorx</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/litespeed"><i class="fa fa-bolt"></i> LiteSpeed</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/kernelcare"><i class="fa fa-shield"></i> KernelCare</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/craftsrv"><i class="fa fa-gamepad"></i> CraftSRV</a></div>
                    </div>
                    <div class="row">
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/softaculous"><i class="fa fa-download"></i> Softaculous</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/solusvm"><i class="fa fa-cloud"></i> SolusVM</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/ssl-certificates"><i class="fa fa-lock"></i> SSL Certificates</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/webhost-bundle"><i class="fa fa-cubes"></i> WebHost Bundle</a></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-menu">
                    <div class="row">
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/integration"><i class="fa fa-magic"></i> Blesta Integration</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/upgrade"><i class="fa fa-wrench"></i> Blesta Upgrade</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/import"><i class="fa fa-truck"></i> Import to Blesta</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/out-of-the-box"><i class="fa fa-tasks"></i> Out of the Box Full service</a></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Company <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-menu">
                    <div class="row">
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/company"><i class="fa fa-map-marker"></i> About us</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/terms-of-service"><i class="fa fa-gavel"></i> Terms & Conditions</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/privacy-policy"><i class="fa fa-exclamation-triangle"></i> Privacy Policy</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/partners"><i class="fa fa-users"></i> Partners</a></div>
                    </div>
                    <div class="row">
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/portfolio"><i class="fa fa-desktop"></i> Portfolio</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/billing/customers/plugin/support_manager/client_tickets/departments/"><i class="fa fa-life-ring"></i> Submit a ticket</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/careers"><i class="fa fa-suitcase"></i> Our careers</a></div>
                      <div class="col-xs-6 col-sm-3"><a href="//licensecart.com/compare"><i class="fa fa-line-chart"></i> Compare our prices</a></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--/ End Grid 12 Menu /-->
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Client Area <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li>
                    <div class="yamm-content">
                      <form method="post" action="https://licensecart.com/billing/customers/login/" target="_blank">
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-user"></i></div>
                            <input type="text" name="username" class="form-control" id="login_username" placeholder="Username" autocomplete="off">
                          </div>
                        </div>
                        <div class="form-group">
                          <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-lock"></i></div>
                            <input type="password" name="password" class="form-control" id="login_password" placeholder="Password" autocomplete="off">
                          </div>
                        </div>
                        <div class="form-group">
                          <button type="submit" class="btn btn-success btn-block">Login to Client Area</button>
                        </div>
                      </form>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
	<?php }else{ ?>
	<div class="navbar navbar-default yamm lc-nav">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
              <a href="./" class="navbar-brand visible-lg" style="margin-top: -4px;margin-right: 20px;"><div class="sprites1 lc-logo lclogo"></div></a>
              <a href="./" class="navbar-brand visible-sm visible-xs" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
              <a href="./" class="navbar-brand visible-md" style="margin-top: -5px;;"><div class="sprites1 lc-logo lclogo"></div></a>
          </div>
          <div id="navbar-collapse-grid" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "accounts/");?>" class="dropdown-toggle"><i class=""></i> Payment Accounts</a></li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "contacts/");?>" class="dropdown-toggle"><i class=""></i> Contacts</a></li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "plugin/support_manager/client_main/");?>" class="dropdown-toggle"><i class=""></i> Support</a></li>
              <!--/ End Grid 12 Menu /-->
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="<?php echo $this->Html->safe($this->client_uri . "plugin/client_documents/client_main/");?>" class="dropdown-toggle"><i class=""></i> Client Documents</a></li>
              <!--/ End Grid 12 Menu /-->
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Michael Dance <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="/client/main/edit/"><i class="fa fa-edit fa-fw"></i> Manage Account</a></li>
                  <li><a href="/"><i class="fa fa-circle-o fa-fw"></i> Return to Portal</a></li>
                  <li class="divider"></li>
                  <li><a href="/client/logout/"><i class="fa fa-sign-out fa-fw"></i> Log Out</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php } ?>

You can use the following if you wish to use the Blesta Menu and not the Bootstrap style menu:

		<div class="nav-content">
			<div class="nav">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only"><?php $this->_("AppController.sreader.navigation");?></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
					
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<div class="container">
							<?php
							$active_nav = null;
							?>
							<ul class="nav navbar-nav">
								<?php
								foreach ($this->Html->ifSet($nav, array()) as $link => $value) {
									$attributes = array();
									$link_attributes = array();
									$dropdown = !empty($value['sub']);
									$active = false;
									
									if ($value['active']) {
										$active = true;
										$attributes['class'][] = "active";
										$active_nav = $value;
									}
									if ($dropdown) {
										$attributes['class'][] = "dropdown";
										$link_attributes['class'][] = "dropdown-toggle";
										$link_attributes['data-toggle'][] = "dropdown";
										
										// Set parent to active if child is
										if (!$active) {
											foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
												if ($sub_value['active']) {
													$attributes['class'][] = "active";
													break;
												}
											}
										}
									}
								?>
								<li<?php echo $this->Html->buildAttributes($attributes);?>>
									<a href="<?php $this->Html->_($link);?>"<?php echo $this->Html->buildAttributes($link_attributes);?>>
										<i class="<?php $this->Html->_($value['icon']);?>"></i> 
										<?php
										$this->Html->_($value['name']);
										
										if ($dropdown) {
										?>
										<b class="caret"></b>
										<?php
										}
										?>
									</a>
									<?php
									if (!empty($value['sub'])) {
									?>
									<ul class="dropdown-menu">
										<?php
										foreach ($this->Html->ifSet($value['sub'], array()) as $sub_link => $sub_value) {
										?>
										<li>
											<a href="<?php $this->Html->_($sub_link);?>"><i class="<?php $this->Html->_($sub_value['icon']);?>"></i> <?php $this->Html->_($sub_value['name']);?></a>
										</li>
										<?php
										}
										?>
									</ul>
									<?php
									}
									?>
								</li>
								<?php
								}
								?>
							</ul>
							
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown">
										<?php $this->Html->_($client->first_name);?> <?php $this->Html->_($client->last_name);?>
										<b class="caret"></b>
									</a>
									<ul class="dropdown-menu">
										<li><a href="<?php echo $this->Html->safe($this->client_uri . "main/edit/");?>"><i class="fa fa-edit fa-fw"></i> <?php $this->_("AppController.client_structure.text_update_account");?></a></li>
										<?php
										if ($this->Html->ifSet($portal_installed, false)) {
										?>
										<li><a href="<?php echo $this->Html->safe(WEBDIR);?>"><i class="fa fa-circle-o fa-fw"></i> <?php $this->_("AppController.client_structure.text_return_to_portal");?></a></li>
										<?php
										}
										?>
										<li class="divider"></li>
										<li><a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>"><i class="fa fa-sign-out fa-fw"></i> <?php $this->_("AppController.client_structure.text_logout");?></a></li>
									</ul>
								</li>
							</ul>
						</div>
					</div><!-- /.navbar-collapse -->
				</nav>
			</div>
		</div>
		<?php
			}
		}
		?>

Part 3!
You might want to custom bits of your integration to include other features like:
 
Login / Log out:

<?php if ($this->Html->ifSet($logged_in)) { ?>
<a href="<?php echo $this->Html->safe($this->client_uri . "logout/");?>">Logout</a>
<?php }else{ ?>
<a href="<?php echo $this->Html->safe($this->client_uri . "login/");?>">Login</a>
<?php } ?>

Page Title:

<?php echo ($this->Html->ifSet($title) ? $this->Html->_($title, true) : $this->_("AppController.client_structure.default_title", true));?>

Show Theme Logo:

<a href="<?php echo $this->Html->safe($this->base_uri);?>">
<?php if (!empty($theme_logo)) { ?>
<img src="<?php $this->Html->_($theme_logo);?>" alt="Logo" />
<?php }else{ ?>
<img src="<?php echo $this->view_dir;?>images/logo.png" alt="Blesta" />
<?php } ?>
</a>

Custom Logo:

<a href="<?php echo $this->Html->safe($this->base_uri);?>"><img src="urltologo.png"></a>
or
<a href="<?php echo $this->Html->safe($this->base_uri);?>"><div class="logo"></div></a>
or
<a href="<?php echo $this->Html->safe($this->base_uri);?>" class="logo"></a>

Logged in as Staff:

<?php if ($this->Html->ifSet($staff_as_client)) { ?>
	<span class="label label-info pull-right"><a href="<?php echo $this->Html->safe($this->admin_uri . "clients/logoutasclient/");?>"><span class="fa fa-info-circle"></span> <?php $this->_("AppController.client_structure.staff_as_client_note");?></a></span>
<?php } ?>

Client Name:

<?php $this->Html->_($client->first_name);?> <?php $this->Html->_($client->last_name);?>

Company Name:

<?php $this->Html->_($client->company);?>

Email Address:

<?php $this->Html->_($client->email);?>

Client area Dashboard:

<?php echo $this->Html->safe($this->client_uri . "");?>

Hostname:

<?php echo $this->Html->safe($this->Html->ifSet($system_company->hostname)); ?>

Feel free to ask for help here. This is only for 3.3.1 and up. It varies per requirement.
 
 
Before:
 
post-38-0-88925300-1414770232_thumb.png
After:
 
post-38-0-30698300-1414770231_thumb.png
 
post-38-0-72066100-1414770228_thumb.png
 
Warning!
 
I have had to change a bit of this tutorial to put this in the HEAD Section:

  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/json2.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.adapter.jquery.js"></script>
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.js"></script>
  <!--[if lt IE 10]><script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/history/history.html4.js"></script><![endif]-->
  <script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

Why? Because the order forms inject Javascript in the content area, and without it loading first you get a broken order form :D
My mistake sorry.

Link to comment
Share on other sites

it was better if you have made it as a new template with your change .

this way no core files has been touched :)

thanks for your share .

 

Yeah I might do one soon, this is just to help people make their Blesta installation look like their website, showing how I did my new one.

 

Since my 3.1 one here is outdated: http://www.blesta.com/forums/index.php?/topic/370-site-integration-with-blesta-31x/ and has over 4,000+ views this one should help people better.

Link to comment
Share on other sites

  • 1 month later...

Ah! I had wingrepped the folder, but it was still case sensitive from my last search.

 

So, am I correct in my understanding that creating a new template will allow me to remove some of the unwanted code? And that next time Blesta is updated, the update will not wipe out the adjusted theme? (Of course, I guess the issue is now new stuff that's not accounted for in the template, which means I'll have to redo my edits again.)

 

I wish what's-his-name's css/html/js plugin would also REPLACE content, not merely add it. Hint, hint.

 

Blesta either needs (1) to make some of the things non-manual. Or (2) make some versions LTS for security only, not for features that forces a design tweak/change.

Link to comment
Share on other sites

Ah! I had wingrepped the folder, but it was still case sensitive from my last search.

 

So, am I correct in my understanding that creating a new template will allow me to remove some of the unwanted code? And that next time Blesta is updated, the update will not wipe out the adjusted theme? (Of course, I guess the issue is now new stuff that's not accounted for in the template, which means I'll have to redo my edits again.)

 

I wish what's-his-name's css/html/js plugin would also REPLACE content, not merely add it. Hint, hint.

 

Blesta either needs (1) to make some of the things non-manual. Or (2) make some versions LTS for security only, not for features that forces a design tweak/change.

 

that's correct you don't need to worry about upgrading and edit / remove what you like

Link to comment
Share on other sites

  • 3 months later...

Thanks Licensecart, your various posts around the forum are helping me get to grips with Blesta a lot!

 

I wanted to ask, is there any information aynwhere on which css/javascript/etc includes should be kept in the page when I make my own custom structure.pdt file? I want to make sure I don't lose anything needed (for instance the icons in awesome fonts would break if I removed that CSS include) but at the same time I don't want to a) make it harder to overwrite styles and B) add loading time to requests by having unnecessary stuff in there.

 

Currently I have copied the bootstrap folder and am in the process of making my own client theme so that I can style the web site how I wish, integrating it with my site.

Link to comment
Share on other sites

Thanks Licensecart, your various posts around the forum are helping me get to grips with Blesta a lot!

 

I wanted to ask, is there any information aynwhere on which css/javascript/etc includes should be kept in the page when I make my own custom structure.pdt file? I want to make sure I don't lose anything needed (for instance the icons in awesome fonts would break if I removed that CSS include) but at the same time I don't want to a) make it harder to overwrite styles and B) add loading time to requests by having unnecessary stuff in there.

 

Currently I have copied the bootstrap folder and am in the process of making my own client theme so that I can style the web site how I wish, integrating it with my site.

 

I would keep the JS / CSS files Blesta provide in the same locations they are just to ensure that they work fine. But if you make a custom folder in /app/views/client/ you can customize everything :D

Link to comment
Share on other sites

Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out.

Link to comment
Share on other sites

Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out.

 

The Structure is the main file everything from client area / order forms / login use the structure.

Link to comment
Share on other sites

Thanks guys, I think I didn't explain myself correctly. I certainly have made my own folder (leaving bootstrap alone), but what I meant is that in the structure.pdt there is code linking CSS, JavaScript, etc and I wondered if I need to keep all of those in the HTML? For instance, it might look great on the front page, but there may be other places (i.e. in the client area) that could break as I took something out.

 

If you only want to change the structure, then you should keep the current CSS/script files because they will continue to be used on other pages. If you're making a completely new client template theme by redesigning the entire interface, then you can include whatever you want. You should note that extensions assume the client interface uses the default bootstrap theme, so those extensions would need to be updated as well when redoing all of the template files.

Link to comment
Share on other sites

  • 1 month later...

Please note if you are using 3.5.x you need to change this:

<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

To:

<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.5.0.js"></script>
Link to comment
Share on other sites

  • 9 months later...

Hi,

 

Is this guide latest and updated ? I have a very simple template with 1 css and 4 js files. I would like to get blesta integrated with my template. Can I go with this ???

 

Thanks.

 

It is updated, the only change so far is:

<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.2.0.js"></script>

should be: 

<script type="text/javascript" src="<?php echo $this->view_dir;?>javascript/jquery-client-3.5.0.js"></script>
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...