Add Widget

This plugin comes with an add to compare basket widget. Just place it anywhere in your theme sidebar.

When you tried to add it to a sidebar area. It will ask for two thing. First one is widget title and the second one is compare page redirection id containing with the short-code [alike_preview].

You can add 5 items to the widget for comparing the result.

This page contains the short code that will automatically create when you first time activate the plugin.

Widget shortcode

You can also call directly the shortcode for displaying the widget.

<?php echo do_shortcode('[alike_widget page_id='.$redirect_page_id.']'); ?>

You have to add the page ID for data redirection.

Note: Make sure your redirection page contains the [alike_preview] shortcode. Otherwise it won't show up anything.

Widget shortcode template

Also for your help here is the shortcode template what it looks like. You can either call this file into any of your theme templates.

<script type="text/html" class="alike-list">
  <% if( _.isObject(items) ){ %>

    <% _.each(items, function(item,key,list){ %>
      <div class="alike-widget-partials clearfix">
        <a href="<%= item.postLink %>" class="alike-widget-image">
          <img src="<%= item.postThumb %>" >
        </a>

        <h3 class="alike-widget-title<%= (item.postTitle.length < 14) ? ' alike-title-middle' : '' %>">
          <a href="<%= item.postLink %>">
            <%= item.postTitle %>
          </a>
        </h3>
        <div class="alike-widget-close">
          <a href="#" class="alike-widget-remove" data-post-id="<%= item.postId %>">X</a>
        </div>
      </div>

    <% }) %>

  <%  } %>
  <% if( _.isEmpty(items) ){ %>
    <div class="alike-widget-partials clearfix">No Items Selected.</div>
  <%  } %>
</script>
<div class="alike-widget-wrapper">
  <div class="alike-widget"></div>

  <div class="alike-widget-btn-wrap">
    <a class="alike-button-compare alike-btn-compare" data-page-url="<?echo esc_url(get_the_permalink($redirect_page_id)) ?>" href="">Compare</a>  
    <a class="alike-button-clear alike-btn-clear alike-right" href="">Clear</a>
  </div>
</div>