Navigation Menu

jqZoom+prettyPhoto+Magento

В интернете есть куча всевозможных jQuery-плагинов для увеличения изображений и одни из достойнейших это — jqZoom Evolution и prettyPhoto.

jqZoom будем использовать для мгновенного показа картинки, а prettyPhoto для показа галереи рисунков.

Сейчас мы научим Magento CMS работать с этими плагиноми на странице продукта.

1. Подключаем jQuery к Magento.

Дело в том что и Prototype, который используется в Magento, и jQuery используют функцию «$» по этому нужно изначально предотвратить любые конфликты между этими фреймворками. Для этого, согласно документации, открой файл jquery-1.5.1.js в редакторе и в самый конец файла допиши строку:

[code lang=»js»]
var $j = jQuery.noConflict();
[/code]

и сохрани, к примеру,  с именем jquery-1.5.1.noConflict.js.

Ну а теперь создай следующие директории:

/magento/js/jquery/

/magento/js/jquery/plugins/

В папку «jquery» скопируй файл jquery-1.5.1.noConflict.js.

/magento/js/jquery/jquery-1.5.1.noConflict.js

Следующим шагом будет подключение jQuery к Magento.

Открой файл

/magento/app/design/frontend/your_theme/default/layout/catalog.xml

и найди следующую строку:

[coda lang=’xml’]

<action method=»addItem»><type>js</type><name>calendar/calendar-setup.js</name><!—<params/><if/><condition>can_load_calendar_js</condition>—></action>

[/code]

После этой строки подключаем jQuery так:

[code lang=»xml»]
<!— jQuery —>
<action method="addJs"><script>jquery/jquery-1.5.1.noConflict.js</script></action>
<!— /jQuery —>
[/code]

Сохрани файл.

В этом примере показано как подключить jQuery и jqZoom только на странице продукта (т.е. на остальных страницах сайта эти файлы не подключены, если, конечно, ты этого не сделал ранее).

Но в случае если тебе нужно подключить jQuery для всех страниц сайта то ищи решение в спойлере…

[spoiler effect=»slide» show=»Показать спойлер» hide=»Спрятать спойлер»]Открой файл

/magento/app/design/frontend/your_theme/default/layout/page.xml

и найди следующие строки которые отвечают за подключение стандартных js-файлов Magento

[code lang=»xml»]
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
[/code]

После этих строк подключаем jQuery

[code lang=»xml»]
<!— jQuery —>
<action method="addJs"><script>jquery/jquery-1.5.1.noConflict.js</script></action>
<!— /jQuery —>
[/code]

и сохраняем файл.

[/spoiler]

Можешь проверить Firebug’ом — jQuery должен подключится.

2. Подключаем jqZoom к Magento.

Тут в основном всё проще. Скопируй файл jquery.jqzoom.2.2.js в папку

/magento/js/jquery/plugins/jqZoom/jquery.jqzoom.2.2.js

А в xml после jQuery подключаем jqZoom так:

[code lang=»xml»]<!— jQuery —>
<action method="addJs"><script>jquery/jquery-1.5.1.noConflict.js</script></action>
<!— /jQuery —>
<!— jQuery plugins —>
<action method="addJs"><script>jquery/plugins/jqZoom/jquery.jqzoom.2.2.js</script></action>
<!— /jQuery plugins —>[/code]

И не забудь его css-файл также

[code lang=»xml»]<action method="addItem"><type>js_css</type><name>jquery/plugins/jqZoom/jquery.jqzoom.css</name><params/></action>[/code]

Сохрани файл и проверь в браузере, к примеру, Firebug`ом.

Пример показан в прикрепленном к посту файле в самом низу (catalog.xml).

3. Активируем jqZoom

Ну а теперь давай-ка заставим работать зум на странице продукта.

Для этого открой файл

/magento/app/design/frontend/your_theme/default/template/catalog/product/view/media.phtml

Разметка разделена на 3 части:

  • Изображение продукта
  • Заглушка, которая показывается когда нету изображения продукта
  • Список превьюшек

В своём случае я изменил разметку под себя а так же отключил стандартный зумер magento.

Как именно подключить jqZoom Evolution к элементу страницы детально рассказано на оффициальном сайте в разделе «How to use» и я думаю будет лишним дублировать тоже самое тут, а попросту выложу рабочее решение в прикреплённом файле.

4. Подключаем prettyPhoto к Magento.

Как подключить prettyPhoto думаю рассказывать не следует, так как этот процесс ничем не отличается от подключения, как было описано выше, jqZoom.

А вот для того что бы они одновременно смогли взаимодействовать пришлось потратить несколько часов.

Дело в том в версии prettyPhoto 3.1.1 есть API который даёт возможность создать галерею без разметки. Следует всего лишь передать соответствующие параметры как это описано в документации.

И так, для того что бы заставить работать плагин следует выбрать из базы адреса к фоткам и их лейблы и потом передать эти данные API.

Следующий код показывает как это реализовать:

[code lang=»js»]

// init prettyPhoto plugin
<?php
$_pretty_images = »;
$_pretty_images_titles = "";

// make array of pictures and titles
foreach ($this->getGalleryImages() as $_image) {
$_pretty_images .= ‘"’. $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()) .’"’.",";
$_pretty_images_titles .= ‘"’. $_product->getName() .’"’.",";

};

$_pretty_images = substr($_pretty_images, 0, -1);
$_pretty_images_titles = substr($_pretty_images_titles, 0, -1);
?>

// options
var api_images = [<?php echo $_pretty_images; ?>];
var api_titles = [<?php echo $_pretty_images_titles; ?>];

jQuery.fn.prettyPhoto();

// start prettyPhoto
$j(".zoomPup, .zoomPad").bind(‘click’, function(e){
jQuery.prettyPhoto.open(api_images, api_titles, api_titles);
});

[/code]

В аттач я так же выложу полностью файл в котором представлен весь рабочий код jqZoom + prettyPhoto.

Успехов.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.