Deals

Tuesday, February 9, 2016

Why you should upgrade to Magento 2.0


Magento is the recognized as the leading eCommerce platform for open commerce innovation with over $50B in gross merchandise volume transacted on the platform annually. 

Key features of Magento 2.0


Performance & New Technology:
  • Magento 2.0 is 20% faster than old 1.x versions.
  • A new flexible architecture built on a modern technology stack making it quick to build new sites embracing the latest technology.
Better Security:

  • This latest Magento version supports some steps to deal with server validation. Your online store will get better security.
Improved checkout process:
  • It is no secret that most merchants modify default 6 step checkout to make it easier for the customers. Magento 2.0 addresses this issue with its Shipping & Payment checkout flow. It makes it easy to purchase now and it increases conversation rates.

Improved backend processes:
  • Magento 2.0 makes it easy to add/edit your products, manage orders and customers. You can now change backend grids manually by adding/removing columns. Ajax (without page refresh) requests now all over Magento 2.0 backend. 
 A Countdown for Magento 1.X Support
  • Magento will provide its Magento 1 support until 2018.

Easy to Upgrade
  • Simplified upgrade process our merchants an easier path to the latest version of Magento without costly and complex upgrades. 

Auto-testing 

  •  Automated testing to improve code quality which in itself speeds up time to market for new site builds and changes.

If you planning to upgrade by yourself, Unless you are experienced Magento developer do not do that! You would ruin your online business and would most probably loose some crucial customer data along the way. Migration would involve data, theme, extensions and customizations transfer that require extensive code knowledge to perform bug-free. 
Plan your migration ahead for Magento 2 upgrade at fair price


contact us now at info@thedesignshop.co.in or call on (+919898171728)

Friday, January 22, 2016

A Unique Group for Writers, Story Makers, Fiction Lovers and Creative Writers

This is total different blog. Usually I write Tech blogs. This blog is about a group on Facebook.

To Be Continued is a group where we all are here to learn. Learning is the ultimate thing which is limitless.

JOIN THIS GROUP


Let me first tell you the theme of the group. Here admin would start a story of few lines and leave it there. And the members would continue the story in the comment section.

As an amateur writer, I am always looking for other types of writing and storytelling. And of course, different people have different styles. It can be the simplest yet interesting learning process for me and you. Here we all can provide our own taste of write ups, stories (fiction and non-fiction), use of language, use of grammar, and vocabulary.

Here, write ups would be one's own creation. There is no point of copy-pasting the material. But yes, if you find a good piece of writing somewhere, you can post here with proper credit and a clear reason of your posting. But try to be original as much as possible.

Please free to give your suggestions and feedbacks on posts also. After all we look forward to improvement at the end.

Let's take a look at some RULES:

1. This group is for writers and people who are interested in writing. So please DO NOT post any other content which is not related to writing. (Admins have rights to decide whether the post is related to the subject) if found any, Admins will delete the post/s without notifying the respected one.

2. Try to post your own write ups. Try to be original. That's the strongest way that we can learn. And if you are using someone else's content, then you will HAVE TO GIVE A REQUIRED CREDIT AND A CLEAR REASON OF YOUR POSTING.

3. In posting or commenting, you CAN NOT USE languages like ROFL, LOL, BTW kind of abbreviations which are not in dictionaries. If found any, Admins will delete the post/s and comments without notifying the respected one.

4. While posting a write up or commenting, YOU CAN NOT USE OFFENSIVE LANGUAGE. (Admins have the right to decide whether the language or the content is offensive) And if found any, Admins will delete it without notifying the respected one.

5. When you are giving suggestions or feedback, you would need to be more clear with your thought with proper explanation so that other members can also understand your point and learn new things.

NO FOUL OR OFFENSIVE LANGUAGE WOULD BE ALLOWED.

=======================================

I hope you would enjoy your time here.

Happy writing

jQuery JSTree Tips and Tricks Like Expand All Nodes, Get Selected Node, Get Extra Information

Hello,

Recently in one my project I used jQuery JSTree for display data in tree format and while working with I faced certain issues so here I am sharing some tips and tricks you can use with JSTree.

1) Expand All Nodes on Page Load


If you have dynamic dataset in JSTree and you want to expand it when tree is created here is what you can do. First call AJAX service to get data.

$.ajax({
            url: "cat-tree",
            cache: false
        }).done(function( json ) {
            //init js tree here
           
        });

For example in above service I am calling url cat-tree and get my JSON data. Now add following code to initialize JSTree.

$('#categoryTree').jstree({
                'plugins': ["wholerow", "types"],
                'core': {
                    "themes" : {
                        "responsive": false
                    },
                    'data': json
                },
                "types" : {
                    "default" : {
                        "icon" : "fa fa-folder icon-state-warning icon-lg"
                    },
                    "file" : {
                        "icon" : "fa fa-file icon-state-warning icon-lg"
                    }
                }
            });

That's it now wait for sometime to get it rendered in DOM and then expand it.

setTimeout(function(){
                $('#categoryTree').jstree("open_all");
            },500);

2) Add select event and get Selected Node in JSTree

Add following code to add select event.

$('#categoryTree').on('select_node.jstree', function(e,data) {
                    //Your code here
                });

Use following code to get single selected node of JSTree.

var selectedNode = $('#categoryTree').jstree().get_selected(true)[0];

Use following code to get single multiple selected nodes of JSTree.

var selectedNode = $('#categoryTree').jstree().get_selected(true);

3) Deselect all the Nodes in JSTree

Use following code to deselect all the nodes in JSTree.

$('#categoryTree').jstree("deselect_all");

4) Access Additional Data of Selected Node

We know that there is a standard format of data used with JSTree. For example.

[
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]

What if you want to have extra data like this.

[
       'Simple root node',
       {
         'text' : 'Root node 2',
         'key1': 'value1',
         'key2': 'value2'
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' , 'key1': 'value1', 'key2': 'value2'},
           'Child 2'
         ]
      }
    ]

You can pass any number of extra data buy how will you access it. Check the following code.

First get selected node.

var selectedNode = $('#categoryTree').jstree().get_selected(true)[0];

Extra data is available in key  called original.

var value1 = selectedNode.original.key1;
var value2 = selectedNode.original.key2;

Hope this helps you.

Sunday, January 17, 2016

Passing and Retrieving Data from Booststrap Modal

Recently in one my project I was using a theme which is using boostrap modal. Basically I was using modal for confirmation of delete and once user click on confirm process the delete action. I was using laravel REST API so we have to pass the id of object to be destroyed. So I have to pass id of object to modal and confirmation call API to delete. In this blog I will explain how to do this.

First of all add following modal code to your HTML.

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p> Are you sure you want to delete? </p>
                <input type="hidden" id="objectId"/>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline">Cancel</button>
                <button id="confirmDelete" type="button" data-dismiss="modal" class="btn green">Continue</button>
            </div>
        </div>
    </div>

As you can in above code I have added one hidden field in modal where we will store object id.

Now following will your code of delete button.

<a id="deleteButton" data-id="{{$object->id}}" data-toggle="modal" href="#deleteConfirmation" class="btn btn-danger btn-sm">

As soon as you click on delete button modal will be displayed.

Now add following code to your JavaScript.

    $(document).on("click", "#deleteButton", function () {
        var id = $(this).data('id');
        jQuery('#deleteConfirmation .modal-body #objectId').val( id );
    });

    $('#deleteConfirmation .modal-footer button').on('click', function (e) {
        var $target = $(e.target); // Clicked button element
        $(this).closest('.modal').on('hidden.bs.modal', function () {
            if($target[0].id == 'confirmDelete'){
                $id = $('#deleteConfirmation .modal-body #objectId').val();
            }
        });
    });

As you can in above code we have added click event on delete button and setting id in modal hidden field.

Then we are adding event for confirm button in modal window and getting value stored in hidden field and then you can call the APIs or submit form whatever you want.

Hope this helps you.

Laravel 5.1 Restrict Routes Based on User's Access

Recently I was working on a Laravel project where we have three different types of users and based on their access levels, they are not allowed to view certain URLs. So if by chances user know the urls and try to view in browser, they should be redirected to not authorized page. So here in this blog I am going to explain how to do this in Laravel 5.1

For this you have to use Laravel 5.1 HTTP middle ware. HTTP middleware provide a convenient mechanism for filtering HTTP requests entering your application. For example, Laravel includes a middleware that verifies the user of your application is authenticated. If the user is not authenticated, the middleware will redirect the user to the login screen. However, if the user is authenticated, the middleware will allow the request to proceed further into the application. So first of all create middleware. Go to your laravel application directory in terminal.

php artisan make:middleware AdminMiddleWare

What I did is I created additional column in my users table called access_level and defined three access level

1 = Admin
2 = User

Add following code to middleware we created.


namespace App\Http\Middleware;

use Closure;

class AdminMiddleWare
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if ($request->user() == null){
            return redirect('login');
        }

        if ($request->user()->access_level != 1)
        {
            return redirect('not-authorized');
        }

        return $next($request);
    }
}

in the function handle we have added code to check access level. First of all if check if user is logged in by checking following condition.

$request->user() == null

So if there is no authenticated user we redirect to login and if user is logged in we check access level. If access level is not one we redirect them to not authorized page.

Now how will this middle ware works with routes. Go to your routes.php page.

Route::group(['middleware' => 'App\Http\Middleware\ AdminMiddleWare'], function()
{
    Route::get('admin/login',array('middleware' => 'auth', 'uses' => 'AdminController@index'));
    Route::resource('admin-url1', 'AdminController');
    Route::resource('admin-url1', 'AdminController');
    Route::resource('admin-url1', 'AdminController');
});

As you can see in above code we have create route group and assigned AdminMiddleWare to group and specified all admin urls inside the group. 

Hope this helps you.

Wednesday, January 6, 2016

HTML Fit Content to Available Space - Dynamic Font Size

Hello,

Recently in one of my project we have to fit content to available screen height. Basically it was cross platform mobile application built in HTML 5 and JavaScript. On screen there was a card with content. Card height and width as set to screen height and width. Now the problem was content can big or small and there should not be scrollbar. So what I did is I reduced the size of font till the content fits available width and height. This I did in JavaScript. So here in blog I am going to explain how to do this.

First of all add onload method to your body tag.

<body onload="resizeFontSizeInit()">

   <div id="contentContainer" style="width:100%;height:100%;overflow:hidden;">
       <div id="content">
        Dynamic Content Here
       </div>
   </div>

</body>

Now add following function to JavaScript

function resizeFontSizeInit(){
   resizeFont(0.1);
}

function resizeFont(emSize){
      //first get the screen height
      var screenHeight = document.documentElement.clientHeight;
     
      //Now set the font size to content div
      var contentDiv = document.getElementById('content');
      contentDiv.style.fontSize = String(emSize)+"em";

      //Now check the height of screen to height of content div
      var contentHeight = contentDiv.clientHeight;

      //Check if content height is less than screen height.
      if(contentHeight < screenHeight){
           //Increase font size and call the same function recursively.
           emSize = emSize + 0.1;
           resizeFont(emSize);
      }else{
           //content height is greater than screen size so time to stop recursion.
          //set fontsize to previous size.
          revertFontSizeToPreviousSize(emSize);
      }
}

function revertFontSizeToPreviousSize(emSize){
      emSize = emSize - 0.1;
      var contentDiv = document.getElementById('content');
      contentDiv.style.fontSize = String(emSize)+"em";
}

So basically we start with 0.1 em font size and keep increasing it till the content height is greater than screen height. As soon as it's bigger we have to stop and reset it to previous size. This way no matter what your content is, it will fit to screen without scroll bar.

Saturday, January 2, 2016

Push Google Cloud Message (GCM) from PHP Web Application

In this blog I am going to explain how to push a Google Cloud Message (GCM) from PHP web application.

First of all you will need API key from your Google API account. Go to Google API console and add GCM t your API project and generate a key for Android.  This key you have to add in your PHP script.

Now add following function to your PHP script.

public function send_notification($registatoin_ids, $message) {
       
        // Set POST variables
        $url = 'https://android.googleapis.com/gcm/send';
        $apiKey = 'your_api_key';
       
        $fields = array(
            'registration_ids' => $registatoin_ids,
            'data' => $message,
        );

        $headers = array(
            'Authorization: key=' . $apiKey,
            'Content-Type: application/json'
        );
        // Open connection
        $ch = curl_init();

        // Set the url, number of POST vars, POST data
        curl_setopt($ch, CURLOPT_URL, $url);

        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

        // Disabling SSL Certificate support temporarly
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));

        // Execute post
        $result = curl_exec($ch);
        if ($result === FALSE) {
            die('Curl failed: ' . curl_error($ch));
        }
       
        // Close connection
        curl_close($ch);
        return $result;
    }

As you can see above function takes registration id and message as param and use curl to send push message to particular device. Registration is is unique per device for all the android phones.