Trucker Hats, Western Trucker Caps, Wide Brimmed Hat Womens (2024)

`}ProductItem = ProductItem || { // Variable declared in theme.liquid props: { product: { type: Object, required: true } }, delimiters: ["<{", "}>"], data() { return { product_for_select: {}, image_link: '#' } }, components: { 'custom-select': VariantAtc }, created() { this.product_for_select = (this.product.sub_products && this.product.sub_products.length > 0) ? this.product.sub_products[0] : this.product; this.image_link = this.product_for_select.url; }, methods: { switch_colour(id) { const sub_product = this.product.sub_products.find(colour => colour.product_id == id); this.product.sub_products.forEach(colour => colour.currently_selected = false); sub_product.currently_selected = true; this.product_for_select = sub_product; this.image_link = this.product_for_select.url; } }, computed: { product_title_one() { const words = this.product.title.split(' '); const first_two_words = words[0] + ' ' + words[1]; switch(first_two_words) { case 'King River': case 'Lake Argyle': case 'Pentecost River': case 'Signature Bull': case 'Boss Lady': case 'Australian Made': case 'Ord River': case 'Limited Edition': case 'Pack Saddle': return first_two_words; default: return words[0]; } }, product_title_two() { return this.product.title.replace(this.product_title_one, ''); } }, template: ``} const CollectionPageAppOptions = { name: "Collection Page", delimiters: ["${", "}$"], components: { 'product-item' : ProductItem }, data() { return { product_count: { all: 78, current_selection: 78 }, sort_mode: "manual", products : [], filtered_sets: [], currently_open_select_button: null, tags_applied_on_page_load: [ ], current_tags: [], possible_tags: [ "accessories", "accessoriesnew_arrivals", "Back to School", "can_be_discounted", "cap-t-shirt-bundle-caps", "caps", "category_accessories", "category_bucket_hats", "category_caps", "category_hats", "category_headwear", "colour_beige/clay", "colour_black", "colour_black/blue", "colour_black_/_black", "colour_black_/_clay", "colour_black_/_white", "colour_blue", "colour_brown", "colour_camel", "colour_camo", "colour_camo/black", "colour_camo_/_orange", "colour_candy", "colour_charcoal", "colour_charcoal_/_black", "colour_charcoal_/_red", "colour_chocolate", "colour_clay", "colour_clay_/_black", "colour_dark_navy", "colour_dark_sand", "colour_green", "colour_grey", "colour_grey_camo", "colour_khaki", "colour_leaf_camo_/_orange", "colour_melon", "colour_melon_/_army", "colour_military_green_/_camo", "colour_multi", "colour_navy", "colour_neutral", "colour_off_white", "colour_petrol_blue_v2", "colour_pink", "colour_pink_camo", "colour_red", "colour_red_/_white", "colour_sand", "colour_snorkel_blue", "colour_toffee", "colour_white", "colour_white_/_blue", "dim_unit_mm", "DISCOUNT-20", "DISCOUNT-30", "DISCOUNT-ITEM", "EXTRA5", "gender_accessories", "gender_kids", "gender_unisex", "hats", "headwear", "headwear_-_caps", "is_on_order", "Jacket-cap-bundle-cap", "Kids", "Kids Headwear", "Mens", "MENS_SIZE_GUIDE", "new arrivals", "NEW2SALE", "new_arrivals", "not_activewear", "not_australian_made", "not_coporate", "not_denim", "not_hivis", "not_knitwear", "not_leather_goods", "not_limited_edition", "not_new_arrival", "not_puffer", "nvgroup_garage_trucker_cap", "nvgroup_long_haul_trucker", "price_0_to_40", "ringersrocks", "Set Scotty Kids Trucker Cap", "set-awol-trucker-cap", "set-banks-trucker-cap", "set-boundary-trucker-cap", "set-buck-trucker-cap", "set-cobar-trucker-cap", "set-coraki-baseball-cap", "set-dalby-flat-brim-trucker-cap", "set-dalton-trucker-cap", "set-drover-baseball-cap", "set-garage-trucker-cap", "set-grover-baseball-cap", "set-haulin-trucker-cap", "set-icon-baseball-cap", "set-jett-trucker-cap", "set-lakelands-cap", "set-long-haul-trucker", "set-long-haul-trucker-cap", "set-mccoy-kids-trucker-cap", "set-mccoy-trucker-cap", "set-rye-baseball-cap", "set-scotty-trucker-cap", "set-short-kids-bucket-hat", "set-Signature-Bull-Trucker", "set-signature-bull-trucker-cap", "set-strike-trucker-cap", "set-tara-ponytail-trucker-cap", "set-warrego-trucker-cap", "set-wheatbelt-wool-trucker-cap", "Summer-bundle-cap", "weightunit_g", "Womens", "WOMENS_SIZE_GUIDE", ], filter_options: [ { name: "Category", options: [] }, { name: "Gender", options: [] }, { name: "Price", options: [] }, { name: "Size", options: [] }, { name: "Colour", options: [] } ], minPrice: 0, maxPrice: 35, loading: false, loading_more: false, grid: 2, screen_width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0), paginated: false, pages_loaded: [], totalNumPages: null } }, computed: { showLoadMore() { return this.pages_loaded[this.pages_loaded.length-1] < this.totalNumPages; }, showLoadPrev() { return !this.loading && this.paginated && this.pages_loaded[0] > 1; }, showFilters() { return true; }, pageParam() { const params = new Proxy(new URLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), }); return parseInt(params.page) || 1; } }, methods: { getJSONProductList(tags = '', sort_by = '', page = 1, price = {min: '', max: ''}, initial_load = false, backwards = false) { (initial_load) ? this.loading = true : this.loading_more = true; $.get(`/collections/trucker-hats${tags}?view=count${price.min ? `&filter.v.price.gte=${price.min}` : ""}${price.max ? `&filter.v.price.lte=${price.max}` : ""}`, num => { CollectionPageApp.product_count.current_selection = parseInt(num); this.totalNumPages = Math.ceil(this.product_count.current_selection / 12); if(backwards) page--; $.get(`/collections/trucker-hats${tags}?view=full-data&page=${page}&sort_by=${sort_by}${price.min ? `&filter.v.price.gte=${price.min}` : ""}${price.max ? `&filter.v.price.lte=${price.max}` : ""}`, (data) => { const products = JSON.parse(data); if(initial_load) { CollectionPageApp.products = products; if(page < 2) { this.pages_loaded = [1]; } } else { if(backwards) { this.pages_loaded.unshift(page); CollectionPageApp.products.unshift(...products) } else { CollectionPageApp.products.push(...products); this.pages_loaded.push(page); } } this.loading = false; this.loading_more = false; this.addYotpoReviewData(); if($(window).width > 749) { window.scrollTo({ top: 1000, behavior: 'smooth'}); } setTimeout(() => { $('.product-item__image-alternative').hide(); $('.product-item__image-wrapper--slider').not('.slick-initialized').slick({ dots: true, arrows: true, slidesToShow: 1, rtl: true, slide: '.img-slide', prevArrow: ``, nextArrow: `` }); $('.slick-arrow, .slick-dots li').on('click', e => e.preventDefault()); }, 200); if(initial_load && this.pageParam) { const scrollPos = ($(window).width > 749) ? 150 : 300; $(window).scrollTop(scrollPos); } if(page > 1) { window.history.replaceState({ }, '', `${window.location.pathname}?page=${page}`); this.pageParam = page; } else { window.history.replaceState({ }, '', window.location.pathname); } }); }); }, loadMore() { const tags = '/'+this.current_tags.map(tag => tag.value).join('+') const page = this.pages_loaded[this.pages_loaded.length-1] + 1; this.getJSONProductList(tags, this.sort_mode, page, {min: this.minPrice, max: this.maxPrice}); }, loadPrevious() { const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.getJSONProductList(tags, this.sort_mode, this.pages_loaded[0], {min: this.minPrice, max: this.maxPrice}, false, true); }, tagLabel(tag_prefix, tag) { if(tag.includes('subcategory_')) { return tag.replace(tag_prefix, '').split('subcategory_')[1].replaceAll('_', ' ').trim(); } else { if (tag_prefix == 'price_') { return tag.replace(tag_prefix, '$').replaceAll('_', ' ').replace('to ', '- $').trim(); } else { if(tag_prefix == 'size_') { return tag.substring(5).replace('_','.'); } else { return tag.replace(tag_prefix, '').replaceAll('_', ' ').trim(); } } } }, sortSizeTags(options) { const sortSizes = (a, b) => { const sizes = ['2XS', 'XXS', 'XS', 'Extra Small', 'S', 'Small', 'M', 'Medium', 'L', 'Large', 'XL', 'Extra Large', '2XL', 'XXL', '3XL', 'XXXL', '4XL', 'XXXXL', '5XL', '6XL', '7XL', '8XL', '9XL', '10XL']; a = (a.label.includes('K') || a.label.includes('US')) ? a.label.replace(/[^\d.]/g, '') : a.label; b = (b.label.includes('K') || b.label.includes('US')) ? b.label.replace(/[^\d.]/g, '') : b.label; const aIdx = sizes.indexOf(a.toUpperCase()); const bIdx = sizes.indexOf(b.toUpperCase()); if (aIdx < 0) { if (!isNaN(a) && !isNaN(b)) { return Number(a) - Number(b); } return !isNaN(a) ? -1 : 1; } if (bIdx < 0) { if (!isNaN(a) && !isNaN(b)) { return Number(a) - Number(b); } return !isNaN(b) ? -1 : 1; } return aIdx - bIdx; }; for(i=0;i < options.length; i++) { options[i].label = options[i].label.toUpperCase(); } return options.sort(sortSizes); }, splitTags(namesArray) { const accepted_colours = [ "colour_black", "colour_white", "colour_grey", "colour_brown", "colour_multi", "colour_yellow", "colour_orange", "colour_red", "colour_purple", "colour_pink", "colour_blue", "colour_green", "colour_camel" ] namesArray.forEach(name => { let filter_options = this.filter_options.find(filter => filter.name == name); const tag_prefix = name.toLowerCase() + '_'; let options = this.possible_tags.filter(tag => tag.startsWith(tag_prefix)); let subcategory_options; options.forEach(option => { const label = this.tagLabel(tag_prefix, option); const category_handle = option.replace('category_','').replace('_', '-').split('_subcategory')[0]; if(!option.includes('subcategory_') || "trucker-hats".includes(category_handle)) { if(!(name == 'Category' && "trucker-hats".includes(option.replace('category_', '').replace('_', '-')))) { if(!(name == 'Colour' && !accepted_colours.includes(option))) { const obj = { label, value: option, nested_options: [] } if(tag_prefix == 'size_') obj.label = obj.value.substring(5).replace('_','.'); filter_options.options.push(obj); } } } else { const category_handle = option.substring(0, option.indexOf("_subcategory")); filter_options.options.find(option => option.value == category_handle) && filter_options.options.find(option => option.value == category_handle).nested_options.push({ label, value: option }) } if(Array.from(this.tags_applied_on_page_load).includes(option)) this.current_tags.push(obj); }); this.sortSizeTags(this.filter_options.find(group => group.name == "Size").options); this.filter_options.find(group => group.name == "Price").options.sort((a, b) => a.value.split('_')[1] - b.value.split('_')[1]); }) }, toggleCurrentTags(tag, group) { const checked = this.current_tags.map(tag => tag.value).includes(tag); if(checked) { const removeIndex = this.current_tags.map(tag => tag.value).indexOf(tag); this.current_tags.splice(removeIndex, 1); } else { // if(group == 'Category') this.current_tags = this.current_tags.filter(tag => !tag.value.startsWith('category_')); if(group == 'Category') { if(tag.includes('subcategory_')) { const parent_category = tag.substring(tag.indexOf("category_") + 9, tag.lastIndexOf("_subcategory")); this.current_tags = this.current_tags.filter(tag => !tag.value.includes('subcategory_') && tag.value.includes(parent_category)); } if(tag.startsWith('category_') && !tag.includes('subcategory_')) { this.current_tags = this.current_tags.filter(tag => !tag.value.startsWith('category_')); } } if(group == 'Colour' && tag.startsWith('colour_')) { this.current_tags = this.current_tags.filter(tag => !tag.value.startsWith('colour_')); } if(group == 'Price') this.current_tags = this.current_tags.filter(tag => !tag.value.startsWith('price_')); const tag_prefix = group.toLowerCase() + "_"; this.current_tags.push({ label: this.tagLabel(tag_prefix, tag), value: tag }) } }, applyFilters(tag, group) { this.toggleCurrentTags(tag, group); const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.getJSONProductList(tags, this.sort_mode, 1, {min: this.minPrice, max: this.maxPrice}, true); sessionStorage.setItem('trucker-hats_selection', JSON.stringify(this.current_tags)); }, applyPriceFilter() { const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.getJSONProductList(tags, this.sort_mode, 1, {min: this.minPrice, max: this.maxPrice}, true); }, removeTag(tag) { const removeIndex = this.current_tags.map(tag => tag.value).indexOf(tag.value); this.current_tags.splice(removeIndex, 1); if(tag.value.includes('subcategory_')) { const parent_category = tag.value.substring(tag.value.indexOf("category_") + 9, tag.value.lastIndexOf("_subcategory")); const removeIndex2 = this.current_tags.map(tag => tag.value).indexOf(parent_category); this.current_tags.splice(removeIndex2, 1); } const tags = (this.current_tags.length > 0) ? '/'+this.current_tags.map(tag => tag.value).join('+') : ''; this.getJSONProductList(tags, this.sort_mode, 1, {min: this.minPrice, max: this.maxPrice}, true); sessionStorage.setItem('trucker-hats_selection', JSON.stringify(this.current_tags)); }, addNumbersToOptions() { this.filter_options.forEach(filter_option => { if(typeof filter_option.options != 'undefined' && filter_option.name != 'Size') { filter_option.options.forEach(option => { option.count = this.products.filter(product => product.tags.includes(option.value)).length; }) } }) }, sortProducts(string_or_$event) { (typeof string_or_$event == 'string') ? this.sort_mode = string_or_$event : this.sort_mode = string_or_$event.target.value; const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.getJSONProductList(tags, this.sort_mode, 1, {min: this.minPrice, max: this.maxPrice}, true); sessionStorage.setItem('trucker-hats_sort_selection', JSON.stringify(this.sort_mode)); }, openFilterDrawer() { $('.collection-page-filters').addClass('open'); $('.filter-drawer__close').addClass('open'); $('body').addClass('overflow-hidden-tablet'); }, toggleGrid(num) { if(this.grid != num) { $('.product-item__image-wrapper--slider').slick('resize').slick('slickNext'); } this.grid = num; }, clearPriceRange() { this.minPrice = 0; this.maxPrice = 35; $('.ui-slider-handle:first-of-type').css('left', '0'); $('.ui-slider-handle:last-of-type').css('left', '100%'); $("#slider-range").slider( 'values', [ this.minPrice, this.maxPrice ] ); const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.getJSONProductList(tags, this.sort_mode, 1, {}, true); }, clearAll() { this.current_tags = []; this.clearPriceRange(); this.getJSONProductList('', this.sort_mode, 1); sessionStorage.setItem('trucker-hats_selection', JSON.stringify(this.current_tags)); $('.product-item__image-wrapper--slider').slick('resize').slick('slickNext'); }, addYotpoReviewData() { this.products.forEach(product => { if(!product.reviewsLoaded) { $.get(`https://api.yotpo.com/products/${window.Shopify.yotpo_app_key}/${product.id}/bottomline`, data => { if(data.status.code == 200 && data.response) { const bottomLine = data.response.bottomline; if(bottomLine.total_reviews > 0) product.reviews.reviewCount = bottomLine.total_reviews; if(bottomLine.average_score) product.reviews.reviewAverageValue = bottomLine.average_score; } product.reviewsLoaded = true; }) } }); } }, created() { const savedSelection = JSON.parse(sessionStorage.getItem('trucker-hats_selection')); const savedSortingSelection = JSON.parse(sessionStorage.getItem('trucker-hats_sort_selection')); if(savedSelection) { this.current_tags = savedSelection; } if(savedSortingSelection) { this.sort_mode = savedSortingSelection; } this.splitTags(['Category', 'Gender', 'Price', 'Size', 'Colour' ]); const tags = '/'+this.current_tags.map(tag => tag.value).join('+'); this.paginated = (this.pageParam > 1); this.getJSONProductList(tags, this.sort_mode, this.pageParam, {}, true); this.pages_loaded.push(this.pageParam); }, mounted() { $('#collection-app').addClass('v-mounted'); document.addEventListener("click", (evt) => { const quickBuy = $(evt.target).closest('.product-item__quick-buy'); const innnerContainer = quickBuy.find('.quick-buy__inner-container'); if(!$(evt.target).hasClass('variant') && !$(evt.target).hasClass('select-selected')) { $('.quick-buy__inner-container').addClass('select-hide'); } if($(evt.target).hasClass('select-selected')) { if(this.currently_open_select_button != null) { if($(evt.target) != this.currently_open_select_button) { $('.quick-buy__inner-container').not(innnerContainer).addClass('select-hide'); } } } if($(evt.target).hasClass('select-selected')) { this.currently_open_select_button = $(evt.target); } }); $('.collection-page-filters__group-title').on('click', (evt) => { const group = $(evt.currentTarget).parent(); group.toggleClass('open'); }) $('.filter-drawer__close').on('click', (evt) => { $('.collection-page-filters').removeClass("open"); $(evt.currentTarget).removeClass('open'); $('body').removeClass('overflow-hidden-mobile, overflow-hidden-tablet'); }); this.addNumbersToOptions(); $( "#slider-range" ).slider({ range: true, min: 0, max: 35, values: [ this.minPrice, this.maxPrice ], stop: function( event, ui ) { // $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); CollectionPageApp.minPrice = ui.values[0]; CollectionPageApp.maxPrice = ui.values[1]; CollectionPageApp.applyPriceFilter() } }); // $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + // " - $" + $( "#slider-range" ).slider( "values", 1 ) ); } } const CollectionPageApp = Vue.createApp(CollectionPageAppOptions).mount('#collection-app');