Перейти к содержимому


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


#19240 Новый способ оплаты - Privat24 (liqPay)

Написано werewolfgsm на 11 June 2013 - 19:41

Сделал оплату через Privat24 (liqPay).
Все изменения производились в файле media\zoo\applications\jbuniversal\framework\controllers\payment.php
Делал на основе Робокассы (по сути переделал робокассу, теперь у меня ее нет)
В настройках корзины, в полях Робокассы указываем id мерчанта (login) и сигнатуру (password 1) и включаем робокассу
 
далее файл payment.php
17 строка: const TYPE_ROBOX  = 'Liqpay.com';
далее функция function index()
в ней формируется запрос на платежную систему
// robox замена на Privat24
if ((int)$this->appParams->get('global.jbzoo_cart_config.robox-enabled', 0)) {

    $params               = new stdClass();
    // id мерчанта
    $params->login        = JString::trim($this->appParams->get('global.jbzoo_cart_config.robox-login'));

    // подпись мерчанта
    $params->password1    = JString::trim($this->appParams->get('global.jbzoo_cart_config.robox-password1'));
    
    // берем поле тефефон клиента из формы заказа
    $params->phone        = $this->order->getElement('c1b20e16-3869-40db-95b9-2c8fd0a8649f')->get('value');
    $params->summ         = $totalSumm;
    $params->orderId      = $this->orderId;
    $params->summFormated = $totalSummFormated;

    // формируем xml liqpay
    // поля operation_xml
    $params->xml_operation_xml = '<request>
            <version>1.2</version>
            <merchant_id>'.$params->login.'</merchant_id>
            <result_url>{страница возврата после платежа}</result_url>
            <server_url>{страница на которую приходит callback от платежки}</server_url>
            <order_id>'.$this->orderId.'</order_id>
            <amount>'.$totalSumm.'</amount>
            <currency>UAH</currency>
            <description>OrderID #'.$this->orderId.' Podarochniy sertifikat na summu: '.$totalSumm.' UAH</description>
            <default_phone>'.$params->phone.'</default_phone>
            <pay_way>card</pay_way>
        </request>';

    // Создание подписи signature
    $params->sign = base64_encode(sha1($params->password1.$params->xml_operation_xml.$params->password1,1));

    //Запаковка XML
    $params->xml_encoded = base64_encode($params->xml_operation_xml);

    $this->payments['robox'] = $this->app->data->create($params);
}
После этого правим функцию _init
нам надо получить order_id который приходит от привата в массиве post в закодированном виде (в отличии от робокассы и интеркассы)
строку
if ($invId = (int)$this->_jbreq->get('InvId')) {
меняем на
$this->appParams = $this->application->getParams();

if (isset($_POST['operation_xml']) && isset($_POST['signature'])){
    
    $operation_xml = $_POST['operation_xml'];
    $signature_input = $_POST['signature'];
        
    $merc_sig    = JString::trim($this->appParams->get('global.jbzoo_cart_config.robox-password1'));
    $xml_decoded=base64_decode($operation_xml);
    $my_signature_decoded = base64_encode(sha1($merc_sig . $xml_decoded . $merc_sig, 1)); 
        
    if ($signature_input === $my_signature_decoded) { 
        if ($xml = simplexml_load_string($xml_decoded)) {
            foreach($xml as $xmlRow) {
                if ($xmlRow->getName() == 'order_id') $this->orderId = (int)$xmlRow;
                if ($xmlRow->getName() == 'status')	$status = (string)$xmlRow;
            }
        }
        $this->systemType = self::TYPE_ROBOX;
    }			
} else if ($invId = (int)$this->_jbreq->get('InvId')) {
далее функция  paymentCallback()
 
меняем всю ветку по робокассе:
if ($this->systemType == self::TYPE_ROBOX) {
на:
if ($this->systemType == self::TYPE_ROBOX) {
    if (isset($_POST['operation_xml']) && isset($_POST['signature'])){
        $operation_xml = $_POST['operation_xml'];
        $signature_input = $_POST['signature'];
        
        $merc_sig    = JString::trim($this->appParams->get('global.jbzoo_cart_config.robox-password1'));
        $xml_decoded=base64_decode($operation_xml);
        $my_signature_decoded = base64_encode(sha1($merc_sig . $xml_decoded . $merc_sig, 1)); // формируем свою подпись для проверки
    
        if ($signature_input === $my_signature_decoded) { // подпись аутентична

            if ($xml = simplexml_load_string($xml_decoded)) { // парсим XML
                foreach($xml as $xmlRow) {
                    if ($xmlRow->getName() == 'order_id') $this->orderId = (int)$xmlRow;
                    if ($xmlRow->getName() == 'status') $status = (string)$xmlRow;
                }
            }
            
            // get request vars									
            $args = array(
                'date'            => $this->app->date->create()->toSQL(),
                'system'          => $this->systemType,
                'additionalState' => $status
            );
            
            // execute callback method
            $this->orderDetails->callback('paymentCallback', $args);

            jexit('OK' . $this->orderId);		
        } else {
            throw new PaymentJBUniversalControllerException('No valid hash');
        }	
        
    } else {
        throw new PaymentJBUniversalControllerException('Empty data from liqpay');
    }

} else if ($this->systemType == self::TYPE_IKASSA) {
Все. После 70+ тренеровочных оплат по 3 копейки (ну нет у привата тестового режима) я смог заставить принимать и правильно обрабываться каллбек.
 
Проблема была в том, что после _init функция обрывалась и не возвращалась в callback
Когда я получил id заказа в _init я смог продвинуться дальше.
 
Надеюсь комуто пригодится.
  • 20


#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'];
Все, должно работать. У меня работает  ;D
 
Может кому пригодится.
  • 19


#31963 AJAX фильтр

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

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

 

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

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

 

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

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

сайт\modules\mod_jbzoo_search

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

091c23_200x0.png

 

В 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

6d3bab_200x0.png

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

8e8495_200x0.png

Теперь будет искаться и производиться загрузка контента в блок с 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К   160 Количество загрузок:

 

 

 

ВНИМАНИЕ!!!

  • Будьте внимательны при замене файлов.
  • Проверьте с начало на тестовом сайте а уже потом загружайте на рабочий сайт.
  • Это решение(модификация) тестировалось на 
    Joomla: 3.1.5
    JBZoo: 2.1.2 Pro
    Zoo: 3.0.13,

    подойдут так же ранние версии начиная с v 2.0.X.
  • Не забывайте - это решение(модификация) и при следующих обновлениях эти изменения могут пострадать.
  • При появлении проблем Тех.Поддержка ответственности не несет. 

Изменено: 02.05.2014


  • 18


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

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

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

 

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

 

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

 

1.jpg

 

В обоих случаях править будем хелпер модуля фильтра, расположенный по адресу: г. Москва /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К   130 Количество загрузок:

 

 

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

 

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

Joomla 3+

JBZoo 2.2.7

 

Демо


  • 16


#57782 Что где лежит или файловая система

Написано Евгения на 10 February 2015 - 18:37

Вместо предисловия.
Это моя попытка несколько структурировать почерпнутые из форумных бдений пути к файлам. Данный пост будет редактироваться, дополняться и стремиться стать расширением официальной документации :) Прошу тапками не кидать.
 
В теме приветствуются КОНСТРУКТИВНЫЕ посты. Тут бесполезно спрашивать "где лежит". Создайте отдельную тему, вам ответят. И вот ответ, можно и нужно написать сюда с кратким описанием. Как вариант кинуть мне в личку.
 
На всякий случай, если кто не знает:
 

administrator/components/com_akeeba/backup

  - тут лежат ваши бэкапы, при наличии приложения Akeeba (https://www.akeebabackup.com/)

/templates/template_name

 - тут лежит ваш шаблон
 
 
Везде далее * - это /media/zoo/applications/jbuniversal
 

Шаблоны

*/templates/catalog/renderer/item

 - тут создаются новые шаблоны (или редактируются уже существующие) для типов материала (Product, blog, news etc.), такие как favorite, teaser, full и т.п.
Пошаговый урок
Ссылка на доку 
 

/modules/mod_jbzoo_search/renderer/item/

 - тут создаются новые шаблоны фильтров (или редактируются уже существующие), такие как Inline, Table, 2columns etc.

 

Полезная статья про:
Настройка фильтров для существующего каталога JBZoo
Доки:
Описание JBZoo Search
Основные параметры элементов фильтра
Документация по настройке полей и элементов от ZOO
Переиндексация базы данных

*\templates\catalog\renderer\category\

- шаблон вывода категорий

*/templates/catalog/renderer/comment/

 - шаблоны комментариев

*/templates/catalog/renderer/basket/_default.php

 - шаблон вывода таблицы с товарами в корзине

*/templates/catalog/renderer/item_columns/_default.php

 - формирование колонок товаров 

*\templates\*_TEMPLATE_*\renderer\basket-success\index.php

- шаблон страницы создания заказа. "Ваш заказ успешно создан" - это оттуда. ver 2.2

*/templates/*_TEMPLATE_*/renderer/payment_success/_default.php 

- шаблон успешной оплаты ver 2.2

*/templates/*_TEMPLATE_*/renderer/payment_fail/_default.php 

- шаблон ошибки при оплате ver 2.2

  
Письма

*/templates/catalog/renderer/item/order/

 - шаблон письма заказа

*/templates/catalog/mail.comment.admin.php

- письмо админу о добавлении нового / редактировании существующего комментария

*/templates/catalog/mail.comment.reply.php

- письмо подписавшемуся на свой комментарий

*/templates/catalog/mail.submission.new.php

- письмо о добавлении нового материала

/administrator/components/com_zoo/helpers/submission.php

- тема письма о новом материале "New submission notification"

/administrator/components/com_zoo/helpers/comment.php

- тема письма о добавлении комментария"Topic reply notification"
 
Письма для 2.2
 

media\zoo\applications\jbuniversal\templates-system\renderer\email\*Ваш шаблон*

- шаблон письма, если не переопределено.

media\zoo\applications\jbuniversal\framework\render

В шаблоне почты $this ссылается на объект класса EmailRenderer. Рендереры JBZoo лежат в этой папке.

Цепочка такова - элемент sendemail нотификации(notificiation) создает renderer.
Renderer парсит шаблон(Позиции), обращаясь к нашим элементам - 

media\zoo\applications\jbuniversal\cart-elements\email

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

Все остальное :)

*/jbuniversal/language/ru-RU

 - языковые константы (т.е. Цена (за 1шт.) меняется тут)

/language/ru-RU/ru-RU.com_zoo.ini 

- языковые константы Zoo (если вы что-то не смогли найти в JBZoo, посмотрите тут)

/components/com_zoo/renderer/element

 - шаблоны стилей позиций:
block.php — элементы внутри блока div, блоку можно указать class.
comma.php — внутри тега span, так же можно указать класс.
default.php — без форматирования — в строку.
hyphen.php — строку, разделяя дефисом «-».
inline.php — строку, разделяя запятой «,».
list.php — списком — li.
paragraph.php — элементы абзацами.
pipe.php — строку, разделяя «|».
Ссылка на доку
 

Файлы из 2.2

 

 

  1. Блок "таблица с товарами"
    */templates/catalog/renderer/basket/_form.php
    Стили:
    media/zoo/applications/jbuniversal/templates/uikit/assets/less 
  2. Блок "поля заказа"
    */templates/catalog/renderer/basket/_shipping.php
  3. Блок "сервис доставки"
    */templates/catalog/renderer/basket/_shipping.php

Блок "кнопки"

*/templates/catalog/renderer/basket/_buttons.php

Ошибка при создании заказа

*/templates/*_TEMPLATE_*/renderer/payment_fail/_default.php

Стили

*/assets/css/jbzoo.css

 - основные стили каталога ver. 2.1.5

*/assets/less

 - стили каталога для ver. 2.2
 

/modules/mod_jbzoo_category/assets/styles.less

 - стили категорий ver. 2.2
 

*/framework/helpers/jbmoney.php

 - валюты ver. 2.2

\media\zoo\applications\jbuniversal\templates\catalog\renderer\basket\_buttons.php

- тут важна единственная строка: 

<input type="submit" name="create" value="<?php echo JText::_('JBZOO_CART_SUBMIT'); ?>"class="jbbutton green big" />

Переопределяем класс стилей кнопки намертво. ver. 2.2

 

Изменение tab`ов в v.220-1

media/zoo/applications/jbuniversal/templates/uikit/renderer/item/full.php

Менять в двух местах в файле!!! :) До кучи, если вставляем новый таб, не забудьте прописать его тут:  

media/zoo/applications/jbuniversal/templates/uikit/renderer/item/positions.xml

Стили по аналогии с существующими.

 
 
 
Полезно

 

ОЧЕНЬ очень полезный урок по настройке, верстке, uikitи вообще полезно для общего развития. Еще на эту же тему можно почитать тут
 
Чтобы у вас заработал фильтр по категориям (запомни, блин Женя!!) нужно вставить в шаблон фильтра поле Item Category (Текущая категория (скрытое поле), Простой) и включить в модуле "Зависимость от категории"
 
Импорт на сайт проходит ТОЛЬКО в кодировке utf-8 без BOM. Такое умеет Open Office
Дока по Импорту (очень хорошая дока, между прочим)
 
Очень-очень полезная тема про:
CSS-фреймворки, гриды, скрипты, утилиты... и за Pure Дмитрию огроменное спасибо, да :) Мои пять копеек http://css-tricks.com/snippets/- всяко\разно фишки для html,javascript, css отобранные с демками. Прелесть в общем.
 
Сервера, apache, php5 - полезно читать тем, у кого планируются большие нагрузки, большие выгрузки и т.п.
 
Изменение стандартного профиля Joomla-пользователя - инструкция по добавлению к профилю своих полей, которые будут работать с 
JBZoo Userfields
 
Увеличение количества дополнительных параметров в Jbpriceadvance для версии 2.1.5

 

 

УСПЕШНАЯ ОПЛАТА И СОЗДАНИЕ заказа ver. 2.2

 
 
На правах рекламы:
В русском языке слова аккордЕон и инжЕнер пишутся с буквой Е.
 
Тут будут находиться разнообразные полезные темы, по настройке, шаблонизации и т.п. (Постараюсь выкладывать сразу с кодом)

 

В версии 2.1.5 есть такая штука, что номера заказов идут не по порядку. То есть он может в общем списке выкинуть штук 20-30. Это нормально. :) "Четкая нумерация появилась в версии 2.2.0+" (с) SmetDenis


  • 16


#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 фикс высоты"
 
Вроде все, должно работать.
 
Надеюсь я сэкономил кому-нибудь время, которое потратил сам.
  • 16


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

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

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

Uikit частично.

 

 
GIFsdf324234.gif

 

 

Создаем файл в: 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;
    ;
}

14489769.gif


  • 15


#88201 Произвольная сортировка каталога с фронта. ХАК. Делаем сами.

Написано Ёшкин Кот на 12 June 2016 - 14:55

Разберемся как сделать произвольную быструю сортировку для каталога. Примерно такую как на картинках. (Стили и вывод можно настроить самому).

 

1b652db1f9.jpg fe708569db.jpg

 

Прежде всего определяемся какие сортировки будут нужны

 

в нашем случае:

 

по возрастанию цены
по убыванию цены
по популярности
по дате добавления (сначала новые)
по дате добавления (сначала старые)
 
Первым делом будем править файлы в темплейте JBZoo (В моем случае это темплейт по умолчанию Default (Catalog))
 
media\zoo\applications\jbuniversal\templates\catalog\category.php - для вывода сортировки каталога
media\zoo\applications\jbuniversal\templates\catalog\filter.php - для вывода сортировки результатов поиска
 
media\zoo\applications\jbuniversal\templates\catalog\category.php 
 
В место, где надо вывести сортировку вставляем блок:
 
//Шаблон для сортировок в каталоге ======================================================================
if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся

// Получаем URL где находимся

$myuri = JFactory::getURI();
$myurl = $myuri->toString(array('path', '', 'fragment'));

$currentorder = $_SESSION['orderkit'];
if (!$currentorder) {$currentorder = 'price_asc';} //устанавливаем значение сортировки по умолчанию.

//Вывод сортировки
?>
    <div class="orderblock">
<span class="ordertitle">Сортировать</span>
        <span class="searchsel">
<ul>
<li <?php if ($currentorder == "price_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=price_asc" class="price asc">c начала дешевые</a></li>
<li <?php if ($currentorder == "price_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=price_desc" class="price desc">c начала дорогие</a></li>
<li <?php if ($currentorder == "popular_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=popular_desc" class="popular desc">c начала популярные</a></li>
<li <?php if ($currentorder == "date_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=date_desc" class="date desc">c начала новые</a></li>
<li <?php if ($currentorder == "date_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=date_asc" class="date asc">c начала старые</a></li>
</ul>
        </span>
</div>
    <?php

}
//Шаблон для сортировок в каталоге ======================================================================
 

У меня это 55 строчка. 

 

сразу же после строк:

    // category items render
    if ($this->params->get('config.items_show', 1) && count($this->items)) {

Далее правим media\zoo\applications\jbuniversal\templates\catalog\filter.php

 

В место где необходимо вывести сортировку вставляем этот блок:

	//Шаблон для сортировок в фильтре ======================================================================

	if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся

	// Получаем URL где находимся
	$myuri = JFactory::getURI();
	$myurl = $myuri->toString(array('path', 'query', 'fragment'));
	
	$currentorder = $_SESSION['orderkit'];
	if (!$currentorder) {$currentorder = 'price_asc';} //устанавливаем значение сортировки по умолчанию.
	
	//Вывод сортировки	
	?>
    <div class="orderblock">
		<span class="ordertitle">Сортировать</span>
		<span class="searchsel">
        <ul>
			<li <?php if ($currentorder == "price_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>&orderkit=price_asc" class="price asc">c начала дешевые</a></li>
			<li <?php if ($currentorder == "price_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>&orderkit=price_desc" class="price desc">c начала дорогие</a></li>
			<li <?php if ($currentorder == "popular_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>&orderkit=popular_desc" class="popular desc">c начала популярные</a></li>
			<li <?php if ($currentorder == "date_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>&orderkit=date_desc" class="date desc">c начала новые</a></li>
			<li <?php if ($currentorder == "date_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>&orderkit=date_asc" class="date asc">c начала старые</a></li>
		</ul>	
        </span>
	</div>
    <?php
	}

	//Шаблон для сортировок в каталоге ======================================================================

У меня по условиям дизайна блок выводится над заголовком (24 строка).

 

заголовок:

?><h1 class="title"><?php echo JText::_('JBZOO_SEARCH_RESULT'); ?></h1><?php

Эти блоки отличаются друг от друга. Они не взаимозаменяемые. Основное отличие в формировании ссылок и изначального адреса ссылки.

 

В первом случае ?orderkit=price_asc для категории и &orderkit=price_asc для поиска. 

 

Данные правки позволят вывести необходимые наборы сортировок в нужных нам местах с уникальными значениями ссылок.

    <div class="orderblock">
		<span class="ordertitle">Сортировать</span>
        <span class="searchsel">
		<ul>
			<li <?php if ($currentorder == "price_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=price_asc" class="price asc">c начала дешевые</a></li>
			<li <?php if ($currentorder == "price_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=price_desc" class="price desc">c начала дорогие</a></li>
			<li <?php if ($currentorder == "popular_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=popular_desc" class="popular desc">c начала популярные</a></li>
			<li <?php if ($currentorder == "date_desc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=date_desc" class="date desc">c начала новые</a></li>
			<li <?php if ($currentorder == "date_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=date_asc" class="date asc">c начала старые</a></li>
		</ul>
        </span>	
	</div>

Данные блоки надо редактировать под себя перечисляя в них свои сортировки. Я делал через ul li список. Вы форматируйте как вам угодно.

 

Так выглядит строка:

 

<li <?php if ($currentorder == "price_asc") {print 'class="active"';} ?>><a href="<?php print $myurl; ?>?orderkit=price_asc" class="price asc">c начала дешевые</a></li>

 

Я выделил цветом ключевые переменные. В данном случае price_asc

 

Эта переменная будет передана в адресе при клике на соответствующий пункт сортировки c начала дешевые

 

Вы создаете любой набор сортировок со своими переменными. У меня:

 

по возрастанию ценыprice_asc
по убыванию цены price_desc
по популярностиpopular_desc
по дате добавления (сначала новые)date_desc
по дате добавления (сначала старые)date_asc

 

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

 

Переходим к правке файлов отвечающих за сортировку. Это:

 

components\com_zoo\controllers\default.php - отвечает за сортировку категории

media\zoo\applications\jbuniversal\framework\controllers\search.php - сортировка результатов поиска

 

components\com_zoo\controllers\default.php открываем данный файл.

 

ищем строку:

$this->item_order = $params->get('config.item_order');

У меня это оказалась 228 строка. После нее вставляем следующий код:

		//Блок сортировок для каталога---------------------------------------------
		if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся
		//jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
		//echo '<pre>';print_r ($this->item_order);echo '</pre>'; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки
		//print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки
		if ($_SESSION['orderkit'] == "") {$_SESSION['orderkit'] = 'price_asc';} //устанавливаем значение сортировки по умолчанию.
		//Получаем переменную для направления сортировки 
		if (isset($_GET['orderkit'])) { $_SESSION['orderkit'] = $_GET['orderkit'];} //Меняем сортировку, если есть ключ в URL

			if (isset($_SESSION['orderkit'])) {
				
				switch ($_SESSION['orderkit']) {
					case 'price_asc':
						$this->item_order = array(
						'_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value',
						'_jbzoo_0_mode_n',
						'_jbzoo_0_order_asc'
						);	
					break;
					case 'price_desc':
						$this->item_order = array(
						'_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value',
						'_jbzoo_0_mode_n',
						'_jbzoo_0_order_desc'
						);		
					break;
					case 'popular_desc':
						$this->item_order = array(
						'_jbzoo_0_field_corehits',
						'_jbzoo_0_mode_n',
						'_jbzoo_0_order_desc'
						);		
					break;
					case 'date_asc':
						$this->item_order = array(
						'_jbzoo_0_field_corecreated',
						'_jbzoo_0_mode_d',
						'_jbzoo_0_order_asc'
						);		
					break;
					case 'date_desc':
						$this->item_order = array(
						'_jbzoo_0_field_corecreated',
						'_jbzoo_0_mode_d',
						'_jbzoo_0_order_desc'
						);	
					break;						
					}
			}
			}
			
		//jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
		//echo '<pre>';print_r ($this->item_order);echo '</pre>'; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки						
		
		//Блок сортировок для каталога---------------------------------------------	

Здесь видим следующие блоки:

case 'price_asc':
	$this->item_order = array(
	'_jbzoo_0_field_01ab859d-e9ce-42a3-b24b-4d11422bba90___value',
	'_jbzoo_0_mode_n',
	'_jbzoo_0_order_asc'
	);	
break;

Именно они отвечают за обработку созданных нами переменных в шаблонах. Разберу по частям что за что отвечает.

 

case 'price_asc': - Определяет какую переменную будет обрабатывать данный блок. В нашем случае price_asc то есть по возрастанию цены

 

Следовательно нам нвдо заставить каталог сортироваться по нужному элементу цены в нужном порядке. Как его найти?

 

Для этого в блоке я сделал несколько строчек. Они по умолчанию закомментированы.

//jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
//echo '<pre>';print_r ($this->item_order);echo '</pre>'; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки
//print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки

Будем считать, что JBdump нам не доступен. Раскомментируем вторую строку убрав // перед ней

//jbdump ($this->item_order,0); //Используйте эту строку, если у вас подключен JBdump
echo '<pre>';print_r ($this->item_order);echo '</pre>'; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки
//print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки

сохраняем все это дело

Идем в административную панель и в настройках каталога выбираем элемент соответствующий нужной нм сортировке. Если в данном случае идет речь о цене по возрастанию то  ищем нужный нам элемент цены выбираем сортировку по умолчанию по нему. 

867833d6cb.jpg

Сохраняем. Обновляем страницу каталога и получаем нечто такое:

085316a3cb.jpg

 

Это сортировка выбранная нами в админке. Мы видим ID элемента, тип сортировки и ее направление:

[0] => _jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value
[1] => _jbzoo_0_mode_n
[2] => _jbzoo_0_order_asc

переносим значения сортировкив наш блок
case 'price_asc':
    $this->item_order = array(
        '_jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value',
        '_jbzoo_0_mode_n',
        '_jbzoo_0_order_asc'
);
break;

Таким образом создаем все блоки обработки наших сортировок. 

То есть столько блоков сколько мы создали в шаблонах столько делаем в данном месте и настраиваем их изменяя сортировки в админке для каталога для вывода необходимых нам данных для блоков.

 

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

 

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

 

Открываем файл media\zoo\applications\jbuniversal\framework\controllers\search.php

 

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

$appId    = $this->_jbrequest->get('app_id');

и после нее вставляем следующий блок:

		//Блок сортировок для фильтра---------------------------------------------
		//jbdump ($order,0); //Используйте эту строку, если у вас подключен JBdump
		//echo '<pre>';print_r ($order);echo '</pre>'; //Используйте эту строку, если у вас не подключен JBdump покажет значения выбраной сортировки
		//print 'Текущее значение сессии сортировки: '.$_SESSION['orderkit']; //Посмотреть текущее значение сессии для сортировки

		if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся
		
		if ($_SESSION['orderkit'] == "") {$_SESSION['orderkit'] = 'price_asc';} //устанавливаем значение сортировки по умолчанию.
		//Получаем переменную для направления сортировки 
		if (isset($_GET['orderkit'])) { $_SESSION['orderkit'] = $_GET['orderkit'];} //Меняем сортировку, если есть ключ в URL
		
			if (isset($_SESSION['orderkit'])) {
					switch ($_SESSION['orderkit']) {
					case 'price_asc':
						$order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value';
						$order[mode] = 'n';
						$order[order] = 'asc';
						break;
					case 'price_desc':
						$order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value';
						$order[mode] = 'n';
						$order[order] = 'desc';	
						break;
					case 'popular_desc':
						$order[field] = '_jbzoo_0_field_corehits';
						$order[mode] = 'n';
						$order[order] = 'desc';	
						break;
					case 'date_asc':
						$order[field] = 'corecreated';
						$order[mode] = 'd';
						$order[order] = 'asc';
						break;
					case 'date_desc':
						$order[field] = 'corecreated';
						$order[mode] = 'd';
						$order[order] = 'desc';
						break;						
					}
			}
		}

Здесь блоки обработки сортировок выглядят иначе:

case 'price_asc':
     $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value'; 
     $order[mode] = 'n'; 
     $order[order] = 'asc'; 
break;

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

 
для каталога:
 
case 'price_asc':
    $this->item_order = array(
        '_jbzoo_0_field_433a0a0e-30e8-4e71-92ab-4b9eb0d678f7___value',
        '_jbzoo_0_mode_n',
        '_jbzoo_0_order_asc'
);
break;

Для поиска

:

case 'price_asc':
        $order[field] = '01ab859d-e9ce-42a3-b24b-4d11422bba90___value';
        $order[mode] = 'n';
        $order[order] = 'asc';
break;

 

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

Можно изменить уже готовые блоки.

 

После этого можно настроить стили для фильтра. На картинках стили представлены ниже:

.orderblock {
    border-top: 1px solid #c7c7c7;
    float: left;
    width: 100%;
    padding: 10px 0;
	text-align:right;
}
.orderblock .searchsel {
    display: inline-block;
    float: right;
    margin: 0;
    padding: 5px 15px;
    border: 1px solid #c7c7c7;
    height: 35px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
	text-align:left;
	background: url("../images/drop.png") no-repeat right;	
	width: 200px;
}
.orderblock .searchsel:hover {
    overflow: visible;
	border-radius:20px 20px 0 0;	
}
span.searchsel ul {
    position: absolute;
    top: 33px;
    right: -1px;
    left: -1px;
    border: 1px solid #c7c7c7;
    border-top: none;
    z-index: 50;
    background: #fff;
    padding: 15px;
    border-radius: 0 0 20px 20px;
}
.orderblock ul li {
    list-style: none;
    padding: 5px;
}
.orderblock ul li:hover a {
    color: #999;
}
.orderblock li.active {
	position:absolute;
    top: -34px;
}
.orderblock li a {
	color:#000;
}
span.ordertitle {
    display: inline-block;
    padding: 5px 20px;
}
#yoo-zoo > div.category {
    margin: 0;
    padding: 0;
}

Обратите внимание на следующие строки в коде:

if ($this->app->zoo->getApplication()->id == 1) { //проверяем в каком приложении мы находимся

Этим условием обернут весь код блоков сортировок и определяет в каком приложении выводится работает это все дело. Иначе сортировки будут выводится везде и работать например в блоге если он отдельным приложением сделан. Так же в данном месте можно поставить условие по категориям или иные условия для ограничения работы сортировок.. 

 
Файлы: Прикрепленный файл  files-sotr.zip   12.22К   154 Количество загрузок:

Прикрепленные изображения

  • e0cf56e9a1.jpg

  • 15


#84803 Бесконечный скролл (подгрузка айтемов вместо пагинации)

Написано isay777 на 24 March 2016 - 10:44

Есть давний вопрос на форуме, его задавали довольно часто и некоторые элементы изменились, по этому напишу еще один пример. 

По мотивам решения от Sliapy http://forum.jbzoo.c...uery-podgruzku/

 

Делаем подгрузку айтемов вместо пагинации 

 

Первое что делаем это скачиваем знаменитый скрипт http://infiniteajaxscroll.com/

И так скаченный файл jquery-ias.min.js кладем в папку вашего шаблона, я это сделал в подпапку js

<script src="/templates/ВАШ_ШАБЛОН/js/jquery-ias.min.js" type="text/javascript"></script>

подключаем в index вашего шаблона скрипт. Думаю в этом пункте проблем возникнуть не должно. 

 

Далее буду писать пример на основе шаблона bootsrap для JBZOO 

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

 

Вызываем вот такой скрипт в вашем шаблоне 

    var ias = jQuery.ias({
      container:  '.items', //класс где выводятся все айтемы
      item:       '.item-column', //класс одного айтема или строки с айтемами (у меня например row)
      pagination: '.pagination', //класс пагинации для того чтоб скрыть её
      next:       '.next', // класс ссылки в пагинации для загрузки след страницы
      delay: 500
});
    
    
ias.extension(new IASSpinnerExtension({
    src: '/images/squares.gif', // адрес лоадера для красоты
}));
     ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>Это конец </em></p></div>'}));
    //текст когда айтемы закончатся по желанию 

Так самое главное сделали, теперь меняем pagination. У меня шаблон bootsrap по этому идём по адресу 

/media/zoo/applications/jbuniversal/templates/bootstrap/helpers/jbbootstrap.php

 

находим там код пагинации 

if ($pagination->current() < $pagination->pages()) {
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->current() + 1));
                $html .= '<li><a href="' . JRoute::_($link) . '">&raquo;</a></li>';
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->pages()));
                $html .= '<li><a href="' . JRoute::_($link) . '">' . JText::_('JBZOO_BOOTSTRAP_PAGINATE_LAST') . '</a></li>';
            }

Добавляем класс next для ссылки на след страницу 

if ($pagination->current() < $pagination->pages()) {
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->current() + 1));
                $html .= '<li><a class="next" href="' . JRoute::_($link) . '">&raquo;</a></li>';
                $link = $pagination->link($url, $pagination->name() . '=' . ($pagination->pages()));
                $html .= '<li><a href="' . JRoute::_($link) . '">' . JText::_('JBZOO_BOOTSTRAP_PAGINATE_LAST') . '</a></li>';
            }

Теперь загружаем лоадер по тому пути что мы написали в скрипте. Я кинул просто в папку images. 

Лоадер можно скачать тут http://loading.io/или тут http://preloaders.net/ru

 

Вот теперь всё. Наши айтемы подгружаются автоматом. 

 

 

ПРИМИЧАНИЕ: Скрипт скрывает класс пагинации который мы указали .pagination он может совпадать со стандартным joomla и ваша пагинация в новостях будет скрыта имейте ввиду! 


  • 15


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

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

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

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

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

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

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

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

ssm58aa4444_200x0.png ssm677e72e4_200x0.png

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

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

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

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


  • 15


#70194 Добавление полей в профиль пользователя Joomla и настройка автозаполнения пол...

Написано DMTR3000S на 31 July 2015 - 20:24

Я очень долго собирался оформить этот рецепт, но врождённая лень работа отнимала всё время. Сегодня мне в личку напомнили, дескать, "где рецепт деньги, Лебовски?" и я понял - пора! :)
 
Пролог и он же лирическое отступление.
 
Интернет-магазин обязан быть удобным и должен учитывать пожелания любимого ленивого клиента.

Несомненно, одной из удобнейших фишек является автозаполнение форм для зарегистрированных пользователей: зарегистрировался, заполнил поля с ФИО и адресом, и при дальнейших покупках всё это подставляется автоматом.

 

Передо мной встала задача реализовать такую штуку, и несмотря на то, что в JBZoo 220 есть в настройках опция "Брать значение из профиля пользователя", я упёрся в непонимание и несправедливость со стороны стандартного профиля Joomla, в котором полей для заполнения - два с половиной. Вот как он выглядит:

screen01.png

 

Меня такой расклад совершенно не устраивал. Погуглив и полазив по форуму я нашёл решение, где подключался плагин "Профиль", который добавляет-таки поля к стандартному набору:

screen02.png

 

Однако, там начисто отсутствуют поля для ФИО, например. Конечно, можно было просто переопределить языковые константы, что я и сделал (в качестве эксперимента скорее - я точно знал, что этот способ уже меня бесит), но такая убогая костыльность не вариант, я дисциплину люблю, а любые посторонние ненужности от сайта в виде левых плагинов всегда стараюсь отрЭзать.

 

Перейдём к решению:

Как настоящие джедаи мы будем допиливать стандартный джумловский профиль. С преферансом и куртизанками, да.

 

Шаг первый

Итак, первоочередная задача - попасть в phpmyadmin, чаще всего на хостингах юзается именно он (а если нет - то вы бородатый одмин и инструкции вам не нужны). Находим таблицу t_users, щёлкаем по ней, видим примерно следующую картину:

screen03.png

 

Это не что иное, как таблица, в которой Joomla хранит профили пользователей. Имя, логин, пароль, статус, дата последнего входа и т.п. информация пишется именно сюда. Всего-то и нужно добавить свои поля.

Важно: у вас префикс t_ будет какой-то свой, не суть, ключевое слово - users

 

Шаг второй

Добавим в таблицу свои параметры. Точнее, не сами параметры, а места в базе данных под них, чтобы было где хранить :)

Я буду добавлять поля 3 поля -"Имя", "Фамилия" и "Адрес".

Под табличкой видим область для добавления новых записей. У меня их 3, поэтому я ставлю 3 (ваш Кэп), отмечаю "В конец таблицы" и щёлкаем кнопку "Вперёд":

screen04.png

 

После этого, в открывшемся поле для редактирования задаём в колонке "Имя" - названия параметров латинскими буквами, "Тип" выставляем в VARCHAR, "Длину" - по своему усмотрению: к примеру, если у вас есть будет в профиле поле "Возраст" - логично, чтобы его длина была двум символам. Для имени и фамилии я задал длину в 50 символов, а для адреса отвёл 200. Остальные поля от греха подальше можно не трогать. Вот как это выглядит у меня:

screen05.png

 

Жмём справа внизу кнопку "Сохранить", снова зайдём в таблицу users и увидим следующую картину:

screen06.png

 

Поздравляю, мы подготовили в базе места для новых полей в профиле :)

 

Шаг третий

Не будем забывать, что мы подготовили только места для данных в SQL-базе, однако, сама Joomla о ваших проделках вообще не в курсе и поля в её форме регистрации не появятся, поэтому мы ей немного поможем.

 

Давайте откроем конфигурационный файл, который отвечает непосредственно за вывод полей в форме - registration.xml, который лежит по адресу  /components/com_users/models/forms, и найдём в нём вот такой кусок кода:

<field
	name="name"
	type="text"
	description="COM_USERS_REGISTER_NAME_DESC"
	filter="string"
	label="COM_USERS_REGISTER_NAME_LABEL"
	required="true"
	size="30"
/>

Немножко разберёмся. Эта запись отвечает за выведение поля "Имя" в форме регистрации пользователя и подсказывает джумле, в какую таблицу базы класть введённое значение. Расскажу что тут для чего:

  • name - это название ячейки базы данных, в которую будут закидываться данные из формы.Помните, я делал три поля в SQL и называл их firstname, family и address? Вот, name говорит джумле, в какую ячейку класть данные.
  • type - тип данных
  • description - подсказка
  • filter - валидация введённого значения
  • label - подпись к полю формы
  • required - обязательность заполнения данного поля. true - обязательно, false - нет. Если выставлено тру - около поля появится звёздочка и форма не отправится, пока не будет заполнено поле (Ваш Кэп)
  • size - ширина поля формы

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

<field
	name="name"
	type="text"
	description="COM_USERS_REGISTER_NAME_DESC"
	filter="string"
	label="COM_USERS_REGISTER_NAME_LABEL"
	required="true"
	size="30"
/>
		
<field
	name="firstname"
	type="text"
	description="Введите имя"
	filter="string"
	label="Имя"
	required="true"
	size="30"
/>
		
<field
	name="family"
	type="text"
	description="Введите фамилию"
	filter="string"
	label="Фамилия"
	required="true"
	size="30"
/>
		
<field
	name="address"
	type="text"
	description="Введите адрес"
	filter="string"
	label="Адрес"
	required="true"
	size="30"
/>

Сохраним файл и перейдём на сайт туда, где у вас осуществляется регистрация пользователей. Я делаю всё это на демке JBZoo, поэтому форма входа коряво гордо висит посередине страницы, но не суть. А главное, что мы видим - в форме появились вожделенные поля!

screen07.png

 

Порядок их выведения вы можете настроить прям в xml файле. Просто расставьте поля в нужном порядке.

Примечание: я сделал не совсем корректно - у меня было стандартное поле с именем, а я прикрутил ещё одно, поторопился :(

 

Шаг четвёртый

Теперь добавим отображение этих полей в админке, в менеджере пользователей. Для этого идём в  /administrator/components/com_users/models/forms и берём за жабры файл user.xml. Действуем там по старой схеме, не забываем сохранить файл с изменениями, и после манипуляций у нас получится вот так:

screen08.png

 

Шаг пятый

Но и это ещё не всё! (с)

Чтобы данные из профиля Joomla подхватывались в JBZoo, нужно зайти в  /media/zoo/applications/jbuniversal/framework/helpers и файле jbfields.php добавить в массив $whiteList через запятую названия наших ячеек в SQL. В моём случае это firstname, family и address:

$whiteList  = array('name', 'username', 'email', 'registerDate', 'lastvisitDate', 'firstname', 'family', 'address');

Теперь, чтобы настроить автозаполнение формы, нужно зайти в админке в настройки шаблона формы и выставить из каких полей профиля что брать, ибо поля появились у нас в списке:

screen10.png

 

Как-то так. Да, кстати - не забывайте про бэкапы и помните, что всё это вы делаете на свой страх и риск, и всё такое.

 

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


  • 14


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

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

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

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

 

 

 

Прикрепленный файл  my_cart.zip   17.61К   162 Количество загрузок:

 


  • 13


#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 (хотя бы). Аминь.

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


  • 13


#90976 Что такое MyJBZooStat и с чем его едят? (Обзор, Видео, Скачать)

Написано CB9TOIIIA на 31 August 2016 - 02:26

Всем привет. Сегодня последний день лета и Я хочу зарелизить свой компонент - MyJBZooStat.



Возможности:

MyJBZooStat - это компонент статистики и менеджер системы комментирования Disqus.

  • Яндекс.Метрика - получение по API многих данных и их обработка. Накладываение статистики JBZoo или стандартных (com_content) поверх данных посещаемости.
  • JBZoo - статистика товаров/статей, тегов, авторов и их профилей.
  • А также менеджер комментариев системы комментирования - Disqus.

1. Я.Метрика - работает и на проектах - где JBZoo не используется. Вбейте API данные в настройки и будут красивые графики и блоки. Динамика посещаемости по дням, демография, популярное и многое другое.
0_a7256_db44e8f6_orig.png

Spoiler


2. Теги - отображает график использования тегов + подробную информацию по кол-ву и их использованию.

0_a7259_9d8f1b07_orig.png
Spoiler



3. Товары/Статьи - красивый график за месяц отображает кол-во заполненных позиций в этот день. Для менеджеров подсвечивает статьи - которые не содержат теги (tags) и имеется глобальная статистика публикаций.

0_a725b_d63fb48c_orig.png



4. Авторы - отображает список всех авторов.

0_a725c_4ad22faf_orig.png


5. Статистика авторов - отображает таблицу с продуктивностью авторов (сколько товаров/статей загрузили в этом месяце).

0_a725d_ac757f28_orig.png


6. Профиль автора - вся информация об авторе - какие товары/статьи загрузил, какие теги использует - кол-во share и комментариев и т.д.

0_a725e_3c8cae5c_orig.png


0_a725f_1b90f123_orig.png



7. Disqus - система комментирования.

0_a7260_26b776bb_orig.png
Spoiler


На мой взгляд мне удалось создать по настоящему менеджер комментариев - т.к. на мой взгляд я использовал почти все API Disqus - которое полезное для сайта.

  • Вы можете сразу видеть статьи за текущий день - кол-во комментарив - share - автора.
  • Далее Вы можете войти в статьи - посмотреть какие пользователи и что написали.
  • Можете поставить Лайк/Дизлайк, отправить в спам, удалить, предупредить - в общем все возможное с комментарием.
  • Вы также можете войти в профиль комментатора - и увидеть внимание: его комментарии на др. сайтах (это позволяет Disqus) - его рейтинг, карму - его все сообщения - в общем всю подноготную.
  • Также можете видеть ID и забанить пользователя или например ID комментария встроить в статью (embed).

Советую у кого есть Disqus на проекте - опробовать!


P.S. В планах еще есть сделать кнопку - по которой все сообщения содержащие (flag) дизлайки и прочее отобразятся - так проще банить будет.


Немного о проекте:

Я его начал делать в самом начале лета , примерно пару месяцев у меня ушло на написание функционала и еще примерно месяц, а то и больше, чтобы "причесать" его для сообщества и сделать универсальным (его можно ставить, не только на JBZoo проекты) - тогда будут активны только некоторые вкладки.



СПАСИБО КОМАНДЕ JBZOO:

Я хочу выразить огромное СПАСИБО Сереге и Денису, без Вас я бы точно не справился. Серега мне дал огромный пинок в изучение sql и php функций. Написал нес-ко готовых sql запросов, благодаря которым - я наконец-то изучаю подробно API и языки. Денис вообще красавчик - поделился своими вундер-приложениями , на пальцах показал как ими управлять, ввел в мир Composer, а также дебагером на симфони. Ребят, Вы лучшие!

Лицензия:
В общем лицензия MIT (как есть). Проект открытый и есть на GitHub - прошу PR кидайте :)


О ценообразовании:

Мне многие говорили - бесплатно его выкладывай, ты что... да и судя по прошлым расширениям (из 25 расширений - мне задонатили наверное 3,5 человека - вот и все) Но! Я решился, что если кто-то по настоящему проникнется компонентом - сможет оценит мой труд в течение всего лета и поддержит меня донатом (пожертвование) . Поэтому большая просьба - если понравился или пользуетесь, отправьте столько на сколько оценили его (fingers) это мотивирует меня для написание доп. функций и др. расширений. --> https://oplata.cb9t.ru/

 

 

Нажмите здесь, чтобы скачать файл


  • 12


#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


  • 12


#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;?>"

d6fc1e_200x0.png

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

e3e946_200x0.png

 

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>

122edf_200x0.png

 

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

 

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

 

Все готово.

 

ВНИМАНИЕ!!!

 

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

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

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


  • 12


#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К   138 Количество загрузок:
 
В архиве находятся 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.
ssm5a761c2a_200x0.png
Сохраняем.
 
 
 
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 работает. 
ssmf87b187f_200x0.jpg
Но ни какой "лупы" мы не наблюдаем. Все потому что мы не подключили 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";

Теперь "Лупа" должна работать. Проверяем и видим:
ssme2abb0e1_200x0.jpg
 
Все работает.
 
 
 
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';

Тут мы принимаем и выводим установленные значения. 
 
Теперь перейдем в админку и посмотрим что у нам появилось в настройках элемента.
ssmbbc575d5_200x0.png
 
Как видите настройки разделены на 2 "блока" и элемент дополнился дополнительными настройками для Cloud Zoom. Это основные параметры плагина, а если кому то нужно больше(из всех возможных в плагине) вы можете добавить свои параметры по аналогии.
 
Для самых ленивых прикрепляю архив со всеми изменениями.Прикрепленный файл  jbimage+cloud_zoom.zip   16.91К   128 Количество загрузок:
Распаковать в корень сайта с заменой файлов.
 
ВНИМАНИЕ!!!

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

  • 12


#63770 Модальное окно добавления товара в корзину (заменяем полёт)

Написано isay777 на 29 April 2015 - 10:59

Уже давно пользователи привыкли, что что-то происходит после нажатия кнопки в корзину, но не все видят изменение в корзине. 

 

Всякие "приблуды" типа полета в корзину довольно трудоёмки и иногда работают криво, особенно на мобильных устройствах. 

Но теперь у нас есть вшитый sweet alert и нам теперь легко можно сделать всплывающие окно с сообщением о попадании товара в корзину.

 

Приступим

==============================================

Идем в js отвечающий за кнопки 

jbuniversal/cart-elements/price/buttons/assets/js/buttons.js

нам нужна эта строка 

5coc.png

 

Пишем свой код для окна по образцам на сайте свит алерт, я сделал так 

swal( {title: "Товар добвлен в корзину!",type:"success", timer: 2000,   showConfirmButton: false });

Теперь вставляем его в js 

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

'click .jsAddToCart': function (e, $this) {

                var jbPrice = $this.price.data('JBZooPrice'),
                    quantity = $this.get('quantity', 1),
                    input = $(this);
                swal( {title: "Товар добвлен в корзину!",type:"success", timer: 2000,   showConfirmButton: false });

И вот что у нас выходит. 

 

l2qhxh13vxyx.gif

 


  • 13


Click to return to top of page in style!