Minor clean up

components/AddToCartButton.vue

@@ -16,7 +16,7 @@ export default {
 }
 </script>
 
-<style lang="postcss">
+<style lang="postcss" scoped>
 button {
 	outline: none !important;
 	transition: all 150ms ease-in;

components/Cart.vue

@@ -6,7 +6,7 @@
 		<CloseModals class="bg-white rounded-xl shadow-xl p-1.5" />
 		<EmptyCart
 			v-if="!cart.isEmpty"
-			class="rounded-xl hover:bg-red-400 shadow-xl hover:text-white p-1.5"
+			class="rounded-xl shadow-xl p-1.5 hover:bg-red-400 hover:text-white"
 		/>
 
 		<div class="mt-8 text-center">Basket</div>
@@ -19,20 +19,20 @@
 					:item="item"
 					@has-swiped="removeItemFromCart(item.key)"
 				>
-					<CartCard :item="item" />
+					<LazyCartCard :item="item" />
 				</SwipeCard>
 			</ul>
 
 			<ShippingOptions
 				:options="cart.availableShippingMethods[0].rates"
 				:active-option="cart.chosenShippingMethods[0]"
-				class="px-8 mb-4"
+				class="mb-4 px-8"
 				@setActiveOption="setActiveOption"
 			/>
 
-			<div class="px-8 mb-8">
+			<div class="mb-8 px-8">
 				<NuxtLink
-					class="bg-primary text-white rounded-2xl shadow-md text-lg text-center p-3 block justify-evenly hover:bg-primary-dark"
+					class="bg-primary rounded-2xl shadow-md text-white text-lg text-center p-3 block justify-evenly hover:bg-primary-dark"
 					to="/checkout"
 				>
 					<span class="mx-2">Checkout</span>

components/CookieBanner.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="scale-y">
-        <LazyCookieControl ref="cookiecontrol" v-if="loaded">
+        <CookieControl ref="cookiecontrol" v-if="loaded">
             <template v-slot:bar>
                 <div class="right-8 bottom-8 left-8 z-10 fixed">
                     <div
@@ -33,7 +33,7 @@
                     </div>
                 </div>
             </template>
-        </LazyCookieControl>
+        </CookieControl>
     </transition>
 </template>
 

components/Filters.vue

@@ -141,7 +141,7 @@ export default {
 }
 </script>
 
-<style lang="postcss">
+<style lang="postcss" scoped>
 #filters {
 	@apply bg-white border-r border-gray-100 py-8 pr-8 w-[225px];
 	box-shadow: -100px 0 0 white, -200px 0 0 white, -300px 0 0 white;

components/Footer.vue

@@ -1,8 +1,6 @@
 <template>
-	<footer class="bg-white">
-		<a
-			href="https://woonuxt.com"
-			class="border-t text-xs text-center py-8 text-gray-700 block"
-		>WooNuxt Version {{ $config.clientVersion }}</a>
+	<footer class="bg-white border-t text-xs text-center py-8 text-gray-700 block">
+		<a href="https://woonuxt.com" class>WooNuxt v{{ $config.clientVersion }}</a> - by
+		<a href="https://scottyzen.com" target="_blank">Scottyzen</a>
 	</footer>
 </template>

components/ProductGrid.vue

@@ -50,7 +50,6 @@ export default {
 		products: { type: Array, default: null }
 	},
 	computed: {
-		// postWithPagination() { return this.pager(this.products) },
 		perPage() {
 			return this.$config.perPage
 		},
@@ -66,18 +65,9 @@ export default {
 	},
 	watch: {
 		page() {
-			console.log('Products.vue page', this.page);
-			this.$emit('setPage', this.page)
-			// scroll to top
 			window.scrollTo(0, 0)
 		}
 	},
-	methods: {
-		// pager(products) {
-		// 	const pageNum = this.page || this.$route.params.pageNumber
-		// 	return products.slice(this.perPage * (pageNum - 1), this.perPage * pageNum)
-		// }
-	}
 }
 </script>
 
@@ -90,12 +80,6 @@ export default {
 		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 	}
 }
-.pagination {
-	@apply flex mb-8 p-8 gap-2 items-center justify-center;
-}
-.pagination a {
-	@apply rounded-xl cursor-pointer bg-purple-100 leading-none py-2 px-4 text-purple-900 hover:bg-purple-200 hover:text-purple-900;
-}
 .shrink-move {
 	transition: all 500ms;
 }
@@ -113,4 +97,10 @@ export default {
 	opacity: 0;
 	transform: scale(0.75) translateY(25%);
 }
+.pagination {
+	@apply flex mb-8 p-8 gap-2 items-center justify-center;
+}
+.pagination a {
+	@apply rounded-xl bg-purple-100 leading-none py-2 px-4 text-purple-900 hover:bg-purple-200;
+}
 </style>

layouts/default.vue

@@ -78,7 +78,7 @@ export default {
 <style lang="postcss">
 .page-enter-active,
 .page-leave-active {
-	transition: opacity 300ms ease-in-out;
+	transition: opacity 250ms ease-in-out;
 }
 .page-enter,
 .page-leave-active {

netlify.toml

@@ -1,16 +1,11 @@
-# [build]
-  # functions = "functions"
-
 [template.environment]
   WORDPRESS_URL = "WordPress URL without trailing slash. http://example.com"
   STRIPE_PUBLISHABLE_KEY = "Stripe Publishable Key"
 
-
 [build]
   command = "npm run generate"
   publish = "dist"
 
-
 [[headers]]
   for = "*.js" # js files should be set this way
   [headers.values]
@@ -29,9 +24,6 @@
     X-XSS-Protection = "1; mode=block"
     Referrer-Policy = "no-referrer"
     X-Content-Type-Options = "nosniff"
-    # Strict-Transport-Security = "max-age=15780000; includeSubDomains; preload"
-    # Feature-Policy = "geolocation 'none'; midi 'none'; sync-xhr 'none'; microphone 'none'; camera 'none'; magnetometer 'none'; gyroscope 'none'; speaker 'none'; fullscreen 'none'; payment 'none'"
-    # Content-Security-Policy = "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline'"
 
 [[headers]]
   for = "/_nuxt/*"
@@ -42,6 +34,6 @@
 
 [[redirects]]
   from = "/*"
-  to = "https://testing.2cubedtest.com/:splat"
+  to = "https://secure.woonuxt.com/:splat"
   status = 200
   headers = {Access-Control-Allow-Origin = "*", Access-Control-Allow-Headers = "Content-Type, *", Access-Control-Allow-Methods = "GET, POST", Access-Control-Allow-Credentials= "true"}

nuxt.config.ts

@@ -36,7 +36,7 @@ export default defineNuxtConfig({
     [ "nuxt-cookie-control", { 
       barPosition: "bottom-left",
       blockIframe: true,
-      controlButton: true,
+      controlButton: false,
       css: false,
       optional: [{
         name: 'Google Analitycs',
@@ -66,6 +66,7 @@ export default defineNuxtConfig({
    '@nuxtjs/composition-api/module'
   ],
 
+
   graphql: {
     clients: {
       default: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "woonuxt",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "private": true,
   "scripts": {
     "dev": "nuxi dev",

pages/products.vue

@@ -1,6 +1,6 @@
 <template>
 	<main class="container flex">
-		<Filters
+		<LazyFilters
 			@filter-updated="filterProducts"
 			:activeFilters="this.$store.state.filter"
 			:showFilters="showFilters"
@@ -134,12 +134,6 @@ export default {
 </script>
 
 <style lang="postcss" >
-.pagination {
-	@apply flex mb-8 p-8 gap-2 items-center justify-center;
-}
-.pagination a {
-	@apply rounded-xl bg-purple-100 leading-none py-2 px-4 text-purple-900 hover:bg-purple-200;
-}
 input[type="search"] {
 	@apply border rounded-xl max-w-md outline-none leading-tight w-full p-2 px-4 pl-10 transition-all;
 	background: url("/images/search.svg") no-repeat center left 0.75em;