Welcome to Shopping UI with Vue.js demo!
This web application is an example of how you can build a simple user interface using Vue.js template without Node.js server-side rendering.
Thanks to Morooka for his concept of Shopping UI.
Thanks to MiMiMi community for a small PHP framework.
Now you can see a live demo for every page of this application.
Let's start with the vendor pages. Here are two examples: Nike Shoes and The Emptiness Wear.
The first one has 10 demo products to show. The second one doesn't have any products, so its button is grey (but you can still view its clear page).
If you are a webmaster, remember that this page is represented by a template file Themes/default/vendor.tpl.
It is also associated with a module Vendors/Vendors.php to read a vendor entry from the database.
This application also has the following URLs for crawlers.
If you do not understand the purpose of these documents, please ask your SEO specialist.
This application has some pages with customer orders. Here are also two examples: Order 1 and Order 4.
The first one has 7 ordered products, its status is "Closed".
Another one contains 2 ordered products, and its second line refers to a vendor Lavager that is no longer in the site's database.
Moreover, the last order was placed by an unregistered buyer Young Visitor, not by a registered buyer Demo Customer, as was the case with the first order.
The first technical page is a cart endpoint. It can be visited only from the cart form.
To understand this nuance, look at the template file order-add.tpl. You should also look at the cart form in template file snippets/shopping-ui.vue.
The second technical page is a vendor endpoint. It is used to dynamically load vendor products in JSON format into the Vue template shopping-ui.vue.
For more details, see a template file order-json.tpl.
The third technical page is a customer endpoint. It is used to dynamically load information about the current customer (if currently logged in) in JSON format into the cart form designed in Vue template shopping-ui.vue.
For more details, see a template file customer-json.tpl and the associated module Customers/Customers.php for reading a customer entry.
They are used to edit vendor pages.
Please remember that these pages are represented by template files vendor-add.tpl, vendor-delete.tpl, vendor-edit.tpl.
Please remember that this page is represented by a template file product-add.tpl.
Of course, there is a 404 error page.
This page is represented by a template file error404.tpl.
You need to download MiMiMi installation package from the official website.
Then you need to extract this package to your computer and copy all extracted files to your site.
Open home page in a browser. You will see the initial page for installing MiMiMi package. Follow on-screen instructions. Once you reach the app variants page, select option vue.js.cart.
This application requires two modules only. You must select them: Helper and Db.
After installation, your site will work in demo mode. It prevents data from being saved to the database, but only simulates saving it. To switch the site to production mode, you should open file Application.php and change its property $onProduction to TRUE.
Once you have installed the application, remove directory media/demo-posts before opening the app's home page for the first time.
Then you should remove a property $demoRows in all these files: Customers/Customers.php, Orders/Orders.php, Vendors/Vendors.php, Vendors/Products/Products.php.
Then you should remove a method install() in the file Vendors/Vendors.php.
This demo application does not have a login page. It always assumes that the current visitor is a logged in customer or administrator. So you need to improve the following details:
Application.php -> checkForAdmin() to verify if the current visitor has an administrative role. Currently it always returns TRUE.Application.php -> getCustomerId() to retrieve an identifier of the current customer. Currently it always returns 1 in demo mode and 0 in production.Application.php -> run() to route a request to the login page and create a corresponding template file, such as Themes/default/login.tpl.