vuefront/prestashop

Free PWA & SPA for PrestaShop

VueFront

Vue powered CMS agnostic frontend framework for your old-fashioned Blog and Ecommerce site.

Show your ❤️ - give us a ⭐
Help us grow this project to be the best it can be!

Demo

VueFront on Wordpress

VueFront on OpenCart

VueFront on Magento

VueFront on PrestaShop

What can I do with VueFront?

Easily turn your Wordpress, OpenCart, Magento, PrestaShop, Shopify or any other blog/store CMS into an SPA and PWA with Vue.js in less then 5 minutes.

VueFront Tech-stack:

• SPA
• PWA
• AMP
• GraphQL + Apollo
• VueJS + Nuxt
• Atomic Design
• JAMstack

Who can use VueFront?

You or your clients with a site on an old-fashiond CMS. If you want to try new technology, outrun your competition and just provide a better user experience, but not ready to invest thousands of dollars, VueFront is for you.

• It uses the latest tech stack.
• It's free.
• It's easy to setup, test and run.

It works out-of-the-box:

• You get a shiny new Web APP.
• You get to keep your current CMS admin panel.
• You can always switch back to your old site.

Give it a try, what do you have to lose?

How do I get started? (development)

1. Install VueFront CMS Connect App on your site and copy the CMS Connect URL.
2. Install VueFront app. (requires node.js >= 8, git, and yarn)

# Create VueFront app. replace <project-name> with vuefront
yarn create vuefront-app <project-name>
# OR npx create-vuefront-app <project-name>

yarn dev

Switch to production

1. build your App

# build the app
yarn build

2. Copy the contents of your app from /dist to your root folder of your CMS where it is hosted.

3. Configure your hosting to load index.html first. This can be a bit tricky.

For OpenCart CMS you can use this:

• Apache

# for VueFront to work you need to load index.html before any other index file
DirectoryIndex index.html index.php

• Nginx

# for VueFront to work you need to load index.html before any other index file
index index.html index.php;

# when visiting any other url, it should forward to the root index.html file
location / {
    try_files $uri $uri/ /index.html;
}

prestashop's Issues

httaccess configuration

I m trying to install this app, i installed prestashop and i uploaded the module that indicate in the instructions, I have installed vuefront in the root of the prestashop directory and I have added the text in the .htaccess, it seems that the configuration of the .htaccess is for wordpress not for prestashop, somebody used this module?

supported prestashop versions

hello,

which prestashop versions are compatible with this module. i have installed on prestashop 1.7.7.5 i get a error

GraphQL error: Cannot query field "url" on type "Product". GraphQL error: Cannot query field "extra" on type "Product". GraphQL error: Cannot query field "manufacturer" on type "Product".

Important question about GraphQL API on production host

this demo depend on GraphQL API wich is hosted on https://vuefront.com/
This can be a simple solution for a Development phase but for production project nobody will use it.

It's a performance/security questions.

Nobody will use third part Api (under the hood) on production.

So will you provide "GraphQL API" app ? where we can dowload it ?

If GraphQL API is not availlable , so users will prefer the https://www.vuestorefront.io/ project wich is 100% open source

Installation fails.

When you initially start with yarn run dev the following error is given:

ERROR Failed to compile with 224 errors friendly-errors 16:01:13 These dependencies were not found: friendly-errors 16:01:13 friendly-errors 16:01:13 * core-js/modules/es6.array.find in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es6.array.iterator in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other friendly-errors 16:01:13 * core-js/modules/es6.function.name in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/molecules/product-option/select.vue?vue&type=script&lang=js& and 5 others * core-js/modules/es6.number.constructor in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/atoms/alert/alert.vue?vue&type=script&lang=js&, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/atoms/heading/heading.vue?vue&type=script&lang=js& and 14 others * core-js/modules/es6.object.assign in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es6.object.keys in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/extensions/account/account/account.vue?vue&type=script&lang=js& and 30 others * core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 33 others * core-js/modules/es6.promise in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js, ./node_modules/vuefront/lib/utils/module.js * core-js/modules/es6.regexp.match in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other friendly-errors 16:01:13 * core-js/modules/es6.regexp.search in ./.nuxt/utils.js friendly-errors 16:01:13 * core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js& and 4 others * core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js and 1 other friendly-errors 16:01:13 * core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 16:01:13 * core-js/modules/es6.string.iterator in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/extensions/common/menu/menu.vue?vue&type=script&lang=js& and 1 other * core-js/modules/es6.string.repeat in ./.nuxt/utils.js friendly-errors 16:01:13 * core-js/modules/es6.string.starts-with in ./.nuxt/utils.js friendly-errors 16:01:13 * core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 31 others * core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js friendly-errors 16:01:13 * core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vuefront/lib/components/extensions/account/account/account.vue?vue&type=script&lang=js& and 30 others * core-js/modules/es7.promise.finally in ./.nuxt/client.js friendly-errors 16:01:13 * core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js * core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 32 others friendly-errors 16:01:13 To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.number.constructor core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable i Waiting for file changes 16:01:13 i Memory usage: 554 MB (RSS: 745 MB)

Enhance getProducts behavior

In PrestaShop getProducts returns all products associated with category_id.

prestashop/model/store/product.php

Line 133 in b40bce9

$sql->where('p.`id_category_default` = ' . (int)$data['filter_category_id']);

What does the proposed changes look like?

if (!empty($data['filter_category_id']) && $data['filter_category_id'] > 0) {
    $sql->leftJoin('category_product', 'c', 'c.`id_product` = p.`id_product`');
    $sql->where('c.`id_category` = ' . (int)$data['filter_category_id']);
}