Merge pull request #230 from w3bdesign/dev

Show sale price for individual product

Author: w3bdesign

apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql

@@ -4,6 +4,7 @@ query Product($id: ID!) {
     averageRating
     slug
     description
+    onSale
     image {
       databaseId
       uri
@@ -14,10 +15,14 @@ query Product($id: ID!) {
     name
     ... on SimpleProduct {
       price
+      salePrice
+      regularPrice
       databaseId
     }
     ... on VariableProduct {
       price
+      salePrice
+      regularPrice
       databaseId
       paColors {
         nodes {

components/Cart/ShowCartContents.vue

@@ -78,7 +78,6 @@ export default {
       query: GET_CART_QUERY,
       result({ data, loading, networkStatus }) {
         const cartIsReady = data && networkStatus === 7
-
         if (cartIsReady && !loading) {
           this.loading = false
           this.remoteCart = data
@@ -101,13 +100,11 @@ export default {
   methods: {
     async handleRemoveProduct(products) {
       this.removingCartItem = true
-
       const updatedItems = []
       updatedItems.push({
         key: products.key,
         quantity: 0,
       })
-
       try {
         await this.$apollo
           .mutate({

components/Products/ShowSingleProduct.vue

@@ -20,10 +20,8 @@
             :alt="product.name"
             :src="process.env.placeholderSmallImage"
           />
-
           <div class="ml-8">
             <p class="text-3xl font-bold text-left">{{ product.name }}</p>
-
             <div v-if="product.onSale" class="flex">
               <p class="pt-1 mt-4 text-3xl text-gray-900">
                 {{ product.salePrice }}
@@ -32,16 +30,13 @@
                 {{ product.regularPrice }}
               </p>
             </div>
-
             <p v-else class="pt-1 mt-4 text-2xl text-gray-900">
               {{ product.price }}
             </p>
-
             <br />
             <p class="pt-1 mt-4 text-2xl text-gray-900">
               {{ stripHTML(product.description) }}
             </p>
-
             <p
               v-if="product.variations"
               class="pt-1 mt-4 text-xl text-gray-900"
@@ -55,7 +50,6 @@
                 VARIATION
               </select>
             </p>
-
             <div class="pt-1 mt-2">
               <AddToCartButton v-if="product.variations" :product="product" />
               <AddToCartButton v-else :product="product" />

package-lock.json

@@ -22,7 +22,7 @@
     "graphql-tag": "^2.11.0",
     "nuxt": "^2.14.12",
     "swiper": "^6.4.11",
-    "tailwindcss": "npm:@tailwindcss/[email protected].2",
+    "tailwindcss": "npm:@tailwindcss/[email protected].3",
     "uid": "^2.0.0",
     "vue": "^2.6.12",
     "vue-awesome-swiper": "^4.1.1",
@@ -41,7 +41,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
-    "eslint": "^7.19.0",
+    "eslint": "^7.20.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-nuxt": "^2.0.0",