feat: add nginx manual

Author: alexandrdrvn

view/javascript/components/development.vue

@@ -71,6 +71,100 @@ RewriteCond %{REQUEST_URI} !.*(images|index.php|.html|admin|.js|.css|.png|.jpeg|
 RewriteCond %{DOCUMENT_ROOT}/vuefront/$1.html !-f
 RewriteRule ^([^?]*) vuefront/200.html [L,QSA]</pre>
     </div>
+    <div
+      v-if="!information.apache"
+      id="vf-nginx-configure"
+      class="development__wrapper"
+    >
+      <div
+
+        class="development__wrapper_title"
+      >
+        {{ $t('textConfigureNginx') }}
+      </div>
+      <!-- eslint-disable vue/no-v-html -->
+      <div
+        class="development__wrapper_text"
+        v-html="$t('descriptionConfigureNginx')"
+      />
+      <pre>
+server {
+        listen 443 ssl http2;
+        listen [::]:443 ssl http2;
+        server_name YOUR_DOMAIN;    # setup your domain here
+
+        # supply SSL certificates here
+
+        root /OPENCART_ROOT_FOLDER_PATH/vuefront; #setup your opencart root folder path here following with /vuefront on the end. This will return the VueFront Web App by default.
+        index index.html index.php;
+
+        location / {
+                try_files $uri $uri/ $uri.html /200.html;
+
+# required to return OpenCart index.php
+	location /index.php {
+		root /OPENCART_ROOT_FOLDER_PATH/; #setup your opencart root folder path
+		index index.php;
+
+		location ~ \.php$ {
+			include snippets/fastcgi-php.conf;
+			fastcgi_pass unix:/var/run/php/php7.2-fpm-opencart.vuefront.com.sock;
+		}
+	}
+
+# required to return OpenCart catalog folder
+	location /catalog {
+		root /OPENCART_ROOT_FOLDER_PATH/; #setup your opencart root folder path
+		index index.php;
+
+		location ~* \.(jpg|jpeg|gif|png|ico|pdf|ppt|bmp|rtf|svg|otf|woff|woff2|ttf)$ {
+			expires max;
+			add_header Pragma public;
+			add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+		}
+
+		location ~* \.(js|css|txt)$ {
+			expires 3d;
+			add_header Pragma public;
+			add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+		}
+	}
+
+# required to return the OpenCart admin folder
+	location /admin {
+		root /OPENCART_ROOT_FOLDER_PATH/; #setup your opencart root folder path
+		index index.php;
+
+		location ~ \.php$ {
+			include snippets/fastcgi-php.conf;
+					fastcgi_pass unix:/var/run/php/php7.2-fpm-opencart.vuefront.com.sock;
+		}
+	}
+# required to return images
+	location /image {
+		root /OPENCART_ROOT_FOLDER_PATH/; #setup your opencart root folder path
+		index index.php;
+
+		location ~* \.(jpg|jpeg|gif|png|ico|pdf|ppt|bmp|rtf|svg|otf|woff|woff2|ttf)$ {
+			expires max;
+			add_header Pragma public;
+			add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+		}
+
+		location ~* \.(js|css|txt)$ {
+			expires 3d;
+			add_header Pragma public;
+			add_header Cache-Control "public, must-revalidate, proxy-revalidate";
+		}
+	}
+
+#You should have it already since you are running OpenCart on Nginx. But just in case, we supplied this rule below.
+        location ~ \.php$ {
+                include snippets/fastcgi-php.conf;
+                fastcgi_pass unix:/var/run/php/YOUR_PHP_FPM_SOKET.sock; #setup your php-fpm socket
+        }
+}</pre>
+    </div>
   </div>
 </template>
 <script>
@@ -104,7 +198,9 @@ export default {
   "textConfigureApache": "Configure .htaccess",
   "descriptionConfigureApache": "For VueFront Web App to replace your current frontend, you will need to configure your .htaccess. <br>Although we do this automaticly for you, you can still customize it you yourself.<br> <ul>    <li>Turn off the VueFront app. Switch the toggle on top of the page to OFF</li>    <li>Use your text editor to edit the .htaccess file with the following rules:</li>  </ul>",
   "buttonCopied": "copied",
-  "buttonCopy": "copy"
+  "buttonCopy": "copy",
+  "textConfigureNginx": "Configure Nginx configuration file",
+  "descriptionConfigureNginx": "For VueFront Web App to replace your current frontend, you will need to configure your Nginx configuration file. This can only be done manually via your FTP or File Manager. Use your text editor to add the following rules:"
 }
 </i18n>
 <style lang="scss">

view/javascript/components/header.vue

@@ -12,6 +12,14 @@
           <b-col>
             <b-navbar-nav class="align-items-center vf-header__right_nav">
               <header-activation v-if="cms.builds.length > 0 && information.apache" />
+              <b-button
+                v-if="cms.builds.length > 0 && !information.apache"
+                class="vf-header__button_activate"
+                variant="success"
+                @click="$scrollTo('#vf-nginx-configure')"
+              >
+                {{ $t('button_activate') }}
+              </b-button>
               <header-account />
             </b-navbar-nav>
           </b-col>
@@ -49,6 +57,15 @@ export default {
     @media (min-width: 1920px) {
       padding: 0 60px 50px;
     }
+    &__button_activate {
+      margin-right: 20px;
+      @media (--phone-and-tablet) {
+        margin-right: auto;
+      }
+      @media (min-width: 1920px) {
+        margin-right: 40px;
+      }
+    }
     &__wrapper {
       min-height: 63px;
       display: flex;
@@ -90,6 +107,7 @@ export default {
 </style>
 <i18n locale="en">
 {
-  "text_vuefront": "VueFront"
+  "text_vuefront": "VueFront",
+  "button_activate": "Activate"
 }
 </i18n>

view/javascript/components/modal.vue

@@ -14,7 +14,6 @@
         <div class="vf-modal-content">
           <a
             v-if="btnClose"
-            type="button"
             class="vf-modal-close"
             @click="cancel"
           ><font-awesome-icon :icon="['far', 'times']" /></a>