PHP Dosya Yöneticisi

var module_id = localStorage.modul_id = rastgeleSayiUret();

$(".varyant_ekle").draggable({
    helper: function (event, ui) {
        var data = $(this).data('varyant-form');
        return varyantFormOlustur(data);
    },
    connectToSortable: ".form_builder_area"
});

$(".form_builder_area").sortable({
    placeholder: 'placeholder',
    axis: "y",
    helper: "clone",
    opacity: 0.5,
    sort: false,
    item: ".varyant-item",
    start: function (e, ui) {
        ui.placeholder.height(ui.helper.outerHeight());
        $(ui.helper).css('width', "50%");
        $(ui.item).css('height', '100px');

},
    stop: function (ev, ui) {
        $(ui.item).height('auto');
        $(ui.item).css('overflow', 'inherit');
        $(ui.item).css('background', 'inherit');
    },
    receive: function (event, ui) {
        ui.item.hide();
    }

});

if ($('.field_extra_info_fiyat').find('.row').length == 0) {
    varyantFiyat()
}

function varyantFiyat() {
    var hazir_adetler = "";
    var adet_listesi = [100, 1000, 2000, 3000, 4000, 5000, 10000, 20000];
    $.each(adet_listesi, function (index, val) {
        hazir_adetler += (
            '<div class="row">' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input type="text" value="' + val + '" placeholder="Ürün adedi" name="varyant_fiyat[' + index + '][adet]" class="adet form-control"/>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<select name="varyant_fiyat[' + index + '][islem]" class="form-control">' +
            '<option value="%">%</option>' +
            '<option value="+">+</option>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input type="text" value="0" name="varyant_fiyat[' + index + '][fiyat]" class="fiyat form-control" placeholder="" required/>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-4">' +
            '<div class="form-group fiyat-input-group">' +
            '<label><input type="radio" class="secili secili_radio" ' + ((index == 0) ? 'checked' : '') + ' value="1" name="varyant_fiyat[' + index + '][secili]">Seçili</label>' +
            '<label><input type="checkbox" class="onerilen onerilen_radio" value="1" name="varyant_fiyat[' + index + '][onerilen]">Önerilen</label>' +
            '<label><input type="checkbox" class="kilitli" value="1" name="varyant_fiyat[' + index + '][kilitli]">Kilitli</label>' +
            '<i class="margin-top-5 fa fa-plus-circle fa-2x default_blue fiyat_alani_ekle"></i>' +
            '<i class="margin-top-5 fa fa-times-circle text-danger fa-2x varyant_fiyat_sil"></i>' +
            '</div>' +
            '</div>' +
            '</div>'
        )
    });
    $('.field_extra_info_fiyat').append(hazir_adetler);
}

//* fiyat alanarını çoğalt */
$(document).on('click', '.fiyat_alani_ekle', function () {
    $(this).closest('.row').clone().appendTo(".field_extra_info_fiyat");
    fiyat_item_input_update()
})

/* Fiyat alanları klonlandığında tüm input alanlarının name değerlerini günceller */
function fiyat_item_input_update() {
    var item_count = $('.row .fiyat-items .fiyat-item').length;
    for (let i = 0; i < item_count; i++) {
        var field = rastgeleSayiUret();
        $.each($('.field_extra_info_fiyat').eq(i).find('.row'), function (r, value) {
            $(this).addClass('fiyat-sil-' + r);//fiyat alanı silmek için class tanımlar
            $(this).find('.fiyat').attr('name', 'varyant_fiyat[' + r + '][fiyat]'); //tüm inputların key değerlerini değiştirir
            $(this).find('.secili').attr('name', 'varyant_fiyat[' + r + '][secili]'); //tüm inputların key değerlerini değiştirir
            $(this).find('.onerilen').attr('name', 'varyant_fiyat[' + r + '][onerilen]'); //tüm inputların key değerlerini değiştirir
            $(this).find('.kilitli').attr('name', 'varyant_fiyat[' + r + '][kilitli]'); //tüm inputların key değerlerini değiştirir
            $(this).find('.adet').attr('name', 'varyant_fiyat[' + r + '][adet]'); //tüm inputların key değerlerini değiştirir
            $(this).find('.varyant_fiyat_sil').attr('data-id', r);//fiyat alanını silmek için attribute tanımlar
        })
    }
}

$(document).on('click', '.varyant_fiyat_sil', function () {
    if ($(this).closest('.field_extra_info_fiyat').find('.varyant_fiyat_sil').length < 2) {
        return false;
    }
    $(this).closest('.row').hide('400', function () {
        $(this).remove();
    });
});

/* Varyant tipi formu */
function varyantFormOlustur(param) {
    var field = rastgeleSayiUret();
    var ozellik_html = '';
    var ozellik_unique_key = rastgeleSayiUret();
    $.each(param.ozellik, function (key, value) {
        ozellik_unique_key = rastgeleSayiUret()
        ozellik_html += (
            /*'Varyant özelliği başlangıç'+ */
            '<div class="row ozellik-item-' + module_id + '">' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input type="text" value="' + value + '" name="varyant[' + field + '][alt_ozellik][' + key + '][adi]"' +
            ' data-ozellik-id="' + module_id + '" ' +
            'class="alt_ozellik_adi form-control"/>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input type="text" value="' + param.ikon[key] + '" placeholder="fa fa-direction" name="varyant[' + field + '][alt_ozellik][' + key + '][ikon]" class="s_opt form-control"/>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<select name="varyant[' + field + '][alt_ozellik][' + key + '][islem]" class="form-control">' +
            '<option value="%">%</option>' +
            '<option value="+" selected>+</option>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<select name="varyant[' + field + '][alt_ozellik][' + key + '][maliyet]" class="form-control">' +
            '<option value="artan">Artan</option>' +
            '<option value="sabit" '+ ((param.adi == "Tasarım Desteği") ? 'selected':'') +'>Sabit</option>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input type="text" value="0" name="varyant[' + field + '][alt_ozellik][' + key + '][fiyat]"' +
            ' data-ozellik-id="' + module_id + '" ' +
            'class="alt_ozellik_adi form-control"/>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-1">' +
            '<div class="form-group">' +
            '<label>' +
            '<input type="checkbox" class="varyant_radio" value="1" name="varyant[' + field + '][alt_ozellik][' + key + '][checked]" ' + ((key == '0') ? 'checked' : '') + ' />' +
            ' Seçili' +
            '</label>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-1">' +
            '<div class="form-group">' +
            '<label><input type="checkbox" value="1" name="varyant[' + field + '][alt_ozellik][' + key + '][kilitli]" /> Kilitli</label>' +
            '</div>' +
            '</div>' +
            '</div>'
            /*'Varyant özelliği bitiş'+ */
        );
    });
    var html = '<div class="row" data-varyant-id="' + module_id + '">' +
        '<div class="col-md-6">' +
        '<div class="form-group">' +
        '<input type="text" name="varyant[' + field + '][adi]" class="form-control form_input_label" value="' + param.adi + '" data-field="' + field + '"/>' +
        /*'<input type="hidden" name="' + field + '" class="form-control form_input_name" placeholder="Name"/>' +*/
        '</div>' +
        '</div>' +
        '<div class="col-md-5">' +
        '<div class="form-group">' +
        '<select name="varyant[' + field + '][tip]" class="form-control">' +
        '<option value="button">Button</option>' +
        '<option value="select">Selectbox</option>' +
        '</select>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-1 text-right">' +
        '<button type="button" class="btn btn-danger btn-sm varyant_sil pull-right" data-field="' + module_id + '"><i class="fa fa-times"></i></button>' +
        '</div>' +
        '<div class="col-md-6">' +
        '<div class="form-group">' +
        '<input type="text" name="varyant[' + field + '][bilgi_mesaj]" class="form-control form_input_label" value="' + param.bilgi_mesaji + '" placeholder="Varyant bilgi mesajı yazın" data-field="' + field + '"/>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-6">' +
        '<div class="form-group">' +
        '<input type="text" name="varyant[' + field + '][uyari_mesaj]" class="form-control form_input_label" value="' + param.uyari_mesaji + '" placeholder="Varyant uyarı mesajı yazın" data-field="' + field + '"/>' +
        '<i class="margin-top-5 fa fa-plus-circle fa-2x default_blue varyant-item-add" data-field="' + field + '"></i>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-12" data-type="select" data-field="' + field + '">' +
        '<div class="ozellik-items ozellik-items-' + field + '" data-varyant-id="' + field + '">' +
        /*'<div data-field="' + field + '" class=" select_row_' + field + '" data-opt="' + opt1 + '">' +*/
        ozellik_html +
        '</div>' +
        '</div>' +
        '</div>';
    return $('<div>').addClass('varyant-item').attr('id', 'varyant-id-' + module_id).html(html);
}

/* Sürükle bırak ile yeni varyant alanı eklenir */
$(document).on('click', '.varyant-item-add', function () {
    $(this).closest('.varyant-item').css('height', 'auto');
    var field = $(this).attr('data-field');
    var field_div = rastgeleSayiUret();
    var html = $('.ozellik-items-' + field).append(
        '<div class="row ozellik-item-' + field_div + ' ui-sortable-handle">' +
        '<div class="col-md-2">' +
        '<div class="form-group">' +
        '<input type="text" value="Yeni Varyant" name="varyant[' + field + '][alt_ozellik][' + field_div + '][adi]" data-ozellik-id="' + field_div + '" class="alt_ozellik_adi form-control"/>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-2">' +
        '<div class="form-group">' +
        '<input type="text" value="" placeholder="fa fa-direction" name="varyant[' + field + '][alt_ozellik][' + field_div + '][ikon]" class="s_opt form-control"/>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-2">' +
        '<div class="form-group">' +
        '<select name="varyant[' + field + '][alt_ozellik][' + field_div + '][islem]" class="form-control">' +
        '<option value="%">%</option>' +
        '<option value="+">+</option>' +
        '</select>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-2">' +
        '<div class="form-group">' +
        '<select name="varyant[' + field + '][alt_ozellik][' + field_div + '][maliyet]" class="form-control">' +
        '<option value="artan">Artan</option>' +
        '<option value="sabit">Sabit</option>' +
        '</select>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-2">' +
        '<div class="form-group">' +
        '<input type="text" value="0" placeholder="" name="varyant[' + field + '][alt_ozellik][' + field_div + '][fiyat]" class="s_opt form-control"/>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-1">' +
        '<div class="form-group">' +
        '<label><input type="checkbox" class="varyant_radio" value="1" name="varyant[' + field + '][alt_ozellik][' + field_div + '][checked]"/> Seçili</label>' +
        '</div>' +
        '</div>' +
        '<div class="col-md-1">' +
        '<div class="form-group">' +
        '<label><input type="checkbox" value="1" name="varyant[' + field + '][alt_ozellik][' + field_div + '][kilitli]"/> Kilitli</label>' +
        '<i class="margin-top-5 margin-left-5 fa fa-times-circle text-danger fa-2x varyant_ozellik_sil" data-field="' + field_div + '"></i>' +
        '</div>' +
        '</div>' +
        '</div>'
    );
});

$(document).on('click', '.varyant_sil', function (e) {
    e.preventDefault();
    var field = $(this).attr('data-field');
    $('#varyant-id-' + field).hide('400', function () {
        $(this).remove();
    });
    $('.modul-id-' + field).hide('400', function () {
        $(this).remove();
    });
});

$(document).on('click', '.varyant_ozellik_sil', function () {
    var field = $(this).attr('data-field');
    $(this).closest('.row').hide('400', function () {
        $(this).remove();
    });
});

function rastgeleSayiUret() {
    return Math.floor(Math.random() * (100000 - 1 + 1) + 57);
}

$(document).on('click', '.varyant_radio', function () {
    $(this).closest(".ozellik-items").find('input[name^="varyant["][name*="][alt_ozellik]["][name*="][checked]').not(this).prop("checked", false);
})

$(document).on('click', '.secili_radio', function () {
    $('input[name^="varyant_fiyat["][name*="][secili]').not(this).prop("checked", false);
})

$(document).on('click', '.onerilen_radio', function () {
    $('input[name^="varyant_fiyat["][name*="][onerilen]').not(this).prop("checked", false);
})

İptal

📁 PHP Dosya Yöneticisi

📝 form_builder.js

📝 form_builder.js

📝 Yeniden Adlandır

🔐 Dosya İzinleri (chmod)