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

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


wiki:by_js_file_okay

Файл okay.js

Файл okay.js содержит внутренние js скрипты такие как добавление в корзину, добавление в папку сравнения, количество (+ -) и т.д.

Добавление товара в корзину

$(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;
});

В данном коде при нажатии на submit добавляется вариант товара в корзину. В переменную variant заносится id варианта 1), в переменную amount заносится количество 2). Затем отправляется ajax запрос к файлу ajax/cart.php с указанием параметров variant - id варианта, amount - количество. После успешного ajax запроса в элемент с id cart_informer вставляется HTML код обработанного файла cart_informer.tpl, и если у кнопки добавления в корзину есть data атрибут result-text текст кнопки меняется на это значение 3). После ajax запроса 8 строк кода - это эффект улетания картинки на элемент с id cart_informer.

Добавление / удаление товаров из сравнения

$(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 ) );
    }
});

По клику на ссылку с классами fn-comparison okaycms определяется действие добавить или удалить товар из сравнения. Определение идет по классу ссылки, если есть класс add то действие добавить товар в сравнение, если класса add нет, то действие delete и товар удаляется из сравнения.
Далее отправляется ajax запрос файлу ajax/comparison.php где передается два параметра product - id товара и action - действие с товаром. Id товара указывается через data атрибут id. После успешного ajax запроса в элемент с id comparison_informer вставляется HTML обработанного файла comparison_informer.tpl и обновляется title ссылки который берется из data атрибута result-text

Полный пример ссылки добавления товара в сравнение:

<a class="btn-comparison fn-comparison okaycms" href="#" data-id="144" title="Из сравнения" data-result-text="В сравнение" data-language="127"></a>

Показать / скрыть одинаковые характеристики

$( 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();
    }
});

Убираем с активной кнопки 4) класс active и добавляем его кнопке на которую только что нажали. Далее проверяем, если у кнопки (на которую нажали) есть класс unique то скрыть свойства с классом cell not_unique, иначе отобразить.

Слайдер в папке сравнения

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();
}

Сначала в переменную productsCount заносим количество товаров в папке сравнения которое указывается через data атрибут products в файле comparison.tpl.
Проверяем если количество товаров в папке сравнения больше чем в переменной productsCount инициализируем слайдер. Далее вызываем функцию resize_comparison() которая «выравнивает» строчки в папке сравнения.

Смена варианта в превью товара и в карточке

$(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');
    }
});

По смене select-а с классами fn-variant okaycms создаем локальные переменные:

  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() ) // заносим значение количества данного варианта выбранного пользователем

Далее в блок цены заносим цену которая указана через data-price у выбранного option
price.html( selected.data( «price» ) );
Input-у с количеством для заказа задаем data-max amount.data('max', stock); со значением stock5).

Количество товаров

Проверяем если «на складе» меньше чем выбрано «количество», то меняем значение «количества» на «количество на складе».
Или если okay.amount 6) больше чем выбрано «количество», то меняем значение «количества» на количество по умолчанию

Смена цены

cprice.html( selected.data( 'cprice' ) );
cprice.parent().removeClass( 'hidden-xs-up' );

Проверяем если у выбранного варианта есть старая цена, то вставляем ее в блок старой цены и удаляем родителю класс hidden-xs-up если он был 7), иначе добавляем класс hidden-xs-up чтобы скрыть блок.

Количество товара в карточке и корзине

$( 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 );
} );

По клику на + или - в переменную input заносим селектор на input в котором нужно изменить значение, а в переменную action заносим действие «plus» или «minus» и вызываем функцию amount_change передавая ей в качестве входных значений переменные input и action.

Функция изменения количества товаров

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 );
    }
}

В зависимости от значения переменной action либо добавляем либо отнимаем текущее значение количества на шаг step но количество не больше значения переменной max_val.

Если мы находимся в корзине вызывается функция ajax_change_amount и ей передаются два параметра, селектор на input и id варианта.

Аяксовое изменение кол-ва товаров в корзине

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 );
            }
        }
    } );
}

Отправляем ajax запрос файлу ajax/cart_ajax.php с GET параметрами coupon_code, action, variant_id, amoun

Если купон был введен, применим его. action передаем update_citem обновить позицию и передаем id варианта и его новое количество.
Если в ответе data.result == 1 вызываем функцию ajax_set_result для установки результата блоков cart_informer, cart_purchases и cart_deliveries.
Иначе если data.result == 0 обновляем значение карт-информера и в блок и id content вставляем HTML код обработанного файла cart.tpl 8)

Обновление блоков: cart_informer, cart_purchases, cart_deliveries

function ajax_set_result(data) {
    $( '#cart_informer' ).html( data.cart_informer );
    $( '#fn-purchases' ).html( data.cart_purchases );
    $( '#fn-ajax_deliveries' ).replaceWith( data.cart_deliveries );
}

Вставляем в блоки с id cart_informer, fn-purchases и fn-ajax_deliveries соответствующий HTML код с объекта data.

Содержимое объекта data возвращаемого файлом ajax/cart_ajax.php

Если в корзине есть товары, формат объекта data такой:

  • result - равен 1
  • cart_informer - HTML обработанного файла cart_informer.tpl
  • cart_purchases - HTML обработанного файла cart_purcharses.tpl
  • cart_deliveries - HTML обработанного файла cart_deliveries.tpl
  • currency_sign - знак валюты
  • total_price - общая цена товаров в корзине
  • total_products - общее количество товаров в корзине

Иначе такой:

  • result - равен 0
  • cart_informer - HTML обработанного файла cart_informer.tpl
  • content - HTML обработанного файла cart.tpl

Функция добавления / удаления в папку избранного

$(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 ) );
    }
});

По клику на кнопку с классами fn-wishlist okaycms определяем действие добавить или удалить, если у кнопки есть класс selected то действие удалить, иначе добавить и заносим действие в переменную action.
Далее отправляем ajax-запрос файлу ajax/wishlist.php с GET параметрами id товара и action.

После успешного запроса меняем кнопке класс selected меняем местами значения названия кнопки и data-result-text и в элемент с id wishlist вставляем HTML обработанного файла wishlist_informer.tpl

Изменение способа доставки

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' );
}

Функция принимает id способа доставки, скрывает все блоки способов оплаты и отображает только блок способов оплаты относящийся к выбранному способу доставки и переставляет класс active по которому стилизуем блок. Триггер click «вешается» на первый способ оплаты выбранного способа доставки для того, чтобы «переставить» атрибут checked.

1) два раза объявляется затем, чтобы можно было выбор варианта верстать как на radiobutton так и на select-е
2) если есть input[name=amount] заносится в количество указанное в этом поле (если количество больше 0), иначе количество будет равно 1
3) Например «Купить» - «Куплено»
4) «все» или «только отличия»
5) это нужно чтобы нельзя было выбрать количество больше чем на складе
6) количество по умолчанию
7) который скрывал блок в случае если у предыдущего варианта небыло старой цены
8) корзина в данном случае пуста
wiki/by_js_file_okay.txt · Последние изменения: 2016/02/14 18:40 (внешнее изменение)