Opencart 3.x Diriliş Popup Sepete Ekle Modulu

17 Ağu 2017
17
18
37
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.

Kurulum Videomuz :

Eklenecek !


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 :

<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'] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'] + '</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 :

<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-dismissible, .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'] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'] + '</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 alert-dismissible">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
$.ajax({
url: 'index.php?route=checkout/dirilis',
type: 'html',
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');
})
}
})
$('#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>



Ş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 :

<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">{{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">{{ button_continue }}</button>
<a href="{{ checkout }}" class="btn btn-primary button-checkout">{{ 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 :

$data['direction'] = $this->language->get('direction');

Alt Satıra Ekleyelim :

$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 :


Alt Satıra Ekleyelim :

$_['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 : e-ticaretdersleri