Women'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 Men

Shop Kids

Shop Accessories

Shop Apparel

See Also

The Best Running Shoes for Every Runner

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