Visualizar en Modo Pestaña Los Detalles del Producto

G. Mas · April 22, 2014

Buenos dias,

No se si en la versión 1.6 es posible, pero precisaría que la visualización del detalle del producto estuviera en pestañas. Ahora se visualiza seguido, uno detrás de otro. Antes se podía poner pestañas.

Gracias de antemano.

Saludos.

xabikip · April 22, 2014

¿A que te refieres cuando dices los detalles de productos en pestañas?¿Que pestañas?

¿Podrías poner un link como ejemplo o alguna imagen?

jesa · April 22, 2014

¿A que te refieres cuando dices los detalles de productos en pestañas?¿Que pestañas?

¿Podrías poner un link como ejemplo o alguna imagen?

Supongo que se refiere a la forma de visualizar la descripción del producto, características, etc en la pantalla del producto. En versiones anteriores, al visualizar un producto, aparecían estos datos en distintas pestañas y ahora aparecen todas seguidas.

Esto es un tema de estilos css, hay que modificar estos estilos para que se muestren en forma de pestaña. Una solución es coger los css de un theme que tenga estos datos en pestañas y vayas aplicando lo que te sea necesario. Si que hay que tener cuidado en no romper nada del nuevo theme que es responsive.

xabikip · April 22, 2014

Supongo que se refiere a la forma de visualizar la descripción del producto, características, etc en la pantalla del producto. En versiones anteriores, al visualizar un producto, aparecían estos datos en distintas pestañas y ahora aparecen todas seguidas.

Esto es un tema de estilos css, hay que modificar estos estilos para que se muestren en forma de pestaña. Una solución es coger los css de un theme que tenga estos datos en pestañas y vayas aplicando lo que te sea necesario. Si que hay que tener cuidado en no romper nada del nuevo theme que es responsive.

Ok, ahora lo entiendo.

Es verdad, en la 1.6 no se ven en pestañas, pero parece que si que fueron a hacerlo en pestañas, pero es como si tuviera un bug o algo no? porque el estilo y las clases insinúan que fueron a hacer como con pestañas(tabs).

jesa · April 22, 2014

Ok, ahora lo entiendo.

Es verdad, en la 1.6 no se ven en pestañas, pero parece que si que fueron a hacerlo en pestañas, pero es como si tuviera un bug o algo no? porque el estilo y las clases insinúan que fueron a hacer como con pestañas(tabs).

Yo la verdad que no tengo instalada la versión y suelo ver la demo cuando surgen algunos problemas por el foro. Si que es cierto que está como incompleto el título de cada apartado pero yo creo que es así. He trabajado con otros theme que también muestran así estos datos.

Desconozco si esto es un tema estético o tiene algo que ver con ser responsive(aunque no lo creo).

A mi particularmente me parece más fácil como está en la versión 1.6 sobre todo para los dispositivos móviles que tienes toda la informacion directamente.

xabikip · April 22, 2014

Aquí un buen modulo para gestionar dichas pestañas: http://www.presteamshop.com/es/modulos-prestashop/product-extra-tabs.html

jesa · April 22, 2014

Aquí un buen modulo para gestionar dichas pestañas: http://www.presteamshop.com/es/modulos-prestashop/product-extra-tabs.html

Yo preguntaría al desarrollador antes de comprar el módulo...

Como he dicho antes, el modo en el que se ve esta información es tema de estilos. El product.tpl que es donde se muestra esta información es muy parecido, simplemente en los css se cambian los estilos para mostrarlos en forma de pestaña.

Si instalas este módulo lo más probable es que te permita añadir apartados extra como indica, pero como cogerá los estilos de tu theme actual, no se mostrará en pestañas sino que te los añadirá a continuación de los apartados que ya tienes con los mismos estilos.

xabikip · April 22, 2014

Si, tienes razón, seguramente te los muestre como listado.

En este post explican como se puede hacer para verlos en pestañas: http://www.prestashop.com/forums/topic/316898-product-details-in-tabbed-view/

G. Mas · April 25, 2014

Buenas a los dos,

Primero decir estoy muy muy agradecido por todo el dialogo ofrecido en este Post. Y segundo pedir disculpas por la tardanza en responder.

La verdad es que tenéis mucha razón, y el motivo del post es exactamente lo que comenta: Jesa.

Quisiera mostrar los detalles que ahora se muestran seguidos, en formato pestaña como en versiones anteriores.

Una vez se me muestre en pestañas si hiciera falta modificar el responsive para adaptarlo lo haría. Pero ahora mismo en Product.tpl, no acabo de determinar como hacerlo en formato pestañas.

Por este motivo si alguien lo hubiera conseguido adaptarlo, lo agradecería que me echara una mano. Haciéndolo en pestañas se gana en espacio por ese motivo me lo han pedido.

Gracias y espero vuestra respuesta.

Saludos

PrestashopTrackglobe · April 25, 2014

No lo he probado pero partiendo de la plantilla por defecto que está sobre Bootstrap y su forma de hacer pestañas se podrá modificar esto del produc.tpl:

{if (isset($quantity_discounts) && count($quantity_discounts) > 0)}
			<!-- quantity discount -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Volume discounts'}</h3>
				<div id="quantityDiscount">
					<table class="std table-product-discounts">
						<thead>
							<tr>
								<th>{l s='Quantity'}</th>
								<th>{if $display_discount_price}{l s='Price'}{else}{l s='Discount'}{/if}</th>
								<th>{l s='You Save'}</th>
							</tr>
						</thead>
						<tbody>
							{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
							<tr id="quantityDiscount_{$quantity_discount.id_product_attribute}" class="quantityDiscount_{$quantity_discount.id_product_attribute}">
							<td>{$quantity_discount.quantity|intval}</td>
								<td>
									{if $quantity_discount.price >= 0 || $quantity_discount.reduction_type == 'amount'}
										{if $display_discount_price}
											{convertPrice price=$productPrice-$quantity_discount.real_value|floatval}
										{else}
											{convertPrice price=$quantity_discount.real_value|floatval}
										{/if}
									{else}
										{if $display_discount_price}
											{convertPrice price = $productPrice-($productPrice*$quantity_discount.reduction)|floatval}
										{else}
											{$quantity_discount.real_value|floatval}%
										{/if}
									{/if}
								</td>
								<td>
									<span>{l s='Up to'}</span>
									{if $quantity_discount.price >= 0 || $quantity_discount.reduction_type == 'amount'}
										{$discountPrice=$productPrice-$quantity_discount.real_value|floatval}
									{else}
										{$discountPrice=$productPrice-($productPrice*$quantity_discount.reduction)|floatval}
									{/if}
									{$discountPrice=$discountPrice*$quantity_discount.quantity}
									{$qtyProductPrice = $productPrice*$quantity_discount.quantity}
									{convertPrice price=$qtyProductPrice-$discountPrice}
								</td>
							</tr>
							{/foreach}
						</tbody>
					</table>
				</div>
			</section>
		{/if}
		{if isset($features) && $features}
			<!-- Data sheet -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Data sheet'}</h3>
				<table class="table-data-sheet">			
					{foreach from=$features item=feature}
					<tr class="{cycle values="odd,even"}">
						{if isset($feature.value)}			    
						<td>{$feature.name|escape:'html':'UTF-8'}</td>
						<td>{$feature.value|escape:'html':'UTF-8'}</td>
						{/if}
					</tr>
					{/foreach}
				</table>
			</section>
			<!--end Data sheet -->
		{/if}
		{if $product->description}
			<!-- More info -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='More info'}</h3>{/if}
				{if isset($product) && $product->description}
					<!-- full description -->
					<div  class="rte">{$product->description}</div>
			</section>
			<!--end  More info -->
		{/if}
		<!--HOOK_PRODUCT_TAB -->
		<section class="page-product-box">
			{$HOOK_PRODUCT_TAB}
			{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
		</section>
		<!--end HOOK_PRODUCT_TAB -->
		{if isset($accessories) && $accessories}
			<!--Accessories -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Accessories'}</h3>
				<div class="block products_block accessories-block clearfix">
					<div class="block_content">
						<ul id="bxslider" class="bxslider clearfix">
							{foreach from=$accessories item=accessory name=accessories_list}
								{if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) && $accessory.available_for_order && !isset($restricted_country_mode)}
									{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
									<li class="item product-box ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
										<div class="product_desc">
											<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{$accessory.legend|escape:'html':'UTF-8'}" class="product-image product_image">
												<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
											</a>
											<div class="block_description">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{l s='More'}" class="product_description">
													{$accessory.description_short|strip_tags|truncate:25:'...'}
												</a>
											</div>
										</div>
										<div class="s_title_block">
											<h5 class="product-name">
												<a href="{$accessoryLink|escape:'html':'UTF-8'}">
													{$accessory.name|truncate:20:'...':true|escape:'html':'UTF-8'}
												</a>
											</h5>
											{if $accessory.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
											<span class="price">
												{if $priceDisplay != 1}
												{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}
												{/if}
											</span>
											{/if}
										</div>
										<div class="clearfix" style="margin-top:5px">
											{if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
												<div class="no-print">
													<a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html':'UTF-8'}" data-id-product="{$accessory.id_product|intval}" title="{l s='Add to cart'}">
														<span>{l s='Add to cart'}</span>
													</a>
												</div>
											{/if}
										</div>
									</li>
								{/if}
							{/foreach}
						</ul>
					</div>
				</div>	
			</section>
			<!--end Accessories -->
		{/if}
		{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}
		<!-- description & features -->
		{if (isset($product) && $product->description) || (isset($features) && $features) || (isset($accessories) && $accessories) || (isset($HOOK_PRODUCT_TAB) && $HOOK_PRODUCT_TAB) || (isset($attachments) && $attachments) || isset($product) && $product->customizable}
			{if isset($attachments) && $attachments}
			<!--Download -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Download'}</h3>
				{foreach from=$attachments item=attachment name=attachements}
					{if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}
						<div class="col-lg-4">
							<h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>
							<p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>
							<a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">
								<i class="icon-download"></i>
								{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})
							</a>
							<hr>
						</div>
					{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}
				{/foreach}
			</section>
			<!--end Download -->
			{/if}
			{if isset($product) && $product->customizable}
			<!--Customization -->
			<section class="page-product-box">
				<h3 class="page-product-heading">{l s='Product customization'}</h3>
				<!-- Customizable products -->
				<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
					<p class="infoCustomizable">
						{l s='After saving your customized product, remember to add it to your cart.'}
						{if $product->uploadable_files}
						<br />
						{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
					</p>
					{if $product->uploadable_files|intval}
						<div class="customizableProductsFile">
							<h5 class="product-heading-h5">{l s='Pictures'}</h5>
							<ul id="uploadable_files" class="clearfix">
								{counter start=0 assign='customizationField'}
								{foreach from=$customizationFields item='field' name='customizationFields'}
									{if $field.type == 0}
										<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if isset($pictures.$key)}
												<div class="customizationUploadBrowse">
													<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
														<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
															<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
														</a>
												</div>
											{/if}
											<div class="customizationUploadBrowse form-group">
												<label class="customizationUploadBrowseDescription">
													{if !empty($field.name)}
														{$field.name}
													{else}
														{l s='Please select an image file from your computer'}
													{/if}
													{if $field.required}<sup>*</sup>{/if}
												</label>
												<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
											</div>
										</li>
										{counter}
									{/if}
								{/foreach}
							</ul>
						</div>
					{/if}
					{if $product->text_fields|intval}
						<div class="customizableProductsText">
							<h5 class="product-heading-h5">{l s='Text'}</h5>
							<ul id="text_fields">
							{counter start=0 assign='customizationField'}
							{foreach from=$customizationFields item='field' name='customizationFields'}
								{if $field.type == 1}
									<li class="customizationUploadLine{if $field.required} required{/if}">
										<label for ="textField{$customizationField}">
											{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
											{if !empty($field.name)}
												{$field.name}
											{/if}
											{if $field.required}<sup>*</sup>{/if}
										</label>
										<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
											{if isset($textFields.$key)}
												{$textFields.$key|stripslashes}
											{/if}
										{/strip}</textarea>
									</li>
									{counter}
								{/if}
							{/foreach}
							</ul>
						</div>
					{/if}
					<p id="customizedDatas">
						<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
						<input type="hidden" name="submitCustomizedDatas" value="1" />
						<button class="button btn btn-default button button-small" name="saveCustomization">
							<span>{l s='Save'}</span>
						</button>
						<span id="ajax-loader" class="unvisible">
							<img src="{$img_ps_dir}loader.gif" alt="loader" />
						</span>
					</p>
				</form>
				<p class="clear required"><sup>*</sup> {l s='required fields'}</p>	
			</section>
			<!--end Customization -->
			{/if}
		{/if}
		{if isset($packItems) && $packItems|@count > 0}
		<section id="blockpack">
			<h3 class="page-product-heading">{l s='Pack content'}</h3>
			{include file="$tpl_dir./product-list.tpl" products=$packItems}
		</section>
		{/if}

por esto otro:

{if (isset($quantity_discounts) && count($quantity_discounts) > 0) || isset($features) && $features || $product->description!="" || isset($accessories) && $accessories || isset($attachments) && $attachments || isset($product) && $product->customizable || isset($packItems) && $packItems|@count > 0}
        <div class="nav-tabs-div">
            <ul class="nav nav-tabs">
                {$tab_default=""}
                {if (isset($quantity_discounts) && count($quantity_discounts) > 0)}
                    {if $tab_default==""}{$tab_default="quantity_discounts_product"}{/if}
                    <a href="#quantity_discounts_product" data-toggle="tab">{l s='Volume discounts'}</a>
                {/if}
                {if isset($features) && $features}
                    {if $tab_default==""}{$tab_default="features_product"}{/if}
                    <a href="#features_product" data-toggle="tab">{l s='Data sheet'}</a>
                {/if}
                {if $product->description!=""}
                    {if $tab_default==""}{$tab_default="description_product"}{/if}
                    <a href="#description_product" data-toggle="tab">{l s='More info'}</a>
                {/if}
                {if isset($accessories) && $accessories}
                    {if $tab_default==""}{$tab_default="accessories_product"}{/if}
                    <a href="#accessories_product" data-toggle="tab">{l s='Accessories'}</a>
                {/if}
                {if isset($attachments) && $attachments}
                    {if $tab_default==""}{$tab_default="attachments_product"}{/if}
                    <a href="#attachments_product" data-toggle="tab">{l s='Download'}</a>
                {/if}
                {if isset($product) && $product->customizable}
                    {if $tab_default==""}{$tab_default="customizable_product"}{/if}
                    <a href="#customizable_product" data-toggle="tab">{l s='Product customization'}</a>
                {/if}
                {if isset($packItems) && $packItems|@count > 0}
                    {if $tab_default==""}{$tab_default="packItems_product"}{/if}
                    <a href="#packItems_product" data-toggle="tab">{l s='Pack content'}</a>
                {/if}
            </ul>
        </div>
        <div class="tab-content">
            {if (isset($quantity_discounts) && count($quantity_discounts) > 0)}
                <div id="quantity_discounts_product" class="tab-pane {if $tab_default=="quantity_discounts_product"}active{/if}">
        			<!-- quantity discount -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='Volume discounts'}</h3>
        				<div id="quantityDiscount">
        					<table class="std table-product-discounts">
        						<thead>
        							<tr>
        								<th>{l s='Quantity'}</th>
        								<th>{if $display_discount_price}{l s='Price'}{else}{l s='Discount'}{/if}</th>
        								<th>{l s='You Save'}</th>
        							</tr>
        						</thead>
        						<tbody>
        							{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
        							<tr id="quantityDiscount_{$quantity_discount.id_product_attribute}" class="quantityDiscount_{$quantity_discount.id_product_attribute}">
        							<td>{$quantity_discount.quantity|intval}</td>
        								<td>
        									{if $quantity_discount.price >= 0 || $quantity_discount.reduction_type == 'amount'}
        										{if $display_discount_price}
        											{convertPrice price=$productPrice-$quantity_discount.real_value|floatval}
        										{else}
        											{convertPrice price=$quantity_discount.real_value|floatval}
        										{/if}
        									{else}
        										{if $display_discount_price}
        											{convertPrice price = $productPrice-($productPrice*$quantity_discount.reduction)|floatval}
        										{else}
        											{$quantity_discount.real_value|floatval}%
        										{/if}
        									{/if}
        								</td>
        								<td>
        									<span>{l s='Up to'}</span>
        									{if $quantity_discount.price >= 0 || $quantity_discount.reduction_type == 'amount'}
        										{$discountPrice=$productPrice-$quantity_discount.real_value|floatval}
        									{else}
        										{$discountPrice=$productPrice-($productPrice*$quantity_discount.reduction)|floatval}
        									{/if}
        									{$discountPrice=$discountPrice*$quantity_discount.quantity}
        									{$qtyProductPrice = $productPrice*$quantity_discount.quantity}
        									{convertPrice price=$qtyProductPrice-$discountPrice}
        								</td>
        							</tr>
        							{/foreach}
        						</tbody>
        					</table>
        				</div>
        			</section>
                </div>
    		{/if}
            {if isset($features) && $features}
                <div id="features_product" class="tab-pane {if $tab_default=="features_product"}active{/if}">
        			<!-- Data sheet -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='Data sheet'}</h3>
        				<table class="table-data-sheet">			
        					{foreach from=$features item=feature}
        					<tr class="{cycle values="odd,even"}">
        						{if isset($feature.value)}			    
        						<td>{$feature.name|escape:'html':'UTF-8'}</td>
        						<td>{$feature.value|escape:'html':'UTF-8'}</td>
        						{/if}
        					</tr>
        					{/foreach}
        				</table>
        			</section>
        			<!--end Data sheet -->
                </div>
    		{/if}
            {if $product->description}
                <div id="description_product" class="tab-pane {if $tab_default=="description_product"}active{/if}">
        			<!-- More info -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='More info'}</h3>{/if}
        				{if isset($product) && $product->description}
        					<!-- full description -->
        					<div  class="rte">{$product->description}</div>
        			</section>
        			<!--end  More info -->
                </div>
    		{/if}
            {if isset($accessories) && $accessories}
                <div id="accessories_product" class="tab-pane {if $tab_default=="accessories_product"}active{/if}">
        			<!--Accessories -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='Accessories'}</h3>
        				<div class="block products_block accessories-block clearfix">
        					<div class="block_content">
        						<ul id="bxslider" class="bxslider clearfix">
        							{foreach from=$accessories item=accessory name=accessories_list}
        								{if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) && $accessory.available_for_order && !isset($restricted_country_mode)}
        									{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
        									<li class="item product-box ajax_block_product{if $smarty.foreach.accessories_list.first} first_item{elseif $smarty.foreach.accessories_list.last} last_item{else} item{/if} product_accessories_description">
        										<div class="product_desc">
        											<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{$accessory.legend|escape:'html':'UTF-8'}" class="product-image product_image">
        												<img class="lazyOwl" src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'home_default')|escape:'html':'UTF-8'}" alt="{$accessory.legend|escape:'html':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}"/>
        											</a>
        											<div class="block_description">
        												<a href="{$accessoryLink|escape:'html':'UTF-8'}" title="{l s='More'}" class="product_description">
        													{$accessory.description_short|strip_tags|truncate:25:'...'}
        												</a>
        											</div>
        										</div>
        										<div class="s_title_block">
        											<h5 class="product-name">
        												<a href="{$accessoryLink|escape:'html':'UTF-8'}">
        													{$accessory.name|truncate:20:'...':true|escape:'html':'UTF-8'}
        												</a>
        											</h5>
        											{if $accessory.show_price && !isset($restricted_country_mode) && !$PS_CATALOG_MODE}
        											<span class="price">
        												{if $priceDisplay != 1}
        												{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}
        												{/if}
        											</span>
        											{/if}
        										</div>
        										<div class="clearfix" style="margin-top:5px">
        											{if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
        												<div class="no-print">
        													<a class="exclusive button ajax_add_to_cart_button" href="{$link->getPageLink('cart', true, NULL, "qty=1&id_product={$accessory.id_product|intval}&token={$static_token}&add")|escape:'html':'UTF-8'}" data-id-product="{$accessory.id_product|intval}" title="{l s='Add to cart'}">
        														<span>{l s='Add to cart'}</span>
        													</a>
        												</div>
        											{/if}
        										</div>
        									</li>
        								{/if}
        							{/foreach}
        						</ul>
        					</div>
        				</div>	
        			</section>
        			<!--end Accessories -->
                </div>
    		{/if}
            {if isset($attachments) && $attachments}
                <div id="attachments_product" class="tab-pane {if $tab_default=="attachments_product"}active{/if}">
        			<!--Download -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='Download'}</h3>
        				{foreach from=$attachments item=attachment name=attachements}
        					{if $smarty.foreach.attachements.iteration %3 == 1}<div class="row">{/if}
        						<div class="col-lg-4">
        							<h4><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">{$attachment.name|escape:'html':'UTF-8'}</a></h4>
        							<p class="text-muted">{$attachment.description|escape:'html':'UTF-8'}</p>
        							<a class="btn btn-default btn-block" href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html':'UTF-8'}">
        								<i class="icon-download"></i>
        								{l s="Download"} ({Tools::formatBytes($attachment.file_size, 2)})
        							</a>
        							<hr>
        						</div>
        					{if $smarty.foreach.attachements.iteration %3 == 0 || $smarty.foreach.attachements.last}</div>{/if}
        				{/foreach}
        			</section>
        			<!--end Download -->
                </div>
			{/if}
            {if isset($product) && $product->customizable}
                <div id="customizable_product" class="tab-pane {if $tab_default=="customizable_product"}active{/if}">
        			<!--Customization -->
        			<section class="page-product-box">
        				<h3 class="page-product-heading">{l s='Product customization'}</h3>
        				<!-- Customizable products -->
        				<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm" class="clearfix">
        					<p class="infoCustomizable">
        						{l s='After saving your customized product, remember to add it to your cart.'}
        						{if $product->uploadable_files}
        						<br />
        						{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
        					</p>
        					{if $product->uploadable_files|intval}
        						<div class="customizableProductsFile">
        							<h5 class="product-heading-h5">{l s='Pictures'}</h5>
        							<ul id="uploadable_files" class="clearfix">
        								{counter start=0 assign='customizationField'}
        								{foreach from=$customizationFields item='field' name='customizationFields'}
        									{if $field.type == 0}
        										<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
        											{if isset($pictures.$key)}
        												<div class="customizationUploadBrowse">
        													<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
        														<a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)|escape:'html':'UTF-8'}" title="{l s='Delete'}" >
        															<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
        														</a>
        												</div>
        											{/if}
        											<div class="customizationUploadBrowse form-group">
        												<label class="customizationUploadBrowseDescription">
        													{if !empty($field.name)}
        														{$field.name}
        													{else}
        														{l s='Please select an image file from your computer'}
        													{/if}
        													{if $field.required}<sup>*</sup>{/if}
        												</label>
        												<input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="form-control customization_block_input {if isset($pictures.$key)}filled{/if}" />
        											</div>
        										</li>
        										{counter}
        									{/if}
        								{/foreach}
        							</ul>
        						</div>
        					{/if}
        					{if $product->text_fields|intval}
        						<div class="customizableProductsText">
        							<h5 class="product-heading-h5">{l s='Text'}</h5>
        							<ul id="text_fields">
        							{counter start=0 assign='customizationField'}
        							{foreach from=$customizationFields item='field' name='customizationFields'}
        								{if $field.type == 1}
        									<li class="customizationUploadLine{if $field.required} required{/if}">
        										<label for ="textField{$customizationField}">
        											{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
        											{if !empty($field.name)}
        												{$field.name}
        											{/if}
        											{if $field.required}<sup>*</sup>{/if}
        										</label>
        										<textarea name="textField{$field.id_customization_field}" class="form-control customization_block_input" id="textField{$customizationField}" rows="3" cols="20">{strip}
        											{if isset($textFields.$key)}
        												{$textFields.$key|stripslashes}
        											{/if}
        										{/strip}</textarea>
        									</li>
        									{counter}
        								{/if}
        							{/foreach}
        							</ul>
        						</div>
        					{/if}
        					<p id="customizedDatas">
        						<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
        						<input type="hidden" name="submitCustomizedDatas" value="1" />
        						<button class="button btn btn-default button button-small" name="saveCustomization">
        							<span>{l s='Save'}</span>
        						</button>
        						<span id="ajax-loader" class="unvisible">
        							<img src="{$img_ps_dir}loader.gif" alt="loader" />
        						</span>
        					</p>
        				</form>
        				<p class="clear required"><sup>*</sup> {l s='required fields'}</p>	
        			</section>
        			<!--end Customization -->
                </div>
			{/if}
            {if isset($packItems) && $packItems|@count > 0}
                <div id="packItems_product" class="tab-pane {if $tab_default=="packItems_product"}active{/if}">
                	<section id="blockpack">
                		<h3 class="page-product-heading">{l s='Pack content'}</h3>
                		{include file="$tpl_dir./product-list.tpl" products=$packItems}
                	</section>
                </div>
        	{/if}
        </div>
    {/if}
    
	<!--HOOK_PRODUCT_TAB -->
	<section class="page-product-box">
		{$HOOK_PRODUCT_TAB}
		{if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
	</section>
	<!--end HOOK_PRODUCT_TAB -->
	{if isset($HOOK_PRODUCT_FOOTER) && $HOOK_PRODUCT_FOOTER}{$HOOK_PRODUCT_FOOTER}{/if}

Si se entiende un poco se puede modificar al gusto de cada uno sacando cosas fuera, etc.

G. Mas · April 27, 2014

Victor C,

La verdad que analizando el código que me has prestado es muy logico y tu respuesta me ha ayudado muchísimo, ahora tengo una linea divisoria entre las pestañas y el contenido de la ficha.

Lo que si no es muy entrometerme en tu solución podrías decirme de donde has verificado el código? lo digo para buscar otras adaptaciones posibles.

El código es correcto!! para si alguien le interesa. Lo que ahora se precisa algo de CSS, para stylarlo como Pestaña, pero es correcto.

PrestashopTrackglobe · April 27, 2014

Hola de nuevo, me alegra saber que el código es correcto y cumple con lo que se buscaba (crear las pestañas).

Se supone que prestashop se basa en un plantilla "Bootstrap" por lo que me he basado de la forma de hacerlas de aqui: http://getbootstrap.com/components/ (hay varias versiones y no se exactamente cual se usa en Prestashop) Esa es la teoría, puesto que no es del todo correcta he partido de una plantilla en la que esas "tabs" funcionan: http://bucketadmin.themebucket.net/general.html y quizás resulte mas facil implementarlas esas u otras cosas.

Cualquier cosa en la que pueda ayudar al respecto me comentas.

G. Mas · April 27, 2014

Hola de nuevo, me alegra saber que el código es correcto y cumple con lo que se buscaba (crear las pestañas).

Se supone que prestashop se basa en un plantilla "Bootstrap" por lo que me he basado de la forma de hacerlas de aqui: http://getbootstrap.com/components/ (hay varias versiones y no se exactamente cual se usa en Prestashop) Esa es la teoría, puesto que no es del todo correcta he partido de una plantilla en la que esas "tabs" funcionan: http://bucketadmin.themebucket.net/general.html y quizás resulte mas facil implementarlas esas u otras cosas.

Cualquier cosa en la que pueda ayudar al respecto me comentas.

Sin mas mil gracias y te mantendré informado sobre las mejoras que vaya haciendo. Siempre tan acertados. Mil gracias

Visualizar en Modo Pestaña Los Detalles del Producto

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites