vuestorefront / template-magento Goto Github PK

View Code? Open in Web Editor NEW

14.0 26.0 13.0 3.41 MB

Shell 0.03% Vue 17.33% TypeScript 78.50% JavaScript 3.76% SCSS 0.37%

template-magento's Introduction

DEPRECATED

This repository is deprecated and no longer maintained. The new repository can be found HERE

Magento 2.x theme

Vue Storefront 2 integration with Magento

Requirements:

NodeJS v16 or later
Yarn
Magento >= v2.4.3 instance for GraphQL endpoint
Change Magento GraphQL Query Complexity and Depth values

[WARNING] Don't forget to change the Magento GraphQL Query Complexity and Depth values Magento 2 by default has a lower value for the complexity of 300, and a higher value for the depth of 20. Magento 2 - Issue #32427 The changes are required, due to the size of the queries and mutations in the api-client implementation. To do this changes, you can use the Magento 2 module, which adds a configuration panel to your admin, or do this changes manually.

To install the Magento 2 GraphQL Config module, on your Magento installation execute:

composer require caravelx/module-graphql-config

php bin/magento module:enable Caravel_GraphQlConfig

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

Find more information about the module GraphQl Custom Config

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, check out Nuxt.js docs.

Contributors ✨

Honorable Mentions

Thanks go to these wonderful people 🙌:

_{Heitor Ramon Ribeiro} 💻 🚧 📖 📆	_{Alef Barbeli} 💻 📖	_{Henrique Lopes} 💻 📖	_{Đại Lộc Lê Quang} 💻	_{Bogdan Podlesnii} 💻
_{Patrick Monteiro} 💻	_{Kevin Gorjan} 💻 📖	_{Bartosz Herba} 💻 📖 🚧 🧑‍🏫 👀	_{Marcin Kwiatkowski} 💻 📆 💼 📖 🤔 🚧 🧑‍🏫 👀	_{Filip Rakowski} 💬 🧑‍🏫 👀
_{Filip Sobol} 💬 🧑‍🏫 👀 📖	_{Patryk Andrzejewski} 💬 🧑‍🏫 👀	_{Renan Oliveira} 🔧 🔌	_{Dominik Deimel} 💻 📖	_{Lior Lindvor} 💻
_{Artur Tagisow} 💻	_{Jonathan Ribas} 💻	_{Ali Ghanei} 💻	_{Maya Shavin} 📖	_{Alexander Devitsky} 💻
_{Diego Alba} 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

template-magento's People

Contributors

Stargazers

Watchers

Forkers

cmuench caravelx bohdanryba isabella232 diacu addwebsolution benjaminv deepakworldphp86 lionelcalmejane b-karapet davidwindell bensinca kamkar11

template-magento's Issues

Build fails (postcss ParserError)

Hi, I'm getting the following error when trying to build the production version of the template.

Steps followed

$ npx @vue-storefront/cli init
Select the Magento 2 (beta) integration option
Copy the .env.example as .env and update the Magento integration URLs (MAGENTO_GRAPHQL, MAGENTO_EXTERNAL_CHECKOUT_URL)
$ yarn install
$ yarn dev (everything works in dev mode)
$ yarn build (build fails with the following errors)

Errors

ProductCarousel.vue syntax error

ERROR in ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
    at /Users/me/projects/vsf-build-test/components/ProductsCarousel.vue:1:50
    at Parser.error (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:194:18
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&) 4:14-472
 @ ./components/ProductsCarousel.vue?vue&type=style&index=0&id=430784f8&lang=scss&scoped=true&
 @ ./components/ProductsCarousel.vue
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/Product.vue?vue&type=script&lang=js&
 @ ./pages/Product.vue?vue&type=script&lang=js&
 @ ./pages/Product.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

Home.vue syntax error

ERROR in ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 25
    at /Users/me/projects/vsf-build-test/pages/Home.vue:1:1872
    at Parser.error (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:162:20)
    at Parser.parseTokens (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:245:14)
    at Parser.loop (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:132:12)
    at Parser.parse (/Users/me/projects/vsf-build-test/node_modules/postcss-values-parser/lib/parser.js:51:17)
    at parse (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:47:30)
    at /Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:333:24
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:194:18
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:139:18
    at Rule.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Rule.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at /Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:152:24
    at Root.each (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:105:16)
    at Root.walk (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:135:17)
    at Root.walkDecls (/Users/me/projects/vsf-build-test/node_modules/postcss/lib/container.js:192:19)
    at transformProperties (/Users/me/projects/vsf-build-test/node_modules/postcss-custom-properties/index.cjs.js:330:8)
 @ ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true& (./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--7-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&) 4:14-460
 @ ./pages/Home.vue?vue&type=style&index=0&id=30a80df0&lang=scss&scoped=true&
 @ ./pages/Home.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

I cant find any relevant issues anywhere, also I'm not sure if this is the right repo to create this issues?

Dev environement

nodejs v14.16.1
macOS v11.6
yarn v1.22.10
npm v6.14.12

vue-composition-api.mjs not found

Recently I'm getting the following error when running the project;

Module not found: Error: Can't resolve '@vue/composition-api/dist/vue-composition-api.mjs' in '{project dir}/node_modules/vue-demi/lib'

It seems like its related to the recent v0.12.0 release of the vue-demi package. Some related issues:

I found the following workaround, but I'm not sure that this is the correct resolution to this issue.

Add the following to nuxt.config.js:

import { resolve } from 'path'
...

export default {
  ...
  alias: {
    '@vue/composition-api/dist/vue-composition-api.mjs': resolve('./node_modules/@vue/composition-api/dist/vue-composition-api.esm.js'),
  },
  ...
}

fix: fix typo in the .env.example file.

Currently .env.example has wrong example of the VSF_SSR_MIDLLEWARE_URL - this brakes the app and not allowing to run smoothly

VSF_STORE_URL=https://localhost:3000
VSF_MIDDLEWARE_URL=https://localhost:3000/api/
VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/ <- this should be https

Cannot query field "new" on type "SimpleProduct"

When trying to run the application with "yarn dev" i'm getting two error message saying as follow:

ERROR [VSF][error] [GraphQL error]: Message: Cannot query field "new" on type "SimpleProduct"., Location: [column: 7, line: 208], Path: undefined 21:52:59

ERROR [VSF][error] [GraphQL error]: Message: Cannot query field "sale" on type "SimpleProduct". Did you mean "name"?, Location: [column: 7, line: 212], Path: undefined 21:52:59

[BUG][Related Products] The name value of related products is NULL

Hi, testing with VSF connected to M2 I see the following..

if I assign related products to one product, if I execute the query in the GraphQl IDE of Chrome I see that the result is correct:

but.. when I go to see the carousel in the product, the product don't show my related products.

I see this:
var getProductRelatedProduct = function (product) { var _a; return ((_a = product === null || product === void 0 ? void 0 : product.related_products) === null || _a === void 0 ? void 0 : _a.filter(function (p) { return p.name && p.uid; })) || []; };

when I see it, go to review the component and see that the related products have the name value to NULL, then it don't be return of product.

Reviewing this demo: https://m2-vsf.caravelx.com/ , see that have the same problem:

Thanks very much!

Incorrectly tagged v1.1.0

The https://github.com/vuestorefront/template-magento/releases/tag/1.1.0 tag is not the correct 1.1.0 release.

Please can you re-tag and release?

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.