<div id="thememakers_shortcode_template" class="thememakers_shortcode_template clearfix">
		
		<?php if (!is_plugin_active('woocommerce/woocommerce.php')){ ?>
		
				<p>Notice: To use this shortcode please download and activate WooCommerce plugin</p>
		
		<?php } ?>
		
    <div class="one-half">
        <h4 class="label"><?php _e('Title', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <input type="text" value="" class="js_shortcode_template_changer data-input data-upload" data-shortcode-field="title" />
        <span class="preset_description"><?php _e('Title of products page', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>
    </div><!--/ .one-half-->
	
	<div class="one-half">
        <h4 class="label"><?php _e('Quantity of products', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
		<input type="text" value="" class="js_shortcode_template_changer data-input data-upload" data-shortcode-field="products_per_page" />
		<span class="preset_description"><?php _e('Enter the number of products per page', THEMEMAKERS_THEME_FOLDER_NAME); ?></span>
    </div><!--/ .one-half-->
		
	<div class="one-half">
        <h4 class="label"><?php _e('Sorting', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        	
		<select class="js_shortcode_template_changer data-select" data-shortcode-field="orderby">
			<option value="date"><?php _e('Sorting by date', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="ID"><?php _e('Sorting by products ID', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="modified"><?php _e('Sorting by last modified', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
			<option value="title"><?php _e('Sorting by title', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
        </select>
			
    </div><!--/ .one-half-->
	
	<div class="one-half">
        <h4 class="label"><?php _e('Column', THEMEMAKERS_THEME_FOLDER_NAME); ?></h4>
        <select class="js_shortcode_template_changer data-select" data-shortcode-field="column">
            <option value="3"><?php _e('Three Columns', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
            <option value="4"><?php _e('Four Columns', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
            <option value="6"><?php _e('Six Columns', THEMEMAKERS_THEME_FOLDER_NAME); ?></option>
        </select>
    </div><!--/ .one-half-->
    <div class="clear"></div>

</div><!--/ .thememakers_shortcode_template-->


<!-- --------------------------  PROCESSOR  --------------------------- -->

<?php $frame_uri = Thememakers_Application_Shortcodes::get_application_uri() . "/preview.php"; ?>

<div class="shortcode_app_frame_block">
    <div class="thememakers_shortcode_info_popup" style="display: none"></div>
    <iframe src="<?php echo $frame_uri ?>" class="shortcode_app_frame" frameborder="1" id="thememakers_shortcode_template_preview"></iframe>
</div>

<script type="text/javascript">

    var thememakers_app_shortcodes_preview_url = "<?php echo $frame_uri ?>";

    jQuery(function() {
        var shortcode_name = "product";
        thememakers_app_shortcodes.changer(shortcode_name);
        jQuery("#thememakers_shortcode_template .js_shortcode_template_changer").on('keyup, change', function() {
            thememakers_app_shortcodes.changer(shortcode_name);
        });

    });
</script>


