Men's Waterproof Knit Shoes | Vessi Footwear (2024)

How to Measure

` }; const Junipstarsummary = { name: "JunipStarSummary", delimiters: ['{(', ')}'], props: { 'product': { type: Object, required: true } }, template: ` ` }; const Collectionproductitem = { name: "CollectionProductItem", delimiters: ['{(', ')}'], emits: ['close-active-quick-add'], components: { Fitguide, Junipstarsummary, Givingweekcollection }, props: { 'product': { type: Object, required: true }, 'index': { type: Number, required: true }, 'is_mobile': { type: Boolean, required: true }, 'toggle_quick_add': { type: Boolean, required: true }, 'scripts_loaded': { type: Boolean, required: true, default: false }, 'show_discount_percentage': { type: Boolean, required: false, default: false }, 'has_vip_sale': { type: Boolean, required: false, default: false }, 'add_to_bundle': { type: Function, required: false, default: false }, 'show_bundle_builder': { type: Boolean, required: false, default: false }, 'preferred_color': { type: String, required: false, default: null }, }, data() { return { imgURL: themeUtils.general.imgURL, showSaleTag:false, showSalePriceByTag:true, addGiftWithPurchase: false, fetched_product: null, givingPriceDiscount: null, isVipSale: this.has_vip_sale, variants: [], quickAddActive: true, quickAddActiveMobile: false, loadingQuickAdd: false, selectedVariantSize: null, isAddingToCart: false, featuredImage: this.product.featured_image, sizeTypes, rootUrl: ROOT_URL, showLifestyleImage: false, lifestyleImageObserver: null, cartCurrency: "USD", } }, created() { if(this.product.variants && this.product.variants.length > 0) { if(this.isAccessory) { const groupSwatches = [...this.product.variants].reduce((acc, swatch) => { if (!acc.some(s => s.color === swatch.color)) { const primarySwatch = {...swatch}; acc.push({...primarySwatch, variants: []}) } const newSwatch = {...swatch} delete newSwatch.variants acc.find(s => s.color === newSwatch.color).variants.push(newSwatch) return acc }, []); let prefferedColorVariant = this.preferred_color ? groupSwatches.find(s => s.color.toLowerCase().includes(this.preferred_color.toLowerCase()) && s.available) : null; let selectedVariant = prefferedColorVariant ? prefferedColorVariant : groupSwatches.length > 0 ? groupSwatches[0] : this.fetch_product; this.selectVariantColor(selectedVariant); this.variants = groupSwatches.length > 0 ? groupSwatches : this.fetched_product.variants; if (this.fetched_product.variants.length === 1) { this.selectedVariantSize = this.fetched_product.variants[0]; } } else { this.fetched_product = this.product; this.variants = this.product.variants; } this.checkIfVariantsAvailable(); } if (this.index <= 8) { const imgSrc = this.imgURL(this.product.featured_image, '1200x'); const srcSet = this.productSrcSet; const link = document.createElement('link'); link.rel = 'preload'; link.as = 'image'; link.href = imgSrc; link.imageSrcset = srcSet; link.imageSizes = "(max-width: 768px) 50vw, 30vw" document.head.appendChild(link); } }, mounted() { this.activateFitGuides(); const startlifestyleImageObserver = () => { this.lifestyleImageObserver = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const imgElement = entry.target.querySelector('img[data-src]'); if (imgElement) { imgElement.src = imgElement.getAttribute('data-src'); imgElement.srcset = imgElement.getAttribute('data-srcset'); } this.lifestyleImageObserver.unobserve(entry.target); } }); }, { threshold: 0, rootMargin: '400px 0px', } ); this.$refs.lazyImageWrapper && this.lifestyleImageObserver.observe(this.$refs.lazyImageWrapper); ['scroll','click', 'mouseover', 'keydown'].forEach((event) => { document.removeEventListener(event, startlifestyleImageObserver); }); }; ['scroll','click', 'mouseover', 'keydown'].forEach((event) => { document.addEventListener(event, startlifestyleImageObserver); }); }, beforeUnmount() { if (this.lifestyleImageObserver) this.lifestyleImageObserver.disconnect(); }, watch: { toggle_quick_add: function (newVal, oldVal) { if (newVal !== oldVal) { this.closeQuickAddMobile(); } }, scripts_loaded(newVal, oldVal) { if(newVal) { this.activateFitGuides(); } }, has_vip_sale(newVal, oldVal) { if(newVal) { const shouldShowVipSale = false if (shouldShowVipSale) { this.showSalePriceByTag = true; this.isVipSale = true; } } } }, computed: { availableVariants() { if (!this.isAccessory) return null; return this.variants.filter(v => ((v.variants.some(variant => variant.available) && this.sumOfInventory(v.variants) > 0) || !v.limitedEdition)); }, finalSale() { return this.product.tags.some(tag => tag.includes('FINAL-SALE') || tag.includes('Final Sale')); }, productTitle() { let title = this.product.title.includes('-') ? this.product.title.slice(0, this.product.title.lastIndexOf('-')).trim() : this.product.title; if (title.toLowerCase().includes('soho') || title.toLowerCase().includes('alta')) { title = `${title} - Narrow Fit` } else if (title.toLowerCase().includes('shoreline')) { title = `${title} - 1l` } return title; }, productSrcSet() { return ` ${this.imgURL(this.featuredImage, '100x')} 100w, ${this.imgURL(this.featuredImage, '200x')} 200w, ${this.imgURL(this.featuredImage, '300x')} 300w, ${this.imgURL(this.featuredImage, '400x')} 400w, ${this.imgURL(this.featuredImage, '500x')} 500w, ${this.imgURL(this.featuredImage, '600x')} 600w, ${this.imgURL(this.featuredImage, '700x')} 700w, ${this.imgURL(this.featuredImage, '800x')} 800w, ${this.imgURL(this.featuredImage, '900x')} 900w, ${this.imgURL(this.featuredImage, '1000x')} 1000w, ${this.imgURL(this.featuredImage, '1100x')} 1100w, ${this.imgURL(this.featuredImage, '1200x')} 1200w, ` }, lifestyleImageSrcSet() { if (!this.fetched_product || !this.fetched_product.lifestyle_image) return null; return ` ${this.imgURL(this.fetched_product.lifestyle_image, '100x')} 100w, ${this.imgURL(this.fetched_product.lifestyle_image, '200x')} 200w, ${this.imgURL(this.fetched_product.lifestyle_image, '300x')} 300w, ${this.imgURL(this.fetched_product.lifestyle_image, '400x')} 400w, ${this.imgURL(this.fetched_product.lifestyle_image, '500x')} 500w, ${this.imgURL(this.fetched_product.lifestyle_image, '600x')} 600w, ${this.imgURL(this.fetched_product.lifestyle_image, '700x')} 700w, ${this.imgURL(this.fetched_product.lifestyle_image, '800x')} 800w, ${this.imgURL(this.fetched_product.lifestyle_image, '900x')} 900w, ${this.imgURL(this.fetched_product.lifestyle_image, '1000x')} 1000w, ${this.imgURL(this.fetched_product.lifestyle_image, '1100x')} 1100w, ${this.imgURL(this.fetched_product.lifestyle_image, '1200x')} 1200w, ` }, isAccessory() { return this.product.tags.includes('accessories') }, isLowStock() { return this.sumOfInventory(this.variants) <= 100 || this.product.variants.filter(v => !v.available).length >= 2; }, isLastChance() { return this.product.tags.includes('LAST CHANCE') }, isSoldOut() { if (this.fetched_product === null) return false; return this.fetched_product.available === 'false' || !this.fetched_product.available }, originalPrice() { if (this.product.compare_at_price && parseFloat(this.product.compare_at_price) > parseFloat(this.product.price)) { return { float: parseFloat(this.product.compare_at_price / 100) }; } else { return { float: parseFloat(this.product.price / 100) }; } }, salePrice() { if (this.themeSale && this.showSalePriceByTag && this.product.discounted_price && parseFloat(this.product.discounted_price) < parseFloat(this.product.price)) { if(this.isAccessory && this.selectedVariantSize && this.selectedVariantSize.variantNotOnSale) return null; const floatVal = parseFloat(this.product.discounted_price / 100) return { float: floatVal, currency: new Intl.NumberFormat('en-US', {style: 'currency', currency: "USD", currencyDisplay: 'symbol'}).format(floatVal) }; } else if (this.product.compare_at_price && parseFloat(this.product.compare_at_price) > parseFloat(this.product.price)) { const productSalePrice = this.product.price / 100; return { float: productSalePrice, currency: new Intl.NumberFormat('en-US', {style: 'currency', currency: "USD", currencyDisplay: 'symbol'}).format(productSalePrice) }; } return null }, sizeType() { const title = this.product.title.toLowerCase() const tags = this.product.tags const shoeType = title.includes(sizeTypes.WEEKENDCHELSEA) ? sizeTypes.WEEKENDCHELSEA : title.includes(sizeTypes.WEEKEND) ? sizeTypes.WEEKEND : title.includes(sizeTypes.SLIPPERS) ? sizeTypes.SLIPPERS : title.includes(sizeTypes.EVMOVESLIPON) ? sizeTypes.EVMOVESLIPON : title.includes(sizeTypes.EVMOVE) ? sizeTypes.EVMOVE : title.includes(sizeTypes.EVERYDAY) ? sizeTypes.EVERYDAY : title.includes(sizeTypes.CITYSCAPE) ? sizeTypes.CITYSCAPE : title.includes(sizeTypes.STORMBURST) ? sizeTypes.STORMBURST : title.includes(sizeTypes.BOARDWALK) ? sizeTypes.BOARDWALK : title.includes(sizeTypes.SOHO) ? sizeTypes.SOHO : title.includes(sizeTypes.BHAT) ? sizeTypes.BHAT : title.includes(sizeTypes.BEANIE) ? sizeTypes.BEANIE : title.includes(sizeTypes.HAT) ? sizeTypes.HAT : title.includes(sizeTypes.MIDSOCK) ? sizeTypes.MIDSOCK : title.includes(sizeTypes.ANKSOCK) ? sizeTypes.ANKSOCK : title.includes(sizeTypes.LSCREWSOCK) ? sizeTypes.LSCREWSOCK : title.includes(sizeTypes.CREWSOCK) ? sizeTypes.CREWSOCK : title.includes(sizeTypes.NOSHOWSOCK) ? sizeTypes.NOSHOWSOCK : title.includes(sizeTypes.FMASK) ? sizeTypes.FMASK : title.includes(sizeTypes.GLOVE) ? sizeTypes.GLOVE : sizeTypes.STANDARD const genderType = tags.some(item => ["Style: Women", "Gender: Women"].includes(item)) ? sizeTypes.WOMEN : tags.some(item => ["Style: Men", "Gender: Men"].includes(item)) ? sizeTypes.MEN : tags.some(item => ["Style: Kids", "Gender: Kids"].includes(item)) ? sizeTypes.KIDS : sizeTypes.UNISEX return { genderType, shoeType } }, stickerBadgeCategory() { let discountCode = this.themeSale ? parseInt(this.themeSale.split('-')[1]) : null; let saleBadgeText = ""; return this.product.show_badge === 'NO-BADGE' ? null : this.product.show_badge.includes('SALE-') && discountCode ? (this.show_discount_percentage ? `${discountCode}% OFF` : saleBadgeText) : this.product.show_badge ? this.product.show_badge : this.isSoldOut ? 'Sold Out' : this.isLastChance ? 'Last Chance' : //this.isLowStock ? 'LOW STOCK' : this.showSaleTag && saleBadgeText ? saleBadgeText : discountCode && this.showSaleTag ? `${discountCode}% OFF` : this.product.tags.some(tag => tag.includes('Few Left')) ? 'Few Left' : this.product.tags.some(tag => tag.includes('BIS')) ? 'Back In Stock' : this.product.tags.some(tag => tag.includes('Best Seller')) ? 'Best Seller' : this.product.tags.some(tag => tag.includes('Badge: Preorder')) ? 'Pre-Order' : this.product.tags.some(tag => tag.includes('Just In')) ? 'Just In' : this.product.tags.some(tag => tag.includes('Limited Edition')) ? 'Limited' : null }, themeSale() { if(this.showSaleTag || this.showSalePriceByTag) { const filteredTag = this.product.tags.filter(tag => tag.includes('SALE-')); return filteredTag ? filteredTag[0] : null } return null } }, methods: { activateFitGuides() { if(this.scripts_loaded) { $('[data-product-popup-toggle]').magnificPopup({ type: 'inline', mainClass: 'mfp-fade', closeOnBgClick: true, closeBtnInside: true, closeOnContentClick: false, tClose: 'x', removalDelay: 500, }); } }, async activateQuickAdd() { if(this.is_mobile) { if(this.quickAddActiveMobile) return; this.quickAddActiveMobile = true; } if(this.quickAddActive) return; // this.$emit('close-active-quick-add'); this.loadingQuickAdd = true; if (this.fetched_product && this.variants) { setTimeout(() => { this.loadingQuickAdd = false; this.quickAddActive = true; if (this.fetched_product.variants.length === 1) { this.selectedVariantSize = this.fetched_product.variants[0]; } }, 250); } else { try { const response = await fetch(`${this.product.url}?view=vue_template`); const data = await response.json(); if (data.product && data.product.variants) { if(this.isAccessory) { const groupSwatches = [...data.product.variants].reduce((acc, swatch) => { if (!acc.some(s => s.color === swatch.color)) { const primarySwatch = {...swatch, available: true}; acc.push({...primarySwatch, variants: []}) } const newSwatch = {...swatch} delete newSwatch.variants acc.find(s => s.color === newSwatch.color).variants.push(newSwatch) return acc }, []); this.fetched_product = groupSwatches.length > 0 ? groupSwatches[0] : data.product; this.variants = groupSwatches.length > 0 ? groupSwatches : data.product.variants; if (this.fetched_product.variants.length === 1) { this.selectedVariantSize = this.fetched_product.variants[0]; } } else { this.fetched_product = data.product; this.variants = data.product.variants; } setTimeout(() => { this.loadingQuickAdd = false; this.quickAddActive = true; }, 250); } else { throw new Error('No variants found'); } } catch (error) { console.error(error); } } }, addToBundleMobile(product, variant) { this.add_to_bundle(product, variant); this.closeQuickAddMobile(); }, checkIfVariantsAvailable() { const hasAvailableVariants = this.fetched_product.variants.some(variant => { return variant.available === true || variant.available === 'true'; }); const productHasAvailableVariants = this.product.variants.some(variant => { return variant.available === true || variant.available === 'true'; }); if(!hasAvailableVariants && !productHasAvailableVariants) { this.fetched_product.available = false; } else { this.fetched_product.available = true; } }, lifeStyleImageShow() { if (this.is_mobile) return; this.showLifestyleImage = true; }, showFeaturedImage() { if (this.is_mobile) return; this.showLifestyleImage = false; }, closeQuickAddMobile() { this.quickAddActiveMobile = false; }, formatMoney(value) { const floatVal = parseFloat(value); const currencyCode = "USD"; const formattedAmount = new Intl.NumberFormat('en-US', {style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2}).format(floatVal); return `$${formattedAmount} ${currencyCode}`; }, quickAddToCart(variant) { this.selectedVariantSize = variant; this.giftWithPurchase = variant.giftWithPurchase this.isAddingToCart = true; let notes_message = variant.variantAdditionalNotes; const isFinalSale = this.product.tags.includes('Final Sale'); const isExchangeOnly = this.product.tags.includes('exchange_only'); const isVipFinalSaleItem = this.isVipSale && this.product.tags.includes('THEMESALE-30') ? true : false; const lineItemProperty = isFinalSale || isVipFinalSaleItem ? 'Final Sale' : isExchangeOnly ? 'exchange_only' : ''; const messageSuffix = lineItemProperty ? `Heads up, this item will be ${ lineItemProperty === 'exchange_only' ? 'Exchange Only' : 'Final Sale' }.` : ''; const hasNoNotesMessage = notes_message === ''; notes_message = hasNoNotesMessage && messageSuffix ? messageSuffix : notes_message; const payload = { items: [{ id: variant.id, quantity: 1, properties: { 'Notes': notes_message, '_LPROP': lineItemProperty, '_VIP': this.isVipSale ? 'Exclusive Access' : '' } }] } let giftItem = {} let properties = {} if(this.giftWithPurchase) { properties['__gift_with_purchase'] = this.giftWithPurchase; this.giftWithPurchase.forEach(el => { giftItem = { id: el, quantity: 1, properties: {'Notes': 'Heads up, this will be a Final Sale.'} } payload.items.push(giftItem) }); } fetch(ROOT_URL+'/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) .then(response => { return response.json(); }) .catch((error) => { console.error('Error:', error); }) .finally(() => { this.isAddingToCart = false this.selectedVariantSize = null; this.closeQuickAddMobile(); // this.$emit('close-active-quick-add'); }); }, selectVariantColor(variant) { this.fetched_product = variant; this.product.featured_image = variant?.featured_image || this.product.featured_image; this.featuredImage = this.product.featured_image; if (this.fetched_product.variants.length === 1) { this.selectedVariantSize = this.fetched_product.variants[0]; } else { this.selectedVariantSize = null; } this.checkIfVariantsAvailable(); }, selectVariantSize(variant) { this.selectedVariantSize = variant; }, sumOfInventory(variants) { return variants ? variants.reduce((acc, variant) => acc + (variant.inventoryWithSafety < 0 ? 0 : variant.inventoryWithSafety), 0) : 0; }, updateGivingPriceDiscount(amount) { if (amount === this.givingPriceDiscount || this.isAccessory) return; this.givingPriceDiscount = amount; }, widthBySize(size, margin = 0) { return `calc(${100 / size}% - ${margin}px)` } }, template: ` {( stickerBadgeCategory )}

{( productTitle )} {( fetched_product.color_name ? fetched_product.color_name : fetched_product.color )}

{( isAddingToCart ? 'Adding to Cart' : loadingQuickAdd ? 'Loading' : 'Quick Add' )}

` }

There's More You May Love

Shop Women

Shop Kids

Shop Accessories

Shop Apparel

See Also

The 18 Best Waterproof Shoes For Men To Keep Your Feet Dry | FashionBeans

Explore More, Worry Less

Free Standard Shipping

If we ship to your country, you’re in luck — standard shipping is on the house for orders over $110 USD in North America and $150 USD for other countries !

Free Exchanges

Wrong size? Shoot us an email and we will take care of your exchange.

Dry Socks Guarantee

We stand behind our quality. 1 year warranty on any manufacturer defects.

Join the Puddle Hunting Community

Sign up & get a FREE GIFT with your first order