collective-webcomponents
Version:
Stencil Component Starter
2 lines • 4.15 kB
JavaScript
/*! Built with http://stenciljs.com */
const{h:e}=window.CollectiveWebcomponents;class t{constructor(){this.products=[]}render(){return e("div",{style:{display:"flex",overflowX:"auto",overflowY:"hidden",WebkitOverflowScrolling:"touch"}},this.products.map(t=>e("collective-widget-product-cell",{style:{flexShrink:"0"},showSalePrice:this.showSalePrice,showBrand:this.showBrand,imageSize:this.imageSize,showPrice:this.showPrice,showInfoOnHover:this.showInfoOnHover,productId:t})))}static get is(){return"collective-products"}static get properties(){return{columns:{type:Number,attr:"columns"},element:{elementRef:!0},imageSize:{type:Number,attr:"image-size"},pid:{type:String,attr:"pid"},products:{type:"Any",attr:"products"},showBrand:{type:Boolean,attr:"show-brand"},showInfoOnHover:{type:Boolean,attr:"show-info-on-hover"},showPrice:{type:Boolean,attr:"show-price"},showRetailer:{type:Boolean,attr:"show-retailer"},showSalePrice:{type:Boolean,attr:"show-sale-price"}}}static get style(){return".shopsense-widget .placeholder-box{background:linear-gradient(233deg,#fff,#d7d7d7);background-size:400% 400%;-webkit-animation:2s infinite AnimationName;-moz-animation:2s infinite AnimationName;animation:2s infinite AnimationName}\@-webkit-keyframes AnimationName{0%,100%{background-position:0 53%}50%{background-position:100% 48%}}\@-moz-keyframes AnimationName{0%,100%{background-position:0 53%}50%{background-position:100% 48%}}\@keyframes AnimationName{0%,100%{background-position:0 53%}50%{background-position:100% 48%}}"}}var o=function(e,t,o,i){return new(o||(o=Promise))(function(r,s){function c(e){try{a(i.next(e))}catch(e){s(e)}}function n(e){try{a(i.throw(e))}catch(e){s(e)}}function a(e){e.done?r(e.value):new o(function(t){t(e.value)}).then(c,n)}a((i=i.apply(e,t||[])).next())})};class i{constructor(){this.showSalePrice=!0,this.imageSize=200,this.showBrand=!0,this.showInfoOnHover=!1}productChanged(){this.productObject=this.product}fetchProductById(){return o(this,void 0,void 0,function*(){if(this.productId){const e=yield(yield fetch(`https://api.shopstyle.com/api/v2/products/${this.productId}?pid=shopstyle`)).json();this.productObject=e}})}componentWillLoad(){return o(this,void 0,void 0,function*(){yield this.fetchProductById()})}render(){const t=this.productObject;return e("div",{style:{backgroundColor:"white",width:this.imageSize+"px",height:this.imageSize+100+"px",marginRight:"10px",marginBottom:"10px",display:"flex",flexDirection:"column",alignItems:"stretch",padding:"10px",cursor:"pointer"}},t&&e("div",{style:{display:"flex",flexDirection:"column",alignItems:"stretch",flexGrow:"1"}},e("div",{style:{flexGrow:"1",backgroundImage:`url(${t.image.sizes.XLarge.url})`,backgroundPosition:"center",backgroundSize:"contain",backgroundRepeat:"no-repeat",marginBottom:"10px"}}),!this.showInfoOnHover&&e("div",{class:"info"},e("div",{class:"name",style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",fontSize:"14px"}},this.showBrand&&t.brandedName),this.showPrice&&e("div",{class:"price",style:{display:"flex",marginBottom:"10px",fontWeight:"bold",fontSize:"15px"}},t.salePriceLabel&&e("div",{class:"sale-price",style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",marginRight:"5px"}},t.salePriceLabel),e("div",{class:"full-price",style:Object.assign({whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},t.salePriceLabel?{opacity:"0.5",textDecoration:"line-through"}:{})},t.priceLabel)))))}static get is(){return"collective-widget-product-cell"}static get properties(){return{imageSize:{type:Number,attr:"image-size"},product:{type:"Any",attr:"product",watchCallbacks:["productChanged"]},productId:{type:"Any",attr:"product-id",watchCallbacks:["fetchProductById"]},productObject:{state:!0},showBrand:{type:Boolean,attr:"show-brand"},showInfoOnHover:{type:Boolean,attr:"show-info-on-hover"},showPrice:{type:Boolean,attr:"show-price"},showSalePrice:{type:Boolean,attr:"show-sale-price"}}}static get style(){return"collective-widget-product-cell{font-family:Averta,\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif}"}}export{t as CollectiveProducts,i as CollectiveWidgetProductCell};