[Solved] Move Product Customization Tab

[SpottedSparrow]

Is it possible to move the product customization tab to appear next to the more info tab? It's currently appearing beneath the default tabs.

 

I know where the relevant code is in product.tpl but haven't been able to get it working properly. I'm working on transferring my shop from Joomla/VirtueMart and am new to PrestaShop. Any guidance would be most appreciated.

 

[CartExpert.net]

Hello!

 

Edit product.tpl

 

Change

{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}

 

to

 

{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments || $product->customizable}

 

 

In <ul id="more_info_tabs" class="idTabs idTabsShort"></ul>, above {$HOOK_PRODUCT_TAB} insert line:

{if $product->customizable}<li><a href="#idTab5">{l s='Product customization'}</a></li>{/if}

 

In <div id="more_info_sheets" class="sheets align_justify"></div>, above {$HOOK_PRODUCT_TAB_CONTENT} insert :

{if $product->customizable}
 <div class="customization_block">
 <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm">
  <p>
<img src="{$img_dir}icon/infos.gif" alt="Informations" />
{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}
  <h2>{l s='Pictures'}</h2>
  <ul id="uploadable_files">
{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)}" 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"><input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />{if $field.required}<sup>*</sup>{/if}
   <div class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}</div></div>
  </li>
  {counter}
 {/if}
{/foreach}
  </ul>
  {/if}
  <div class="clear"></div>
  {if $product->text_fields|intval}
  <h2>{l s='Texts'}</h2>
  <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}">{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}<textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
  </li>
  {counter}
 {/if}
{/foreach}
  </ul>
  {/if}
  <p style="clear: left;" id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
<span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
  </p>
 </form>
 <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
</div>
{/if}

 

Delete the whole {if}{/if} statement after <!-- Customizable products -->.

 

Do not forget to recompile. If you don't know how to do that, you can visit http://www.cartexpert.net/content/8-prestashop-tricks-and-tips and check 'Prestashop tip of 15th November 2011'

[SpottedSparrow]

Thanks very much for your help. That almost worked but something is still off. There is now a product customization tab, but the contents are appearing both on the more info tab and the product customization tab.

[SpottedSparrow]

Aha, I was able to figure it out! Just need to add the <ul> around the customization code.

 

Thanks again for your help. Wouldn't have been able to work that out myself.

 

Details for anyone looking to do the same:

add <ul id="idTab5" class="bullet"> just before {if $product->customizable}

add a closing </ul> at the end of the product customization code

[cessargor]

You can just add id="idTab5" to the DIV and it will work too, no need to add the UL.

 

God fix by the way, thanks.

[Numpaque]

Hello, can you tell me if this Mod works on Ps 1.5.4.1?

Thank you in advance!

 

 

Hello!

 

Edit product.tpl

 

Change

{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments}

 

to

 

{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB || $attachments || $product->customizable}

 

 

In <ul id="more_info_tabs" class="idTabs idTabsShort"></ul>, above {$HOOK_PRODUCT_TAB} insert line:

{if $product->customizable}<li><a href="#idTab5">{l s='Product customization'}</a></li>{/if}

 

In <div id="more_info_sheets" class="sheets align_justify"></div>, above {$HOOK_PRODUCT_TAB_CONTENT} insert :

{if $product->customizable}
 <div class="customization_block">
 <form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm">
  <p>
<img src="{$img_dir}icon/infos.gif" alt="Informations" />
{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}
  <h2>{l s='Pictures'}</h2>
  <ul id="uploadable_files">
{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)}" 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"><input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />{if $field.required}<sup>*</sup>{/if}
   <div class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}</div></div>
  </li>
  {counter}
 {/if}
{/foreach}
  </ul>
  {/if}
  <div class="clear"></div>
  {if $product->text_fields|intval}
  <h2>{l s='Texts'}</h2>
  <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}">{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}<textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
  </li>
  {counter}
 {/if}
{/foreach}
  </ul>
  {/if}
  <p style="clear: left;" id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
<span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
  </p>
 </form>
 <p class="clear required"><sup>*</sup> {l s='required fields'}</p>
</div>
{/if}

 

Delete the whole {if}{/if} statement after <!-- Customizable products -->.

 

Do not forget to recompile. If you don't know how to do that, you can visit http://www.cartexper...tricks-and-tips and check 'Prestashop tip of 15th November 2011'

[Numpaque]

it's work! Ps1.5.4.1

thks

 

You can just add id="idTab5" to the DIV and it will work too, no need to add the UL.

 

God fix by the way, thanks.