Jump to content

Visualizar en Modo Pestaña Los Detalles del Producto

G. Mas

By G. Mas
in Discusión general

 Share

Recommended Posts

G. Mas Newbie

G. Mas

Posted
Posted

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.

Link to comment
Share on other sites
jesa Newbie

jesa

Posted
Posted

¿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. 

Link to comment
Share on other sites
xabikip Newbie

xabikip

Posted
Posted

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).

Link to comment
Share on other sites
jesa Newbie

jesa

Posted
Posted

 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. 

Link to comment
Share on other sites
jesa Newbie

jesa

Posted
Posted

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.

Link to comment
Share on other sites
G. Mas Newbie

G. Mas

Posted
  • Author
Posted

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

Link to comment
Share on other sites
PrestashopTrackglobe Newbie

PrestashopTrackglobe

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
G. Mas Newbie

G. Mas

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
PrestashopTrackglobe Newbie

PrestashopTrackglobe

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
G. Mas Newbie

G. Mas

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • nadie locked this topic
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...