Currency symbol as .env variable

Author: w3bdesign

.env.example

@@ -1,5 +1,6 @@
 PUBLIC_GRAPHQL_URL = "change me"
 PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL = "https://via.placeholder.com/500"
+PUBLIC_CURRENCY_SYMBOL = "kr"
 ALGOLIA_APPLICATION_ID = "change me"
 ALGOLIA_API_KEY = "change me"
 ALGOLIA_INDEX_NAME = "change me"

components/Layout/LayoutCart.vue

@@ -36,7 +36,9 @@
             >
               {{ cartLength }}
             </span>
-            <span class="text-white lg:text-black">Total: {{ subTotal }}</span>
+            <span class="text-white lg:text-black"
+              >Total: {{ config.currencySymbol }} {{ subTotal }}</span
+            >
           </div>
         </transition>
       </NuxtLink>
@@ -55,6 +57,8 @@ const cartLength = useState("cartLength", () => 0);
 const subTotal = useState("subTotal", "");
 const remoteError = useState("remoteError", () => false);
 
+const config = useRuntimeConfig();
+
 const cart = useCart();
 
 const { data, error, pending, execute } = await useAsyncQuery(GET_CART_QUERY, {
@@ -66,20 +70,10 @@ const updateCartDisplay = () => {
     return;
   }
 
-  /*cartLength.value = data.value.cart.contents.nodes.reduce(
-    (accumulator, argument) => accumulator + argument.quantity,
-    0
-  );
-*/
-
   cartLength.value = cart.getCartQuantity;
 
   subTotal.value = cart.getCartTotal;
 
-  console.log("Pinia total: ", cart.getCartTotal);
-
-  //subTotal.value = data.value.cart.total;
-
   remoteError.value = error;
 };
 
@@ -90,8 +84,7 @@ onBeforeMount(() => {
 
 setInterval(() => {
   if (process.client && !pending.value && getCookie("woo-session")) {
-    //execute();
     updateCartDisplay();
   }
-}, 3000);
+}, 2000);
 </script>

components/Products/ProductsSingleProduct.vue

@@ -111,9 +111,7 @@ const addProductToCart = async (product) => {
 
   const addToCartvariables = { input: productQueryInput };
 
- console.log("Should add cart to product:", product);
   cart.addToCart(product);
- 
 
   const { mutate, onDone, onError } = useMutation(ADD_TO_CART_MUTATION, {
     addToCartvariables,

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,
       indexName: process.env.PUBLIC_ALGOLIA_INDEX_NAME,
       placeholderImage: process.env.PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL,
+      currencySymbol: process.env.PUBLIC_CURRENCY_SYMBOL,
     },
   },
   postcss: {

store/useCart.js

@@ -60,8 +60,12 @@ export const useCart = defineStore("cartState", {
       return this.customer;
     },
     getCartTotal() {
+      const currencySymbol = useRuntimeConfig().public.currencySymbol || "kr";
+
       return this.cart.reduce(
-        (total, product) => total + product.price * product.quantity,
+        (total, product) =>
+          total +
+          Number(product.price.replace(currencySymbol, "")) * product.quantity,
         0
       );
     },