// Themeconfigurator

modules/themeconfigurator/css/live_configurator.css

@@ -29,7 +29,7 @@
   height: 50px;
   left: 215px;
   position: fixed;
-  top: 90px;
+  top: 150px;
   width: 50px;
   z-index: 20;
 }
@@ -43,7 +43,7 @@
 #tool_customization{
   position: fixed;
   left: 0;
-  top: 90px;
+  top: 150px;
   z-index: 20; 
   height: auto;
   width: 215px;

modules/themeconfigurator/js/live_configurator.js

@@ -30,6 +30,7 @@ $(document).ready(
 			function()
 			{
 				$('#theme').val($(this).attr('class'));
+				$(this).closest('form').submit();
 			}
 		);
 
@@ -80,5 +81,20 @@ $(document).ready(
 				}
 			}
 		);
+
+		$('#font').change(
+			function()
+			{
+				$(document.body).css('font-family', $('#font option:selected').text());
+			}
+		);
+
+		$('#reset').click(
+			function()
+			{
+				$('#theme').val('');
+				$(this).closest('form').submit();
+			}
+		);
 	}
 );

modules/themeconfigurator/themeconfigurator.php

@@ -189,7 +189,18 @@ class ThemeConfigurator extends Module
 
         public function hookdisplayHeader($params)
         {
-                $this->context->controller->addCss($this->_path.'views/css/hooks.css', 'all');
+            $this->context->controller->addCss($this->_path.'views/css/hooks.css', 'all');
+
+            if ((int)Tools::getValue('live_configurator', 0) == 1)
+            {
+                if (Tools::getValue('theme'))
+                    $this->context->controller->addCss($this->smarty->smarty->tpl_vars['css_dir']->value.Tools::getValue('theme').'.css', 'all');
+            }
+            else
+            {
+                if (Configuration::get('PS_TC_THEME') != '')
+                    $this->context->controller->addCss($this->smarty->smarty->tpl_vars['css_dir']->value.Tools::getValue('theme').'.css', 'all');
+            }
         }
 
         public function hookDisplayTop()
@@ -208,6 +219,7 @@ class ThemeConfigurator extends Module
 				$this->smarty->assign(array(
 					'themes' => unserialize(Configuration::get('PS_TC_THEMES')),
 					'fonts' => unserialize(Configuration::get('PS_TC_FONTS')),
+                    'theme' => Tools::getValue('theme', ''),
 					'advertisement_image' => $this->_path.'/img/'.$this->context->language->iso_code.'/advertisement.png',
 					'advertisement_text'  => $this->l('Over 500+ PrestaShop Premium Templates! Browse Now!')
 				));
@@ -532,6 +544,12 @@ class ThemeConfigurator extends Module
                                                 ),
                                 );
                 }
+
+                $inputs[] = array(
+                    'type'  => 'free',
+                    'label' => $this->l('Live configurator'),
+                    'name'  => 'live-conf'
+                );
                 
                 $fields_form = array(
                         'form' => array(
@@ -559,7 +577,8 @@ class ThemeConfigurator extends Module
                 $helper->currentIndex = $this->context->link->getAdminLink('AdminModules', false).'&configure='.$this->name.'&tab_module='.$this->tab.'&module_name='.$this->name;
                 $helper->token = Tools::getAdminTokenLite('AdminModules');
                 $helper->tpl_vars = array(
-                        'fields_value' => $this->getConfigFieldsValues(),
+                        'fields_value' => array_merge($this->getConfigFieldsValues(),
+                            array('live-conf' => '<a href="'.$this->context->link->getPageLink('index').'?live_configurator=1" class="btn btn-default" onclick="return !window.open($(this).attr(\'href\'));"><i class="icon-cogs"></i> Live configurator</a>')),
                         'languages' => $this->context->controller->getLanguages(),
                         'id_language' => $this->context->language->id
                 );

modules/themeconfigurator/views/templates/hook/live_configurator.tpl

@@ -26,8 +26,8 @@
 <div id="gear-right">
 	<i class="icon-cogs icon-2x icon-light"></i>
 </div>
-<form action="" method="post">
-	<input type="hidden" name="theme" id="theme" />
+<form action="?live_configurator=1" method="post">
+	<input type="hidden" name="theme" id="theme" value="{$theme}"/>
 	<div id="tool_customization">
 		<p>
 			{l s='The customization tool allows you to make color and font changes in your theme.' mod='themeconfigurator'}<br /><br />
@@ -61,14 +61,15 @@
 		</div>
 		<div id="font-box">
 			<p>{l s='Global' mod='themeconfigurator'}</p>
-			<select name="font" class="font-list">
+			<select name="font" id="font" class="font-list">
+				<option value="">{l s='Choose a font' mod='themeconfigurator'}</option>
 				{foreach $fonts as $key => $font}
 				<option value="{$key}">{$font}</option>
 				{/foreach}
 			</select>
 		</div>
 		<div class="btn-tools">
-			<button type="reset" class="btn btn-1">{l s='Reset' mod='themeconfigurator'}</button>
+			<button type="reset" class="btn btn-1" id="reset">{l s='Reset' mod='themeconfigurator'}</button>
 			<button type="submit" class="btn btn-2" name="submitLiveConfigurator">{l s='Save' mod='themeconfigurator'}</button>
 		</div>
 		<div id="block-advertisement">