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>

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"});

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.

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'
  }
});