Смена отображения товаров в каталоге таблицей и списком без перезагрузки страницы TPL — различия между версиями
Строка 1: | Строка 1: | ||
− | + | '''Актуально для версии 2.9''' | |
+ | |||
+ | [[Категория:Модуль Верстка в TPL]] | ||
==Задача== | ==Задача== | ||
Строка 12: | Строка 14: | ||
Так же нам понадобиться создать файл со стилями CSS для того, что бы задать как должны отображаться объекты в табличной верстке. Создадим файл '''custom_style.css''' и опишем там отображение для табличной верстки, потому что список у нас уже прописан. Там же необходимо вставить описание для кнопок, мы их возьмем с шаблона demodizzy: | Так же нам понадобиться создать файл со стилями CSS для того, что бы задать как должны отображаться объекты в табличной верстке. Создадим файл '''custom_style.css''' и опишем там отображение для табличной верстки, потому что список у нас уже прописан. Там же необходимо вставить описание для кнопок, мы их возьмем с шаблона demodizzy: | ||
+ | Теперь необходимо подключить все файлы к системе добавив следующие строки между тегами <head></head>: | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
− | + | <link type="text/css" rel="stylesheet" href="/templates/demoold/css/custom_style.css?%system_build%"/> | |
+ | <script type="text/javascript" src="/js/jquery/jquery.js"></script> | ||
+ | <script type="text/javascript" src="/templates/demoold/js/__common.js?%system_build%"></script> | ||
+ | </source> | ||
+ | |||
+ | В файле отображения используемого для каталога после строки <div id="center" class="column"> необходимо добавить код: | ||
+ | <source lang=html4strict> | ||
+ | <div class="change"> | ||
+ | <div class="slab">Плиткой</div> | ||
+ | <div class="list act">Списком</div> | ||
+ | </div> | ||
</source> | </source> | ||
− | + | Далее идем в файл '''preview.tpl''' и вместо того что там есть копируем туда код: | |
+ | <source lang="html4strict"> | ||
+ | <?php | ||
+ | |||
+ | $FORMS = Array(); | ||
+ | |||
+ | $FORMS['view_block_empty'] = <<<END | ||
+ | |||
+ | END; | ||
+ | |||
+ | |||
+ | $FORMS['view_block'] = <<<END | ||
+ | |||
+ | <div class="item" umi:element-id="%id%"> | ||
+ | |||
+ | <table border="0"> | ||
+ | <tr> | ||
+ | <td style="vertical-align:top;" umi:element-id="%id%" umi:field-name="photo"> | ||
+ | %data getProperty(%id%, 'photo', 'preview_image')% | ||
+ | </td> | ||
+ | <td style="padding-left: 15px; vertical-align:top;"> | ||
+ | <a href="%link%" umi:element-id="%id%" umi:field-name="name" class="title">%name%</a> | ||
+ | %data getProperty(%id%, 'price', 'catalog_preview')% | ||
+ | %data getPropertyGroup(%id%, 'short_info', 'catalog_preview')% | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <div style="clear: both; margin-top: 10px; padding-bottom: 10px;"> | ||
+ | %emarket basketAddLink(%id%)% | ||
+ | <a href="%pre_lang%/emarket/addToCompare/%id%/" rel="nofollow">Добавить к сравнению</a> | ||
+ | | <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="new_item"> | ||
+ | <table border="0"> | ||
+ | <tr> | ||
+ | <td umi:element-id="%id%" umi:field-name="photo"> | ||
+ | %data getProperty(%id%, 'photo', 'preview_image')% | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <a href="%link%" umi:element-id="%id%" umi:field-name="name" class="title">%name%</a> | ||
+ | %data getProperty(%id%, 'price', 'catalog_preview')% | ||
+ | %data getPropertyGroup(%id%, 'short_info', 'catalog_preview')% | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | %emarket basketAddLink(%id%)%<br /> | ||
+ | <a href="%pre_lang%/emarket/addToCompare/%id%/" rel="nofollow">Добавить к сравнению</a><br /> | ||
+ | <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | END; | ||
+ | ?> | ||
+ | </source> |
Версия 10:56, 1 июля 2013
Актуально для версии 2.9
Задача
На демо сайте UMI.CMS с шаблоном demodizzy, есть возможность переключаться между отображением товара списком или таблицей без перезагрузки страницы. Необходимо сделать такой же функционал на TPL шаблонизаторе, например на шаблоне demoold.
Решение задачи
Для начала попробуем перенести с demodizzy максимально возможное количество информации для работы данного скрипта.
Сам скрипт находиться в файле __common.js который лежит в папке templates/demodizzy/js/. Мы можем скопировать его полностью и разместить соответственно в папке templates/demoold/js/.
Далее скопируем изображения кнопок, в последующем Вы можете их заменить. Изображения кнопок находятся в папке templates/demodizzy/images/bg/, это файлы list.png и slab.pmg. Их мы расположим в папке templates/demoold/images/.
Так же нам понадобиться создать файл со стилями CSS для того, что бы задать как должны отображаться объекты в табличной верстке. Создадим файл custom_style.css и опишем там отображение для табличной верстки, потому что список у нас уже прописан. Там же необходимо вставить описание для кнопок, мы их возьмем с шаблона demodizzy:
Теперь необходимо подключить все файлы к системе добавив следующие строки между тегами <head></head>:
<link type="text/css" rel="stylesheet" href="/templates/demoold/css/custom_style.css?%system_build%"/>
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/templates/demoold/js/__common.js?%system_build%"></script>
В файле отображения используемого для каталога после строки
<div class="change">
<div class="slab">Плиткой</div>
<div class="list act">Списком</div>
</div>
Далее идем в файл preview.tpl и вместо того что там есть копируем туда код:
<?php
$FORMS = Array();
$FORMS['view_block_empty'] = <<<END
END;
$FORMS['view_block'] = <<<END
<div class="item" umi:element-id="%id%">
<table border="0">
<tr>
<td style="vertical-align:top;" umi:element-id="%id%" umi:field-name="photo">
%data getProperty(%id%, 'photo', 'preview_image')%
</td>
<td style="padding-left: 15px; vertical-align:top;">
<a href="%link%" umi:element-id="%id%" umi:field-name="name" class="title">%name%</a>
%data getProperty(%id%, 'price', 'catalog_preview')%
%data getPropertyGroup(%id%, 'short_info', 'catalog_preview')%
</td>
</tr>
</table>
<div style="clear: both; margin-top: 10px; padding-bottom: 10px;">
%emarket basketAddLink(%id%)%
<a href="%pre_lang%/emarket/addToCompare/%id%/" rel="nofollow">Добавить к сравнению</a>
| <a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a>
</div>
</div>
<div class="new_item">
<table border="0">
<tr>
<td umi:element-id="%id%" umi:field-name="photo">
%data getProperty(%id%, 'photo', 'preview_image')%
</td>
</tr>
<tr>
<td>
<a href="%link%" umi:element-id="%id%" umi:field-name="name" class="title">%name%</a>
%data getProperty(%id%, 'price', 'catalog_preview')%
%data getPropertyGroup(%id%, 'short_info', 'catalog_preview')%
</td>
</tr>
<tr>
<td>
%emarket basketAddLink(%id%)%<br />
<a href="%pre_lang%/emarket/addToCompare/%id%/" rel="nofollow">Добавить к сравнению</a><br />
<a href="%link%#comments" >Комментарии (%comments countComments(%id%)%)</a>
</td>
</tr>
</table>
</div>
END;
?>