Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Herkese merhaba daha önceleri satışa sunduğum ve şimdi paylaşmayı uygun gördüğüm bir popup olarak ürünlerimizi sepete ekleme modulunu inceleyeceğiz. Opencart default kurulumlarıyla birlikte gelenstandart temalarda genellikle sepete eklenen ürünlerin geri bildirimleri sayfa yukarı kaydırılarak yeşil bir alan içersinde sepete eklenen ürünün adı şeklinde sepete eklendiğini belirtmekteydi. Tabi bu sürekli olarak sayfanın yukarı kaydırılması bir zaman sonra sıkıcı olmakta ve müşterinin ilgisini olumsuz etkilemektedir. Bu aşamada yardımımıza bu eklentimiz koşma ve sepete eklendiğinde popup şeklinde açılarak sayfa yukarı kaydırılmadan aynı konumda müşteriye eklenen ürünü göstermektedir.

Diriliş Popup Sepete Ekle Modul Genel Özellikleri

1-) Eklenen Ürünün Resmini Gösterilmesi Sağllandı

2-) Eklenen Ürün Adı Ve Linki Gösterimi Sağlandı

3-) Eklenen Ürünün Kaç Adet olduğu Gösterimi Sağandı

4-) Popup Ekrand Toplam Ürün Fiyatı Ve Kdv Dahil Fyatı Gibi Gösterimler Eklendi.

5-) Eklenen Ürünün Kaldırılması Sağlandı

6-) Kasa Git Sepetim Gibi Butonların Gösterimi Eklendi

Opencart 2.3..x Diriliş Popup Sepete Ekle Modul Kurulum

Sitemizden İndirmiş Olduğunuz Arşiv dosyasındaki catalog klasörünü sitemizin ana dizinine atalım. Burada common.js dosyası haricinde değişen dosya yoktur.Değişen dosya bildirim uyarısına evete diyelim. Daha sonra sepete ekleme işleminde popup cart özelliğinin ürün detay da da olması için aşağıdaki değişimleri gerçekleştirelim.

Dosyamızı Açalım : catalog/view/theme/senin-teman/template/product/

product.php

Bulalım :

Alıntı:<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
dataType: 'json',
beforeSend: function() {
$('#button-cart').button('loading');
},
complete: function() {
$('#button-cart').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');

if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));

if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}

if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}

// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}

if (json['success']) {
$('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

$('html, body').animate({ scrollTop: 0 }, 'slow');

$('#cart > ul').load('index.php?route=common/cart/info ul li');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
//--></script>

Değiştirelim :

Alıntı:</script><script type="text/javascript"><!--
$('#button-cart').on('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
dataType: 'json',
beforeSend: function() {
$('#button-cart').button('loading');
},
complete: function() {
$('#button-cart').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));
if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}
if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}
// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}
if (json['success']) {

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

$('#cart > ul').load('index.php?route=common/cart/info ul li');
$.ajax({
url: 'index.php?route=common/dirilis/info',
type: 'post',
success: function(html){
var newHtml = $(html).find('ul').html();
var btnCheckout = $(html).find('p.text-right a:eq(1)').text();
$('#notification .modal-footer #popup_checkout').html(btnCheckout);
$("#notification .modal-body").html('<ul style="list-style: outside none none;margin-left: -3em;">' + newHtml + '</ul>');
$("#notification .modal-body p.text-right").remove();
$("#notification").modal('show');
$("#notification .modal-footer").show();
$('#cart-total').html(json['total']);

$('#notification .btn-danger').click(function(){
$("#notification").modal('hide');
})
}
});
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
//--></script>

Şimdi Popup Ekranın aktif olması için gerekli olan kodumuzu aşağıdaki dosyamızın en alt satırına eklememiz gerkmektedir

Dosyamızı açalım : catalog/view/theme/senin-teman/template/common/

header.tpl

En Alt Satıra Ekleyelim :

Alıntı:<div id="notification" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"><?php echo $text_to_cart; ?></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default button-continue-shopping" data-dismiss="modal"><?php echo $button_continue ; ?></button>
<a href="<?php echo $checkout; ?>" class="btn btn-primary button-checkout"><?php echo $text_checkout ; ?></a>
</div>
</div>
</div>
</div>

Gerekli Olan Dil Kodların Eklenmesi için :

Dosyamızı Açalım : catalog/controller/common/

header.php

Bulalım :

Alıntı:$data['direction'] = $this->language->get('direction');

Alt Satıra Ekleyelim :

Alıntı:$data['text_to_cart'] = $this->language->get('text_to_cart');
$data['button_continue'] = $this->language->get('button_continue');

Şimdi Sıra Dil Dosyasında Tanımlamalarda

Dosyamızı Açalım : catalog/language/dil-dosyan/common/

heder.php

Bulalım :

Alıntı:$_['text_all']

Alt Satıra Ekleyelim :

Alıntı:$_['button_continue'] = 'Devam';
$_['text_to_cart'] = ' <i class="fa fa-check-circle" aria-hidden="true"></i> Sepetiniz';

İşlem bukadar pek yakında birazdaha gelişmiş versiyon olan payitaht gelecektir.


KAYNAK || İNDİR : E-TİCARETDERSLERİ