Инструменты пользователя

Инструменты сайта


wiki:by_js_file_okay

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

wiki:by_js_file_okay [2016/02/14 18:40] (текущий)
Строка 1: Строка 1:
 +====== Файл okay.js ======
  
 +Файл **okay.js** содержит внутренние js скрипты такие как добавление в корзину,​ добавление в папку сравнения,​ количество (+ -) и т.д.
 +
 +==== Добавление товара в корзину ====
 +<code javascript>​
 +$(document).on('​submit',​ '​form.variants',​ function(e) {
 + e.preventDefault();​
 + button = $(this).find('​button[type="​submit"​]'​);​
 + if($(this).find('​input[name=variant]'​).size()>​0)
 + variant = $(this).find('​input[name=variant]'​).val();​
 + if($(this).find('​select[name=variant]'​).size()>​0)
 + variant = $(this).find('​select'​).val();​
 + amount = 1;
 + if($(this).find('​input[name=amount]'​).size()>​0)
 +     amount = $(this).find('​input[name=amount]'​).val();​
 + $.ajax({
 + url: "​ajax/​cart.php",​
 + data: {variant: variant, amount: amount},
 + dataType: '​json',​
 + success: function(data){
 + $('#​cart_informer'​).html(data);​
 + if(button.attr('​data-result-text'​))
 + button.text(button.attr('​data-result-text'​));​
 + }
 + });
 + var o1 = $(this).offset();​
 + var o2 = $('#​cart_informer'​).offset();​
 + var dx = o1.left - o2.left;
 + var dy = o1.top - o2.top;
 + var distance = Math.sqrt(dx * dx + dy * dy);
 + $(this).closest('​.product'​).find('​.image img'​).effect("​transfer",​ { to: $("#​cart_informer"​),​ className: "​transfer_class"​ }, distance);
 + $('​.transfer_class'​).html($(this).closest('​.product'​).find('​.image'​).html());​
 + $('​.transfer_class'​).find('​img'​).css('​height',​ '​100%'​);​
 + return false;
 +});
 +</​code>​
 +
 +В данном коде при нажатии на submit добавляется вариант товара в корзину. В переменную ''​variant''​ заносится id варианта ((два раза объявляется затем, чтобы можно было выбор варианта верстать как на radiobutton так и на select-е)),​ в переменную ''​amount''​ заносится количество ((если есть ''​input[name=amount]''​ заносится в количество указанное в этом поле (если количество больше 0), иначе количество будет равно 1)). Затем отправляется ajax запрос к файлу ''​ajax/​cart.php''​ с указанием параметров variant - id **варианта**,​ amount - количество. После успешного ajax запроса в элемент с id ''​cart_informer''​ вставляется HTML код обработанного файла [[wiki:​tpl_file_cart_informer|cart_informer.tpl]],​ и если у кнопки добавления в корзину есть data атрибут ''​result-text''​ текст кнопки меняется на это значение ((Например "​Купить"​ - "​Куплено"​)). После ajax запроса 8 строк кода - это эффект улетания картинки на элемент с id ''​cart_informer''​.
 +
 +==== Добавление / удаление товаров из сравнения ====
 +
 +<code java>
 +$(document).on('​click',​ '​.fn-comparison.okaycms',​ function(e){
 +    e.preventDefault();​
 +    var button = $( this ),
 +        action = $( this ).hasClass( '​selected'​ ) ? '​add'​ : '​delete',​
 +        product = parseInt( $( this ).data( '​id'​ ) );
 +    /* ajax запрос */
 +    $.ajax( {
 +        url: "​ajax/​comparison.php",​
 +        data: { product: product, action: action },
 +        dataType: '​json',​
 +        success: function(data) {
 +            $( '#​comparison'​ ).html( data );
 +            /* Смена класса кнопки */
 +            if( action == '​add'​ ) {
 +                button.removeClass( '​selected'​ );
 +            } else if( action == '​delete'​ ) {
 +                button.addClass( '​selected'​ );
 +            }
 +            /* Смена тайтла */
 +            if( button.attr( '​title'​ ) ) {
 +                var text = button.data( '​result-text'​ ),
 +                    title = button.attr( '​title'​ );
 +                button.data( '​result-text',​ title );
 +                button.attr( '​title',​ text );
 +            }
 +            /* Если находимся на странице сравнения - перезагрузить */
 +            if( $( '​.fn-comparison_products'​ ).size() ) {
 +                window.location = window.location;​
 +            }
 +        }
 +    } );
 +    /* Улеталка */
 +    if( button.hasClass( '​selected'​ ) ) {
 +        transfer( $( '#​comparison'​ ), $( this ) );
 +    }
 +});
 +</​code>​
 +
 +По клику на ссылку с классами ''​fn-comparison okaycms''​ определяется действие добавить или удалить товар из сравнения. Определение идет по классу ссылки,​ если есть класс ''​add''​ то действие добавить товар в сравнение,​ если класса ''​add''​ нет, то действие ''​delete''​ и товар удаляется из сравнения.\\
 +Далее отправляется ajax запрос файлу ''​ajax/​comparison.php''​ где передается два параметра ''​product''​ - id товара и action - действие с товаром. Id товара указывается через data атрибут id. После успешного ajax запроса в элемент с id ''​comparison_informer''​ вставляется HTML обработанного файла [[wiki:​tpl_file_comparison_informer|comparison_informer.tpl]] и обновляется title ссылки который берется из data атрибута ''​result-text''​
 +
 +Полный пример ссылки **добавления** товара в сравнение: ​
 +<​HTML><​a class="​btn-comparison fn-comparison okaycms"​ href="#"​ data-id="​144"​ title="​Из сравнения"​ data-result-text="​В сравнение"​ data-language="​127"></​a></​HTML>​
 +
 +==== Показать / скрыть одинаковые характеристики ====
 +<code java>
 +$( document ).on( '​click',​ '​.fn-show.okaycms a', function(e) {
 +    e.preventDefault();​
 +    $( '​.fn-show.okaycms a.active'​ ).removeClass( '​active'​ );
 +    $( this ).addClass( '​active'​ );
 +    if( $( this ).hasClass( '​unique'​ ) ) {
 +        $( '​.cell.not_unique'​ ).hide();
 +    } else {
 +        $( '​.cell.not_unique'​ ).show();
 +    }
 +});
 +</​code>​
 +Убираем с активной кнопки (("​все"​ или "​только отличия"​)) класс ''​active''​ и добавляем его кнопке на которую только что нажали. Далее проверяем,​ если у кнопки (на которую нажали) есть класс ''​unique''​ то скрыть свойства с классом ''​cell not_unique'',​ иначе отобразить.
 +
 +==== Слайдер в папке сравнения ====
 +
 +<code java>
 +if( $( '​.fn-comparison_products.okaycms'​ ).size() ) {
 +    var productsCount = parseInt( $( '​.fn-comparison_products'​ ).data( '​products'​ ) );
 +    if( $( '​.fn-comparison_products > .col-lg-4'​ ).size() > productsCount ) {
 +        $( '​.fn-comparison_products'​ ).slick( {
 +            infinite: false,
 +            speed: 500,
 +            slidesToShow:​ productsCount,​
 +            slidesToScroll:​ 1,
 +            arrows: true
 +        } );
 +    }
 +    resize_comparison();​
 +    $( '​.fancy_zoom'​ ).fancybox();​
 +}
 +</​code>​
 +
 +Сначала в переменную ''​productsCount''​ заносим количество товаров в папке сравнения которое указывается через data атрибут ''​products''​ в файле [[wiki:​tpl_file_comparison|comparison.tpl]]. \\
 +Проверяем если количество товаров в папке сравнения больше чем в переменной ''​productsCount''​ инициализируем слайдер. Далее вызываем функцию **''​resize_comparison()''​** которая "​выравнивает"​ строчки в папке сравнения.
 +
 +
 +==== Смена варианта в превью товара и в карточке ====
 +
 +<code java>
 +$(document).on('​change',​ '​.fn-variant.okaycms',​ function() {
 +    var selected = $( this ).children( ':​selected'​ ),
 +        parent = selected.closest( '​.fn-product'​ ),
 +        price = parent.find( '​.fn-price'​ ),
 +        cprice = parent.find( '​.fn-old_price'​ ),
 +        sku = parent.find( '​.fn-sku'​ ),
 +        stock = parseInt( selected.data( '​stock'​ ) ),
 +        amount = parent.find( '​input[name="​amount"​]'​ ),
 +        camoun = parseInt( amount.val() );
 +    price.html( selected.data( '​price'​ ) );
 +    amount.data('​max',​ stock);
 +    /* Количество товаров */
 +    if ( stock < camoun ) {
 +        amount.val( stock );
 +    } else if ( okay.amount > camoun ) {
 +        amount.val( okay.amount );
 +    }
 +    /* Цены */
 +    if( selected.data( '​cprice'​ ) ) {
 +        cprice.html( selected.data( '​cprice'​ ) );
 +        cprice.parent().removeClass( '​hidden-xs-up'​ );
 +        if ( parent.hasClass( '​card'​ ) ) {
 +            cprice.parent().next().removeClass( '​col-xs-12'​ );
 +            cprice.parent().next().addClass( '​col-xs-6'​ );
 +        }
 +    } else {
 +        cprice.parent().addClass( '​hidden-xs-up'​ );
 +        if ( parent.hasClass( '​card'​ ) ) {
 +            cprice.parent().next().removeClass( '​col-xs-6'​ );
 +            cprice.parent().next().addClass( '​col-xs-12'​ );
 +        }
 +    }
 +    /* Артикул */
 +    if( typeof(selected.data( '​sku'​ )) != '​undefined'​ ) {
 +        sku.text( selected.data( '​sku'​ ) );
 +        sku.parent().removeClass( '​hidden-xs-up'​ );
 +    } else {
 +        sku.text( ''​ );
 +        sku.parent().addClass( '​hidden-xs-up'​ );
 +    }
 +    /* Предзаказ */
 +    if (stock == 0 && okay.is_preorder) {
 +        parent.find('​.fn-is_preorder'​).removeClass('​hidden-xs-up'​);​
 +        parent.find('​.fn-is_stock,​ .fn-not_preorder'​).addClass('​hidden-xs-up'​);​
 +    } else if (stock == 0 && !okay.is_preorder) {
 +        parent.find('​.fn-not_preorder'​).removeClass('​hidden-xs-up'​);​
 +        parent.find('​.fn-is_stock,​ .fn-is_preorder'​).addClass('​hidden-xs-up'​);​
 +    } else {
 +        parent.find('​.fn-is_stock'​).removeClass('​hidden-xs-up'​);​
 +        parent.find('​.fn-is_preorder,​ .fn-not_preorder'​).addClass('​hidden-xs-up'​);​
 +    }
 +});
 +</​code>​
 +
 +По смене select-а с классами ''​fn-variant okaycms''​ создаем локальные переменные:​
 +<code java>
 +  selected = $( this ).children( ':​selected'​ ) // заносим селектор на выбранный option (вариант)
 +  parent = selected.closest( '​.fn-product'​ ) // заносим селектор на обертку одного товара
 +  price = parent.find( '​.fn-price'​ ) // заносим селектор на блок цены данного товара
 +  cprice = parent.find( '​.fn-old_price'​ ) // заносим селектор на блок старой цены данного товара
 +  sku = parent.find( '​.fn-sku'​ ) // заносим селектор на блок артикула товара
 +  stock = parseInt( selected.data( '​stock'​ ) ) // заносим количество на складе выбранного варианта
 +  amount = parent.find( '​input[name="​amount"​]'​ ) // заносим селектор на количество данного варианта выбранного пользователем
 +  camoun = parseInt( amount.val() ) // заносим значение количества данного варианта выбранного пользователем
 +</​code>​
 +Далее в блок цены заносим цену которая указана через ''​data-price''​ у выбранного option \\
 +''​price.html( selected.data( "​price"​ ) );''​\\
 +Input-у с количеством для заказа задаем ''​data-max''​ ''​amount.data('​max',​ stock);''​ со значением ''​stock''​((это нужно чтобы нельзя было выбрать количество больше чем на складе)).\\
 +
 +=== Количество товаров ===
 +
 +Проверяем если "на складе"​ меньше чем выбрано "​количество",​ то меняем значение "​количества"​ на "​количество на складе"​.\\
 +Или если ''​okay.amount''​ ((количество по умолчанию)) больше чем выбрано "​количество",​ то меняем значение "​количества"​ на количество по умолчанию
 +
 +=== Смена цены ===
 +
 +<code java>
 +cprice.html( selected.data( '​cprice'​ ) );
 +cprice.parent().removeClass( '​hidden-xs-up'​ );
 +</​code>​
 +
 +Проверяем если у выбранного варианта есть старая цена, то вставляем ее в блок старой цены и удаляем родителю класс ''​hidden-xs-up''​ если он был ((который скрывал блок в случае если у предыдущего варианта небыло старой цены)), иначе добавляем класс ''​hidden-xs-up''​ чтобы скрыть блок.
 +
 +==== Количество товара в карточке и корзине ====
 +
 +<code java>
 +$( document ).on( '​click',​ '​.fn-product-amount.okaycms span', function() {
 +    var input = $( this ).parent().find( '​input'​ ),
 +        action;
 +    if ( $( this ).hasClass( '​plus'​ ) ) {
 +        action = '​plus';​
 +    } else if ( $( this ).hasClass( '​minus'​ ) ) {
 +        action = '​minus';​
 +    }
 +    amount_change( input, action );
 +} );
 +</​code>​
 +
 +По клику на + или - в переменную ''​input''​ заносим селектор на input в котором нужно изменить значение,​ а в переменную ''​action''​ заносим действие "​plus"​ или "​minus"​ и вызываем функцию ''​amount_change''​ передавая ей в качестве входных значений переменные ''​input''​ и ''​action''​.
 +
 +==== Функция изменения количества товаров ====
 +
 +<code java>
 +function amount_change(input,​ action) {
 +    var max_val,
 +        curr_val = parseFloat( input.val() ),
 +        step = 1,
 +        id = input.data('​id'​);​
 +    /* Если включен предзаказ макс. кол-во товаров ставим 50 
 +       ​так как в data-max нет значения (количество варианта 0)
 +    */
 +    if ( input.parent().hasClass('​fn-is_preorder'​)) {
 +        max_val = 50;
 +    } else {
 +        max_val = parseFloat( input.data( '​max'​ ) )
 +    }
 +    /* Изменение кол-ва товара */
 +    if( action == '​plus'​ ) {
 +        input.val( Math.min( max_val, Math.max( 1, curr_val + step ) ) );
 +        input.trigger('​change'​);​
 +    } else if( action == '​minus'​ ) {
 +        input.val( Math.min( max_val, Math.max( 1, (curr_val - step) ) ) );
 +        input.trigger('​change'​);​
 +    } else if( action == '​keyup'​ ) {
 +        input.val( Math.min( max_val, Math.max( 1, curr_val ) ) );
 +        input.trigger('​change'​);​
 +    }
 +    okay.amount = parseInt( input.val() );
 +    /* в корзине */
 +    if( ( location.pathname == '/​cart'​ || location.pathname == '/​cart/'​ ) && ( (max_val != curr_val && action == '​plus'​ ) || ( curr_val != 1 && action == '​minus'​ ) ) ) {
 +        ajax_change_amount( input, id );
 +    }
 +}
 +</​code>​
 +
 +В зависимости от значения переменной ''​action''​ либо добавляем либо отнимаем текущее значение количества на шаг ''​step''​ но количество не больше значения переменной ''​max_val''​.
 +
 +Если мы находимся в корзине вызывается функция ''​ajax_change_amount''​ и ей передаются два параметра,​ селектор на input и id варианта.
 +
 +==== Аяксовое изменение кол-ва товаров в корзине ====
 +
 +<code java>
 +function ajax_change_amount(object,​ variant_id) {
 +    var amount = $( object ).val(),
 +        coupon_code = $( '​input[name="​coupon_code"​]'​ ).val(),
 +        delivery_id = $( '​input[name="​delivery_id"​]:​checked'​ ).val(),
 +        payment_id = $( '​input[name="​payment_method_id"​]:​checked'​ ).val();
 +    /* ajax запрос */
 +    $.ajax( {
 +        url: '​ajax/​cart_ajax.php',​
 +        data: {
 +            coupon_code:​ coupon_code,​
 +            action: '​update_citem',​
 +            variant_id: variant_id,
 +            amount: amount
 +        },
 +        dataType: '​json',​
 +        success: function(data) {
 +            if( data.result == 1 ) {
 +                ajax_set_result( data );
 +                $( '#​deliveries_'​ + delivery_id ).trigger( '​click'​ );
 +                $( '#​payment_'​ + delivery_id + '​_'​ + payment_id ).trigger( '​click'​ );
 +            } else {
 +                $( '#​cart_informer'​ ).html( data.cart_informer );
 +                $( '#​content'​ ).html( data.content );
 +            }
 +        }
 +    } );
 +}
 +</​code>​
 +
 +Отправляем ajax запрос файлу ''​ajax/​cart_ajax.php''​ с GET параметрами ''​coupon_code'',​ ''​action'',​ ''​variant_id'',​ ''​amoun''​
 +
 +Если купон был введен,​ применим его. ''​action''​ передаем ''​update_citem''​ обновить позицию и передаем id варианта и его новое количество.\\
 +Если в ответе [[#​содержимое_объекта_data_возвращаемого_файлом_ajax_cart_ajaxphp|data]].result == 1 вызываем функцию ''​ajax_set_result''​ для установки результата блоков cart_informer,​ cart_purchases и cart_deliveries.\\
 +Иначе если [[#​содержимое_объекта_data_возвращаемого_файлом_ajax_cart_ajaxphp|data]].result == 0 обновляем значение карт-информера и в блок и id ''​content''​ вставляем HTML код обработанного файла [[wiki:​tpl_file_cart|cart.tpl]] ((корзина в данном случае пуста))
 +
 +
 +==== Обновление блоков:​ cart_informer,​ cart_purchases,​ cart_deliveries ====
 +
 +<code java>
 +function ajax_set_result(data) {
 +    $( '#​cart_informer'​ ).html( data.cart_informer );
 +    $( '#​fn-purchases'​ ).html( data.cart_purchases );
 +    $( '#​fn-ajax_deliveries'​ ).replaceWith( data.cart_deliveries );
 +}
 +</​code>​
 +
 +Вставляем в блоки с id ''​cart_informer'',​ ''​fn-purchases''​ и ''​fn-ajax_deliveries''​ соответствующий HTML код с объекта [[#​содержимое_объекта_data_возвращаемого_файлом_ajax_cart_ajaxphp|data]].
 +
 +==== Содержимое объекта data возвращаемого файлом ajax/​cart_ajax.php ====
 +
 +Если в корзине есть товары,​ формат объекта data такой:
 +  * **result** - равен 1
 +  * **cart_informer** - HTML обработанного файла [[wiki:​tpl_file_cart_informer|cart_informer.tpl]]
 +  * **cart_purchases** - HTML обработанного файла [[wiki:​tpl_file_cart_purcharses|cart_purcharses.tpl]]
 +  * **cart_deliveries** - HTML обработанного файла [[wiki:​tpl_file_cart_deliveries|cart_deliveries.tpl]]
 +  * **currency_sign** - знак валюты
 +  * **total_price** - общая цена товаров в корзине
 +  * **total_products** - общее количество товаров в корзине
 +Иначе такой:
 +  * **result** - равен 0
 +  * **cart_informer** - HTML обработанного файла [[wiki:​tpl_file_cart_informer|cart_informer.tpl]]
 +  * **content** - HTML обработанного файла [[wiki:​tpl_file_cart|cart.tpl]]
 +
 +==== Функция добавления / удаления в папку избранного ====
 +
 +<code java>
 +$(document).on('​click',​ '​.fn-wishlist.okaycms',​ function(e){
 +    e.preventDefault();​
 +    var button = $( this ),
 +        action = $( this ).hasClass( '​selected'​ ) ? '​delete'​ : '';​
 +    /* ajax запрос */
 +    $.ajax( {
 +        url: "​ajax/​wishlist.php",​
 +        data: { id: $( this ).data( '​id'​ ), action: action },
 +        dataType: '​json',​
 +        success: function(data) {
 +            $( '#​wishlist'​ ).html( data.info );
 +            /* Смена класса кнопки */
 +            if (action == ''​) {
 +                button.addClass( '​selected'​ )
 +            } else {
 +                button.removeClass( '​selected'​ )
 +            }
 +            /* Смена тайтла кнопки */
 +            if( button.attr( '​title'​ ) ) {
 +                var text = button.data( '​result-text'​ ),
 +                    title = button.attr( '​title'​ );
 +                button.data( '​result-text',​ title );
 +                button.attr( '​title',​ text );
 +            }
 +            /* Если находимся на странице сравнения - перезагрузить */
 +            if( $( '​.fn-wishlist-page'​ ).size() ) {
 +                window.location = window.location;​
 +            }
 +        }
 +    } );
 +    /* Улеталка */
 +    if( !button.hasClass( '​selected'​ ) ) {
 +        transfer( $( '#​wishlist'​ ), $( this ) );
 +    }
 +});
 +</​code>​
 +
 +По клику на кнопку с классами ''​fn-wishlist okaycms''​ определяем действие добавить или удалить,​ если у кнопки есть класс ''​selected''​ то действие удалить,​ иначе добавить и заносим действие в переменную ''​action''​.\\
 +Далее отправляем ajax-запрос файлу ''​ajax/​wishlist.php''​ с GET параметрами id товара и action.
 +
 +После успешного запроса меняем кнопке класс ''​selected''​ меняем местами значения названия кнопки и ''​data-result-text''​ и в элемент с id ''​wishlist''​ вставляем HTML обработанного файла [[wiki:​tpl_file_wishlist_informer|wishlist_informer.tpl]]
 +
 +==== Изменение способа доставки ====
 +
 +<code java>
 +function change_payment_method($id) {
 +    $( "#​fn-delivery_payment_"​ + $id + " [name='​payment_method_id'​]"​ ).first().trigger('​click'​);​
 +    $( "​.fn-delivery_payment"​ ).hide();
 +    $( "#​fn-delivery_payment_"​ + $id ).show();
 +    $( '​input[name="​delivery_id"​]'​ ).parent().removeClass( '​active'​ );
 +    $( '#​deliveries_'​ + $id ).parent().addClass( '​active'​ );
 +}
 +</​code>​
 +
 +Функция принимает id способа доставки,​ скрывает все блоки способов оплаты и отображает только блок способов оплаты относящийся к выбранному способу доставки и переставляет класс ''​active''​ по которому стилизуем блок.
 +Триггер ''​click''​ "​вешается"​ на первый способ оплаты выбранного способа доставки для того, чтобы "​переставить"​ атрибут ''​checked''​.
wiki/by_js_file_okay.txt · Последние изменения: 2016/02/14 18:40 (внешнее изменение)