Add documentation

resources/js/Layouts/GuestLayout.vue

@@ -243,7 +243,7 @@ onMounted(fetch_menu);
 
                     <div class="flex-auto">
                         <div class="flex flex-col start-0">
-                            <span class="font-extrabold font-mono">Country in which search product</span>
+                            <span class="font-extrabold font-mono">Country to search in</span>
                         </div>
                         <div class="">
                             <multiselect @select="selectCurrency" placeholder="All" :close-on-select="true" :multiple="false" v-model="settingsStore.country" :options="scountry_list" label="name" track-by="code">
@@ -255,7 +255,7 @@ onMounted(fetch_menu);
                     </div>
                     <div class="flex-auto">
                         <div class="flex flex-col start-0">
-                            <span class="font-extrabold font-mono">Countries in which compare</span>
+                            <span class="font-extrabold font-mono">Countries to compare with</span>
                         </div>
                         <div>
                             <multiselect placeholder="All" @remove="selectCountry" @select="selectCountry" :close-on-select="false" :multiple="true" v-model="settingsStore.countries" :options="ccountry_list" label="name" track-by="name">

resources/js/Pages/IkeaDoc.vue

@@ -0,0 +1,40 @@
+<script setup>
+import GuestLayout from '../Layouts/GuestLayout.vue';
+</script>
+
+<template>
+<GuestLayout>
+    <h1 class="font-extrabold">How to use the service</h1>
+    <hr class="h-1 mx-auto bg-gray-100 border-0 mb-5 rounded dark:bg-gray-700">
+
+    <h2 class="font-bold mb-4">Main menu</h2>
+
+    <ol class="ml-10 list-decimal">
+        <li>Type in the keyword(s) to find a product for which you want to compare the price (product name, description, article number, ...)</li>
+        <li>You can either sort/filter the results or simply click on any table row to find the product prices</li>
+        <li>Price comparison will appear in the <span>"Results"</span> table</li>
+    </ol>
+    <br/>
+    To get the lowest price you can sort the results by price column.
+    Click on the country name to display the corresponding product page.
+    <br/>
+    Some countries are not included for the comparison by default (e.g. Bulgaria, Cyprus, Greece) due to technical limitations on their websites.
+    <br/>
+    For these you will have to use Online search funtionality.
+    Online search is available by clicking on "Online" checkbox.
+    <br/>
+    <br/>
+    <img src="/images/pic_online.png" />
+    <br/>
+    <h2 class="font-bold mb-4">Settings menu</h2>
+
+    <p class="mb-2 underline">In the settings menu you can change:</p>
+    <ul class="ml-10 list-disc mb-10">
+        <li>the country in which to search for the product(s) to compare (default country is based on your location)</li>
+        <li>list of countries where the product(s) are available for comparison (default all)</li>
+        <li>currency re-calculation</li>
+    </ul>
+
+    <img src="/images/pic_settings.png" />
+</GuestLayout>
+</template>

resources/js/Pages/IkeaRoot.vue

@@ -7,6 +7,7 @@ import {
   computed,
   nextTick,
   watch,
+  inject,
 } from "vue";
 import Swal from "sweetalert2";
 
@@ -22,7 +23,6 @@ import searchimg from "@/assets/search-icon.svg";
 import { settingsStore } from '../settingsStore.js';
 import { FwbInput } from 'flowbite-vue';
 
-
 const screenWidth = ref(screen.width)
 const screenHeight = ref(screen.height)
 const hover = ref(true);
@@ -390,8 +390,6 @@ onMounted(() => {
 });
 const showRow = async (item) => {
   console.log("ITEM=", item);
-  this.$matomo.trackEvent('Product', 'search', 'text', settingsStore.text);
-  this.$matomo.trackEvent('Product', 'click', 'code', item.globalCode);
 
   itemCode.value = item.code;
   try {
@@ -400,6 +398,7 @@ const showRow = async (item) => {
       countries: settingsStore.countries,
       currency: settingsStore.currency,
       online: settingsStore.online,
+      text: settingsStore.text,
     });
 
     products.value = response.data.products;

resources/js/app.js

@@ -6,7 +6,6 @@ import { createInertiaApp, usePage } from '@inertiajs/inertia-vue3';
 import { InertiaProgress } from '@inertiajs/progress';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
-import VueMatomo from 'vue-matomo';
 import Themes from './themes'
 import Swal from 'sweetalert2';
 import { Inertia } from '@inertiajs/inertia';
@@ -31,11 +30,6 @@ createInertiaApp({
         return createApp({ render: () => h(app, props) })
             .use(plugin)
             .use(ZiggyVue, Ziggy)
-            .use(VueMatomo, {
-                      host: 'https://matomo.soson.eu/',
-                      trackerUrl: 'https://matomo.soson.eu/matomo.php',
-                      siteId: 3,
-            })
             .mixin({
                 methods: {
                   ...commons,
@@ -61,8 +55,6 @@ const Toast = window.Toast = Swal.mixin({
     }
 })
 
-window._paq.push(['trackPageView']); //To track pageview
-
 Inertia.on('start', commons.authorization)
 Inertia.on('finish', commons.authorization)
 Inertia.on('finish', () => {

resources/views/app.blade.php

@@ -23,6 +23,23 @@
     @routes
     @vite('resources/js/app.js')
     @inertiaHead
+
+    <!-- Matomo -->
+    <script>
+        var _paq = window._paq = window._paq || [];
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']);
+        (function() {
+          var u="https://matomo.soson.eu/";
+          _paq.push(['setTrackerUrl', u+'matomo.php']);
+          _paq.push(['setSiteId', '3']);
+          var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+          g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+        })();
+        </script>
+        <!-- End Matomo Code -->
+
 </head>
 
 <body class="font-sans antialiased bg-gray-100 relative min-h-screen">