Therichpost

Year: 2018

  • How to get events count on dayClick FullCalendar?

    How to get events count on dayClick FullCalendar?

    Hello to all, welcome to therichpost.com. In this post, I will tell you, How to get events count on dayClick FullCalendar? fullcalendar is the best A JavaScript event calendar. Customizable and open source. In this post, we will get events count on dayClick FullCalendar.

    Here is the working and tested complete code for Get events count on dayClick FullCalendar and you can paste this code into your html file:
    <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css'>
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      defaultDate: '2018-03-12',
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2018-03-01',

        },
        {
          title: 'Long Event',
          start: '2018-03-07'
          
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-09'
        },
        {
          id: 999,
          title: 'Repeating Event',
          start: '2018-03-16'
        },
        {
          title: 'Conference',
          start: '2018-03-11'
          
        },
        {
          title: 'Meeting',
          start: '2018-03-12'
          
        },
        {
          title: 'Lunch',
          start: '2018-03-12'
        },
        {
          title: 'Meeting',
          start: '2018-03-12'
        },
        {
          title: 'Happy Hour',
          start: '2018-03-12'
        },
        {
          title: 'Dinner',
          start: '2018-03-12'
        },
        {
          title: 'Birthday Party',
          start: '2018-03-13'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2018-03-28'
        }
      ],
       dayClick: function(date, allDay, jsEvent, view) {
                  var eventsCount = 0;
                 var date = date.format('YYYY-MM-DD');

                  $('#calendar').fullCalendar('clientEvents', function(event) {
                    var start = moment(event.start).format("YYYY-MM-DD");
                    var end = moment(event.end).format("YYYY-MM-DD");
                    if(date == start)
                    {
                      eventsCount++;

                    }

                  });
                  alert(eventsCount);

        }
    });

  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>

</body>
</html>

     There are so many tricks in fullcalendar and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

  • How to get woocommerce products order status count with wordpress custom post query?

    How to get woocommerce products order status count with wordpress custom post query?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to get woocommerce products order status count with wordpress custom post query? WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

    In this post, I am getting product order status count like product order status processing, cancelled, completed.

    Here is the code and you need to add this into your theme’s functions.php file:

    function get_orders_count_from_status( $status ){
    global $wpdb;

    // We add 'wc-' prefix when is missing from order staus
    $status = 'wc-' . str_replace('wc-', '', $status);

    return $wpdb->get_var("
        SELECT count(ID)  FROM {$wpdb->prefix}posts WHERE post_status LIKE '$status' AND `post_type` LIKE 'shop_order'
    ");
}

     Here is the code to get order status count and you can this into your any theme’s template file:

    <?php echo get_orders_count_from_status( "processing" ); ?>

     Now you are done and if you have query related to this post or you want to do some more with this code then please do comment below and I will come with wordpress hooks.

     

  • How to display products from specific product category with wordpress wp_query?

    How to display products from specific product category with wordpress wp_query?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to display products from specific product category with wordpress wp_query?  WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

    Here is the working and tested code to display products from specific category with wordpress wp_query and with this query, we can get post with different category with the help of category slug name:

    <?php
// Here you ca add your product category SLUG (can be multiple coma separated)
$product_categories = array('clothing');

$wc_query = new WP_Query( array(
    'post_type' => 'product',
    'post_status' => 'publish',
    'posts_per_page' => 5,
    'tax_query' => array( array(
        'taxonomy' => 'product_cat',
        'field'    => 'slug',
        'terms'    => $product_categories,
        'operator' => 'IN',
    ) )
) );
?>
<ul>
     <?php if ($wc_query->have_posts()) : ?>
     <?php while ($wc_query->have_posts()) :
                $wc_query->the_post(); ?>
     <li>
          <h3>
               <a href="<?php the_permalink(); ?>">
               <?php the_title(); ?>
               </a>
          </h3>
          <?php the_post_thumbnail(); ?>
          <?php the_excerpt(); ?>
     </li>
     <?php endwhile; ?>
     <?php wp_reset_postdata(); ?>
     <?php else:  ?>
     <li>
          <?php _e( 'No Products' ); ?>
     </li>
     <?php endif; ?>
</ul>

     Now you are done and if you have query related to this post or you want to do some more with this code then please do comment below and I will come with wordpress hooks.

     

  • How to upload image with react js and php?

    How to upload image with react js and php?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to upload image with react js and php?  Reactjs is a Javascript Library to build user interface.

    We will upload image through reactjs in php with move_uploaded_file function in php and this is very interesting. 

    I did react js and php collaboration in my post and this is very good. 

    Here is the working and tested code in reactjs and you can add this into your index.js file:
    import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
class Hello extends React.Component{
  state = {
    selectedFile : null
  }
  fileSelect = event => {
    this.setState({selectedFile: event.target.files[0]})
    console.log(event.target.files[0])
  }
  fileUpload = () => {
    const fd = new FormData();
    fd.append('image', this.state.selectedFile, this.state.selectedFile.name);
    axios.post('http://localhost/core_php.php', fd

    ).then(res=>
    {
    console.log(res);
    }
    );
    
  }
  render() {
    return (
  <div>
    <input type="file" onChange = {this.fileSelect} />
  <button onClick = {this.fileUpload}>Upload</button>
  </div>
    );
  }
  }

  ReactDOM.render(<Hello />, document.getElementById('root'));
     Here is the code for php and you can add this into your code_php.file and you also need to make img folder also:
    <?php 
move_uploaded_file($_FILES["image"]["tmp_name"], "img/" . $_FILES["image"]["name"]);
?>

     If you have any query related to this code and you can comment below. I will come with more reactjs posts.

  • Story 3 Real story of beautiful lady ghost

    Story 3 Real story of beautiful lady ghost

    In this post, I am once again coming with true horror story and this story more horrible than my last true horror stories.

    This is the story of beautiful lady ghost, that always comes at 3 am in the morning.  Here i am telling my uncle true story.

    It was hot summer season. In india, in summers, people used to sleep at outdoor or on the roofs. Same time, my uncle was sleeping outdoor and that was hot summer day and there are lot of mosquitoes also. My uncle was unable to sleep in this kind of atmosphere and he was just walking here and there and suddenly he saw back of beautiful dressed lady and he was thinking that lady was from his neighbour but when he saw her feets, that was turn around back side and then he shocked and he confirmed she is ghost and by god luck lady was going slowly to somewhere and she did not harm her.

    My uncle told all story to his wife(my aunt) said she knew about her and she was newly married girl which was died early because of dowry but she don’t harm any one.

    Now these days, she always comes to that place but did not harm anyone but this is very scary to see her in the dark night.

    I will come with more true ghost stories and please also tell me, if you any ghost story and I will publish on my blog.

     

     

     

  • How to preview and upload image in Reactjs?

    How to preview and upload image in Reactjs?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to preview and upload image in Reactjs? Reactjs is a Javascript Library to build user interface.

    This is the Part 1 for image upload because in this part, I will tell you, how to preview image before uploading in reactjs.

    reactjs-image-upload

    First of all you need to install below packages into your react app for image upload:
    npm i react-images-uploader --save
    npm install –s react-progress-button

    After successfully install the above packages, you just need to add below code into your index.js file to Preview the uploaded  image in Reactjs:

    import React from 'react';
import ReactDOM from 'react-dom';
import ImagesUploader from 'react-images-uploader';
import 'react-images-uploader/styles.css';
import 'react-images-uploader/font.css';

class Hello extends React.Component{
  render() {
    return (
    <div className="examples-container">
    <ImagesUploader
      url="http://localhost:3000/images"
      optimisticPreviews
      onLoadEnd={(err) => {
        if (err) {
          console.error(err);
        }
      }}
      label="Upload multiple images"
      />
  </div>
    );
  }
  }

  ReactDOM.render(<Hello />, document.getElementById('root'));

     Now you done with Preview the uploaded image in Reactjs and In second part, i will tell you upload image in folder and how to get that image and if you have any query related to this post then please do comment in below comment box.

  • How to get logged in user recently read posts in wordpress?

    How to get logged in user recently read posts in wordpress?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to get logged in user recently read posts in wordpress?  WordPress is the best cms. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

    In this post, I will do the trick that, if user will logged in and he/she wants to check recent read post or article and then he/she will easily track with below code and this is very interesting.

    Here is complete working and tested code to Get logged in user recently read posts in wordpress:

    You need to add below code into your theme’s functions.php file:

    function shortcode_update_recent() {
    if( is_user_logged_in() ) {
        $post_id = get_the_ID();
        $uu_id = get_current_user_id();

        add_post_meta($post_id,'_post_read_by', get_current_user_id(), false);
    }
}
add_shortcode('track_user_recently_read', shortcode_update_recent );

function shortcode_recent() {
     $uu_id = get_current_user_id();

    $args = array(
        'posts_per_page'   => 10,
        'meta_key'         => '_post_read_by',
        'meta_value'       => $uu_id,
        'post_type'        => 'post',
        'post_status'      => 'publish',
    );
  

    $posts_array = get_posts( $args );
    foreach ( $posts_array as $post ) : 
     echo $post->post_title;
    endforeach; 
    wp_reset_postdata();
}
add_shortcode('display_user_recent', shortcode_recent );

     You need to add below code into your theme’s single.php file:

    echo do_shortcode('[track_user_recently_read]');

     You need to add below code into your theme’s template file, where you want show logged-in user recent read posts  and I am just getting the post title but we can get all the post content like post feature image and many more :

    <?php echo do_shortcode('[display_user_recent]'); ?>

     Now you are done and if you have query related to this post or you want to do some more with this code then please do comment below and I will come with wordpress hooks.

     

  • How to add a custom fee for a specific payment gateway in Woocommerce?

    How to add a custom fee for a specific payment gateway in Woocommerce?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to add a custom fee for a specific payment gateway in Woocommerce?  WordPress is the best cms and Woocommerce is the best Ecommerce plugin. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

    Here is the working and tested code for add a custom fee for a specific payment gateway in Woocommerce and you need to add this hook into your functions.php file:

    // Add a custom fee based o cart subtotal
add_action( 'woocommerce_cart_calculate_fees', 'custom_fee_for_credit_card', 20, 1 );
function custom_fee_for_credit_card( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    if ( ! ( is_checkout() && ! is_wc_endpoint_url() ) )
        return; // Only checkout page

    $payment_method = WC()->session->get( 'chosen_payment_method' );

    if ( 'credit_card' == $payment_method ) {
        $surcharge = $cart->subtotal * 0.025;
        $cart->add_fee( 'Комиссия банка', $surcharge, true );
    }
}

// jQuery - Update checkout on methode payment change  
add_action( 'wp_footer', 'custom_checkout_jqscript' );
function custom_checkout_jqscript() {
    if ( ! ( is_checkout() && ! is_wc_endpoint_url() ) )
        return; // Only checkout page
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input[name="payment_method"]', function(){
            $(document.body).trigger('update_checkout');
        });
    });
    </script>
    <?php
}

     There are so many hooks in wordpress and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

     

  • How to Remove Category word from Woocommerce Archive Pages?

    How to Remove Category word from Woocommerce Archive Pages?

    Hello, welcome to therichpost.com. In this post, I will tell you, How to Remove Category word from Woocommerce Archive Pages? WordPress is the best cms and Woocommerce is the best Ecommerce plugin. WordPress hooks(add_action, add_filter) give us the power to edit or change the code without interruption into the files and this is the best thing about wordpress. Now I am going to tell you how the hooks work.

    Here is the working code to Remove Category word from Woocommerce Archive Pages and you need to add this into your theme’s functions.php file:

    add_filter( 'get_the_archive_title', 'so_remove_category_prefix' );
function so_remove_category_prefix( $title ) {
    if ( is_product_category() ) {
        $title = single_term_title( '', false );
    }
    return $title;
}

     There are so many hooks in wordpress and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

     

  • Insert and fetch fullcalendar events from mysql database

    Insert and fetch fullcalendar events from mysql database

    Hello to all, welcome to therichpost.com. In this post, I will tell you, Insert and fetch fullcalendar events from mysql database. fullcalendar is the best A JavaScript event calendar. Customizable and open source. 

    In this post, we will get or fetch fullcalendar events from php mysql database.

    In this, on day click, bootstrap popup will open including add event title form and with the help of this form, will insert the event title and date in mysql database.

    fullcalendar-events-mysql-database

    Here is the complete working code:

    Very first, you need to create event table in phpmyadmin and I am also inserting some test data and here is table structure:
    CREATE TABLE events (
id int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
title varchar(250) NULL,
event_date timestamp NULL
);

INSERT INTO `events` (`id`, `title`, `event_date`) VALUES
(1, 'Walk-In', '2018-06-5 11:07:27'),
(2, 'Online Booking', '2018-06-6 02:37:05'),
(3, 'Facebook Booking', '2018-06-7 04:01:00')

     Here is the complete code for Insert and fetch fullcalendar events from mysql database and you can paste that code into your php file:

    <?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "fullcalendarevents";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
if(isset($_POST["submit"]) == "submit" && isset($_POST["eventTitle"]) != "")
  {
    $sql = "INSERT INTO events (title, event_date)
        VALUES ('".$_POST['eventTitle']."', '".$_POST['eventDate']."')";
    if (mysqli_query($conn,$sql)) {
        echo "New event added successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

  }
  //echo "Connected successfully";
$sql = "SELECT title, event_date as start FROM events";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }

} 
else 
{
    echo "0 results";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css'>
<link href='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js'></script>
<script src='https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min
.js'></script>
<script>

  $(document).ready(function() {

    $('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      defaultDate: new Date(),
      navLinks: true, // can click day/week names to navigate views
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      dayClick: function(date, jsEvent, view) {

        $("#successModal").modal("show");
        $("#eventDate").val(date.format());

      },
      events: <?php echo json_encode($myArray); ?>
    });

  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>

  <div id='calendar'></div>
  <div class="modal fade" id="successModal" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    <form action="fullcalendarinsert.php" method="post">
    <div class="form-group">
      <label for="eventtitle">Event Title:</label>
      <input type="eventTitle" name="eventTitle" class="form-control" id="eventTitle" required="">
      <input type="hidden" name="eventDate" class="form-control" id="eventDate">
    </div>
    <button type="submit" value="submit" name="submit" class="btn btn-default">Submit</button>
  </form>
  </div>
</div>
</div>
</div>

</body>
</html>

     If you have any query related to this post then please let me know with your comments and I will come with more fullcalendar posts.