• 1-slideتجربه یک فروشگاه قدرتمند بین المللی

    اپن کارت فارسی یکی از بهترین و قدرتمندترین فروشگاه سازهای جهانی است که با قدرت چند زبانه بودن، قادر به فروش در سطح جهان است که امروزه برای بیش از ده ها زبان زنده ی دنیا از جمله زبان شیرین فارسی نیز ارائه شده و در اختیار کاربران قرار گرفته که می توانند فروشگاه خویش را به زبان های دلخواه ایجاد نموده و حتی کار و تجارت خود را در سطح جهانی و بین الملی نیز به راحتی با این سیستم قدرتمند توسعه داده و یه فروشگاه بین المللی فوق العاده را ایجاد نمایند.
  • 2-slideبرتری سئو و نتایج جستجو

    یکی از ویژگی های بسیار مهم و حیاتی که باعث جذب کاربران زیادی در سیستم فروشگاه ساز اپن کارت (OpenCart) شده است داشتن سئوی فوق العاده قدرتمند می باشد که می تواند فروشگاه را در داشتن یک رنک بالا در موتورهای جستجو و در مورد کلمات کلیدی مربوط به محصولات و فروشگاه یاری نموده و نه تنها فروشگاه را با ایندکس نمودن صفحات و محصولات در موتورهای جستجو معروف تر و محبوب تر ساخته بلکه با انجام این عملیات فروشگاه را نیز همواره در صفحات نخست موتورهای جستجو قرار می دهد که سرانجام این امور نیز باعث پیشرفت در افزایش بازدید ها و تسریع در فروش بیشتر محصولات خواهد شد. اکنون تیم اپن کارت فارسی، یک پکیج فوق حرفه ای سئو نیز برای کاربران برتر تجاری درنظر گرفته است که قدرت این سیستم فروشگاهی را صد چندان نموده است.
  • 3-slideیک تجارت واقعی و موفق

    شرکت مهندسی داده پردازان سپنتامهر با نام تجاری اپن کارت فارسی، طی 5 سال تلاش شبانه روزی با بکارگیری افراد متخصص در زمینه بومی سازی و فرآهم آوردن کلیه امکانات تجاری این فروشگاه ساز قدرتمند، اکنون با تجربه راه اندازی بیش از هزاران فروشگاه فعال در کشور، با مشاوره رایگان، پاسخگوی تجارت موفق شما عزیزان است و بهترین کیفیت را در مجموعه خود در زمینه مشاوره راه اندازی فروشگاه، مشاوره هاستینگ و امنیت، پنل پیامک، ارائه امکانات تجاری ماژول و قالب اپن کارت و  پشتیبانی فنی آنلاین 24 ساعته از فروشگاه های تجاری  فرآهم نموده است.
  • اپن کارت فارسی، فروشگاه ساز قدرتمند اینترنتی با امکانات متنوع
  • سیستم سئوی حرفه ای رایگان و سئوی فوق حرفه ای هوشمند تجاری با بهترین نتایج در جستجو
  • امکانات تجاری متنوع، برای تجربه یک تجارت واقعی و موفق فروشگاه اینترنتی

ماژول اضافه به سبد خرید کنار به همراه افکت اجاکسی برای OpenCart

نوشته شده توسط حمید. منتشر شده در افزونه های نسخه های 1.5

Shopping Cart Module

مسلما یکی از مواردی که در هر فروشگاهی به شدت برای کاربران مهم می باشد سبد خرید فروشگاه می باشد حال شاید شما هم بعضا علاقمند بوده اید که سبد خرید زیبای را در ستون های کنار فروشگاه خود به نمایش در آورید اما موفق به انجام این کار نشده اید ولی اکنون گروه پرتوان اپن کارت قصد دارد تا برای شما عزیزان ماژول سبد خرید زیبای را ارائه نموده که با استفاده از آن می توانید سبد خرید زیبای را در ستون های کنار فروشگاه خود ایجاد نموده و زیبای خاصی را به فروشگاه خود بخشید. این ماژول که اکنون به صورت رایگان و کاملا فارسی در اختیار شما عزیزان قرار گرفته است دارای فناوری اجاکس نیز بوده که به شکل زیبای محصول را به سبد خرید کاربر اضافه می نماید. برای دریافت و آموزش نصب این ماژول می توانید به ادامه ی مطلب مراجعه نمایید.

روش نصب:
پس از دانلود فایل و خارج کردن آن از حالت فشرده فایل های موجود در پوشه ی Shopping Cart را بر روی هاست خود و در روت اصلی فروشگاه آپلود نمایید. حال باید کد های زیر را در قالب خود یعنی stylesheet.css و stylesheet-rtl.css که در مسیر زیر قرار دارند را وارد نمایید.

 

catalog/view/theme/Your Theme/stylesheet

به آخر فایل گفته شده رفته و کد های زیر را وارد نمایید.

 

#module_cart .content {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #EEEEEE;
    border-radius: 0 7px 7px 7px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 2px #DDDDDD;
    clear: both;
    display: none;
    min-height: 150px;
    padding: 8px;
    position: relative;
    top: -1px;
}
#module_cart.active .heading {
    border-left: 1px solid #EEEEEE;
    border-radius: 7px 7px 0 0;
    border-right: 1px solid #EEEEEE;
    border-top: 1px solid #EEEEEE;
    margin-top: 5px;
    padding-bottom: 6px;
    padding-top: 10px;
}
#module_cart.active .content {
    display: block;
}
#module_cart .cart {
    border-collapse: collapse;
    margin-bottom: 5px;
    width: 100%;
}
#module_cart .cart td {
    border-bottom: 1px solid #EEEEEE;
    color: #000000;
    padding: 2px 3px;
    vertical-align: top;
}
#module_cart .cart .image {
    display: none;
}
#module_cart .cart .image img {
    border: 1px solid #EEEEEE;
    text-align: left;
}
#module_cart .cart .name small {
    color: #666666;
    line-height: 14px;
}
#module_cart .cart td.total, #module_cart .cart td.quantity{
    text-align: right;
    vertical-align: middle;
}
#module_cart .cart .remove {
    text-align: right;
    padding: 0 2px;
    vertical-align: middle;
}
#module_cart .cart .remove img {
    cursor: pointer;
}
#module_cart table.total {
    border-collapse: collapse;
    clear: left;
    float: right;
    margin-bottom: 5px;
    padding: 5px;
}
#module_cart table.total td {
    color: #000000;
}
#module_cart .checkout {
    clear: both;
    text-align: right;
}
#module_cart .empty {
    text-align: center;
}

حال به مسیر زیر رفته

catalog/view/theme/Your Theme/template/product/product.tpl

و دستور زیر را در تمام فایل پیداکرده

$('#cart_total').html(json['total']);

و دستور زیر را در پایین آن اضافه می نماییم.

$('.cart-module').html(json['output']);

حال به مسیر زیر رفته

catalog/view/javascript/common.js

و دستور زیر را در تمام فایل پیدا کرده

$('#cart_total').html(json['total']);

و دستور زیر را در پایین آن اضافه می نماییم.

$('#module_cart .cart-module').html(json['output']);

حال این بار در همین فایل دستور زیر را یافته

$('#cart .content').html(json['output']);

آن را پاک کرده و دستور زیر را به جای آن وارد می نماییم.

$('#cart .content, #module_cart .cart-module').html(json['output']);

سپس به پنل مدیریت فروشگاه خود رفته و از قسمت افزونه ها و ماژول ها ماژول سبد خرید را نصب می نماییم حال بر روی ویرایش کلیک کرده و تنظیمات دلخواه را اعمال می نماییم. اما در ادامه قصد داریم تا آموزش اضفه شدن به حالت اجاکسی این ماژول را نیز به شما آموزش داده تا محصولات به شکل زیبای به سبد خرید اضافه شوند.

ابتدا به مسیر زیر رفته

catalog/view/javascript/common.js

و دستور زیر را که در همان اول فایل می باشد را یافته

$(document).ready(function() {

و کدهای زیر را بعد از آن وارد می نماییم.

    /* AddToCart */
       $('.addToCart').click(function() {
         var tis = $(this);
         $.ajax({
           url: 'index.php?route=checkout/cart/update',
           type: 'post',
           data: 'product_id=' + tis.attr("data-id"),
           dataType: 'json',
           content: this,
           success: $.proxy(function(json) {
             $('.success, .warning, .attention, .information, .error').remove();
            
             if (json['redirect']) {
                location = json['redirect'];
             }
            
             if (json['error']) {
                if (json['error']['warning']) {
                  $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="/catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
                }
             }  
                  
             if (json['success']) {
                $('#notification').html('<div class="attention" style="display: none;">' + json['success'] + '<img src="/catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
               
                $('.attention').fadeIn('slow');
               
                $('#cart_total').html(json['total']);
                $('#module_cart .cart-module').html(json['output']);
               
                animateProduct(tis.parents().eq(2).find(".image img") , $("#module_cart"));
               
                $('html, body').animate({ scrollTop: 0 }, 'slow');
             }  
           }, this)
         });
       
       });

حال در همین فایل به آخر فایل رفته و بعد از دستور زیر

}

دستورات زیر را وارد می نماییم.

    function animateProduct(image,cart){
       var image_offset  = image.offset();
       $("body").append('<img src="' + image.attr('src') + '" id="temp" style="position: absolute; top:'+image_offset.top+'px; left:'+image_offset.left+'px" />');

       var cart_offset  = cart.offset();
       params = {
         top : cart_offset.top + 'px',
         left : cart_offset.left + 'px',
         opacity : 0.0,
         width : cart.width(),
         height : cart.height()
       };
      
      $('#temp').animate(params, 'slow', false, function () {
         $('#temp').remove();
       });
    }

تغییرات را ذخیره کرده و به مسیر زیر می رویم

catalog/view/theme/Your Theme/template/product/product.tpl

حال در تمام فایل دستور زیر را یافته

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

و دستور زیر را در بالای آن وارد می نماییم.

    animateProduct( $("#image") , $("#module_cart") ); 

حال به مسیر زیر رفته

catalog/view/theme/Your Theme/template/product/category.tpl

و دستور زیر را یافته

 <div class="cart"><a onclick="addToCart('');" class="button"><span><?php echo $button_cart; ?></span></a></div>

آن را پاک کرده و به جای آن دستور زیر را وارد می نماییم.

<div class="cart"><a data-id="" class="button addToCart"><span><?php echo $button_cart; ?></span></a></div>

 حال تغییرات را ذخیره کرده و به صفحه ی اصلی فروشگاه می رویم و افکت اضافه شده به سبد خرید کنار را مشاهده می نماییم.

 

Info سازگاری : با نسخه های 1.5.1 اپن کارت فارسی
Price قیمت: رایگان
Download دانلود با لینک مستقیم - 17 کیلو بایت
Password پسورد فایل زیپ : www.opencart.ir
Forum بحث پیرامون این مطلب در انجمن
Demoمشاهده نسخه ی نمایشی (دمو)
HomePage سایت سازنده
Source 
لینک منبع

$('.cart-module').html(json['output']);