Map Price

Map price extension is used to pop up description when hovering over the map price, The map price will be shown if the map price custom item field has some value. 

Custom field was created under custom tabe of item record, If we add any price map price will shown 

if (PDP) { 

                    var pricing = PDP.getItemInfo(); 

                    PDP.addChildView('mapprice', function () { 

                        return new MapPriceView({ 

                            PDP: PDP, 

                        }); 

                    }); 

                } 

 

Using Itemgetinfo() we can get all the data regarding the item. 

 

var mapprice = this.pdp.getItemInfo(); 

        var mprice; 

        var self=this; 

        self.mprice=mapprice.item.custitem_map; 

Main css 

.product-details-full-main a span { 

    background: #454e57; 

    color: #fff; 

    font-size: 13px; 

    font-weight: bold; 

    position: absolute; 

    bottom: 0; 

    left: -25px; 

    right: -80px; 

    padding: 5px 7px; 

    visibility: hidden; 

    opacity: 0; 

    -webkit-transition: all .4s; 

    -moz-transition: all .4s; 

    transition: all .4s; 

} 

.product-details-full-main a span:before { 

    border-left: 5px solid transparent; 

    border-right: 5px solid transparent; 

    border-top: 5px solid #fff; 

    position: absolute; 

    bottom: -5px; 

    left: 40px; 

}