Добрый день.
Необходимо заменить текущий увеличитель картинок в карточке товара на этот: highslide.com
Каким образом это можно сделать?
Если необходимо, разработку оплачу, контактный e-mail: andrey.gritsay@gmail.com
Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.
Обладает невероятным количеством функций, необходимых в онлайн торговле.
≡ Следить
Главная
21:49
24 ноя
#
написал:
Поскольку в каждом шаблоне увеличение картинок может быть сделано по-своему, нужно знать имя используемого вами шаблона - BridalStore, Catholic, default_new, Electronics, FeminineLU, FruitGift, Furniture и так далее - какой из них?
Тогда можно заглянуть в файл product.tpl (страница товара) такого же шаблона, чтобы посмотреть как оно устроено и найти нужную точку в файле, затем отсоединить яваскрипт старого увеличителя и подключить яваскрипт увеличителя Highslide.
11:27
30 ноя
#
?
написал:
Добрый день!
Вот этот, с яблочками: demo.imperacms.com/?theme=FruitGifts взят как образец. Где именно взять файл product.tpl (страница товара) и какую галочку там нужно поставить, чтобы подключить яваскрипт увеличителя Highslide?
Спасибо!
16:10
12 дек
#
?
написал:
Подниму тему...
Кто-нибудь сможет подсказать, где и какую галочку нужно поставить, чтобы в качестве увеличителя картинок стал использоваться highslide?
Разработчику предлагаю добавить функцию помощи по вёрстке/функциям движка, 10-20-30$ аналогично функции разработки модулей... мне было бы проще заплатить небольшую сумму и получить быстрый ответ, чем по месяцу-два ждать... Причём не понятно, чего ждать... разработчик написал, что это возможно... но ответа никто не знает... писем на почте об оплате помощи тоже нет, что делать - не понятно.
19:25
15 дек
#
написал:
- examples
-
highslide
- graphics
- highslide.css
- highslide.js
- highslide.min.js
- highslide.packed.js
- highslide-full.js
- highslide-full.min.js
- highslide-full.packed.js
- highslide-ie6.css
- highslide-with-gallery.js
- highslide-with-gallery.min.js
- highslide-with-gallery.packed.js
- highslide-with-html.js
- highslide-with-html.min.js
- highslide-with-html.packed.js
- images
- index.html
Подготовка вручную
- Загрузите скрипт Highslide JS с официальной страницы highslide.com/download.php
- Распакуйте скачанный zip-архив, файловое наполнение распакованной папки окажется похожим на показанное справа.
- Далее через FTP скопируйте файлы и папки, помеченные справа зеленым цветом, в папку шаблона http://сайт/design/FruitGifts/css
- Затем через FTP скопируйте файл, помеченный справа красным цветом, в папку шаблона http://сайт/design/FruitGifts/js
Уже подготовленное
- Здесь можно взять готовый архив, который нужно распаковать, скопировать через FTP на сайт прямо в папку http://сайт/design/FruitGifts и выполнить только шаг 1.
Шаг 1 Нужно добавить в заголовочную часть файла index.tpl вашего шаблона сведения о подключаемом яваскрипте highslide и его стилях. Для чего в админпанели переходим на страницу дизайн -> Файлы шаблона и щелкаем на редактирование файл index.tpl.
Теперь делаем в верхней части этого файла одну правку, что показана ниже таким цветом (другим цветом показаны теги Smarty и модификаторы или несущественные сейчас параметры). Я также указал цветом строки, которые можно удалить, если хотите вообще отключить скрипт старого вьювера (позже вы увидите, что на страница товара фотографии выводятся в двух местах, а шаг 3 или 4 по замене вьювера может быть опциональным).
{* <!-- макет страницы --> *}{strip} ... ... {* <!-- иначе рисуем всю страницу (внешнее оформление + контент центральной части) --> *} {/strip}{else}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" lang="ru" xmlns="http://www.w3.org/1999/xhtml"> {* <!-- создаем заголовки страницы --> *} {include file = '../../common_parts/AIMatrix/Constructor/head.htm' favicon = 'images/favicon.ico' more_metas = [] main_links = ['css/style_pollmanager.css', 'css/stylesheet.css', 'css/stylesheet_boxes.css', 'css/stylesheet_css_buttons.css', 'css/stylesheet_ezpages_footer_columns.css', 'css/stylesheet_lightbox-0.5.css', 'css/stylesheet_main.css', 'css/stylesheet_social_media_icons.css', 'css/stylesheet_tm.css', 'css/print_stylesheet.css'] link_jquery = true link_jqueryUI = true link_jqueryForm = true link_baloon = true link_article_css = false link_callme_css = false link_notify_css = false link_fulminant_css = true link_credit_css = true link_cart_css = true link_slider = false link_navigator = true more_links = ['js/jscript_xeasytooltip.js', 'js/jscript_xjquery.easing.1.3.js', 'js/jscript_xjquery.lightbox-0.5.js', 'js/jscript_zhover-image.js', 'css/highslide.css', 'js/highslide-full.packed.js'] enable_bgsound = true autocomplete = ['input_id' => '#mod_search_searchword', 'width' => 500, 'height' => 600, 'product_maxcount' => 10, 'category_maxcount' => 4, 'brand_maxcount' => 4, 'link_css' => true, 'link_engine' => true]} ... ... {/if}
Как видно, в параметр more_links, то есть в конец списка дополнительных подключаемых файлов мы добавили через запятую стиль и скрипт highslide, указав их местоположение относительно корневой папки шаблона (в этом параметре всегда задаются только относительные URL).
Шаг 2 Теперь нужно внести правку в тот модуль, который выводит фотографии на странице product.tpl. Если мы откроем на редактирование данный файл, то в его исходном коде обнаружим два фрагмента, где происходит подключение модулей вывода фотографий. Эта информация помечена ниже таким цветом и сейчас понадобилась нам лишь затем, чтобы найти расположение тех модулей и отредактировать их. Указатели на расположение модулей помечены таким цветом.
{* <!-- центральная часть страницы товара --> *}{strip}
...
...
<div class="centerColumn" id="productGeneral">
{* <!-- если существует запись о товаре --> *}
{if isset($product) && is_object($product)}
...
...
<div class="tie">
<div class="tie-indent">
<div class="page-content">
<div class="wrapper">
<form method="post">
<div class="fleft">
{* <!-- блок фотографий страницы товара --> *}
{include file = 'product/photos.htm'
item = $product
name = $temp_name}
</div>
...
...
</form>
</div>
</div>
</div>
</div>
...
...
{* <!-- фотографии --> *}
{include file = 'center/images.htm'
item = $product
files_folder = ($settings->products_files_folder_prefix|default:'')|cat:($smarty.const.ADMIN_PRODUCTS_CLASS_UPLOAD_FOLDER|default:'')}
...
...
{/if}
</div>
{/strip}
Итак, есть модуль photos.htm - размещен в папке product внутри шаблона и занимается выводом большой фотографии слева на странице товара и миниатюр дополнительных фото под ней. Есть также модуль images.htm - размещен в папке center и занимается выводом фото галереи в нижней части страницы товара.
Шаг 3 Каждый из этих модулей, или только который вы хотите исправить (если второй надо оставить на старом вьювере), открываем на редактирование, сначала перейдя в папку модуля. Например модуль images.htm - ниже показан его исходный код и таким цветом помечены добавляемые фрагменты, таким цветом - удаляемые.
{* <!-- центральная колонка: фотографии --> *}{strip}
{* <!-- если в записи существует список фотографий --> *}
{if isset($item->images) && is_array($item->images) && !empty($item->images)}
{* <!-- вычисляем url папки с фотографиями --> *}
{$url = (($site|default:'')|cat:($files_folder|default:''))|escape}
{* <!-- захватываем вывод в переменную $result --> *}
{capture assign = 'result'}
{* <!-- перебираем разрешенные к показу фотографии --> *}
{$index = 0}
{foreach $item->images as $f}
{if !isset($item->images_view[$index]) || $item->images_view[$index]}
<div class="image">
{* <!-- ссылка и фотография --> *}
<a class="image" onclick="return hs.expand(this)" href="{$url}{$f|escape}" target="_blank" {if $item->images_alts[$index]|default:'' != ''} title="{$item->images_alts[$index]|escape}" {/if}>
{if $item->images_thumbs[$index]|default:'' != ''}
<img src="{$url}{$item->images_thumbs[$index]|escape}" />
{else}
<img src="{$url}{$f|escape}" />
{/if}
</a>
{* <!-- описание фотографии --> *}
{if $item->images_texts[$index]|default:'' != ''}
<div class="info highslide-caption">
{$item->images_texts[$index]}
</div>
{/if}
</div>
{/if}
{$index = $index + 1}
{/foreach}
{/capture}
{* <!-- если результат не пустой, выводим --> *}
{if $result|regex_replace:'/[\s\t\r\n]/':'' != ''}
{* <!-- фотографии --> *}
<div id="gallery" class="publication-gallery">
<fieldset>
<legend>
Фото галерея
</legend>
{$result}
</fieldset>
</div>
{* <!-- скрипт обработки блока фотографий --> *}
<script language="JavaScript" type="text/javascript">
jQuery(function () {
jQuery('#gallery.publication-gallery a').lightBox({ imageLoading: '{$theme|default:''|escape}images/lightbox/lightbox-ico-loading.gif',
imageBtnPrev: '{$theme|default:''|escape}images/lightbox/lightbox-btn-prev.gif',
imageBtnNext: '{$theme|default:''|escape}images/lightbox/lightbox-btn-next.gif',
imageBtnClose: '{$theme|default:''|escape}images/lightbox/lightbox-btn-close.gif',
imageBlank: '{$theme|default:''|escape}images/lightbox/lightbox-blank.gif'
});
});
</script>
<script type="text/javascript">
hs.graphicsDir = '{$theme|default:''|escape}css/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
</script>
{/if}
{/if}
{/strip}
Поскольку highslide имеет множество настроек, от которых зависит внешний вид и визуальные эффекты его работы, скрипт в конце приведенного выше кода как раз задает один из вариантов настройки. Другие варианты можно подсмотреть в файлах папки examples того zip-архива, что вы скачаете с официального сайта Highslide JS.
Шаг 4 По такой же схеме необходимо исправить модуль product/photos.htm. Его исходный код показан ниже со всеми необходимыми правками.
{* <!-- блок фотографий страницы товара --> *}{strip}
{* <!-- если на вход получена запись о товаре --> *}
{if isset($item) && is_object($item)}
{* <!-- основное фото --> *}
{capture assign = 'photo'}
{if ($item->large_image|default:$item->small_image|truncate:7:'':true)|lower != 'http://'}
{$site|default:''|escape}
{/if}
{($item->large_image|default:$item->small_image|default:('design/'|cat:($settings->theme|default:'')|cat:'/images/no_photo.png'))|escape}
{/capture}
<div class="centeredContent back" id="productMainImage">
<span class="image">
<a onclick="return hs.expand(this)" href="{$photo}">
<img src="{$photo}" />
<span class="zoom"></span>
</a>
</span>
</div>
<div class="clear"></div>
{* <!-- дополнительные фото --> *}
{if isset($item->fotos) && is_array($item->fotos) && !empty($item->fotos)}
<div id="productAdditionalImages">
<ul id="gallery" class="product-gallery">
{foreach $item->fotos as $f}
{$photo = ((((($f->filename|default:'')|truncate:7:'':true)|lower != 'http://') ? ($site|default:'') : '')|cat:($f->filename|default:''))|escape}
<div class="additionalImages centeredContent back" style="width: 33%;">
<a onclick="return hs.expand(this)" href="{$photo}">
<img src="{$photo}" />
<br />
<span class="lupa"></span>
</a>
</div>
{/foreach}
<br class="clearBoth">
<ul>
</div>
{/if}
{* <!-- скрипт обработки блока фотографий --> *}
<script language="JavaScript" type="text/javascript">
jQuery(function () {
jQuery('#gallery.product-gallery a, #productMainImage a').lightBox({ imageLoading: '{$theme|default:''|escape}images/lightbox/lightbox-ico-loading.gif',
imageBtnPrev: '{$theme|default:''|escape}images/lightbox/lightbox-btn-prev.gif',
imageBtnNext: '{$theme|default:''|escape}images/lightbox/lightbox-btn-next.gif',
imageBtnClose: '{$theme|default:''|escape}images/lightbox/lightbox-btn-close.gif',
imageBlank: '{$theme|default:''|escape}images/lightbox/lightbox-blank.gif'
});
});
</script>
<script type="text/javascript">
hs.graphicsDir = '{$theme|default:''|escape}css/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
</script>
{/if}
{/strip}
Написание ответа
Перед публикацией рекомендуется использовать Предпросмотр, чтобы увидеть конечный вид
сообщения.