Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
12345 anikendra 1
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
2
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
3
<style>
4
#draggables{
5
    height: 400px;  
6
    overflow: auto;
7
}
8
#draggables, .droppable {   
9
    border: 1px solid;
10
    padding: 10px;
11
}
12
#draggables li{
13
    border: 1px solid #ccc;
14
    padding: 1px;
15
    margin: 1px;
16
}
17
.droppable{
18
    max-height: 400px;
19
    overflow: auto;
20
}
21
</style>
22
 
23
<div id="template" style="display:none;">
24
	<div style="border-color:#eeeeee; border-style:solid;border-width:0px 1px 1px 0px;float:left;width:325px;margin:0px;padding:0px;" class="box">
25
		<a class="producturl" target="_blank" style="text-decoration: none; color:#0088cc;" href="http://saholic.com/mobile-accessories/plantronics-bluetooth-headset-discovery-975-1003895">
26
		<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>
27
		<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>
28
		<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>
29
		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>
30
	</div>
31
</div>
32
 
33
<div id="push"></div>
34
<div class="container">
35
	<div class="row">
36
		<div class="span5">
37
		<?php if(!empty($products)):?>	
38
        <p class="text-info">Private Deal Products</p>	
39
		<?php $items = array();?>
40
			<ul id="draggables" class="unstyled">
41
			<?php foreach ($products as $key => $value):?>
42
			<?php foreach ($value['itemPojos'] as $key => $item) {
43
				if(isset($item['dealPojo'])){
44
					$dealPrice = $item['dealPojo']['dealPrice'];
45
					break;
46
				}
47
			}
48
			?>
49
			<?php $items[$value['id']] = array('title'=>$value['title'],'image_url'=>$value['image_url'],'url'=>$value['url'],'mrp'=>$value['mrp'],'price'=>$value['price'],'dealprice'=>$dealPrice);?>
50
				<li data-id="<?php echo $value['id'];?>"><?php echo $value['title'];?></li>
51
			<?php endforeach;?>
52
			</ul>
53
		<?php endif;?>
54
		</div>
55
		<div class="span6">
56
            <p class="text-info">Newsletter Products (drag & drop here)</p>
57
			<ul class="droppable new unstyled"></ul>
58
		</div>
59
	</div>
60
    <div class="row">
61
        <div class="span4 offset6">
62
            <button class="btn btn-primary" id="previewbutton">Preview Newsletter</button>
63
        </div>
64
    </div>
65
    <div class="row" id="preview" style="display:none;">        
66
            <div id="header" style="width: 652px;height: 72px;border-width: 1px 0px 1px 1px;border-color: #eeeeee;border-style: solid;padding: 0;margin: 0;">
67
                <div style="width: 142px; height: 72px; float: left; background-color: white; padding: 0px; margin: 0px;">
68
                    <a href="http://www.saholic.com/" style="text-decoration: none;color: black;padding: 0;margin: 0;">
69
                        <div style="padding: 0;margin: 0;">
70
                            <img alt="saholic" src="http://saholic.com/images/campaignImages/1403776422559.png" style="padding: 5px 0px 0px 5px; margin: 0px;">
71
 
72
                            <span style="display:block;font-family: calibri; padding: 5px 0px 0px; margin: 0px; text-align: center; font-size: 11px;">A Spice Group Venture</span>
73
                        </div>
74
                    </a>
75
                </div>
76
 
77
                <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;">
78
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
79
                        <a href="http://www.saholic.com/mobile-phone/10006" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
80
                            <div style="padding: 0;margin: 0;">
81
                                <img alt="mobiles" src="http://saholic.com/images/campaignImages/1403778403798.png" style="padding: 10px 0px 0px 30px; margin: 0px;">
82
 
83
                                <span style="display:block;font-size: 12px; font-family: calibri; padding: 4px 0px 12px; margin: 0px; text-align: center;">
84
                                    Mobiles
85
                                </span>
86
                            </div>
87
                        </a>
88
                    </div>
89
 
90
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
91
                        <a href="http://www.saholic.com/all-laptops/10050" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
92
                        <div style="padding: 0;margin: 0;">
93
                            <img alt="laptops" src="http://saholic.com/images/campaignImages/1403784107526.png" style="padding: 16px 0px 0px 17px; margin: 0px;">
94
 
95
                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
96
                                Laptops
97
                            </span>
98
                        </div></a>
99
                    </div>
100
 
101
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
102
                        <a href="http://www.saholic.com/all-tablets/10010" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
103
                        <div style="padding: 0;margin: 0;">
104
                            <img alt="Tablets" src="http://saholic.com/images/campaignImages/1403784157306.png" style="padding: 10px 0px 0px 29px; margin: 0px;">
105
 
106
                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
107
                                Tablets
108
                            </span>
109
                        </div></a>
110
                    </div>
111
 
112
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
113
                        <a href="http://www.saholic.com/all-cameras/11001" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
114
                        <div style="padding: 0;margin: 0;">
115
                            <img alt="cameras" src="http://saholic.com/images/campaignImages/1403784207826.png" style="padding: 14px 0px 0px 23px;margin: 0;">
116
 
117
                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
118
                                Cameras
119
                            </span>
120
                        </div></a>
121
                    </div>
122
 
123
                    <div style="width: 84px;height: 72px;border-width: 0px 1px 0px 0px;border-color: #eeeeee;border-style: solid;float: left;padding: 0;margin: 0;">
124
                        <a href="http://www.saholic.com/all-mobile-accessories/10011" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
125
                        <div style="padding: 0;margin: 0;">
126
                            <img alt="headphone" src="http://saholic.com/images/campaignImages/1403784225641.png" style="padding: 9px 0px 0px 29px; margin: 0px;">
127
 
128
                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
129
                                Accessories
130
                            </span>
131
                        </div></a>
132
                    </div>
133
 
134
                    <div style="height: 72px; border-width: 0px; border-color: rgb(238, 238, 238); border-style: solid; float: left; padding: 0px; margin: 0px; width: 75px;">
135
                        <a href="http://www.saholic.com/recharge" style="text-decoration: none;color: black;padding: 0;margin: 0;" target="_blank">
136
                        <div style="padding: 0;margin: 0;">
137
                            <img alt="rupee" src="http://saholic.com/images/campaignImages/1403784244629.png" style="padding: 13px 0px 0px 27px;margin: 0;">
138
 
139
                            <span style="display:block;font-size: 12px; font-family: calibri; padding: 6px 0px 12px; margin: 0px; text-align: center;">
140
                                Recharge
141
                            </span>
142
                        </div></a>
143
                    </div>
144
                </div>
145
            </div>
146
            <div style="width:652px; height:216px; background-color: #71b3f5;" id="banner">
147
                <div style="width:652px; height:216px; border-width:0px 1px 1px 1px; border-color:#eeeeee; border-style: solid; float:left;text-align:center">
148
                    <div id="text" style="padding-top:40px;">
149
                        <p style="font-family:Lucida Grande, sans-serif; font-style:regular; font-size:30px; color: black;">Exclusive offers from Saholic</p>
150
                        <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>
151
                        <div id="test">
152
                            <p style="font-family:calibri; font-size:20px; font-style:regular; color:#0088cc;">
153
                                <a style="text-decoration:none; color:white;" target="_blank" href="http://www.saholic.com/private-deals/1">Browse More Special Deals &gt;&gt;</a>
154
                            </p>
155
                        </div>
156
                    </div>
157
                </div>
158
            </div>        
159
            <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>
160
    </div>
161
 
162
    <div id="newsletteractions" style="display:none;margin-top:15px;">
163
        <h3>Send Newsletter</h3>
164
        <?php echo $this->Form->create('Newsletter',array('class'=>'form-inline','action'=>'addnewsletter','id'=>'addnewsletterform'));?>
165
        <?php if(isset($lists)):?>   
166
        <lable for="subject">Subject</label>
167
        <input type="text" name="subject" id="subject"/>
168
        <label for="list">Choose List</label>
169
        <select name="list" id="list">
170
            <?php if(!empty($lists['DATASET']['RECORD'])):?>
171
                <?php foreach ($lists['DATASET']['RECORD'] as $key => $list):?>            
172
                    <?php if($list['DATA'][5]['@']=='active'):?>
173
                    <?php $data = $list['DATA'];?>
174
                        <option value="<?php echo $data[0]['@id'];?>"><?php echo $data[0]['@'];?></option>  
175
                    <?php endif;?>
176
                <?php endforeach;?>
177
            <?php endif;?>
178
        </select>
179
        <input type="hidden" value="" id="htmlvalue" name="html"/>
180
        <input type="hidden" value="" id="textvalue" name="text"/>
181
        <button type="button" class="btn btn-small" id="addnewsletter">Submit</button>
182
        <?php echo $this->Form->end();?>
183
        <?php endif;?>    
184
        <hr>
185
        <div id="accordion" class="panel-group">
186
            <div class="panel panel-default">
187
                <div class="panel-heading">
188
                    <h4 class="panel-title">
189
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">HTML Version</a>
190
                    </h4>
191
                </div>
192
                <div id="collapseOne" class="panel-collapse collapse in">
193
                    <div class="panel-body">
194
                        <p>
195
                            <div id="iframecontainer" style="display:none">
196
                                <iframe style="width:670px; height:500px;" id="iframe"></iframe>
197
                            </div>
198
                        </p>
199
                    </div>
200
                </div>
201
            </div>
202
 
203
            <div class="panel panel-default">
204
                <div class="panel-heading">
205
                    <h4 class="panel-title">
206
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Text Version</a>
207
                    </h4>
208
                </div>
209
                <div id="collapseTwo" class="panel-collapse collapse">
210
                    <div class="panel-body">
211
                        <p>
212
                            <div id="textcontainer" style="display:none">
213
                                <textarea id="textversion" rows="15" cols="80" class="span12">Exclusive offers from Saholic
214
 
215
Unbeatable prices on popular gadgets only for our royal customer
216
 
217
Browse More Special Deals >> http://www.saholic.com/private-deals/1
218
 
219
</textarea>        
220
                            </div> 
221
                        </p>
222
                    </div>
223
                </div>
224
            </div>
225
        </div>
226
    </div>
227
 
228
<script>
229
var $draggingParent = null;
230
 
231
$(function() {
232
    $('#addnewsletter').click(function(){
233
        if($('#subject').val().length==0){
234
            alert('Please enter subject');
235
            return false;
236
        }
237
        $(this).attr('disabled',true);
238
        $('#textvalue').val($('#textversion').html());
239
        $('#htmlvalue').val(header+$('#preview').html()+footer+"</body></html>");
240
        $.post($('#addnewsletterform').attr('action'),$('#addnewsletterform').serialize(),function(data){
241
            response = eval('('+data+')');
242
            alert(response.message);
243
            $('#addnewsletter').attr('disabled',false);
244
        });
245
    });
246
 
247
    function generateTemplate(data,i){
248
        $('#template').find('a.producturl',0).attr('href',data.url);
249
        $('#template').find('h1.productname',0).html(data.title);
250
        $('#template').find('span.mrp',0).html(data.mrp);
251
        $('#template').find('span.regular',0).html(data.price);
252
        $('#template').find('span.specialprice',1).html(data.dealprice);
253
        $('#image_url').find('img.image_url',0).attr('src',data.image_url);
254
        if(i%2==0){
255
            $('#template').find('div.box',0).css({'border-width':'0px 1px 1px 0px','width':'325px'});
256
        }else{
257
            $('#template').find('div.box',0).css({'border-width':'0px 0px 1px 1px','width':'323px'});
258
        }
259
        return $('#template').html();
260
    }
261
 
262
    function generateText(data) {
263
        var text = data.title+' ( '+data.url+' ) '+'\nmrp : '+data.mrp+'\tsite price : '+data.price+'\tyour price : '+data.dealprice+'\n\n';
264
        return text;
265
    }
266
 
267
    $('#previewbutton').click(function(){
268
        $('#preview > #partition').html('');
269
        var i = 0;     
270
        var text = '';
271
        var html = '';   
272
        $('.droppable > li').each(function(){
273
            data = eval('('+products+')');
274
            text = generateText(data[$(this).data('id')]);
275
            var html = generateTemplate(data[$(this).data('id')],i++);
276
            $('#preview > #partition').append(html);
277
            $('#textversion').append(text);
278
        });        
279
        var $frame = $('#iframe');
280
        setTimeout( function() {
281
            var doc = $frame[0].contentWindow.document;
282
            var $body = $('body',doc);
283
            var html = $('#preview').html()+footer ;
284
            $body.html(html);
285
        }, 1 );
286
        $('#iframecontainer').show();
287
        $('#textcontainer').show();
288
        $('#newsletteractions').show();
289
        // })
290
    });
291
 
292
    initDraggable($('#draggables > li'));
293
 
294
 
295
    $("#draggables").droppable({    
296
    drop: function(ev, ui) {
297
        if($draggingParent[0] === $(ui.helper).parent()[0])
298
        {
299
            //dragged from draggables to draggables
300
            $(ui.draggable).removeClass('dragging');
301
        }
302
        else
303
        {            
304
            if(ui.draggable.parent())
305
            var $clone = $(ui.draggable).clone();
306
            $(ui.draggable).remove();
307
            $clone.removeClass();
308
            $clone.removeAttr('style');
309
            initDraggable($clone);
310
            $(this).append($clone);        
311
        }
312
    }
313
});
314
 
315
    initDroppableSort($('.droppable'));
316
 
317
});
318
 
319
function initDraggable($element)
320
{
321
    $($element).draggable({
322
        connectToSortable: '.droppable',     
323
        revert: function(droppableObj)
324
        {
325
            if(droppableObj === false)
326
             {                 	
327
                $(this).removeClass('dragging');
328
                return true;
329
             }
330
             else
331
             {              
332
                return false;
333
             }
334
        },
335
        helper: 'clone',
336
        start: function(e, ui)
337
        {           
338
            $draggingParent = $(this).parent();
339
           $(this).addClass('dragging');
340
        }
341
    });
342
}
343
 
344
function initDroppableSort($element) {
345
 
346
    $element.sortable({
347
       	items: 'li',
348
        connectWith: ".droppable,#draggables",
349
        revert: true,
350
       	stop: function(event, ui) {
351
       		// console.log($(ui.item).data('id'));
352
           	$(ui.item).removeClass('dragging');
353
            $('.dragging').remove();
354
            if($(this).hasClass('new')) {
355
                var clone = $(this).clone();                
356
                clone.empty();
357
                $(this).after(clone);
358
                $(this).removeClass('new');
359
                initDroppableSort( clone );
360
            }            
361
            cleanUp();
362
        }
363
    });
364
 
365
}
366
 
367
function cleanUp() {    
368
    $('.droppable').not('.new').each(function() {
369
		if($(this).find('li').length === 0) {
370
			$(this).remove();
371
		}
372
	});    
373
}
374
var products= '<?php echo json_encode($items);?>';
375
// console.log(products);
376
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;">';
377
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>';
378
</script>
379
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
380
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>