Opencart 2.3.x Diriliş Popup Sepete Ekle Modul Kurulum

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.



*=*=*=*=**=*=**=*=**=*=**=*=**=*=**=*=**=*=**=*=** =*=**=*=*

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

*=*=*=*=**=*=**=*=**=*=**=*=**=*=**=*=**=*=**=*=** =*=**=*=*


https://youtu.be/8pme3rlFFK0



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.tpl

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'][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 :

</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=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');
 })
 }
 });
}
},
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"><?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 :

$this->load->language('common/header');

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 :

$_['text_all']

Alt Satıra Ekleyelim :

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

Elinize sağlık hocam

güzel yorumunuz için ben teşekkürederim. Baya birara verdik, tekrardan çalışmalra başlamak gerek yeni sürüme uygun yükseltme ve geliştirme gibi fikirlerim var.

başarılarınızın devamını dilerim hocam

kiroglu baya ara vermistin , Hayırlı olsun

tüh yakalandık tanıyan çıktı