https://matras05.ru/js/pickpoint_popup.js

1
2var PICKPOINTS_CDEK = 1;
3var PICKPOINTS_BOXBERRY = 2;
4var PICKPOINTS_PICKPOINTS = 4;
5
6$(function()
7{
8    if(typeof(dostZones) === 'undefined')
9    {
10        $.get('/shop/dost.json', function(data) 
11        {
12            dostZones = data;
13        });
14    }
15})
16
17function PickpointMap(selector, opts) 
18{
19    var _ = this;
20    
21    this.selector = selector;
22    
23    this.geocode_cache = {};
24    
25    this.opts = opts || {};
26    
27    function on_cluster_pp_click(id)
28    {
29        var item = _.objectManager.objects.getById(id);
30        
31        if(item)
32        {
33            _.selectedPoint = item;
34            _.open_baloon(item);
35        }
36    }
37    
38    window.on_cluster_pp_click = on_cluster_pp_click;
39    
40    this.is_ready = false;
41    this.is_loading = false;
42    
43    this.ready_clb = [];
44    
45    this.old_address = null;
46    this.init_address = null;
47    
48    this.map_center = [55.76, 37.64];
49    
50    this.is_pp_loaded = false;
51    this.is_pp_loading = false;
52    this.pp_ready_clb = [];
53    
54    this.currentPoint = null;
55
56    //{% if data.type %}<div class=lo-point-type-name><b>{{ data.type }}</b></div>{% endif %}
57
58    this.templates = {'#lo-ymaps-point-template': '<div class=lo-point> \
59	{% if props.vend_arr %} \
60		<ul style="margin: 0; padding: 0 0 0 20px;"> \
61		{% for vend in props.vend_arr %} \
62			<li>{{ vend.name }}</li> \
63		{% endfor %} \
64		</ul> \
65	{% else %} \
66		{% if data.type %}<div class=lo-point-type-name>{{ data.type }}</div>{% endif %} \
67	{% endif %} \
68	{% if logo %} \
69        <div class="popup-point-logo"> \
70            <img src="{{ logo }}"/> \
71        </div> \
72    {% endif %} \
73	{% if props.address %}<div class=lo-point-address><b>Àäðåñ:</b> {{ props.address | raw  }}</div>{% endif %} \
74	{% if props.ws %}  \

75		<div><b>Ðàáî÷åå âðåìÿ:</b> {{ props.ws | raw }}</div> \
76	{% endif %} \
77	{% if props.shop_url %}<a href="{{ props.shop_url }}">Ñõåìà ïðîåçäà</a>{% endif %} \
78	{% if props.desc && !lightweight %}{{ props.desc }}{% endif %} \
79	{% if props.has_img %}<a href="#" class=lo-point-scheme-btn onclick="return show_pickpoint_scheme({{ props.id }})">Ñõåìà ïðîåçäà</a>{% endif %} \
80    {% if props.vend_arr && !lightweight %} \
81        <div><b>Âíèìàíèå: ýòî íå ìàãàçèí, çäåñü íåëüçÿ ïðèîáðåñòè òîâàð áåç ïðåäâàðèòåëüíîãî çàêàçà íà ñàéòå.</b></div> \
82    {% endif %} \
83    {% if from_listorder %}\
84        <div class="pickpoint-lo-select-btn" onclick="listorder_select_pp({{ props.id }}, this); return 0">Çàáåðó îòñþäà</div> \
85    {% else if show_order_btn %}\
86        <div class="pickpoint-order-btn" onclick="pp_listorder({{ props.id }}, this); return 0">Çàêàçàòü</div> \
87    {% endif %} \
88    </div>'
89    };
90};
91
92function pp_listorder(point_id, sender)
93{
94    const form = $('#addtocart-form, .vp-main-form');
95
96    if($(sender).data('submitting'))
97        return;
98
99    $(sender).addClass('submitting').html('<img src="/i/listcart_loader_t.svg"/>')
100
101    $(sender).data('submitting', true);
102
103    form.append(`<input type="hidden" name="map_point_id" value="${point_id}"/>`);
104
105    form.attr('action', `${form.attr('action')}#map_point_${point_id}`)
106
107    form.get(0).submit();
108}
109
110PickpointMap.prototype.setSelectedPoint = function(item)
111{
112    var pp = $.cookie('pp');
113    pp = pp ? JSON.parse(pp) : {};
114    
115    pp[item.properties.service] = item.id;
116    
117    $.cookie('pp', JSON.stringify(pp), {expires: 30, path: '/'});
118};
119
120PickpointMap.prototype.select_pp = function(id, zoom)
121{
122    var item = this.objectManager.objects.getById(id);
123    
124    if(item)
125    {
126        this.open_baloon(item, zoom);
127    }
128};
129
130PickpointMap.prototype.setServiceFilter = function(types, no_postamat)
131{
132    var _ = this;
133    
134    if(_.objectManager)
135    {
136        _.objectManager.setFilter(function(point) 
137        {
138            if(no_postamat && point.properties.postamat)
139                return false;
140
141            return types.length === 0 ? true : (0 <= types.indexOf(point.properties.type));    
142        });
143    }
144};
145
146PickpointMap.prototype.setIdServiceFilter = function(types, no_postamat)
147{
148    var _ = this;
149
150    if(_.objectManager)
151    {
152        _.objectManager.setFilter(function(point)
153        {
154            if(no_postamat && point.properties.postamat)
155                return false;
156
157            return types.length === 0 ? true : (0 <= types.indexOf(point.properties.ids));
158        });
159    }
160};
161
162PickpointMap.prototype.setSupplierSkladFilter = function() 
163{
164    var _ = this;
165    
166    if(_.objectManager)
167    {
168        _.objectManager.setFilter(function(point) 
169        {
170            return point.properties.vend_arr && point.properties.vend_arr.length > 0;    
171        });
172    }
173}; 
174
175PickpointMap.prototype.renderYaMapTemplate = function(id, data)
176{
177    var template = window[id];
178
179    if(!template)
180    {
181        var template = new ymaps.Template(this.templates[id]);
182        window[id] = template;
183    }
184    
185    var res = template.build(new ymaps.data.Manager(data));
186
187    return res.text;
188};
189
190PickpointMap.prototype.fitToViewport = function()
191{
192    var _ = this;
193    
194    _.on_ready(function() 
195    {
196        _.map.container.fitToViewport();
197    });
198};
199
200PickpointMap.prototype.activate = function(done_callback)
201{
202    var _ = this;
203    
204    if(done_callback)
205    {
206        var old_clb = done_callback;
207        
208        done_callback = function()
209        {
210            setTimeout(function() { old_clb.call(_); }, 150);
211        };
212    }
213    
214    if(_.is_pp_loaded)
215    {
216        if(done_callback)
217            done_callback.call(_);
218
219        return;
220    }
221    
222    if(_.is_pp_loading)
223        return;
224    
225    _.is_pp_loading = true;
226    
227    if(done_callback)
228        _.pp_ready_clb.push(done_callback);
229    
230    function load_pp_done()
231    {
232        _.is_pp_loaded = true;
233        _.is_pp_loading = false;
234
235        for(var i in _.pp_ready_clb)
236            _.pp_ready_clb[i].call(_);
237        
238        _.pp_ready_clb = [];
239    }
240    
241    _.on_ready(function() {});
242
243    var data = {'get': 'pickpoints'};
244
245    function cached_request(request, callback)
246    {
247        $.ajax({
248            url: '/shop/listorder.php',
249            data: request
250        }).done(function (res)
251        {
252            callback(res);
253        });
254    }
255
256    function send_requests(requests)
257    {
258        var request_count = 0;
259
260        for(var i = 0; i < requests.length; i++)
261        {
262            cached_request(requests[i], function (res)
263            {
264                _.on_ready(function ()
265                {
266                    _.objectManager.add(res);
267
268                    if(++request_count == requests.length)
269                        load_pp_done();
270                });
271            });
272        }
273    }
274
275    if(_.opts.idsupplier)
276    {
277        send_requests([data, $.extend({idsupplier: _.opts.idsupplier}, data)]);
278    }
279    else
280    {
281        send_requests([data]);
282    }
283};
284
285_format_price = function(data)
286{    
287    var res = [];
288    data = _prepare_price(data);
289    
290    for(var key in data)
291    {
292       var price = data[key];
293       
294       if(price.from == 0 && price.to == 0)
295           res.push(_print_price(price.price));
296       
297       else if(price.from == 0)
298           res.push("çàêàç äî " + price.to + "ð. - " + _print_price(price.price));
299       
300       else if(price.to == 0)
301           res.push("áîëåå " + price.from + "ð. - " + _print_price(price.price));
302       
303       else 
304           res.push("îò " + price.from + " äî " + price.to + "ð. - " + _print_price(price.price));
305    }
306    
307    return res.join(', ');
308};
309
310_prepare_price = function(data)
311{
312    var res = new Array();
313    
314    data = data.slice(0);
315    var item = data.shift();
316    var resData = new Array();
317    
318    while(item)
319    {
320       var next = data.shift();
321       
322       if(typeof next === 'undefined')
323       {
324           resData.push(item);
325           break;
326       }
327       
328       if(item.price == next.price)
329       {
330           item.to = next.to;
331       }
332       else
333       {
334           resData.push(item);
335           item = next;
336       }
337    }
338    
339    return resData;
340};
341
342_print_price = function(price)
343{
344    if(price == 0)
345        return "áåñïëàòíî";
346
347    return price + "<i class=rub></i>";
348};
349
350PickpointMap.prototype.getLogoByService = function(service)
351{
352    let logo = '';
353    switch(service)
354    {
355        case 'yandex':
356            logo = '//spim.ru/i4/pickpoint/popup_logo/yandex.svg';
357            break;
358        case 'cdek':
359            logo = '//spim.ru/i4/pickpoint/popup_logo/cdek.svg';
360            break;
361        case 'dellin':
362            logo = '//spim.ru/i4/pickpoint/popup_logo/dellin.svg';
363            break;
364        case 'bb':
365            logo = '//spim.ru/i4/pickpoint/popup_logo/boxberry.svg';
366            break;
367        case 'pek':
368            logo = '//spim.ru/i4/pickpoint/popup_logo/pek.svg';
369            break;
370        case 'pickpoint':
371            logo = '//spim.ru/i4/pickpoint/popup_logo/pickpoint.svg';
372            break;
373        case 'baikal':
374            logo = '//spim.ru/i4/pickpoint/popup_logo/baikal.svg';
375            break;
376        case 'dpd':
377            logo = '//spim.ru/i4/pickpoint/popup_logo/dpd.svg';
378            break;
379    }
380
381    return logo;
382}
383
384
385_get_point_info = function(props)
386{
387    var fullName;
388    var dostInfo;
389
390    var priceText = '';
391    var dostPrice = 0;
392    
393    var types = 
394    {
395        'yandex':{'pvz': 'Ïóíêò ñàìîâûâîçà ßíäåêñ', 'postamat': 'Ïóíêò âûäà÷è ßíäåêñ'},
396        'cdek':{'pvz': 'Ïóíêò ñàìîâûâîçà ÑÄÝÊ', 'postamat': 'Ïóíêò âûäà÷è ÑÄÝÊ'},

397        'pickpoint':{'pvz': 'Ïóíêò ñàìîâûâîçà Pickpoint', 'postamat': 'Ïîñòàìàò Pickpoint'},
398        'dellin':{'store': 'Ïóíêò ñàìîâûâîçà Äåëîâûå ëèíèè'},
399        'bb':{'pvz': 'Ïóíêò ñàìîâûâîçà Boxberry'},
400        'spim':{'spim': 'Ïóíêò ñàìîâûâîçà Spim.Ru'},
401        'pek':{'store': 'Ïóíêò ñàìîâûâîçà ÏÝÊ'},
402        'dpd':{'store': 'Ïóíêò ñàìîâûâîçà DPD'},
403        'store':{'store': 'Ïóíêò ñàìîâûâîçà'} 
404    };
405    
406    var type = types[props.service][props.type];
407
408    var priceRange = null;
409
410    switch(props.service)
411    {
412        case 'cdek':
413            
414            fullName = type + '. ' + props.name;
415            
416            if((props.zone == null || props.zone == 0 || props.zone == 8) && props.delivery_price)
417            {
418                 dostPrice = _print_price(props.delivery_price);
419                 dostInfo = '<span>' + dostPrice + '</span>';
420
421                 var priceRange = [{'from': 0, 'to': 0, 'price': props.delivery_price}];
422            }
423            else
424            {
425                var prices = ((window.dostZones || {}).zones || {})[props.zone];
426                
427
428                if(prices)
429                {
430                    dostPrice = _format_price(prices.cdek);
431                    dostInfo = '<span>' + dostPrice + '</span>';
432                    priceRange = _prepare_price(prices.cdek);
433                }
434            }
435                        
436            if(props.time)
437                dostInfo = dostInfo ? (dostInfo + ', îò ' + props.time) : ('îò ' + props.time);
438
439            break;
440
441        case 'yandex':
442
443            break;
444
445        case 'pickpoint':
446
447            fullName = props.name.replace('ÏÂÇ', 'ÏÂÇ Pickpoint');
448            fullName = fullName.replace('Ïîñòàìàò', 'Ïîñòàìàò Pickpoint');
449            
450            var prices = ((window.dostZones || {}).zones || {})[props.zone];
451            dostPrice = _format_price(prices.pickpoint);
452            
453            priceRange = _prepare_price(prices.pickpoint);
454                        
455            dostInfo = '<span>' + dostPrice + '</span>';
456
457            if(props.time)
458                dostInfo = dostInfo + ', îò ' + props.time;
459
460            break;
461
462        default:
463            if(props.name)
464                type = props.name;
465    }
466    
467        
468    if(props.supplier)
469        type = type + ' ' + props.supplier;
470    
471    if(props.vend_arr)
472        type = props.vend_arr.length > 1 ? 'Ïóíêò ñàìîâûâîçà ïðîèçâîäèòåëåé:' : 'Ïóíêò ñàìîâûâîçà ïðîèçâîäèòåëÿ:';
473
474    return {'type': type, 'fullName': fullName, 'priceVal': dostPrice, 'dostInfo': dostInfo, priceRange: priceRange};
475};
476
477PickpointMap.prototype.open_baloon = function(item, zoom)
478{
479    var _ = this;
480    
481    _.objectManager.objects.balloon.close();
482    
483    var props = item.properties;
484    var data = _get_point_info(props);
485    
486    data.preset = ymaps.option.presetStorage.get(item.options.preset);
487
488    var res = this.renderYaMapTemplate('#lo-ymaps-point-template', 
489        {props: props, data: data, lightweight: window.__lightweight_pp_popup || 0,
490            logo: this.getLogoByService(props.service), 'show_order_btn': 1,
491                from_listorder: this.opts.from_listorder || null
492        });
493
494    item.properties.balloonContent = res;
495
496    this.objectManager.objects.balloon.open(item.id);
497    
498    var coords = item.geometry.coordinates;
499    
500    if(zoom)
501        setTimeout(function() { _.map.setCenter([coords[0] + 0.0004, coords[1] + 0.0006], _.opts.zoom_level ? _.opts.zoom_level : 18); }, 300);
502    
503    /*        
504    if(item.properties.vend_arr)
505        _.setSupplierSkladFilter();
506    */
507};
508
509PickpointMap.prototype.ready_initialize = function(clb)
510{
511    var _ = this;
512
513    var opts = { center: _.map_center, zoom: 10};
514
515    if(this.opts.current_region && this.opts.bounds)
516    {
517        opts.bounds = this.opts.bounds;
518        delete opts['center'];
519    }
520    
521    if(typeof(opts.bounds) === 'object' && opts.bounds.length == 0)
522        opts.bounds = [[54.255661, 35.144106], [56.96132, 40.204855]];
523    
524    _.map = new ymaps.Map(this.selector, opts);
525        
526    window.lo_ya_map = _.map;
527
528    geoquery = null;
529
530    ymaps.template.filtersStorage.add('get_pickpoint_icon', function(data, item, fv)
531    {
532        var icon = ymaps.option.presetStorage.hash[item.options.orig_preset ? 
533            item.options.orig_preset : item.options.preset];
534
535        return icon ? icon.iconImageHref : '';
536    });
537    
538    ymaps.template.filtersStorage.add('li_class_for_point', function(data, item, fv) {
539        return (_.currentPoint ? _.currentPoint.id : 0) === item.id ? 'current' : '';
540    });
541
542    var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
543        '<ul class="cluster-list">',
544        '{% for item in properties.geoObjects %}',
545            '<li><a onclick="on_cluster_pp_click({{ item.id }}); return  0" class="list_item {{ item | li_class_for_point }}">', 
546                '<img src="{{ item | get_pickpoint_icon }}"/><span>{{ item.properties.address | raw }}</span></a>',
547            '</li>',
548        '{% endfor %}',
549        '</ul>'
550    ].join(''));
551
552    _.objectManager = new ymaps.ObjectManager({
553        clusterize: true, minClusterSize: 2,
554        clusterDisableClickZoom: false,
555        clusterOpenBalloonOnClick: true,
556        clusterBalloonContentLayout: customBalloonContentLayout
557    });
558
559    $(document).keyup(function(e) 
560    {
561        if (e.keyCode === 27) 
562            _.objectManager.objects.balloon.close();
563    });
564
565    _.map.geoObjects.add(_.objectManager);
566

567    _.objectManager.clusters.options.set({ preset: 'islands#darkOrangeClusterIcons' });
568
569        ymaps.option.presetStorage.add('ico#pvz', {
570        iconLayout: 'default#image',
571        iconImageHref: '//spim.ru/i5/pp_pvz.svg',
572        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
573    });
574
575    ymaps.option.presetStorage.add('ico#postamat', {
576        iconLayout: 'default#image',
577        iconImageHref: '//spim.ru/i5/postamat.svg',
578        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
579    });
580
581    ymaps.option.presetStorage.add('ico#cdek', {
582        iconLayout: 'default#image',
583        iconImageHref: '//spim.ru/i5/cdek_ico.svg',
584        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
585    });
586    
587    ymaps.option.presetStorage.add('ico#cdek_postamat', {
588        iconLayout: 'default#image',
589        iconImageHref: '//spim.ru/i5/cdek_postamat2_ico.svg',
590        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
591    });
592
593    ymaps.option.presetStorage.add('ico#spim', {
594        iconLayout: 'default#image',
595        iconImageHref: '//spim.ru/i5/spim_ico.svg',
596        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
597    });
598
599    ymaps.option.presetStorage.add('ico#dellin', {
600        iconLayout: 'default#image',
601        iconImageHref: '//spim.ru/i5/dellin_ico.svg',
602        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
603    });
604
605    ymaps.option.presetStorage.add('ico#store', {
606        iconLayout: 'default#image',
607        iconImageHref: '//spim.ru/i5/store_ico.svg',
608        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
609    });
610    
611    ymaps.option.presetStorage.add('ico#bb', {
612        iconLayout: 'default#image',
613        iconImageHref: '//spim.ru/i5/ico_bb.svg',
614        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
615    });
616    
617    ymaps.option.presetStorage.add('ico#supplier_sklad', {
618        iconLayout: 'default#image',
619        iconImageHref: '//spim.ru/i5/dellin_ico.svg',
620        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
621    });
622
623    ymaps.option.presetStorage.add('ico#yandex', {
624        iconLayout: 'default#image',
625        iconImageHref: '//spim.ru/i4/yandex_market_logo_symbol.svg',
626        iconImageSize: [41, 35], iconImageOffset: [-20, -35]
627    });
628
629    _.objectManager.objects.events.add('click', function (event) 
630    {
631        var id = event.get('objectId');
632        var item = _.objectManager.objects.getById(id);
633
634        if(item)
635        {
636            _.selectedPoint = item;
637            
638            if(!_.opts.dont_save_cookie)
639                _.setSelectedPoint(item);
640        
641            _.open_baloon(item);
642        }
643    });
644};
645
646var ____yamap_js_loaded = false;
647
648PickpointMap.prototype.on_ready = function(clb)
649{
650    var _ = this;
651    
652    if(_.is_ready)
653        clb.call(_);
654    
655    else
656    {
657        _.ready_clb.push(clb);
658        
659        if(_.is_loading === false)
660        {
661            _.is_loading = true;
662            
663            function ymaps_ready()
664            {
665                _.is_ready = true;
666                _.is_loading = false;
667                
668                _.ready_initialize();
669                
670                for(var i in _.ready_clb)
671                    _.ready_clb[i].call(_);
672                
673                _.ready_clb = [];
674            }
675            
676            function loadJS(path, fn)
677            {
678                var head = document.getElementsByTagName('head')[0];
679
680                var scriptTag = document.createElement('script');
681                scriptTag.src = path;
682
683                if (scriptTag.readyState) {
684                    scriptTag.onreadystatechange = function () {
685                        if (scriptTag.readyState == "loaded" ||
686                                scriptTag.readyState == "complete") {
687                            scriptTag.onreadystatechange = null;
688                            fn();
689                        }
690                    };
691                } else {  //Others
692                    scriptTag.onload = function () {
693                        fn();
694                    };
695                }
696
697                head.appendChild(scriptTag);
698            }
699
700            if(____yamap_js_loaded)
701            {
702                ymaps.ready(ymaps_ready);
703            }
704            else
705            {
706                //&apikey=c734e940-b834-4080-9f14-1ca90b5df1b2
707                loadJS('//api-maps.yandex.ru/2.1/?apikey=c734e940-b834-4080-9f14-1ca90b5df1b2&lang=ru-RU', function() 
708                {
709                    ____yamap_js_loaded = true;
710                    ymaps.ready(ymaps_ready);
711                });
712            }
713        } 
714    }
715};
716
717var __pp_map = null;
718
719function showPickpointMap(opts)
720{
721    opts = $.extend({}, {zoom: true}, opts);
722
723    if(__pp_map && opts.idsupplier && __pp_map.opts.idsupplier != opts.idsupplier)
724    {
725        $('#pp-modal').remove();
726        __pp_map = null;
727    }
728    
729    var modal = $('#pp-modal');
730
731    if(modal.length === 0)
732    {
733        modal = createPickpointMapPopup();
734    }
735

736    var region_bounds = $('#region-bounds');
737
738    if(!opts.bounds && region_bounds.length)
739    {
740        var bounds = JSON.parse(region_bounds.val());
741
742        if(bounds)
743        {
744            opts.current_region = true;
745            opts.bounds = bounds;
746        }
747    }
748
749    if(opts.from_vp)
750    {
751        opts.no_postamat = $('#vp-delivery-block').attr('data-no-postamat') === '';
752    }
753    
754    $.fn.modal_bring_to_front ? modal.modal_bring_to_front() : modal.modal();
755    
756    if(__pp_map === null)
757        __pp_map = new PickpointMap('ya-pickpoint-map', opts);
758
759    __pp_map.activate(function()
760    {
761        var _ = this;
762        
763        $('.pp-map-loading-img', modal).remove();
764        
765        this.map.container.fitToViewport();
766
767        if(opts.idpoint)
768            this.select_pp(opts.idpoint, opts.zoom || 0);
769
770        if(opts.reg_geocoords && !opts.zoom)
771            this.map.setCenter(opts.reg_geocoords, 10);
772        
773        if(opts.services)
774            this.setServiceFilter(opts.services, opts.no_postamat);
775
776        if(opts.idservices)
777            this.setIdServiceFilter(opts.idservices, opts.no_postamat);
778        
779        if(opts.current_region)
780        {
781            _.map.setBounds(opts.bounds, {checkZoomRange: true}).then(function() 
782            {
783                if(_.map.getZoom() > 10)
784                    _.map.setZoom(10);
785            });
786        }
787    });
788}
789
790__ymap_popup_template = null;
791
792function show_pickpoint_scheme(id)
793{
794    if(__ymap_popup_template === null)
795    {
796        var src = 
797        '<div class="pp-scheme-text">{% if props.address %}<b>Àäðåñ:</b> {{ props.address }}<br>{% endif %} \
798        {% if props.ws %}<b>Ðàáî÷åå âðåìÿ:</b> {{ props.ws }}<br>{% endif %}</div> \
799        {% if props.images %} \
800            <br>Ôîòîãðàôèè è ñõåìà ïðîåçäà:<br> \
801            {% for img in props.images %} \
802                <img style="max-width: 100%; margin-bottom: 20px;" src="{{ img }}"/> \
803            {% endfor %} \
804        {% endif %}';
805        
806        __ymap_popup_template = new ymaps.Template(src);
807    }
808    
809    $.get('/shop/listorder.php', {'get':'pickpoint_by_id','id':id, 'json': true}, function(item)
810    {
811        var props = item.properties;
812        var data = _get_point_info(props);
813        
814        var modal = createPickpointSchemePopup(data.type ? data.type : props.name);
815        
816        var res = __ymap_popup_template.build(new ymaps.data.Manager({props: props, data: data}));
817        
818        $('.modal-body', modal).html(res.text);
819        
820        $.fn.modal_bring_to_front ? modal.modal_bring_to_front() : modal.modal();
821    });
822    
823    return false;
824}