Смена отображения товаров в каталоге таблицей и списком без перезагрузки страницы TPL — различия между версиями
| Строка 3: | Строка 3: | ||
==Задача== | ==Задача== | ||
| − | На демо сайте UMI.CMS | + | На демо сайте UMI.CMS с шаблоном demodizzy, есть возможность переключаться между отображением товара списком или таблицей без перезагрузки страницы. Необходимо сделать такой же функционал на TPL шаблонизаторе, например на шаблоне demoold. |
==Решение задачи== | ==Решение задачи== | ||
| Строка 10: | Строка 10: | ||
Сам скрипт находиться в файле '''__common.js''' который лежит в папке ''templates/demodizzy/js/''. Мы можем скопировать его полностью и разместить соответственно в папке ''templates/demoold/js/''.<br /> | Сам скрипт находиться в файле '''__common.js''' который лежит в папке ''templates/demodizzy/js/''. Мы можем скопировать его полностью и разместить соответственно в папке ''templates/demoold/js/''.<br /> | ||
Далее скопируем изображения кнопок, в последующем Вы можете их заменить. Изображения кнопок находятся в папке ''templates/demodizzy/images/bg/'', это файлы '''list.png''' и '''slab.pmg'''. Их мы расположим в папке ''templates/demoold/images/''.<br /> | Далее скопируем изображения кнопок, в последующем Вы можете их заменить. Изображения кнопок находятся в папке ''templates/demodizzy/images/bg/'', это файлы '''list.png''' и '''slab.pmg'''. Их мы расположим в папке ''templates/demoold/images/''.<br /> | ||
| − | Так же нам понадобиться создать файл со стилями CSS для того, что бы задать как должны отображаться объекты в табличной верстке. Создадим файл '''custom_style.css''' | + | Так же нам понадобиться создать файл со стилями CSS для того, что бы задать как должны отображаться объекты в табличной верстке. Создадим файл '''custom_style.css''' и опишем там отображение для табличной верстки, потому что список у нас уже прописан. Там же необходимо вставить описание для кнопок, мы их возьмем с шаблона demodizzy: |
| + | |||
| + | <source lang="html4strict"> | ||
| + | <link type="text/css" rel="stylesheet" href="/templates/demoold/css/custom_style.css?%system_build%"/> | ||
| + | </source> | ||
| + | |||
| + | Теперь необходимо подключить все файлы к системе. | ||
Версия 10:42, 1 июля 2013
Статья проверена на системе версии 2.9 редакция 21905
Задача
На демо сайте 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:
<link type="text/css" rel="stylesheet" href="/templates/demoold/css/custom_style.css?%system_build%"/>
Теперь необходимо подключить все файлы к системе.
