Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Рейтинг Контента

#19684 Отправка e-mail покупателю

Написано fiction13 на 20 June 2013 - 06:33

Здравствуйте!

Сегодня столкнулся с невозможностью отправки сообщения о заказа на введенный пользователем e-mail. Это касается как гостевого заказа, так и заказа от зарегистрированного пользователя (не у всех пользователей правильные адреса почты из-за регистрации на сайте через соц. сети).

Чтобы поправить это (пока разработчики не выпустили свой вариант), нужно сделать несколько простых шагов.

1. Создать элемент E-mail в форму подачи заказа Order form.
2. Посмотреть ID созданного элемента (я делал это через базу данных).
3. Поправить файл jbevent.basket.php:
вместо e-mail, которое берется из профиля зарегистрированного пользователя

$userEmail  = JFactory::getUser()->email;

указать, откуда мы хотим брать этот e-mail

$userEmail = $item->elements['ID созданного элемента E-mail'][0]['value'];

Все, должно работать. У меня работает

Может кому пригодится.

#31963 AJAX фильтр

Написано Cheren-dow на 26 November 2013 - 10:43

Модификация модуля mod_jbzoo_search. Отправка данных с формы фильтра и подгрузка материалов без перезагрузки страницы.

Есть в модуле фильтра опция авто-отправки формы

Все хорошо, НО при каждом действии перезагружается(отправляются данные) страница, а мне этого не надо было. Вот и решил я немного изменить скрипт авто-отправки и сделать это на AJAX.

-= 1. Создаем маленький jQuery плагин =-

Переходим в папку

сайт\modules\mod_jbzoo_search

Создадим папку js, а в ней файл default.js

В default.js добавляем следующий код

jQuery(function($){
    $.fn.JBZooAjaxUpdateContent = function(options){

        var settings = $.extend( {
            'url'    : '',
            'params' : '',
            'formId' : '',
            'updateBlock' : '#yoo-zoo'
        }, options);

        $('body').append( "<div id='fancybox-loading'><div></div></div>");
        $.ajax({
            url : settings.url + settings.params + '&tmpl=raw',
            type: 'get',
            dataType: 'html',
            success: function(data){
                $('#fancybox-loading').remove();
                $(settings.updateBlock).html($(data).html());
            }
        });

    };
});

-= 2. Подключаем наш jQuery плагин =-

В файле шаблона

сайт\modules\mod_jbzoo_search\tmpl\default.php

находим строку

$zoo = App::getInstance('zoo');

после нее вставляем(подключаем js который мы создали) следующий код

$zoo->document->addScript('mod_jbzoo_search:js/default.js');

-= 3. Инициализация плагина =-

Ниже находим следующий код и меняем его

<?php if ((int)$params->get('autosubmit', 0)) : ?>
    <script type="text/javascript">
        jQuery(function ($) {
            $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () {
                $(this).closest("form").submit();
            });
        });
    </script>
<?php endif; ?>

на

<?php if ((int)$params->get('autosubmit', 0)) : ?>
    <script type="text/javascript">
        jQuery(function ($) {
            $('#<?php echo $formId;?> select, #<?php echo $formId;?> input[type=radio], #<?php echo $formId;?> input[type=checkbox]').change(function () {
                $.fn.JBZooAjaxUpdateContent({
                    'url'   : '<?php echo JRoute::_('index.php?Itemid=' . $params->get('menuitem', JRequest::getVar('Itemid'))); ?>?',
                    'params': $('#<?php echo $formId;?>').serialize(),
                    'formId': '<?php echo $formId;?>'
                });
            });
        });
    </script>
<?php endif; ?>

И радуемся. Форма отправляется через AJAX, пока сервер думает мы любуемся анимацией, а как данные пришли в указанный блок(в примере это корневой блок контента ZOO) подгружаются найденные материалы.

Что нового?

1. По большому счету изменения не такие уж и большие js код переделан в маленький jQuery плагин и теперь находится в отдельном файле.

2. Выглядит красиво и не занимает теперь много место в шаблоне модуля

3. Подгрузка контента происходит теперь быстрее, за счет того что не подгружается лишний контент с сайта.

По умолчанию обновляется блок с id yoo-zoo

Если у кого то по каким то причинам его нет вы можете указать сами какой блок обновлять, добавив дополнительный параметр плагина

Теперь будет искаться и производиться загрузка контента в блок с id yoo-zoo-my-block

Подводные камни?

Наверно самый большой камень - это то что ни какие кнопки(добавить в корзину,избранное,сравнение , то же самое касается кнопок удаления и увеличения картинок FancyBox) на которые повешены JS скрипты работать внутри подгруженного контента не будут.

Измененные и добавленные файлы:

сайт\modules\mod_jbzoo_search\tmpl\default.php // изменен
сайт\modules\mod_jbzoo_search\js\default.js    // добавлен

Для тех кто ленится что то сделать руками сделал патч:

mod_jbzoo_search_patch_for_v2.1.2.pro.zip 3.57К 368 Количество загрузок:

ВНИМАНИЕ!!!

Будьте внимательны при замене файлов.
Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
Это решение(модификация) тестировалось на
Joomla: 3.1.5
JBZoo: 2.1.2 Pro
Zoo: 3.0.13,
подойдут так же ранние версии начиная с v 2.0.X.
Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
При появлении проблем Тех.Поддержка ответственности не несет.

Изменено: 02.05.2014

#88259 Доработка фильтра - AJAX подгрузка количества результатов и сортировка

Написано fiction13 на 14 June 2016 - 09:38

Привет, читатель.

Сегодня мы поговорим о фильтре и немного его доработаем. Дорабатывать будем фильтр в части AJAX подгрузки количества результатов, как в лучших магазинах ~~Лондона~~, а также немного доработаем сортировку (уберем чексбокс обратный порядок и добавим в селекс выбор по возрастанию и убыванию).

Сразу скриншот, чтобы Вы поняли, о чем идет речь.

В обоих случаях править будем хелпер модуля фильтра, расположенный по адресу: ~~г. Москва~~ /modules/mod_jbzoo_search/helper.php.

От слов к делу.

AJAX подгрузка количества результатов

За подгрузку количества результатов будет отвечать следующий кусок кода

JFactory::getDocument()->addScriptDeclaration("
            jQuery(document).ready(function($){
                $('.jbfilter input, .jbfilter select').on('change', function (event) {
                    var el = $(event.target);
                    flQuickResult(el);
                });

                $('.jbslider').on('change.JBZooSlider', function (event) {
                    var el = $(event.target);
                    flQuickResult(el);
                });

                function flQuickResult (el) {
                    $('.flQuickResult').remove();
                    $.get(window.location.href.split('?')[0] + '?' + $('.jbfilter').serialize() + '&tmpl=component', function(data) {
                        $('.flQuickResult').remove();
                        var count = $(data).find('p').first().text().replace( /^\D+/g, '');

                        if (count) {
                            var title = flNumToStr(count, ['товар', ' товара', 'товаров']);
                            var text = 'Найдено ' + count + ' ' + title;
                            var button = '<input type=\"submit\" name=\"send-form\" value=\"Показать\" class=\"jsSubmit uk-button\">';
                        } else {
                            var text = 'Ничего не найдено';
                            var button = '<input type=\"reset\" name=\"reset-form\" value=\"Сбросить\" class=\"jsReset uk-button\">';
                        }

                        elPosition = el.position();
                        topPosition = elPosition.top - 49 + el.height()/2;

                        el.parent().append('<div class=\"flQuickResult\" style=\"top: ' + topPosition + 'px;\"><p>' + text + '</p>' + button + '</div>');
                    });
                }

                function flNumToStr(number, titles) {  
                    cases = [2, 0, 1, 1, 1, 2];  
                    return titles[ (number%100>4 && number%100<20)? 2 : cases[(number%10<5)?number%10:5] ];  
                }
            });
        ");

Его мы добавляем в конец функции _loadAssets(). Знающие люди смогут добавить его куда угодно, например, выцепить отсюда скрипт и добавить в свой js файл.

Немного CSS. Для фильтра, расположенного в левом сайдбаре

.flQuickResult {
  position: absolute;
  left: 180px;
  width: 180px;
  background: #333333;
  text-align: center;
  padding: 14px 18px;
  z-index: 100;
}
.flQuickResult:before {
    border: 7px solid;
    border-color: transparent #333 transparent transparent;
    display: block;
    left: -14px;
}
.flQuickResult:after, .flQuickResult:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
}
.flQuickResult:after {
    left: -13px;
    border: 7px solid;
    border-color: transparent #333 transparent transparent;
}

И для фильтра, расположенного в правом сайдбаре

.flQuickResult {
  position: absolute;
  left: -210px;
  width: 180px;
  background: #333333;
  text-align: center;
  padding: 14px 18px;
  z-index: 100;
  box-sizing: border-box;

}
.flQuickResult:before {
    border: 7px solid;
    border-color: transparent transparent transparent #333;
    display: block;
    left: -14px;
}
.flQuickResult:after, .flQuickResult:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 40px;
}
.flQuickResult:after {
    left: -13px;
    border: 7px solid;
    border-color: transparent transparent transparent #333;
}

Стили можно (нужно) поправить под себя, Вы уже не маленькие ;-) Да и куда добавлять стили, объяснять не буду. Я в Вас верю!

Немного поясню, как это чудо работает. После изменения любого селекта, инпута или слайдера отправляется запрос на страницу с результатами поиска, оттуда и выцепляется количество.

Очень простая магия.

Сортировка

За доработку сортировки отвечает другой код, вот такой

$optionsSorting = array();
            foreach ($options as $key => $value) {
                $optionsSorting[$key.'____asc'] = $value.' по возр.';
                $optionsSorting[$key.'____desc'] = $value.' по убыв.';
            }

            JFactory::getDocument()->addScriptDeclaration("
                jQuery(document).ready(function($){
                    $('#jbfilter-id-order').hide();
                    $('input[name=\"order[reverse]\"]').parent().hide();

                    $('#flFilterSortingSelect').on('change', function () {
                        var select = $(this);
                        var selectValue = select.val();
                        var orderOptions = selectValue.split('____');
                        var ordering = orderOptions[0];
                        var reverse = orderOptions[1];

                        console.info(ordering);
                        console.info(reverse);

                        $('#jbfilter-id-order').val(ordering);
                        if (reverse == 'desc') {
                            $('input[name=\"order[reverse]\"]').attr('checked', true);
                        } else {
                            $('input[name=\"order[reverse]\"]').attr('checked', false);
                        }

                        return false;
                    });
                });
            ");

            $html[] = $this->_jbhtml->select($optionsSorting, 'order[flSorting]', array(), $values->get('flSorting'), 'flFilterSortingSelect', true);

Его вставляем в функции getOrderings() перед

            html[] = $this->_jbhtml->select($options, 'order[field]', array(), $values->get('field'), 'jbfilter-id-order', true);

После этого селект со списком сортировок и чекбоксом превращается в селект с выбором сортировок по возрастанию и убыванию, а сами сортировки по прежнему добавляются из админки модуля фильтра.

Прикрепляю измененный файл хелпера, на всякий случай.

helper.zip 2.6К 344 Количество загрузок:

*************************************

Все это дело тестировалось на

Joomla 3+

JBZoo 2.2.7

Демо

#19956 Ajax загрузка страниц

Написано fiction13 на 24 June 2013 - 13:49

Сразу дам линк на закрытую тему: линк

Решил создать тему, так как считаю, что это будет кому-нибудь полезно.

Сегодня решив сделать подгрузку товаров, увидел вышеупомянутую тему, сделав все по инструкции, конечно все получилось, но начались косяки, а именно: при включенном JS фиксе высоты колонок подгружаемые товары не были выровнены по высоте, никакая магия мне не помогла.

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

Теперь обо всем по порядку.

1. Скрипт, который будет выравнивать высоту колонок:

<script type="text/javascript"> 
jQuery.fn.equalHeights = function(minHeight, maxHeight) {
		tallest = (minHeight) ? minHeight : 0;
		this.each(function() {
			if(jQuery(this).height() > tallest) {
				tallest = jQuery(this).height();
			}
		});
		if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
		return this.each(function() {
			jQuery(this).height(tallest).css("overflow","auto");
		});
	}
</script>

Его я подключил head (на случай, если буду пользоваться им не только в zoo).

2. Вызываем скрипт выравнивания высоты

<script type="text/javascript"> 
jQuery(document).ready(function() { 
 jQuery(".jbzoo .items .column").equalHeights(); 
 jQuery(".jbzoo .subcategories .column").equalHeights(); 
 jQuery(".jbzoo .related-items .column").equalHeights(); 
}); 
</script>

3 строчки с классами означают, какие блоки будут выравниваться. Первый - это товары в категории, второе - сами блоки субкатегорий, третье - похожие товары.

3. Скрипт, ссылку на который дал Sliappy в предыдущей теме, - ТЫК. Скрипт подключается просто:

<script type="text/javascript" src="jquery-ias.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.ias.css" />

4. Вызываем скрипт подгрузки

<script>
  jQuery.ias({
    container   : ".items",
    item    : ".width25",  
    pagination  : ".pagination",
    next    : "a.next",
    loader  : "<img src='images/loader.gif'/>",
    triggerPageThreshold : 1,
    trigger : "Показать больше товаров",
    onRenderComplete: function(items) {
	jQuery(".jbzoo .items .column").equalHeights(); 
    },
    history : false
  });
  </script>

Здесь самое главное - это onRenderComplete, где мы вызываем скрипт выравнивания высоты.

- pagination - идентификатор пагинации, который исчезнет при подгрузке
- item - идентификатор подгружаемых товаров (у меня он .width25)
- history отвечает за сохранение истории подгрузки (при прокрутке к адресу будет прибавляться якорь #/page/)[/size]
- [/size]triggerPageThreshold отвечает за номер страницы, с которой товары будут подгружаться при нажатии на кнопку.
- trigger - надпись на кнопке, которая отвечает за дальнейшую подгрузку

5. Убираем галочку в настройках каталога "JS фикс высоты"

Вроде все, должно работать.

Надеюсь я сэкономил кому-нибудь время, которое потратил сам.

#27455 Пожелания для корзины

Написано Grizli на 21 September 2013 - 22:25

Я представляю развитие корзины по следующим направлениям:

- управлять способами/стоимостью доставки и чтобы от этого зависела общая цена в корзине (например, "самовывоз" ничего не прибавляется, доставка по городу прибавляется 5 долл., доставка по стране + 10 долл. И соответственно возможность установить сумму заказ, после которой стоимость доставки бесплатная

- описание/комментарии под выбранным способом оплаты

- иметь возможность повторять заказ в личном кабинете (не совсем корзина, но около нее)

- отдельную интеграцию с популярными платежными системами: WebMoney, Яндекс Деньги, Privat 24 (API), Liqpay (API), VISA/Mactercard (API), PayPal (может не совсем востребованный в СНГ, но нужный нашим заграничгым коллегам)

- другие дизайны для формы корзины

- возможность в корзине добавить к заказу сопутствующие товары (например, для букета цветов - открытку, для мобильного телефона - чехол, для пары обуви - крем для обуви и т.д. Типа купить комплект дешевле.

- чтобы по желанию можно было включать/выключать сообщение о регистрации для тех, кому важно чтобы пользователи могли заходить и отслеживать состояние своего заказа

- использование скидки при оформлении заказа для зарегистрированных покупателей и/или систему купонов

- пользовательское соглашение во всплывающем окне

#11071 Добавление собственных полей в корзину и форму заказа

Написано Vital на 22 February 2013 - 10:47

По многочисленным просьбам телезрителей!
подробности реализации этого топика http://forum.jbzoo.com/topic/1946-
Вот архив с измененными мною файлами. Делал для магазина женской одежды.
Помимо размера можно еще указывать цвет в корзине(если такие поля есть в товаре).
Думаю что разобраться не составит труда!

P.S. + в карму еще никто не отменял

my_cart.zip 17.61К 370 Количество загрузок:

#102094 AJAX фильтр (v220)

Написано fiction13 на 08 December 2017 - 07:20

Привет, читатель.

Сегодня мы поговорим об ajax фильтре для последних версий JBZoo.

Фильтр будет уметь:

подгружать результаты в нужное место на сайте
переключать страницы фильтра (пагинация) без перезагрузки
в момент подгрузки затемнять экран с изображением лоадера
менять историю браузера
~~готовить~~

В прикрепленном архиве Вы найдете файлы, которые правились для этой реализации

/modules/mod_jbzoo_search/assets/js/filter.js (правка)
/modules/mod_jbzoo_search/assets/less/filter-ajax.less (новый файл)
/modules/mod_jbzoo_search/assets/img/loader.svg (новый файл)
/modules/mod_jbzoo_search/helper.php (правка)

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

$this->_jbassets->widget('#' . $this->getModuleId(), 'JBZoo.Filter', array(
    'url'               => JRoute::_('index.php?Itemid=' . $this->modParams->get('menuitem', JFactory::getApplication()->input->getInt('Itemid'))).'?',
    'updateBlock'       => '#yoo-zoo',
    'autosubmit'        => (int)$this->_params->get('autosubmit', 0),
    'ajaxPagination'    => 1,
    'pagination'        => '.uk-pagination',
 ));

Добавленные параметры:

updateBlock - селектор блока, куда будут подгружаться результаты фильтра
ajaxPagination - влючение или отключение ajax пагинации
pagination - селектор контейнера Вашей пагинации

Правьте эти параметры под себя и обретете счастье.

Влючение ajax фильтра производится из админки чекбоксом "Авто-отправка формы". Установка - распаковкой в корень сайта.

Демо - http://jbzoo.fictionlabs.ru/

Бэкапьтесь, не разрабатывайте на продакшене и изучайте css (хотя бы). Аминь.

Прикрепленные файлы

jbzoo_ajax_filter_v220.zip 5.87К 377 Количество загрузок:

#87825 JoomlaDay 2016 в Москве - CAMRip (@CB9TOIIIA)

Написано CB9TOIIIA на 03 June 2016 - 10:29

Всем привет! Пока нет проф. видео и наверное в скором времени будет, решил недельку подождать вдруг появятся... но увы) Вот вам CAMRip снят на polaroid cube - поэтому не сердчайте за качество (это маленький кубик как пара 10рублевых монет). Можете заценить как мы выступали и вообще наши доклады) Видео в Full-HD (1080p) - поэтому дождитесь обработки ютубом.

JBZoo - это element'арно! ... и atom'арно

Разгоняем мобильный сайт до максимума - Google AMP в Joomla!

P.S. Можно в открытый раздел перенести.

Пишите комментарии - как Вам? мы очень волновались

~~P.S. Скоро готовлю бооооольшую статью - как я ездил на JD с фото / видео / шутками за кадром.~~

Читать тут: http://joomlaportal....y-2016-v-rossii

#28607 Анимация добавления товара в корзину

Написано Cheren-dow на 07 October 2013 - 09:41

Как и обещал , делаем добавление товара(изображение "летящее" в корзину) как на приведенном примере сайта.

1. Добавляем кнопке id нашего item-a

Открываем файл _buttons.php

сайт\media\zoo\applications\jbuniversal\elements\jbpriceadvance\tmpl\_buttons.php

Для ссылки с атрибутом href="#add-to-cart" дописываем id="<?php echo $this->getItem()->id;?>"

Теперь в исходном коде у кнопки(ссылке) на добавление в корзину мы увидим id которое равно id элементу

2. Дописываем стиль блоку teaser - a

В jbzoo.css или же в стилях шаблона дописываем:

.jbzoo-item-teaser{
    position: relative;
}

3. Добавляем блок JS кода в head шаблона

Я использую стандартный шаблон joomla

<script>
	jQuery(function($){
		$("a.jsAddToCart").click(function(){

			var itemID          = $(this).attr('id');
			var basketPosition  = $(".jsJBZooModuleBasket").offset();
			var imagePosition   = $('a[rel=jbimage-gallery-'+ itemID +'] .jbimage').offset();
			var image           = $('a[rel=jbimage-gallery-'+ itemID +'] .jbimage');
			var posit           = basketPosition.left - imagePosition.left;
			var top             = basketPosition.top - imagePosition.top;

			$(image).clone().css({
				'top'       : '10px',
				'left'      : '20px',
				'position'  : 'absolute'
			}).prependTo($('a[rel=jbimage-gallery-'+ itemID +']')).animate({
					opacity : 0.6,
					zIndex  : 9999,
					top     : "-100px",
					left    : "50px"
				}, 300).animate({
					width   : "100px",
					height  : "100px",
					left    : posit + "px",
					top     : top + 'px'
				}, 1000).hide(300,function(){jQuery(this).remove();});

		});
	});
</script>

В js коде можно увидеть 2 функции animate() - именно с помощью них происходит анимация "перелета" картинки в корзину.

Первая функция animate задет прозрачность и немного поднимает изображение, а вторая функция анимации с помощью переменных posit и top(эти 2 переменные обязательны) перемещает картинку к корзине.

Все готово.

ВНИМАНИЕ!!!

1. Тестировалось на JBZoo 2.0.2, подойдут так же ранние версии начиная с v 2.0.X.

2. При следующих обновлениях эти изменения могут пострадать.

3. При появлении проблем Тех.Поддержка ответственности не несет.

#27600 Шаблон Cloud Zoom для элемента JBImage

Написано Cheren-dow на 24 September 2013 - 07:26

Cloud Zoom - jQuery плагин который создает эффект лупы для изображений. Во многих интернет магазинах кто то уже видел что то подобное, а сейчас мы сделаем интеграцию Cloud Zoom jQuery Plugin с элементом JBImage.

1. Скачиваем плагин Cloud Zoom и раскладываем файлы по папкам
Так как последние версии этого плагина платные мы будем использовать более раннюю версию (1.0.2) и она ни чем не хуже.
Скачиваем архив с файлами. cloud-zoom.zip 7.12К 348 Количество загрузок:

В архиве находятся 2 js файла и файл css стилей. Из них нам потребуются:

cloud-zoom.1.0.2.js
cloud-zoom.css

Распаковываем архив в папку.

Т.к мы будем следовать логике JBZoo давайте переименуем файлы следующим образом:

cloud-zoom.1.0.2.js в jquery.cloud-zoom.js
cloud-zoom.css в jbzoo.cloud-zoom.css

Теперь переместим jquery.cloud-zoom.js в папку

сайт\media\zoo\applications\jbuniversal\assets\js\

а jbzoo.cloud-zoom.css в

сайт\media\zoo\applications\jbuniversal\assets\css\

Файлы в нужных местах.

2. Создаем шаблон для Cloud Zoom в файле jbimage.xml
Переходим в папку и открываем фал jbimage.xml

сайт\media\zoo\applications\jbuniversal\elements\jbimage\

Находим блок параметров template

<param name="template" type="list" default="default" label="JBZOO_JBIMAGE_TEMPLATE"
      description="JBZOO_JBIMAGE_TEMPLATE_DESC">
      <option value="default">JBZOO_DEFAULT</option>
      <option value="link">JBZOO_LINK</option>
      <option value="itemlink">JBZOO_ITEM_LINK</option>
      <option value="popup">JBZOO_POPUP</option>
 </param>

и добавляем option

<param name="template" type="list" default="default" label="JBZOO_JBIMAGE_TEMPLATE"
    description="JBZOO_JBIMAGE_TEMPLATE_DESC">
    <option value="default">JBZOO_DEFAULT</option>
    <option value="link">JBZOO_LINK</option>
    <option value="itemlink">JBZOO_ITEM_LINK</option>
    <option value="popup">JBZOO_POPUP</option>
    <option value="cloud">JBZOO_CLOUD_ZOOOM</option>
</param>

Теперь добавим константу JBZOO_CLOUD_ZOOOM в файл русской локализации. Открываем файл ru-RU.ini

сайт\media\zoo\applications\jbuniversal\language\ru-RU\ru-RU.com_jbzoo.ini

И в самом низу добавляем строку

JBZOO_CLOUD_ZOOOM = "Cloud Zoom"

Перейдем в тип, например шаблон FULL и в элементе jbimage выберем только что созданный шаблон Cloud Zoom.

Сохраняем.

3. Вывод шаблона Cloud для нашего изображения
Первым делом переходим в папку

сайт\media\zoo\applications\jbuniversal\elements\jbimage\tmpl

и создаем фал jbimage-cloud.php - этот файл будет шаблоном.

Теперь нужно добавить немного кода в функции _render в файле:

сайт\media\zoo\applications\jbuniversal\elements\jbimage\jbimage.php

Нам нужен последний elseif - конкретно этот:

} elseif ($template == 'popup') {

	$appendClass = 'jbimage-gallery';
	if ((int)$params->get('group_popup', 1)) {
		$rel = 'jbimage-gallery-' . $this->getItem()->id;
	}

	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);

	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
}

После этой проверки добавляем ещё одну. Должно быть так:

} elseif ($template == 'popup') {

	$appendClass = 'jbimage-gallery';
	if ((int)$params->get('group_popup', 1)) {
		$rel = 'jbimage-gallery-' . $this->getItem()->id;
	}

	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);

	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
} elseif($template == 'cloud'){ // если выбранный шаблон есть наш cloud

	$appendClass = 'cloud-zoom'; // устанавливаем необходимы class
/**
*       $rel - это атрибут rel для ссылки которая ссылается на большое изображение.
*       Именно в нем будут находится все настройки для плагина.
*       Чуть ниже в статье мы сделаем 3 основных параметра(настройки)
*       для нашего шаблона которыми будем управлять из админки. А пока оставим так. 
*       Обо всех параметрах в атрибуте rel будет написано ниже.
*/
	$rel = 'adjustX: 10 , adjustY: -4, softFocus: true';

	$target      = '_blank';
	$widthPopup  = (int)$params->get('width_popup', 0);
	$heightPopup = (int)$params->get('height_popup', 0);

	if ($image) {
		$url = $this->_jbimage->getUrl($this->get('file'));
		if ($widthPopup || $heightPopup) {
			$newImg = $this->_jbimage->resize($image->orig, $widthPopup, $heightPopup);
			$url    = $newImg->url;
		}
	}
}

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

Теперь открываем недавно созданный шаблон(вид) - это файл jbimage-cloud.php находится по адресу:

сайт\media\zoo\applications\jbuniversal\elements\jbimage\tmpl\jbimage-cloud.php

И вставляем в него следующие строки:

defined('_JEXEC') or die('Restricted access');

echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a> ' . "\n";

Сохраним и посмотрим на сайте что у нас получилось. Сейчас видно что наш шаблон cloud для JBImage работает.

Но ни какой "лупы" мы не наблюдаем. Все потому что мы не подключили jquery.cloud-zoom.js и jbzoo.cloud-zoom.css.

4. Подключаем jquery.cloud-zoom.js и jbzoo.cloud-zoom.css
Эти файлы можно на прямую подключить в файле:

сайт\media\zoo\applications\jbuniversal\elements\jbimage\tmpl\jbimage-cloud.php

Но так как мы придерживаемся логике JBZoo мы сделаем немножко по другому.

Открываем файл jbassets.php. Он располагается тут:

сайт\media\zoo\applications\jbuniversal\framework\helpers\jbassets.php

Добавляем следующий код(функцию подключения файлов) где нибудь после функции public function fancybox() (не принципиально)

/**
* Include Cloud Zoom
*/
public function cloudzoom(){
	$this->jQuery();
	$this->_include(array('jbassets:css/libraries.css'), 'css');
	$this->_include(array('jbassets:js/jquery.cloud-zoom.js',), 'js');
}

public function jbimageCloudZoom(){
    $this->jQuery();
    $this->cloudzoom();
}

Сохраняем. Переходим на страницу сайта с изображением, обновим и опять ничего не работает. А не работает потому что не вызвали функцию jbimageCloudZoom в файле шаблона(вида) jbimage-cloud.php. Перейдем в файл jbimage-cloud.php и вызовем эту функцию. Теперь файл должен иметь следующий вид:

<?php
defined('_JEXEC') or die('Restricted access');
/**
* Подключаем css и js файлы
*/
App::getInstance('zoo')->jbassets->jbimageCloudZoom();

echo '<a ' . $linkAttrs . '><img ' . $imageAttrs . ' /></a> ' . "\n";

Теперь "Лупа" должна работать. Проверяем и видим:

Все работает.

5. Совершенствуем
Сейчас добавим несколько параметров для управления элементом из админ панели.
1. Открываем файл локализации:

сайт\media\zoo\applications\jbuniversal\language\ru-RU\ru-RU.com_jbzoo.ini

Добавляем вниз:

JBZOO_RESIZE_CLOUD_X = "Положение по X"
JBZOO_RESIZE_CLOUD_X_DESCRIPTION = "Позволяет точно установить положение окна в px большого изображение по оси Х"
JBZOO_RESIZE_CLOUD_Y = "Положение по Y"
JBZOO_RESIZE_CLOUD_Y_DESCRIPTION = "Позволяет точно установить положение окна в px большого изображение по оси Y"
JBZOO_JBIMAGE_CLOUD_POSITION = "Позиция"
JBZOO_JBIMAGE_CLOUD_POSITION_DESCRIPTION = "Определяет положение окна большого изображения по отношению к уменьшенной копии. Возможные занчения: 'left', 'right', 'top', 'bottom', 'inside' или можно задать ID элемента HTML, например, position: 'element1'"
JBZOO_JBIMAGE_CLOUD_LEFT = "Слева"
JBZOO_JBIMAGE_CLOUD_RIGHT = "Справа"
JBZOO_JBIMAGE_CLOUD_TOP = "Сверху"
JBZOO_JBIMAGE_CLOUD_BOTTOM = "Снизу"
JBZOO_JBIMAGE_CLOUD_INSIDE = "Внутри"
JBZOO_RESIZE_CLOUD_TITLE = "Показать заголовок"
JBZOO_RESIZE_CLOUD_TITLE_DESCRIPTION = "Выводить содержание тега title. True или false."

2. Открываем файл jbimage.xml и заменяем все его содержание эти листингом

<?xml version="1.0" encoding="utf-8"?>
<!--
    JBZoo App is universal Joomla CCK, application for YooTheme Zoo component

    @package     jbzoo
    @version     2.x Pro
    @author      JBZoo App http://jbzoo.com
    @copyright   Copyright (C) JBZoo.com,  All rights reserved.
    @license     http://jbzoo.com/license-pro.php JBZoo Licence
    @coder       Denis Smetannikov <denis@jbzoo.com>
-->
<element type="jbimage" group="JBZoo">
    <name>JBZoo Image</name>
    <description>JBZoo image element</description>
    <author>JBZoo.com</author>
    <creationDate>2013 07</creationDate>
    <copyright>Copyright (C) JBZoo.com,  All rights reserved.</copyright>
    <authorEmail>admin@jbzoo.com</authorEmail>
    <authorUrl>http://jbzoo.com</authorUrl>
    <version>1.0</version>
    <params>
        <param name="upload_directory" type="text" default="images/uploads/" label="JBZOO_UPLOAD_DIRECTORY"
               description="JBZOO_UPLOAD_DIRECTORY_DESC"/>

        <param name="max_upload_size" type="text" default="512" label="JBZOO_MAX_UPLOAD_SIZE"
               description="JBZOO_MAX_UPLOAD_SIZE_DESC"/>

        <param name="upload_by_user" type="jbbool" default="0" label="JBZOO_JBIMAGE_UPLOAD_BY_USER"
               description="JBZOO_JBIMAGE_UPLOAD_BY_USER_DESC"/>

        <param name="default_enable" type="jbbool" default="0" label="JBZOO_JBIMAGE_DEFAULT_ENABLE"
               description="JBZOO_JBIMAGE_DEFAULT_ENABLE_DESC"/>

        <param name="default_image" type="text" default="" label="JBZOO_JBIMAGE_DEFAULT"
               description="JBZOO_JBIMAGE_DEFAULT_DESC"/>

    </params>
    <params group="render">
        <param name="separated_by" type="zoolist" default="Space" label="Separated by"
               description="CHOOSE_SEPARATOR_REPEATED_ELEMENTS">
            <option name="Space"><![CDATA[separator=[ ]]]></option>
            <option name="Break"><![CDATA[separator=[<br />]]]></option>
            <option name="Span"><![CDATA[tag=[<span>%s</span>]]]></option>
            <option name="Paragraph"><![CDATA[tag=[<p>%s</p>]]]></option>
            <option name="Div"><![CDATA[tag=[<div>%s</div>]]]></option>
            <option name="List Item"><![CDATA[tag=[<li>%s</li>]]]></option>
            <option name="Unordered List"><![CDATA[tag=[<li>%s</li>] enclosing_tag=[<ul>%s</ul>]]]></option>
            <option name="Ordered List"><![CDATA[tag=[<li>%s</li>] enclosing_tag=[<ol>%s</ol>]]]></option>
            <option name="Warp Item"><![CDATA[tag=[<article class="item">%s</article>]]]></option>
        </param>

        <param name="display" type="list" default="all" label="Display"
               description="CHOOSE_RENDERING_MODE_ELEMENT_POSITION">
            <option value="all">all</option>
            <option value="first">first</option>
            <option value="all_without_first">all without first</option>
        </param>

        <param name="template" type="list" default="default" label="JBZOO_JBIMAGE_TEMPLATE"
               description="JBZOO_JBIMAGE_TEMPLATE_DESC">
            <option value="default">JBZOO_DEFAULT</option>
            <option value="link">JBZOO_LINK</option>
            <option value="itemlink">JBZOO_ITEM_LINK</option>
            <option value="popup">JBZOO_POPUP</option>
            <option value="cloud">JBZOO_CLOUD_ZOOOM</option>
        </param>

        <param name="group_popup" type="jbbool" default="1" label="JBZOO_GROUP_POPUP"
               description="JBZOO_GROUP_POPUP_DESC"/>

        <param name="width" type="text" default="400" label="JBZOO_RESIZE_WIDTH"
               description="JBZOO_RESIZE_WIDTH_DESC"/>

        <param name="height" type="text" default="300" label="JBZOO_RESIZE_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_DESC"/>

        <param name="@advanced_label" type="jbspacer" default="JBZOO_JBPRICE_FOR_POPUP_TEMPLATE"/>

        <param name="width_popup" type="text" default="1280" label="JBZOO_RESIZE_POPUP_WIDTH"
               description="JBZOO_RESIZE_WIDTH_POPUP_DESC"/>

        <param name="height_popup" type="text" default="800" label="JBZOO_RESIZE_POPUP_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_POPUP_DESC"/>

        <param name="@advanced_label2" type="jbspacer" default="JBZOO_JBPRICE_FOR_CLOUD_ZOOM_TEMPLATE"/>

        <param name="cloud_width" type="text" default="400" label="JBZOO_RESIZE_WIDTH"
               description="JBZOO_RESIZE_WIDTH_DESC"/>

        <param name="cloud_height" type="text" default="300" label="JBZOO_RESIZE_HEIGHT"
               description="JBZOO_RESIZE_WIDTH_DESC"/>

        <param name="show_cloud_title" type="radio" default="1" label="JBZOO_RESIZE_CLOUD_TITLE"
               description="JBZOO_RESIZE_CLOUD_TITLE_DESCRIPTION">
            <option value="0">JNO</option>
            <option value="1">JYES</option>
        </param>

        <param name="x_cloud" type="text" default="10" label="JBZOO_RESIZE_CLOUD_X"
               description="JBZOO_RESIZE_CLOUD_X_DESCRIPTION"/>

        <param name="y_cloud" type="text" default="-4" label="JBZOO_RESIZE_CLOUD_Y"
               description="JBZOO_RESIZE_CLOUD_Y_DESCRIPTION"/>

        <param name="cloud_position" type="list" default="default" label="JBZOO_JBIMAGE_CLOUD_POSITION"
               description="JBZOO_JBIMAGE_CLOUD_POSITION_DESCRIPTION">
            <option value="left">JBZOO_JBIMAGE_CLOUD_LEFT</option>
            <option value="right">JBZOO_JBIMAGE_CLOUD_RIGHT</option>
            <option value="top">JBZOO_JBIMAGE_CLOUD_TOP</option>
            <option value="bottom">JBZOO_JBIMAGE_CLOUD_BOTTOM</option>
            <option value="inside">JBZOO_JBIMAGE_CLOUD_INSIDE</option>
        </param>

    </params>
</element>

Были добавлены параметры, увидеть разницу с начальным вариантом не составит труда.

3. Открываем файл:

сайт\media\zoo\applications\jbuniversal\elements\jbimage\jbimage.php

и ищем наше условие elseif($template == 'cloud'). Тут у нас есть переменная $rel замените ее на следующею строку:

 $rel = 'position:\''.$params->get('cloud_position', 'right').'\' , zoomWidth: '.$params->get('cloud_width', 400).' , zoomHeight: '.$params->get('cloud_height', 300).' , showTitle: '.$params->get('show_cloud_title', 1).', adjustX: '.$params->get('x_cloud', 10).' , adjustY: '.$params->get('y_cloud', -4).', softFocus: true';

Тут мы принимаем и выводим установленные значения.

Теперь перейдем в админку и посмотрим что у нам появилось в настройках элемента.

Как видите настройки разделены на 2 "блока" и элемент дополнился дополнительными настройками для Cloud Zoom. Это основные параметры плагина, а если кому то нужно больше(из всех возможных в плагине) вы можете добавить свои параметры по аналогии.

Для самых ленивых прикрепляю архив со всеми изменениями. jbimage+cloud_zoom.zip 16.91К 305 Количество загрузок:
Распаковать в корень сайта с заменой файлов.

ВНИМАНИЕ!!!

Будьте внимательны при замене файлов.
Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
Хак тестировался на JBZoo 2.0.2, подойдут так же ранние версии начиная с v 2.0.X.
Не забывайте - это хак и при следующих обновлениях эти изменения могут пострадать.
При появлении проблем Тех.Поддержка ответственности не несет.

#92554 [Рецепт] Вид Модуля Корзины - Basket

Написано CB9TOIIIA на 12 October 2016 - 13:22

Всем привет! Верстал вид модуля корзины, решил запостить - вдруг кому понадобится.

Uikit частично.

Создаем файл в: modules\mod_jbzoo_basket\tmpl

Назвал: topheadbasket

<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

$cart     = JBCart::getInstance();
$order    = $modHelper->getOrder();
$currency = $modHelper->getCurrency();
$items    = $modHelper->getBasketItems(array(
    'class' => array(
        'image' => 'uk-thumbnail'
    )
));

?>
<div class="jbzoo jbcart-module jsJBZooCartModule" id="<?php echo $modHelper->getModuleId(); ?>">

<div class="cartmodtop"><i class="uk-icon-shopping-cart"></i></div>

    <?php if (empty($items)) : ?>
        <div class="jbcart-module-empty clearfix"> <span class="yourcarisemptypllles"><?php echo JText::_('JBZOO_CART_MODULE_EMPTY'); ?></span> </div>
    <?php else: ?>

        <?php if ((int)$params->get('jbcart_items', 1)) : ?>
            <div class="jbcart-module-items">

                <?php foreach ($items as $itemKey => $cartItem) :
                    $attrs = array(
                        'data-key'     => $itemKey,
                        'data-jbprice' => $cart->get($itemKey . '.element_id') . '-' . $cart->get($itemKey . '.item_id'),
                        'class'        => array(
                            $itemKey,
                            'jsCartItem',
                            'jbcart-module-item',
                            'clearfix'
                        ),
                    );
                    ?>

                    <div <?php echo $modHelper->attrs($attrs);?>>

                        <?php if ((int)$params->get('jbcart_item_delete', 1)) : ?>
                            <span class="uk-button uk-button-danger uk-button-small round jsDelete jbcart-item-delete">
                            <i class="uk-icon-trash-o"></i>
                        </span>
                        <?php endif; ?>

                        <?php if ((int)$params->get('jbcart_item_image', 1)) {
                            echo $cartItem['image'];
                        } ?>

                        <?php echo $cartItem['name']; ?>

                        <?php if ((int)$params->get('jbcart_item_price', 1)) : ?>
                            <div class="jbcart-item-price">
                                <?php echo $cartItem['price4one']; ?>

                                <?php if ((int)$params->get('jbcart_item_quantity', 1)) : ?>
                                    <span class="jbcart-item-price-multiple">x</span>
                                    <?php echo $cartItem['quantity']; ?>
                                <?php endif; ?>

                            </div>

                        <?php elseif ((int)$params->get('jbcart_item_quantity', 1)): ?>
                            <?php echo $cartItem['quantity']; ?>
                        <?php endif; ?>

                        <?php if ((int)$params->get('jbcart_item_total', 1)) {
                            echo $cartItem['totalsum'];
                        } ?>

                        <?php if ((int)$params->get('jbcart_item_params', 1)) {
                            echo $cartItem['params'];
                        } ?>
                    </div>
                <?php endforeach; ?>

            </div>
        <?php endif; ?>

        <?php if ((int)$params->get('jbcart_count_items', 1)) : ?>
            <div class="jbcart-module-line">
                <span class="jbcart-module-total-items circle">
                    <?php echo $order->getTotalCount(); ?>
                </span>
            </div>
        <?php endif ?>


        <?php if ((int)$params->get('jbcart_count_sku', 1)) : ?>
            <div class="jbcart-module-line">
                <?php echo JText::_('JBZOO_CART_MODULE_TOTAL_SKU'); ?>:
                <span class="jbcart-module-total-items">
                    <?php echo $order->getTotalCountSku() . ' ' . JText::_('JBZOO_CART_COUNT_ABR'); ?>
                </span>
            </div>
        <?php endif ?>


        <?php if ((int)$params->get('jbcart_totalsum', 1)) : ?>
            <div class="jbcart-module-line">

                <span class="jbcart-module-total-value"><?php echo $order->getTotalSum()->html($currency); ?> руб.</span>
            </div>
        <?php endif ?>


        <?php if ((int)$params->get('jbcart_button_empty', 1) || (int)$params->get('jbcart_button_gotocart', 1)) : ?>

            <div class="jbcart-module-buttons clearfix">

                <?php if ((int)$params->get('jbcart_button_empty', 1)): ?>
                    <span class="uk-button uk-button-danger jbcart-module-empty jsEmptyCart">
                      <i class="uk-icon-shopping-cart"></i>
                      <span class="yourcarisemptypllles"> <?php echo JText::_('JBZOO_CART_MODULE_EMPTY_BUTTON'); ?> </span>
                    </span>
                <?php endif ?>

                <?php if ((int)$params->get('jbcart_button_gotocart', 1)): ?>
                    <a rel="nofollow" class="gocartgogreenmodtop jbcart-module-gotocart"
                       href="<?php echo $modHelper->getBasketUrl(); ?>">

                       <span>Оформить заказ</span>
                    </a>
                <?php endif ?>

            </div>
        <?php endif ?>

    <?php endif; ?>

</div>


.korzina {
  line-height: 1;
  margin-top: 12px;
  position: relative;
}

.korzina .jbcart-module-buttons.clearfix {
    float: left;
}

.korzina .jbcart-module {
    background-color: #455674;
    display: inline-block;
    min-width: 200px;
    padding: 10px 15px;
}


.frontpage.alias-table-app {
    margin: 0px;
    padding: 0px;
}

span.jbcart-module-total-items.circle {
    position: absolute;
    background-color: #DA314B;
    padding: 10px;
    border-radius: 100%;
    min-width: 12px;
    display: inline-block;
    top: 0px;
    text-align: center;
    font-size: 0.7em;
    ;
}

.cartmodtop i.uk-icon-shopping-cart {
    transform: scale(-1, 1);
    font-size: 4em;
    color: #8CC14C;
}
.yourcarisemptypllles {
  line-height: 2;
}
.cartmodtop {
    float: left;
    margin-right: 15px;
}


a.gocartgogreenmodtop {
    color: #8cc14c;
    border-bottom: 1px dashed #8cc14c;
    line-height: 1.5;
    margin-top: -5px;
}

a.gocartgogreenmodtop:hover {
  border: 0px;
  text-decoration: none;
}

.yourcarisemptypllles {
    line-height: 1;
    position: absolute;
    top: 30px;
    ;
}

Рейтинг Контента

Прикрепленные файлы

Войти