<!-- add to cart form-->

{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

{*
<!-- add to cart form-->
...
...
...
*}

{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}

{*
        {if $colors}
        <!-- colors -->
        <div id="color_picker">
            <p>{l s='Pick a color:' js=1}</p>
            <div class="clear"></div>
            <ul id="color_to_pick_list">
            {foreach from=$colors key='id_attribute' item='color'}
                <li><a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});$('#resetImages').show('slow');" title="{$color.name}">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}<img src="{$img_col_dir}{$id_attribute}.jpg" alt="{$color.name}" width="20" height="20" />{/if}</a></li>
            {/foreach}
            </ul>
                <a id="color_all" onclick="updateColorSelect(0);$('a#resetImages').hide('slow');" title="{l s='Cancel'}"><img src="{$img_dir}icon/cancel.gif" alt="{l s='Cancel'}" /></a>
            <div class="clear"></div>
        </div>
        {/if}
*}

<!-- left infos-->
    <div id="pb-left-column">
    ...
    ...
    ...
    </div>

{if count($images) > 0}
        <!-- thumbnails -->
        <div id="views_block" {if count($images) < 2}class="hidden"{/if}>
        {if count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
        <div id="thumbs_list">
            <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
                {foreach from=$images item=image name=thumbnails}
                {assign var=imageIds value=`$product->id`-`$image.id_image`}
                <li id="thumbnail_{$image.id_image}">
                    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                        <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                    </a>
                </li>
                {/foreach}
            </ul>
        </div>
        {if count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}
        </div>
        {/if}
        {if count($images) > 1}<p class="align_center clear"><a id="resetImages" href="{$link->getProductLink($product)}" style="display:none;" onclick="$('a#resetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></p>{/if}

{if count($images) > 0}
        <!-- thumbnails -->
        <div id="views_block" {if count($images) < 2}class="hidden"{/if}>
            <div id="thumbs_list">
                <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame">
                    {foreach from=$images item=image name=thumbnails}
                    {assign var=imageIds value=`$product->id`-`$image.id_image`}
                    <li id="thumbnail_{$image.id_image}">
                        <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
                            <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
                        </a>
                    </li>
                    {/foreach}
                </ul>
            </div>
        </div>
        {/if}
        {if count($images) > 3}
            <a id="view_scroll_left" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a>
            <a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>
        {/if}
        {if count($images) > 1}<p class="align_center clear"><a id="resetImages" href="{$link->getProductLink($product)}" style="display:none;" onclick="$('a#resetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></p>{/if}

...
                    ...
                    ...

                    <div class="pack_content">
                        {$packItem.pack_quantity} x <a href="{$link->getProductLink($packItem.id_product, $packItem.link_rewrite, $packItem.category)}">{$packItem.name|escape:'htmlall':'UTF-8'}</a>
                        <p>{$packItem.description_short}</p>
                    </div>
                {/foreach}
            {/if}
        </div>
        {/if}

{if $colors}
<!-- colors -->
...
...
...