Sunday, December 17, 2017

How To Create Widget in Siteorigin Wordpress

Paste this code in Theme > function.php
// this for hook 
function my_awesome_widgets_collection($folders){
    $folders[] = dirname(__FILE__).'/../widgets/';
    return $folders;
}
add_filter('siteorigin_widgets_widget_folders', 'my_awesome_widgets_collection');


// this for add new widget group
function imm_add_widget_tabs($tabs) {
    $tabs[] = array(
        'title' => __('Imm Widgets', 'imm_widget'),
        'filter' => array(
            'groups' => array('imm_widget')
        )
    );

    return $tabs;
}
add_filter('siteorigin_panels_widget_dialog_tabs', 'imm_add_widget_tabs', 20);

hook.php is place where i code on top.

widgets folder is place for all widget

the widget we use as example is imm-carousel

Folder Structure.

 
//***
<?php
/*
Widget Name: Imm Carousel
Description: Carousel
Author: Hari Seanli
Author URI: https://www.islandmediamanagement.com/
Widget URI: https://www.islandmediamanagement.com/,
Video URI: https://www.islandmediamanagement.com/
*/

class Imm_Carousel_Widget extends SiteOrigin_Widget {

 function __construct() {
     //Here you can do any preparation required before calling the parent constructor, such as including additional files or initializing variables.

     //Call the parent constructor with the required arguments.
     parent::__construct(
         // The unique id for your widget.
         'imm-carousel',

         // The name of the widget for display purposes.
         __('Imm Carousel Widget', 'imm-carousel-widget-text-domain'),

         // The $widget_options array, which is passed through to WP_Widget.
         // It has a couple of extras like the optional help URL, which should link to your sites help or support page.
         array(
             'description' => __('A hello world widget.', 'hello-world-widget-text-domain'),
             'help'        => 'http://example.com/hello-world-widget-docs',
             'panels_groups' => array('imm_widget')
         ),

         //The $control_options array, which is passed through to WP_Widget
         array(
         ),

         //The $form_options array, which describes the form fields used to configure SiteOrigin widgets. We'll explain these in more detail later.
         array(
             'text' => array(
                 'type' => 'text',
                 'label' => __('Hello world! goes here.', 'siteorigin-widgets'),
                 'default' => 'Hello world!'
             ),
         ),

         //The $base_folder path string.
         plugin_dir_path(__FILE__)
     );
 }

 function get_template_name($instance) {
     return 'imm-carousel-template';
 }

 function get_template_dir($instance) {
     return 'hw-templates';
 }

}
siteorigin_widget_register('imm_carousel_widget', __FILE__, 'Imm_Carousel_Widget');



?>
<div>
    <?php echo wp_kses_post($instance['text']) ?>
</div>

Monday, August 21, 2017

Json Object

Json object in Js Example :
var datapost = {'id':'01'};
datapost.nama = "i wayan xxx";
when you call it
 console.log(datapost);
it will shown like below
{
id: "01", 
nama: "i wayan xxx"
}

Create Array In Javascript

Simple Array example :
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");
Array with key
var ska_bidang_data = [{id:"00",nama_bidang:"ARSITEKTUR"}];
ska_bidang_data.push({id:"01",nama_bidang:"ARSITEKTUR"});
ska_bidang_data.push({id:"02",nama_bidang:"SIPIL"});

Sunday, August 13, 2017

Add Bootstrap CSS in Wordpress Plugin

To add css to wordpress is simple.. just use wp_enqueue_style 
example :
wp_enqueue_style( 'wp-astti-style-bootstrap', plugins_url('lib/bootstrap-4/css/bootstrap.min.css', __FILE__));

but the problem when use enqueue to boostrap css like that is the css will effect other element and make wordpress admin page look ugly.
Solution :
solution for this problem is wrapper.

Saturday, July 29, 2017

Looping Ajax

from the latest project i do with shopify, i need to use ajax inside looping to add products to cart.
Basically we need product id or product variant id and quantity.
here is the code from shopify to insert product to cart.

jQuery.post('/cart/add.js', {
  quantity: 1,
  id: 794864229,
  properties: {
    'First name': 'Caroline'
  }
});


Saturday, April 1, 2017

Review Mi5s



Mi5S merupakan salah satu varian dari mi5 yang memiliki kemampuan lebih. Pada versi mi5s ini terjadi beberapa peningkatan pada beberapa sektor :


Mi5
Mi5S
CPU
Dual-core 1.8 GHz Kryo & dual-core 1.6 GHz Kryo
Quad-core 2.15 GHz & 1.6 GHz
GPU
Adreno 530
Adreno 530
Chipset
Snapdragon 820
Snapdragon 821

Sedangkan pada sektor kamera terjadi penurunan resolusi dimana yang awalnya mi5 dengan resolusi 16 MP dengan 4 axis Optical Image Stabilization sedangkan mi5s dengan resolusi 12MP. Hal ini dikarenan perubahan sensor kamera.

Mi5 menggunkaan sensor Sony Exmor R IMX298

Mi5s menggunakan sensor  Sony Exmor R IMX378

Sensor kamera yang digunakan  oleh mi5s memang  cuman 12.2 MP saja namun ukuran pixelnya cukup lebar mencapai 1.55 μm. Bandingkan dengan 1.12 μm yang digunakan oleh Mi5.
Dengan adanya sensor ini seharusnya mi5s dapa menyerap cahaya lebih pada saat foto malam, namun dalam foto di bawah dapat di lihat hasil kamera malam tidak cukup baik. belum ada yang bisa mengalahkan samsung s7 dalam foto low light (tergantung pengguna).. :D

Berikut adalah contoh foto dari xiaomi mi5s :
Night Shoot

Auto

Auto

Auto

Raw dan Light Room app

Raw & morning sky effect

HDR

HDR

HDR

Auto

HHT