Module hitung ongkir JNE, TIKI, POS dengan Prestashop V 1.7 & RAJA ONGKIR GRATIS

Halo,  karena adanya masukan dari teman - teman untuk module serupa yang support untuk prestashop versi 1.7, maka saya luangkan sedikit waktu luang saya untuk membuat module ini.

Sama seperti untuk versi prestashop 1.6, saya masih menggunakan API dari Raja Ongkir. Proses install pun masih sama seperti pada versi sebelumnya, secara teknis kode pun tidak banyak berubah, saya hanya melakukan penyesuain supaya module ini bisa di pakai untuk versi 1.7.

Tanpa perlu berlama - lama berikut ini SS dari proses installasi dan hasil yang ditampilkan dari sisi front end:

Upload file mycarrier_rj_prestashop_1.7 V1.0.zip

Masukan API key dan Kota Asal

Contoh hasil dari sisi front end

Modulenya masih saya taruh di GIT supaya mudah di download, https://github.com/ImmanuelJL/prestashop-ongkir-mycarrier_rj. 

Dari module ini kita memiliki 3 kurir sekaligus JNE, TIKI dan POS. Namun karena alasan performance hanya beberapa service saja yang saya tampilkan (untuk service lengkapnya boleh cek dari web resmi raja ongkir). Dan juga perlu menjadi catatan, nama kota tujuan maupun pengiriman harus menggunakan nama kota secara lengkap dan benar (untuk memastikan perhitungan ongkir yang akurat).

Demikian lah module yang sangat sederhana dan penuh kekurangan ini bisa bebas anda download dan pakai secara gratis, support dengan like and share! Terima Kasih

NOTE: 

1. Menggunakan Prestashop 1.7.4.0
2. Untuk prestahsop versi 1.6 boleh cek disini

UPDATE :
1. Nama kota menggunakan select box, bukan lagi input text (Untuk PS 1.7, silahkan download v1.1). Setelah install, clear cache pada admin area dan set DISABLE ALL OVERRIDES ke NO (kadang input kota pada customer address tidak berubah karena cache) 

Module hitung ongkir JNE, TIKI, POS dengan Prestashop & RAJA ONGKIR GRATIS

Halo,  sebelumnya saya sudah buat module dengan fungsi serupa. Namun karena ada teman-teman yang menanyakan bisa atau tidaknya module ini menggunakan API dari raja ongkir maka saya buatkan juga module ini.

Pertama-tama jangan lupa ambil API key nya dulu dari, https://rajaongkir.com daftar lalu masuk menu panel untuk ambil API key.

1.     Berikut ini contoh halaman panel untuk ambil API:

Modulenya masih saya taruh di GIT supaya mudah di download, https://github.com/ImmanuelJL/prestashop-ongkir-mycarrier_rj. Setelah dapat api key dan download module nya, ikuti langkah-langkah berikut untuk proses installasi (yang sebenarnya part ini sama saja dengan artikel sebelumnya) :

1.     Upload module

Dan berikut penampakan bila proses upload berhasil

2.     Install module, tinggal next next saja gan…

3.     Masukan api key dan nama kota dari mana barang atau ongkir akan di hitung, misalnya toko agan di Jakarta Pusat

4.     Selesai, dan berikut penampilannya

Dari module ini kita memiliki 3 kurir sekaligus JNE, TIKI dan POS. Namun karena alasan performance hanya beberapa service saja yang saya tampilkan (untuk service lengkapnya boleh cek dari web resmi raja ongkir). Dan juga perlu menjadi catatan, nama kota tujuan maupun pengiriman harus menggunakan nama kota secara lengkap dan benar (untuk memastikan perhitungan ongkir yang akurat).

Saya akui module ini masih memliki fitur yang sederhana, saya akan kembangkan lagi apabila saya ada waktu luang dan mendapat respon yang cukup positif. Dukung pengembangan module ini dengan like and share! Sekian terima kasih.

NOTE: 

1. Menggunakan Prestashop 1.6
2. Untuk versi Prestashop 1.7 bisa cek disini

Module hitung ongkir JNE dengan Prestashop GRATIS

Halo,  sebelumnya saya ucapkan terima kasih kepada prestashop untuk free software e-commerce nya yang sangat luar biasa dan juga kepada ongkir.info untuk API hitung ongkirnya. Saya membuat module ini diwaktu luang dan juga sebagai proses pembelajaran, jadi mohon maklum apabila module ini penuh keterbatasan.

Oke kali ini saya akan membagikan module untuk menghitung ongkos kirim via JNE dengan prestashop secara cuma-cuma alias GRATIS. Module ini menggunakan API dari ongkir.info jadi pastikan anda dapatkan dulu api key dari web resminya di http://api.ongkir.info/akun/registrasi/  atau kalau sudah punya login dulu di http://api.ongkir.info/akun/login. Dan untuk detailnya bisa liat SS dibawah ini:

1.     Register page kalau anda belum punya aksesnya

2.     Setelah proses regristrasi selesai, tinggal login ke akun anda

 

3.     Ambil API KEY yang akan kita masukan pada module nantinya

Dan juga berikut link untuk download module nya disini https://github.com/ImmanuelJL/prestashop-jne-mycarrier. Setelah dapat api key dan download module nya, ikuti langkah-langkah berikut untuk proses installasi :

1.     Upload module

Dan berikut penampakan bila proses upload berhasil

2.     Install module, tinggal next next saja gan…

3.     Masukan api key dan nama kota dari mana barang atau ongkir akan di hitung, misalnya toko agan di jakarta

4.     Selesai, dan berikut penampilannya

Ya memang semudah itu untuk menggunakan module ini, tinggal install dan pakai. Module ini akan menginstall 3 jne carrier sekaligus yaitu JNE OKE, JNE REG dan JNE YES. Dimana tujuan pengiriman diambil otomatis dari alamat yang customer pilih pada saat check out,  apabila track alamat tujuan dan pengiriman tidak di temukan, maka secara otomatis module tidak akan di tampilkan. Terkadang juga hanya tampil satu atau dua carrier hal ini karena memang hanya tersedia satu atau dua layanan pada jalur pengiriman tersebut. Dan mohon maaf hal ini tidak bisa diubah, karena layanan yang tersedia diambil berdasarkan API dari ongkir.info.  Jika menemukan kesulitan atau pun error pada penggunaan module ini bisa di informasi kan di kolom komentar.

Saya harap module ini bias bermanfaat buat agan-agan yang memang membutuhkan. Dukung pengembangan module ini dengan like and share! Sekian terima kasih.

NOTE: 

1. Menggunakan Prestashop 1.6

Live searching box dan highlight dengan Jquery

Baru-baru ini admin diminta klien untuk dibuatkan suatu searching box tetapi yang cara kerjanya live (real time), jadi user tidak mau repot dan lama menunggu loading selagi data dari database di query untuk di tampilkan hasil pencariannya. Sebetulnya code ini belum dicoba lebih jauh, dan refrensinya pun dari google, belum di tes juga kalau jumlah data yang di cari besar (big data), tapi sudah di rasa cukup untuk memenuhi permintaan klien admin yang tadi. Baiklah berikut ini full codenya, bisa langsung di copy paste saja:

<input type="text" id="search" placeholder="Search...">
<table id="table" border="1">
     <thead>
            <tr>
                <th>Nama</th> 
                <th>Alamat</th> 
            </tr>
     </thead>
     <tbody>   
      <tr>
      <td>Anisa</td>
      <td>Jakarta</td>    
      </tr>
      <tr>
      <td>Anton</td>
      <td>Jakarta</td>
      </tr>
      <tr>
      <td>Budi</td>
      <td>Bandung</td>
      </tr>
      <tr>
      <td>Basuki</td>
      <td>Jakarta</td>
      </tr>
      <tr>
      <td>Cika</td>
      <td>Solo</td>
      </tr>
      <tr>
      <td>Cyntia</td>
      <td>Palembang</td>
      </tr>
      <tr>
      <td>Desy</td>
      <td>Solo</td>
      </tr>
      <tr>
      <td>Donald</td>
      <td>Jakarta</td>
      </tr>
     </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var $rows = $('#table >tbody >tr:visible');
$('#search').keyup(function() {
    // fungsi untuk search
    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;
    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();

    var value = $(this).val().toLowerCase();    
    // fungsi untuk highlight
    $("#table >tbody >tr >td").each(function(index, elem) {
        var $elem = $(elem);
        if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {
            $elem.css('backgroundColor', 'yellow');             
        }
        else {
            $elem.css('backgroundColor', '');             
        }
    });
});
</script>

Jadi saat user mengetikan kata pencarian pada search box, maka jquery akan mem-filter table dan menampilkan data yang cocok saja. Hal ini tentu akan membuat tampilan lebih menarik dan user friendly. Terima kasih.

Chained dropdown dengan PHP laravel MySql dan AJAX Jquery

Pada kesempatan kali ini admin hendak membagikan pengalamannya bagaimana membuat dropdown yang saling terhubung satu sama lain atau istilahnya chained dropdown. Admin mengambil sample Country-State-City dropdown karena memang dropdown model ini banyak dipakai saat pembuatan aplikasi berbasis web.

Masih sama dengan artikel sebelumnya kita menggunaka Laravel sebagai back end side, MySql sebagai database Country-State-City yang akan di generate dan juga kali ini kita akan memakai fungsi AJAX Jquery getJSON. Tentu saja peranan getJSON disini menjadi sangat penting, karena dengan menggunakan fungsi ini respone yang dikirimkan oleh server terjadi secara real time tanpa men-refresh browser, tanpa jeda waktu membuat aplikasi yang kita buat terlihat dinamis dan lebih user friendly. Oke langsung kita mulai saja!

Pertama siapkan databasenya, untuk gampangnya bisa download projectnya DISINI. Databasenya saya taruh di folder database tinggal di import saja di phpmyadmin PC agan. Setelah database di import, kita siapkan modelnya. 

Berikut ini model yang harus disiapkan, csc_countries.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_countries extends Model
{
    
protected $table='csc_countries';
    protected $fillable=[
        'name',
        'sortname',
        'phonecode'
    ];

}

csc_states.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_states extends Model
{
    
protected $table='csc_states';
    protected $fillable=[
        'name',
        'country_id'
    ];


}

csc_cities.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class csc_cities extends Model

{

    

protected $table='csc_cities';

    protected $fillable=[

        'name',

        'state_id'

    ];

}

Berikutnya kita siapkan controllernya, csccontroller.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use Response;
use App\csc_cities;
use App\csc_states;
use App\csc_countries;

class csccontroller extends Controller
{
    
  public function chained_dopdown(){
    $csc_countrie=csc_countries::all();

    return view('chained-dropdown')->with('csc_countrie',$csc_countrie);
  }

public function getStates($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_state = csc_states::where('country_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_state as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }

    public function getCities($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_citie = csc_cities::where('state_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_citie as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }


}

Lalu siapkan juga router yang akan menghubungkan request dari client ke server. Route.php:

Route::get('/chained_dopdown','csccontroller@chained_dopdown');

Route::get('/chained_dopdown/getStates/{param}','csccontroller@getStates');

Route::get('/chained_dopdown/getCities/{param}','csccontroller@getCities');

Selanjutnya kita siapkan file javascript untuk men-generate dropdown secara dinamis. csc.js:

$(document).ready(function(){

    var host = window.location.href;    

$("#country").change(function() {

            $.getJSON(host + "/getStates/" + $("#country option:selected").val(), function(data) {
            //console.log(data);            
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#state').empty();
                $('#state').append('<option>Select State/Province</option>');
                $('#city').empty();
                $('#city').append('<option>NA</option>');
                $.each(temp, function(key, obj) {
                    $('#state').append('<option value="' + obj.k +'">' + obj.v + '</option>');
                });
            });                
            
        });

        $("#state").change(function() {

            $.getJSON(host + "/getCities/" + $("#state option:selected").val(), function(data) {
                //console.log(data);
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#city').empty();
                $.each(temp, function(key, obj) {
                    $('#city').append('<option value="' + obj.k +'">' + obj.v + '</option>');           
                });            
            });
            
        }); 

});//end of document ready

Terakhir kita siapkan view-nya. chained-dropdown.blade.php:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Chained Dropdown</div>

                <div class="panel-body">                            
                    <label>Country</label>
                        <select name="state_province" id="country">
                            <option value="">Select Country</option>
                            @foreach($csc_countrie as $csc_countries)
                                <option value="{{$csc_countries->id}}">{{$csc_countries->name}}</option>
                            @endforeach
                        </select>
                    <br>

                    <label>State</label>
                        <select name="state_province" id="state">
                            <option value="">NA</option>
                        </select>
                    <br>

                    <label>City</label>
                        <select name="city" id="city">
                            <option value="">NA</option>
                        </select>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src='{{URL::asset("js/jquery-1.12.4.min.js")}}'></script>
<script type="text/javascript" src='{{URL::asset("js/csc.js")}}'></script>
@endsection

Dan persiapan kitapun selesai. Penjelasan singkatnya kurang lebih begini. Table country, state dan city saling terhubung satu sama lain atau memiliki relasi, dimana table country dan table state dihubungkan oleh kolom id(pada table country) dan kolom country_id(pada table state), begitu juga dengan table state dan city, id(pada table state) dan kolom state_id(pada table city). 

Jadi, saat user memilih nama country, maka id nya akan dikirm kan ke controller dan dicocokan ke database (melalui model) sehingga controller akan mencocokan id country mana yang dimaksud oleh user pada table state barulah setelahnya respone dikembalikan ke user.

public function getStates($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_state = csc_states::where('country_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_state as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

Nah magic-nya terjadi disini. Respone diterima oleh getJSON (pada file csc.js) dan di tampilkan pada view.

$("#country").change(function() {

            $.getJSON(host + "/getStates/" + $("#country option:selected").val(), function(data) {
             //console.log(data);            
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#state').empty();
                $('#state').append('<option>Select State/Province</option>');
                $('#city').empty();
                $('#city').append('<option>NA</option>');
                $.each(temp, function(key, obj) {
                    $('#state').append('<option value="' + obj.k +'">' + obj.v + '</option>');
                });
            });                
            
        });

Begitu juga mekanisme yang terjadi pada state dan city, id pada state yang dipilih dicocokan dengan table city dan barulah responenya dikembalikan ke user.

public function getCities($param){
      //GET THE ACCOUNT BASED ON TYPE
      $csc_citie = csc_cities::where('state_id','=',$param)->get();
      //CREATE AN ARRAY 
      $options = array();      
      foreach ($csc_citie as $arrayForEach) {
                $options += array($arrayForEach->id => $arrayForEach->name);                
            }
      
      return Response::json($options);

    }

$("#state").change(function() {

            $.getJSON(host + "/getCities/" + $("#state option:selected").val(), function(data) {
                //console.log(data);
                var temp = [];
                //CONVERT INTO ARRAY
                $.each(data, function(key, value) {
                    temp.push({v:value, k: key});
                });
                //SORT THE ARRAY
                temp.sort(function(a,b){
                   if(a.v > b.v){ return 1}
                    if(a.v < b.v){ return -1}
                      return 0;
                });
                //APPEND INTO SELECT BOX
                $('#city').empty();
                $.each(temp, function(key, obj) {
                    $('#city').append('<option value="' + obj.k +'">' + obj.v + '</option>');           
                });            
            });
            
        });

Nah selesai sudah permbahasan kita kali ini, semoga bermanfaat dan mohon maaf kalau ada penjelasan yang kurang dapat dimengerti, pun kalau ada koreksi perhal penjelasan saya boleh di cantumkan dalam kolom komentar. Terima Kasih