-
-
Notifications
You must be signed in to change notification settings - Fork 9
/
jquery.product-configurator.min.js
8 lines (8 loc) · 7.96 KB
/
jquery.product-configurator.min.js
1
2
3
4
5
6
7
8
/*
* jQuery product configurator
* https://github.com/mbpictures/jquery-product-configurator
*
* Copyright © 2019 Marius Butz <contact@marius-butz.de>
* Licensed under MIT License
*/
!function(a){"use strict";a.fn.productConfigurator=function(i){var t=a.extend({},a.fn.productConfigurator.defaults,i);return a.fn.productConfigurator.internal.currency=t.currency,a(window).resize(function(){a.fn.productConfigurator.resize()}),this.each(function(){if(t.loading){var i=a("<div></div>").addClass("loading").html(t.loadingHtml);a(this).append(i)}var n,e,d,r,o=a("<div></div>").addClass("configurator"),s=a("<div></div>").addClass("buy"),c=a("<div></div>").addClass("inner"),l=a("<div></div>").addClass("mobile-config-button").html('<div class="hamburg"><span class="line"></span><span class="line"></span><span class="line"></span></div>'),u=a("<div></div>").addClass("preview"),p=a("<div></div>").addClass("settings"),v=a("<div></div>").addClass("categories"),f=a("<ul></ul>").addClass("main-category"),g=a("<div></div>").addClass("preview-image"),h=a("<div></div>").addClass("summary"),m=a("<div></div>").addClass("buy-button").html("Buy"),C=a("<div></div>").addClass("credits").html("jQuery Plugin developed by <a href='http://marius-butz.de' target='_blank'>Marius Butz</a> © 2019");if(t.additionalControls){n=a("<div></div>").addClass("additional-controls"),e=a("<div></div>").addClass("additional-controls-opener controls-button").html('<div class="plus"><span></span><span></span></div>'),d=a("<div></div>").addClass("controls-zoomin controls-button").html('<div class="plus"><span></span><span></span></div>'),r=a("<div></div>").addClass("controls-zoomout controls-button").html('<div class="plus"><span></span><span></span></div>'),n.append(e).append(d).append(r),o.append(n),e.click(function(){var i=a(".additional-controls-opener").height(),t=0;a([e,d,r]).each(function(){t+=a(this).height()}),a(this).find(".plus").toggleClass("active");var n=Math.floor(a(this).parent().height())===Math.floor(t)?i+"px":t+"px";a(this).parent().animate({height:n},200)});var y=3;d.click(function(){y+=y<5?1:0,a(".configurator .preview .preview-image").removeClass("scaled-1 scaled-2 scaled-3 scaled-4 scaled-5").addClass("scaled-"+y)}),r.click(function(){y-=y>1?1:0,a(".configurator .preview .preview-image").removeClass("scaled-1 scaled-2 scaled-3 scaled-4 scaled-5").addClass("scaled-"+y)})}l.click(function(){a(".configurator .settings").toggleClass("open"),a(this).find(".hamburg").toggleClass("active")});var b=a("<div></div>").addClass("name"),w=a("<div></div>").addClass("back width-as-height").attr("data-submenu","none").html('<i class="icon ion-ios-arrow-back"></i>');b.append(w).append(t.name),p.append(b),w.click(function(){0!=a(this).css("opacity")&&a("#category-"+a.fn.productConfigurator.internal.openedSub).animate({left:a(".main-category").parent().width()+"px"},300,function(){a(".main-category").css("left","-"+a(".main-category").parent().width()+"px").animate({left:"0"},300),a(".settings .back").animate({opacity:"0"},300).css("cursor","auto"),a.fn.productConfigurator.internal.openedSub=void 0})}),h.append('<div class="price"><div>'+t.localization.total+"</div><div></div></div>").append(m),m.click(function(){a(".buy").fadeIn(500)});var k=a("<div></div>").addClass("info"),z=a("<div></div>").addClass("buy-check"),x=a("<div></div>").addClass("accept").html(t.localization.buy),S=a("<div></div>").addClass("decline").html(t.localization.decline);z.append(x).append(S),k.append("<h1>"+t.localization.buy+"</h1>").append('<div class="price"><div>'+t.localization.total+"</div><div></div></div>").append(z).append("<p>"+t.localization.privacy+"</p>"),x.click(function(){var i={};jQuery.each(a.fn.productConfigurator.internal.currentSelection,function(t,n){i[a.fn.productConfigurator.internal.categories[t].name]=a.fn.productConfigurator.internal.categories[t].items[n].name}),a.fn.productConfigurator.redirectPost(t.buyDestinationUrl,i)}),S.click(function(){a(".buy").fadeOut(500)}),s.click(function(i){"buy"===i.target.getAttribute("class")&&a(this).fadeOut(500)}),jQuery.each(t.categories,function(i,n){var e=a("<li></li>").attr("data-category",n.name),d={},r=a("<ul></ul>").addClass("sub-category").attr("id","category-"+n.name);jQuery.each(n.items,function(e,o){o.default&&(d.val=o,d.index=e);var s=a("<li></li>").attr("data-item",o.name).addClass(o.default?"active":"");s.empty().html('<div class="thumbnail"></div><div class="name">'+o.name+'</div><div class="price">'+o.price+t.currency+"</div>");var c=void 0!==o.image?void 0!==o.thumbnail?o.thumbnail:o.image:"",l=""!==c?a("<img>").attr("src",c):"";s.find(".thumbnail").append(l),r.append(s),s.click(function(){a(".preview-"+n.name).attr("src",o.image),a(".main-category li").each(function(){a(this).data("category")===n.name&&(a(this).find("img").attr("src",c),a(this).find(".name div:last-child").html(o.name),a(this).find(".price").html(o.price+t.currency))}),a.fn.productConfigurator.internal.currentSelection[i]=e,a(".summary .price div:last-child").removeClass("price-anim"),a.fn.productConfigurator.updateTotalPrice(t.categories),a(this).parent().find("li").removeClass("active"),a(this).addClass("active")})}),e.html('<div class="thumbnail"></div><div class="name"><div>'+n.name+"</div><div>"+d.val.name+'</div></div><div class="price">'+d.val.price+t.currency+'</div><div class="enter"><i class="icon ion-ios-arrow-forward"></i></div>');var o=void 0!==d.val.image?void 0!==d.val.thumbnail?a("<img>").attr("src",d.val.thumbnail):a("<img>").attr("src",d.val.image):"";e.find(".thumbnail").append(o),void 0!==d.val.image&&a(g).append("<img src='"+d.val.image+"' class='preview-"+n.name+"'>"),e.click(function(){var i=a(this);a(".main-category").animate({left:"-"+a(".main-category").parent().width()+"px"},300,function(){a("#category-"+i.data("category")).css("left",a(".main-category").parent().width()+"px").animate({left:"0px"},300),a(".settings .back").animate({opacity:"1"},300).css("cursor","pointer"),a.fn.productConfigurator.internal.openedSub=i.data("category")})}),a.fn.productConfigurator.internal.currentSelection[i]=d.index,f.append(e),v.append(r)}),u.append(g);var P=u.clone();v.append(f),p.append(v).append(h),u.append(C),c.append(P).append(k),s.append(c),o.append(s).append(l).append(u).append(p),a(this).append(o),a.fn.productConfigurator.resize(),a.fn.productConfigurator.internal.categories=t.categories,a.fn.productConfigurator.updateTotalPrice(),t.loading&&i.fadeOut(300)})},a.fn.productConfigurator.defaults={name:void 0,buyDestinationUrl:void 0,currency:"€",categories:[],localization:{buy:"Buy",decline:"Not now",privacy:"With buying this product you accept our <a href='#'>Privacies</a>",total:"Total"},loading:!1,loadingHtml:"<h1>Loading</h1><div class='lds-ellipsis'><div></div><div></div><div></div><div></div></div>",additionalControls:!0},a.fn.productConfigurator.internal={openedSub:void 0,currentSelection:{},categories:void 0,currency:"€"},a.fn.productConfigurator.redirectPost=function(i,t){var n="";a.each(t,function(a,i){n+='<input type="hidden" name="'+a+'" value="'+i+'">'}),a('<form action="'+i+'" method="POST">'+n+"</form>").appendTo("body").submit()},a.fn.productConfigurator.updateTotalPrice=function(){var i=0;jQuery.each(a.fn.productConfigurator.internal.currentSelection,function(t,n){i+=a.fn.productConfigurator.internal.categories[t].items[n].price}),a(".summary .price div:last-child, .buy .inner .info .price div:last-child").html(i.toPrecision(4)+a.fn.productConfigurator.internal.currency);var t=a(".summary .price div:last-child"),n=t.clone(!0).addClass("price-anim");t.before(n),t.remove()},a.fn.productConfigurator.resize=function(){var i=a(".configurator .settings .name .back").css("height");a(".width-as-height").each(function(){a(this).css("width",a(this).css("height"))}),a(".mobile-config-button").css({width:i,height:i}),a(".additional-controls .controls-button, .additional-controls").each(function(){a(this).css({width:i,height:i})});var t=a(".settings").height()-(a(".settings .name").outerHeight()+a(".settings .summary").height());a(".settings .categories").css("height",t+"px")}}(jQuery);