Jump to content

Afficher un nouvel onglet sur la page produit


Recommended Posts

Bonjour,

Je vous écris afin de solliciter un peu d'aide, je pense en effet être arrivé au bout de mes compétences après de longs essais infructueux.

Voici mon problème:

Je souhaite, sur la page d'un produit, pouvoir afficher les descriptions sous forme d'onglets. Je suis parvenu à mettre la page produit sous forme d'onglet, en suivant ce lien :
https://mypresta.eu/en/art/prestashop-16/product-tabs.html

J'arrive donc sur ma page produits, et, pour l'instant, j'ai un onglet "En savoir plus" (affiché en premier par défaut), et un autre "Avis".

J'ai ensuite crée un nouveau champ texte dans la base de données produits, qui s'appelle "pointsforts". J'ai suivi ce tuto:
http://www.paulineghiazza.fr/ajouter-un-champ-dans-le-backoffice-prestashop-1-5/

Je suis parvenu à créer le champ dans le backoffice.

Je bloque désormais pour afficher mon champ "points forts" sur un onglet, et j'aimerai que ce soit le premier onglet par défaut sur la page, suivi de "en savoir plus" et enfin "avis".

Je pense que ça se joue ici (product.tpl):

 

<!-- description and 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}
<div id="more_info_block" class="clear">
    <ul id="more_info_tabs" class="idTabs idTabsShort clearfix">
        {if $product->description}<li><a id="more_info_tab_more_info" href="#idTab1">{l s='More info'}</a></li>{/if}
        {if $features}<li><a id="more_info_tab_data_sheet" href="#idTab2">{l s='Data sheet'}</a></li>{/if}
        {if $attachments}<li><a id="more_info_tab_attachments" href="#idTab9">{l s='Download'}</a></li>{/if}
        {if isset($accessories) AND $accessories}<li><a href="#idTab4">{l s='Accessories'}</a></li>{/if}
        {if isset($product) && $product->customizable}<li><a href="#idTab10">{l s='Product customization'}</a></li>{/if}
        {$HOOK_PRODUCT_TAB}
    </ul>
    
	<div id="more_info_sheets" class="sheets align_justify">
    {if isset($product) && $product->description}
        <!-- full description -->
        <div id="idTab1" class="rte">{$product->description}</div>
    {/if}
    {if isset($features) && $features}
        <!-- product's features -->
        <ul id="idTab2" class="bullet">
        {foreach from=$features item=feature}
            {if isset($feature.value)}
                <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
            {/if}
        {/foreach}
        </ul>
    {/if}
    {if isset($attachments) && $attachments}
        <ul id="idTab9" class="bullet">
        {foreach from=$attachments item=attachment}
            <li><a href="{$link->getPageLink('attachment', true, NULL, "id_attachment={$attachment.id_attachment}")|escape:'html'}">{$attachment.name|escape:'htmlall':'UTF-8'}</a><br />{$attachment.description|escape:'htmlall':'UTF-8'}</li>
        {/foreach}
        </ul>
    {/if}
    {if isset($accessories) AND $accessories}
        <!-- accessories -->
        <div id="idTab4" class="bullet">
            <div class="block products_block accessories_block clearfix">
                <div class="block_content">
                    <ul>
                    {foreach from=$accessories item=accessory name=accessories_list}
                        {if ($accessory.allow_oosp || $accessory.quantity_all_versions > 0 || $accessory.quantity > 0) AND $accessory.available_for_order AND !isset($restricted_country_mode)}
                            {assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
                            <li class="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">
                                <p class="s_title_block">
                                    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}">{$accessory.name|escape:'htmlall':'UTF-8'}</a>
                                    {if $accessory.show_price AND !isset($restricted_country_mode) AND !$PS_CATALOG_MODE} - <span class="price">{if $priceDisplay != 1}{displayWtPrice p=$accessory.price}{else}{displayWtPrice p=$accessory.price_tax_exc}{/if}</span>{/if}
                                </p>
                                <div class="product_desc">
                                    <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{$accessory.legend|escape:'htmlall':'UTF-8'}" class="product_image"><img src="{$link->getImageLink($accessory.link_rewrite, $accessory.id_image, 'medium_default')|escape:'html'}" alt="{$accessory.legend|escape:'htmlall':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" /></a>
                                    <div class="block_description">
                                        <a href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='More'}" class="product_description">{$accessory.description_short|strip_tags|truncate:400:'...'}</a>
                                    </div>
                                    <div class="clear_product_desc"> </div>
                                </div>
                                  
                                <p class="clearfix" style="margin-top:5px">
                                    <a class="button" href="{$accessoryLink|escape:'htmlall':'UTF-8'}" title="{l s='View'}">{l s='View'}</a>
                                    {if !$PS_CATALOG_MODE && ($accessory.allow_oosp || $accessory.quantity > 0)}
                                    <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'}" rel="ajax_id_product_{$accessory.id_product|intval}" title="{l s='Add to cart'}">{l s='Add to cart'}</a>
                                    {/if}
                                </p>
                                  
                            </li>
                        {/if}
                    {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    {/if}
  
    <!-- Customizable products -->
    {if isset($product) && $product->customizable}
        <div id="idTab10" class="bullet customization_block">
            <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">
                    <h3>{l s='Pictures'}</h3>
                    <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'}" 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">
                                        <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="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">
                    <h3>{l s='Text'}</h3>
                    <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}" 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>
                </div>
                {/if}
                <p 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}
  
    {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}{$HOOK_PRODUCT_TAB_CONTENT}{/if}
    </div>
</div>
{/if}
{if isset($packItems) && $packItems|@count > 0}
    <div id="blockpack">
        <h2>{l s='Pack content'}</h2>
        {include file="$tpl_dir./product-list.tpl" products=$packItems}
    </div>
{/if}

Je n'ai compris l'utilisation des idTabs, si je dois en créer une pour mon champ points forts.
Dans le tuto, il est simplement marqué d'insérer le code :
 

{$product->pointsforts}

à l'endroit souhaité.

Si quelqu'un a quelques minutes afin de m'aider, ce serait super sympa,

merci par avance!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...