среда, 26 марта 2014 г.

WASS каталог товаров таблицей и всплывающие фото

1) Убираем старый файл /published/SC/html/scripts/templates/frontend/product_brief.html (для этого достаточно добавить в название old).

2) Создаем новый product_brief.html с содержанием
{* product brief view (from a category or search) *}
{if $product_info ne NULL}
{if $product_info.slug}
{assign var=_product_url value="?ukey=product&productID=`$product_info.productID`&product_slug=`$product_info.slug`"|set_query_html}
{else}
{assign var=_product_url value="?ukey=product&productID=`$product_info.productID`"|set_query_html}
{/if}
{if $widget}{assign var=_form_action_url value="&view=noframe&external=1"}{/if}
<form class="product_brief_block" action='{"?ukey=cart`$_form_action_url`"|set_query_html}' method="post" rel="{$product_info.productID}" {if $widget}target="_blank"{/if}>
    <input name="action" value="add_product" type="hidden" />
    <input name="productID" value="{$product_info.productID}" type="hidden" />
    <input class="product_price" value="{$product_info.PriceWithOutUnit|escape:'html'}" type="hidden" />
    {assign var=_cnt value=''}
 

    <table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    {if $product_info.product_code && $smarty.const.CONF_ENABLE_PRODUCT_SKU}
    <td style="width:100px">{$product_info.product_code|escape:'html'}</td>{/if}
<td>
<img src="{$smarty.const.URL_PRODUCTS_PICTURES}/camera.png" onmouseover="TagToTip('imgTip{$product_info.productID}')" onmouseout="UnTip()">
<div id="imgTip{$product_info.productID}"><img src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$product_info.picture}" /></div>
</td>
<td style="width:250px"><div class="prdbrief_name"><a {$target} href='{$_product_url}'>{$product_info.name|escape:'html'}</a></div></td>
<td><div class="prdbrief_price"><span class="totalPrice">{$product_info.PriceWithUnit}</span></div></td>
<td>{if $product_info.ordering_available && $product_info.Price>0 && ( $smarty.const.CONF_SHOW_ADD2CART eq 1 ) && ( $smarty.const.CONF_CHECKSTOCK==0 || $product_info.in_stock > 0 ) }
    <div class="prdbrief_add2cart"><input type="image" src="{$button_add2cart_small}" alt="{'str_add_to_cart_string'|translate}" title="{"str_add_to_cart_string"|translate}"
    {if $smarty.const.CONF_SHOPPING_CART_VIEW ne $smarty.const.SHCART_VIEW_PAGE && !$widget} class="add2cart_handler" rel="{if $widget}widget{/if}" {/if} /></div>
    {elseif $smarty.const.CONF_SHOW_ADD2CART eq 1 && $smarty.const.CONF_CHECKSTOCK && !$product_info.in_stock && $product_info.ordering_available}
    <div class="prd_out_of_stock">{lbl_prd_out_of_stock}</div>{/if}</td>
    {if $PAGE_VIEW ne 'mobile' &&  $product_info.allow_products_comparison && $show_comparison}  {* removed ' && $categoryID == $product_info.categoryID' *}
<td><div class="prdbrief_comparison">
        <input id="ctrl-prd-cmp-{$product_info.productID}" class="checknomarging ctrl_products_cmp" type="checkbox" value='{$product_info.productID}' />
        <label for="ctrl-prd-cmp-{$product_info.productID}">{"prd_select_to_comparison"|translate}</label></div></td>{/if}
    </tr></table>
</form>
{/if}

3) скачиваем скрипт http://www.walterzorn.de/en/tooltip/tooltip_e.htm#download
и помещаем в папку /published/SC/html/scripts/js/

4) в файле /published/SC/html/scripts/templates/frontend/category.tpl.html (+category_search.html
category_search_result.tpl.html) подключаем скрипт для работы всплывающей фотографии

<script type="text/javascript" src="/published/SC/html/scripts/js/wz_tooltip.js"></script>

5) не забываем добавить файл camera.png  в папку /published/publicdata/base_name/attachments/SC/products_pictures/

6) можно добавить заголовки у колонок

Результат (при наведении на фотоаппарат появляется превью товара, первая загруженная):
1395841207-clip-66kb

Комментариев нет:

Отправить комментарий