Añadir DIV en diseño ( HTML )

[Urko]

Buenos días,

 

Tengo previsto hacer un diseño un tanto especial en una plantilla adquirida, personalizar un par de cosas, para lo que necesitaría agrupar varios de los módulos en un div, por lo que tendría que meterlo por código, querría agrupar los DIV's desde la línea 2 hasta la línea 13 en otro div (crear un class y un id nuevo). ¿Hay alguna posibilidad de hacer esto? De momento he estado ojeando los .tpl, .php y parece que trabaja todo a través de variables y tampoco he sido capaz de encontrar información al respecto.

<div class="row">
	<div id="header_logo">
		...
	</div>
	<div class="shopping_cart_content clearfix header_user_catalog">
		...
	</div>
	<div id="tmsearch" class="clearfix">
		...
	</div> 
    <div class="top_menu clearfix">
		...
    </div>
    <div id="tmhtmlcontent_top" class="parallax_section" data-type-media="image" style="width: 1423px; ; left: 50%;">
		...
	</div>
</div>

Saludos y gracias de antemano

[mAchAcA]

No se entiende muy bien que es lo que quieres.

[ventura]

Tendras que añadir en esos contenedores el contenido que quieres que aparezca. Lo puedes hacer mediante hooks

Asi por ejemplo en un determina div aparecerian los modulos contenidos en el hook top

 {$HOOK_TOP}

Para el enlace del logo, algo asi

<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>

[Urko]

Buenas,

 

Gracias Ventura, parece que ese camino puede servir, unas dudas/consultas al respecto:

- Parece que he detectado el código en /public_html/themes/PLANTILLA/header.tpl 

- Si en este .TPL creo un {$HOOK_NUEVO}, ¿desde dónde se lo asigno a los módulos? Ya que internamente (desde el admin) no aparecen en los desplegables para poder modificar/copiar el "MOVER A" del HOOK insertado a mano y como insertar, imagino que sería tan sencillo como lograr mover el módulo de HOOK

<div class="row">
  <DIV ID="NUEVODIV">
     <div id="header_logo">
          ...
     </div>

     {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}

  </DIV>

  {if isset($HOOK_NUEVO)}{$HOOK_NUEVO}{/if}

</div>

Para más explicaciones (solicitado por mAchAcA):

  Reveal hidden contents

Siento no haberme expresado con claridad mAchAcA, el diseño y plantilla actual de Prestashop me monta el código que muestro en el primer mensaje (el logo, el buscador, etc). Me llevo bastante bien con php, css y html, pero aún no entiendo como poder hacer ciertos cambios en Prestashop. Voy a intentar explicarme por pasos:

- ACTUALMENTE:
Tengo un div denominado con la class ROW
Dentro de este tengo los siguientes bloques:
Logo
Cesta
Buscador
Menú
Imagen

- LO QUE DESEO HACER:
Me gustaría poder crear otra estructura interna para poder organizar los bloques (DIV´s) de otra forma y así modificar el diseño base de la plantilla con la siguiente estructura dentro de ROW:
NUEVO DIV "XYZ"
Logo
Cesta
Buscador
Menu
Imagen (fuera del DIV "XYZ" para aplicarle otro efecto, aunque si dentro de ROW)

Es decir, poder visualizar el siguiente código en WEB para editar sus CSS posteriormente:

<div class="row">
    <DIV ID="NUEVODIV">
	<div id="header_logo">
		...
	</div>
	<div class="shopping_cart_content clearfix header_user_catalog">
		...
	</div>
	<div id="tmsearch" class="clearfix">
		...
	</div> 
	<div class="top_menu clearfix">
		...
	</div>
    </DIV>
    <div id="tmhtmlcontent_top" class="parallax_section" data-type-media="image" style="width: 1423px; ; left: 50%;">
	...
    </div>
</div>

En Joomla, Wordpress, etc es sencillo realizarlo editando la plantilla .php directamente, pero en Prestashop no logro encontrar nada similar, pero lo de los HOOKS tiene buena pinta.

 

 

Saludos

[ventura]

Para crear un nuevo hook y asociarlo a un modulo solo tienes que incluirlo en la function install del archivo .php principal del modulo, ejemplo

$this->registerHook('displaynuevomodulo') == false

y mas abajo le asigna una funcion propia, respectando el camelcase en el nombre

public function hookDisplayNuevoModulo($params)
    {
     	return $this->hookTop($params);
    }

en ese ejemplo tomaria los parametros y variables del hook top

[Urko]

Buenas Ventura,

 

Estoy tratando de buscar la forma de hacerlo tal y como me indicas y sigo sin conseguirlo, me faltará algún paso, te indico:

 

He introducido el siguiente código en /public_html/themes/PLANTILLA/header.tpl:

 

  Reveal hidden contents

 

<div class="row">
  <DIV ID="NUEVODIV">
     <div id="header_logo">
          ...
     </div>
 
     {if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
 
  </DIV>
 
  {if isset($HOOK_NUEVO)}{$HOOK_NUEVO}{/if}
 
</div> 

 

 

 

 

También he incorporado en /public_html/modules/tmmediaparallax/tmmediaparallax.php lo siguiente (no aparece $HOOK_TOP, aparece $HOOK_HEADER), puede que este aquí mi error en la forma de hacerlo:

 

 

  Reveal hidden contents

 

	public function install()

	{

		if (Shop::isFeatureActive())

			Shop::setContext(Shop::CONTEXT_ALL);



		if (!parent::install()

			|| !$this->installDB()

			|| !$this->registerHook('displayHeader')
			|| !$this->registerHook('displayNUEVO')

			|| !Configuration::updateValue('smooth_scroll_on', 0)

			|| !Configuration::updateValue('smooth_scroll_step', '150')

			|| !Configuration::updateValue('smooth_scroll_speed', '800'))

			return false;

		return true;

	} 

y a falta del HOOK_TOP he copiado el HOOK_HEADER (manteniendo ambas funciones):

	public function hookDisplayNUEVO()

	{

		$this->context->controller->addCSS($this->_path.'views/css/tm-media-parallax-styles.css');

		$this->context->controller->addJS($this->_path.'views/js/device.min.js');

		if (Configuration::get('smooth_scroll_on'))

		{

			$this->context->controller->addJS($this->_path.'views/js/jquery.mousewheel.min.js');

			$this->context->controller->addJS($this->_path.'views/js/jquery.simplr.smoothscroll.min.js');

		}

		$this->context->controller->addJS($this->_path.'views/js/tm-media-parallax.js');



		$this->getItems();



		$this->context->smarty->assign('base_path', __PS_BASE_URI__);

		$this->context->smarty->assign('media_path', 'modules/tmmediaparallax/media/');

		$this->context->smarty->assign(

			array(

				'smooth_scroll_on' 			=> Configuration::get('smooth_scroll_on'),

				'smooth_scroll_step' 		=> Configuration::get('smooth_scroll_step'),

				'smooth_scroll_speed' 		=> Configuration::get('smooth_scroll_speed'),

			)

		);



		return $this->display(__FILE__, 'tmmediaparallax.tpl');

	}

 

 

 

Y por último he ido a la administración y he hecho lo siguiente (que también puede estar aquí la metedura de pata):

 

1 - Me he metido a configurar "Media parallax module"

 

2 - Me he metido a "Insertar" y a "Modificar" y me dan el mismo resultado

     * No me aparece NUEVO en ningún sitio para poder seleccionar la posición del módulo

 

¿Me falta algún paso o he metido la pata en algún sitio? 

 

Saludos y ante todo gracias por tu atención

Edited July 13, 2016 by Urko (see edit history)

[ventura]

Si incluyes el nuevo hook en la funcion install,  tienes que reiniciar el modulo para que se pueda crear el hook. Una vez reiniciado puedes comprobarlo desde modulos/posiciones