Subversion Repositories SmartDukaan

Rev

Blame | Last modification | View Log | RSS feed

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<style>
#draggables{
    height: 400px;  
    overflow: auto;
}
#draggables, .droppable {   
    border: 1px solid;
    padding: 10px;
}
#draggables li{
    border: 1px solid #ccc;
    padding: 1px;
    margin: 1px;
}
.droppable{
    max-height: 400px;
    overflow: auto;
}
</style>

<div id="template" style="display:none;">
        <div style="border-color:#eeeeee; border-style:solid;border-width:0px 1px 1px 0px;float:left;width:325px;margin:0px;padding:0px;" class="box">
                <a class="producturl" target="_blank" style="text-decoration: none; color:#0088cc;" href="http://saholic.com/mobile-accessories/plantronics-bluetooth-headset-discovery-975-1003895">
                <h1 class="productname" style="min-height:80px;padding: 12px 0px; font-family: Lucida Grande,sans-serif; font-size: 18px; color: black; text-align: center;margin-bottom:0px;">Plantronics Bluetooth Headset Discovery 975</h1>
                <p style="padding: 0px 0px 0px 0px; font-family:Lucida Grande, sans-serif; font-size:14px; font-style:regular; color:#666666; text-align:center;"><span style="text-decoration: line-through">MRP</span> | <span style="text-decoration: line-through">Regular Price</span> | <span class="special">Special Price</span><br>
                <span style="text-decoration: line-through"><img style="height:11px" src="http://static0.saholic.com/images/rupee-icon-6427.png" alt="rupees"><span class="mrp">5990.0</span></span> | <span style="text-decoration: line-through"><img style="height:11px" src="http://static0.saholic.com/images/rupee-icon-6427.png" alt="rupees"><span class="regular">4499.0</span></span> | <img style="height:11px" src="http://static0.saholic.com/images/rupee-icon-6427.png" alt="rupees"> <span class="specialprice">3960.0</span><br>
                Use Coupon: <b><span class="coupon">saholicdeals</span></b></p><img class="image_url" style="padding: 8px 0px 0px 124px;" src="http://static2.saholic.com/images/media/1003895/plantronics-bluetooth-headset-discovery-975-icon-1335426054000.jpg" alt="headphones"></a>
        </div>
</div>

<div id="push"></div>
<div class="container">
        <div class="row">
                <div class="span5">
                <?php if(!empty($products)):?>  
        <p class="text-info">Private Deal Products</p>  
                <?php $items = array();?>
                        <ul id="draggables" class="unstyled">
                        <?php foreach ($products as $key => $value):?>
                        <?php foreach ($value['itemPojos'] as $key => $item) {
                                if(isset($item['dealPojo'])){
                                        $dealPrice = $item['dealPojo']['dealPrice'];
                                        break;
                                }
                        }
                        ?>
                        <?php $items[$value['id']] = array('title'=>$value['title'],'image_url'=>$value['image_url'],'url'=>$value['url'],'mrp'=>$value['mrp'],'price'=>$value['price'],'dealprice'=>$dealPrice);?>
                                <li data-id="<?php echo $value['id'];?>"><?php echo $value['title'];?></li>
                        <?php endforeach;?>
                        </ul>
                <?php endif;?>
                </div>
                <div class="span6">
            <p class="text-info">Newsletter Products (drag & drop here)</p>
                        <ul class="droppable new unstyled"></ul>
                </div>
        </div>
    <div class="row">
        <div class="span4 offset6">
            <button class="btn btn-primary" id="previewbutton">Preview Newsletter</button>
        </div>
    </div>
    <div class="row" id="preview" style="display:none;">        
            <div id="header" style="width: 652px;height: 72px;border-width: 1px 0px 1px 1px;border-color: #eeeeee;border-style: solid;padding: 0;margin: 0;">
                <div style="width: 142px; height: 72px; float: left; background-color: white; padding: 0px; margin: 0px;">
                    <a href="http://www.saholic.com/" style="text-decoration: none;color: black;padding: 0;margin: 0;">
                        <div style="padding: 0;margin: 0;">
                            <img alt="saholic" src="http://saholic.com/images/campaignImages/1403776422559.png" style="padding: 5px 0px 0px 5px; margin: 0px;">

                            <span style="display:block;font-family: calibri; padding: 5px 0px 0px; margin: 0px; text-align: center; font-size: 11px;">A Spice Group Venture</span>
                        </div>
                    </a>
                </div>

                <div style="width: 504px; height: 72px; float: right; background-color: white; border-width: 0px 1px 1px; border-color: rgb(238, 238, 238); border-style: solid; padding: 0px; margin: 0px;">
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
                        <a href="http://www.saholic.com/mobile-phone/10006" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                            <div style="padding: 0;margin: 0;">
                                <img alt="mobiles" src="http://saholic.com/images/campaignImages/1403778403798.png" style="padding: 10px 0px 0px 30px; margin: 0px;">

                                <span style="display:block;font-size: 12px; font-family: calibri; padding: 4px 0px 12px; margin: 0px; text-align: center;">
                                    Mobiles
                                </span>
                            </div>
                        </a>
                    </div>

                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
                        <a href="http://www.saholic.com/all-laptops/10050" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                        <div style="padding: 0;margin: 0;">
                            <img alt="laptops" src="http://saholic.com/images/campaignImages/1403784107526.png" style="padding: 16px 0px 0px 17px; margin: 0px;">

                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
                                Laptops
                            </span>
                        </div></a>
                    </div>

                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
                        <a href="http://www.saholic.com/all-tablets/10010" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                        <div style="padding: 0;margin: 0;">
                            <img alt="Tablets" src="http://saholic.com/images/campaignImages/1403784157306.png" style="padding: 10px 0px 0px 29px; margin: 0px;">

                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
                                Tablets
                            </span>
                        </div></a>
                    </div>

                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
                        <a href="http://www.saholic.com/all-cameras/11001" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                        <div style="padding: 0;margin: 0;">
                            <img alt="cameras" src="http://saholic.com/images/campaignImages/1403784207826.png" style="padding: 14px 0px 0px 23px;margin: 0;">

                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
                                Cameras
                            </span>
                        </div></a>
                    </div>

                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
                        <a href="http://www.saholic.com/all-mobile-accessories/10011" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                        <div style="padding: 0;margin: 0;">
                            <img alt="headphone" src="http://saholic.com/images/campaignImages/1403784225641.png" style="padding: 9px 0px 0px 29px; margin: 0px;">

                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
                                Accessories
                            </span>
                        </div></a>
                    </div>

                    <div style="height: 72px; border-width: 0px; border-color: rgb(238, 238, 238); border-style: solid; float: left; padding: 0px; margin: 0px; width: 75px;">
                        <a href="http://www.saholic.com/recharge" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
                        <div style="padding: 0;margin: 0;">
                            <img alt="rupee" src="http://saholic.com/images/campaignImages/1403784244629.png" style="padding: 13px 0px 0px 27px;margin: 0;">

                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
                                Recharge
                            </span>
                        </div></a>
                    </div>
                </div>
            </div>
            <div style="width:652px; height:216px; background-color: #71b3f5;" id="banner">
                <div style="width:652px; height:216px; border-width:0px 1px 1px 1px; border-color:#eeeeee; border-style: solid; float:left;text-align:center">
                    <div id="text" style="padding-top:40px;">
                        <p style="font-family:Lucida Grande, sans-serif; font-style:regular; font-size:30px; color: black;">Exclusive offers from Saholic</p>
                        <p style="font-family: Lucida Grande,sans-serif; color: black; text-align: center; font-size: 18px;">Unbeatable prices on popular gadgets only for our royal customer</p>
                        <div id="test">
                            <p style="font-family:calibri; font-size:20px; font-style:regular; color:#0088cc;">
                                <a style="text-decoration:none; color:white;" target="_blank" href="http://www.saholic.com/private-deals/1">Browse More Special Deals &gt;&gt;</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>        
            <div id="partition" style="width:651px; float:left; background-color: white;margin:0 auto; border-left:1px solid #eeeeee; border-right:1px solid #eeeeee;"></div>
    </div>

    <div id="newsletteractions" style="display:none;margin-top:15px;">
        <h3>Send Newsletter</h3>
        <?php echo $this->Form->create('Newsletter',array('class'=>'form-inline','action'=>'addnewsletter','id'=>'addnewsletterform'));?>
        <?php if(isset($lists)):?>   
        <lable for="subject">Subject</label>
        <input type="text" name="subject" id="subject"/>
        <label for="list">Choose List</label>
        <select name="list" id="list">
            <?php if(!empty($lists['DATASET']['RECORD'])):?>
                <?php foreach ($lists['DATASET']['RECORD'] as $key => $list):?>            
                    <?php if($list['DATA'][5]['@']=='active'):?>
                    <?php $data = $list['DATA'];?>
                        <option value="<?php echo $data[0]['@id'];?>"><?php echo $data[0]['@'];?></option>  
                    <?php endif;?>
                <?php endforeach;?>
            <?php endif;?>
        </select>
        <input type="hidden" value="" id="htmlvalue" name="html"/>
        <input type="hidden" value="" id="textvalue" name="text"/>
        <button type="button" class="btn btn-small" id="addnewsletter">Submit</button>
        <?php echo $this->Form->end();?>
        <?php endif;?>    
        <hr>
        <div id="accordion" class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">HTML Version</a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <p>
                            <div id="iframecontainer" style="display:none">
                                <iframe style="width:670px; height:500px;" id="iframe"></iframe>
                            </div>
                        </p>
                    </div>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Text Version</a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                    <div class="panel-body">
                        <p>
                            <div id="textcontainer" style="display:none">
                                <textarea id="textversion" rows="15" cols="80" class="span12">Exclusive offers from Saholic

Unbeatable prices on popular gadgets only for our royal customer

Browse More Special Deals >> http://www.saholic.com/private-deals/1

</textarea>        
                            </div> 
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
       
<script>
var $draggingParent = null;

$(function() {
    $('#addnewsletter').click(function(){
        if($('#subject').val().length==0){
            alert('Please enter subject');
            return false;
        }
        $(this).attr('disabled',true);
        $('#textvalue').val($('#textversion').html());
        $('#htmlvalue').val(header+$('#preview').html()+footer+"</body></html>");
        $.post($('#addnewsletterform').attr('action'),$('#addnewsletterform').serialize(),function(data){
            response = eval('('+data+')');
            alert(response.message);
            $('#addnewsletter').attr('disabled',false);
        });
    });

    function generateTemplate(data,i){
        $('#template').find('a.producturl',0).attr('href',data.url);
        $('#template').find('h1.productname',0).html(data.title);
        $('#template').find('span.mrp',0).html(data.mrp);
        $('#template').find('span.regular',0).html(data.price);
        $('#template').find('span.specialprice',1).html(data.dealprice);
        $('#image_url').find('img.image_url',0).attr('src',data.image_url);
        if(i%2==0){
            $('#template').find('div.box',0).css({'border-width':'0px 1px 1px 0px','width':'325px'});
        }else{
            $('#template').find('div.box',0).css({'border-width':'0px 0px 1px 1px','width':'323px'});
        }
        return $('#template').html();
    }

    function generateText(data) {
        var text = data.title+' ( '+data.url+' ) '+'\nmrp : '+data.mrp+'\tsite price : '+data.price+'\tyour price : '+data.dealprice+'\n\n';
        return text;
    }

    $('#previewbutton').click(function(){
        $('#preview > #partition').html('');
        var i = 0;     
        var text = '';
        var html = '';   
        $('.droppable > li').each(function(){
            data = eval('('+products+')');
            text = generateText(data[$(this).data('id')]);
            var html = generateTemplate(data[$(this).data('id')],i++);
            $('#preview > #partition').append(html);
            $('#textversion').append(text);
        });        
        var $frame = $('#iframe');
        setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            var html = $('#preview').html()+footer ;
            $body.html(html);
        }, 1 );
        $('#iframecontainer').show();
        $('#textcontainer').show();
        $('#newsletteractions').show();
        // })
    });

    initDraggable($('#draggables > li'));
       
        
    $("#draggables").droppable({    
    drop: function(ev, ui) {
        if($draggingParent[0] === $(ui.helper).parent()[0])
        {
            //dragged from draggables to draggables
            $(ui.draggable).removeClass('dragging');
        }
        else
        {            
            if(ui.draggable.parent())
            var $clone = $(ui.draggable).clone();
            $(ui.draggable).remove();
            $clone.removeClass();
            $clone.removeAttr('style');
            initDraggable($clone);
            $(this).append($clone);        
        }
    }
});
    
    initDroppableSort($('.droppable'));
    
});

function initDraggable($element)
{
    $($element).draggable({
        connectToSortable: '.droppable',     
        revert: function(droppableObj)
        {
            if(droppableObj === false)
             {                  
                $(this).removeClass('dragging');
                return true;
             }
             else
             {              
                return false;
             }
        },
        helper: 'clone',
        start: function(e, ui)
        {           
            $draggingParent = $(this).parent();
           $(this).addClass('dragging');
        }
    });
}

function initDroppableSort($element) {
    
    $element.sortable({
        items: 'li',
        connectWith: ".droppable,#draggables",
        revert: true,
        stop: function(event, ui) {
                // console.log($(ui.item).data('id'));
                $(ui.item).removeClass('dragging');
            $('.dragging').remove();
            if($(this).hasClass('new')) {
                var clone = $(this).clone();                
                clone.empty();
                $(this).after(clone);
                $(this).removeClass('new');
                initDroppableSort( clone );
            }            
            cleanUp();
        }
    });
    
}

function cleanUp() {    
    $('.droppable').not('.new').each(function() {
                if($(this).find('li').length === 0) {
                        $(this).remove();
                }
        });    
}
var products= '<?php echo json_encode($items);?>';
// console.log(products);
var header = '<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>Private Deal Newsletter</title></head><body style="background-color: #f1f1f1;margin: 0px; padding: 0px;"><div id="main" style="width:652px; min-height:200px; margin:auto;">';
var footer = '<div id="people-love"><img alt="love" src="http://50.116.3.101/images/campaignImages/why-people.gif"></div><div style="width:652px;" id="footer"><div style="width:652px;background:url(http://50.116.3.101/images/campaignImages/follow-us.gif) no-repeat" class="footermap"><a href="https://www.facebook.com/mysaholic"><div style="float:left;display:inline-block;margin:5px 0 0 542px;width:20px;height:20px;text-indent:-1000px;opacity:0">&nbsp;</div></a><a href="https://twitter.com/saholic"><div style="display:inline-block;margin:5px 0 0 4px;width:20px;height:20px;text-indent:-1000px;opacity:0">&nbsp;</div></a><a href="https://plus.google.com/103470847399313545286/about"><div style="display:inline-block;margin:5px 0 0 3px;width:20px;height:20px;text-indent:-1000px;opacity:0">&nbsp;</div></a><a href="https://www.youtube.com/user/Vrinda2020"><div style="display:inline-block;margin:5px 0 0 2px;width:20px;height:20px;text-indent:-1000px;opacity:0">&nbsp;</div></a></div></div></div></div>';
</script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>