vuestorefront / magento2 Goto Github PK
View Code? Open in Web Editor NEWVue Storefront 2 integration for Magento 2
Home Page: https://docs.vuestorefront.io/magento
License: MIT License
Vue Storefront 2 integration for Magento 2
Home Page: https://docs.vuestorefront.io/magento
License: MIT License
The feature does not seem implemented yet, it would be great to have it in the next release!
Currently in the Magento 2 docs we are using generic interfaces from the core. It doesn't provide enough information to the user as there composables can work really different depending on the platform.
// https://docs.vuestorefront.io/magento/guide/composables/use-category.html#api
interface UseCategory<CATEGORY, CATEGORY_SEARCH_PARAMS> {
categories: ComputedProperty<CATEGORY[]>;
search(params: ComposableFunctionArgs<CATEGORY_SEARCH_PARAMS>): Promise<void>;
loading: ComputedProperty<boolean>;
error: ComputedProperty<UseCategoryErrors>;
}
We should write there real types and interface for Magento connector like we did in Comemrcetools or Salesforce Commerce Cloud
It could be interesting to be able to apply a coupon on shopping cart.
No response
For configurable product price should be updated on variant selection according to price setting for variant
It's always displayed price of cheapest variant
The prices for variants are queried from M2 graphql:
... on ConfigurableProduct {
variants {
product {
id
name
sku
price_range{
minimum_price{
regular_price{
value
currency
}
}
}
}
}
}
It's not implemented atm in vuestorefront/magento2
develop
14.17.4
Chrome, FF
Ubuntu 20.04
No response
On the Category.vue
when a product is displayed, an AddToCart button is visible, but if a product is from the type ConfigurableProduct
it needs to have a certain amount of data before sending to the AddToCart function.
We need to check if we will go to the product if custom, then if it is, we will redirect the user to the Product Page, and won't add it to the Cart.
When switch between product variants is done, the delay exists caused by additional queries few different reasons. It creates worse user experience comparing to M2 standard FE.
We could preload all data on product details query and then just reuse it
There are few things which have influence on user experience:
Hi everyone, after do all step follow https://github.com/vuestorefront/magento2, my website running with no error in homepage. But some function like useCart, useReview not using config magentoGraphQl. They just use default url "host:port/api/". Is there anything I need to do for this? (Some function woking: useProduct...)
In Magento it's possible for the user to add custom plugins and modules to their Magento installation.
Those modules and plugins add new functionalities in the GraphQL schema, and into the application.
We need to find a way for the user to increment the application through the theme
where they will create a custom composeable
extension and api-client
extension, where it will communicate with the current @vue-storefront/magento
installation and just add those extensions.
No response
this is my solution, but i still get error, because function setCartId(null) is not work correct (it doesn't update to the cookie immediately)
load: async (context: Context) => {
const apiState = context.$magento.config.state;
Logger.debug('[Magento Storefront]: Loading Cart');
const customerToken = apiState.getCustomerToken();
let cartId = apiState.getCartId();
if (customerToken) {
try {
const result = await context.$magento.api.customerCart();
return result.data.customerCart as unknown as Cart;
} catch (e) {
apiState.setCartId(null)
apiState.setCustomerToken(null)
cartId = null
}
}
if (!cartId) {
const { data } = await context.$magento.api.createEmptyCart();
cartId = data.createEmptyCart;
apiState.setCartId(cartId);
}
try {
const cartResponse = await context.$magento.api.cart(cartId);
Logger.debug(cartResponse);
return cartResponse.data.cart as unknown as Cart;
} catch (e) {
apiState.setCartId(null);
return await factoryParams.load(context, {}) as unknown as Cart;
}
No response
1.0.0-rc.1
Chrome
14.x
No response
No response
save: async (context: Context, params) => {
Logger.debug('[Magento] setBillingAddress');
const { id } = context.cart.cart.value;
Logger.debug(id);
Logger.debug(typeof id);
const {
apartment,
sameAsShipping,
...address
} = params.billingDetails;
const setBillingAddressOnCartInput: SetBillingAddressOnCartInput = {
cart_id: id,
billing_address: {
address: {
...address,
street: [address.street, apartment],
},
same_as_shipping: sameAsShipping,
},
};
const { data } = await context.$magento.api.setBillingAddressOnCart(setBillingAddressOnCartInput);
/**
* This is a workaround needed due to Magento GraphQL API
* cleaning the Shipping method after defining the billing address
*/
const shippingMethod = context.useShippingProvider.state.value;
await context.useShippingProvider.save({
shippingMethod: {
carrier_code: shippingMethod.carrier_code,
method_code: shippingMethod.method_code,
},
});
/**
* End of GraphQL Workaround
*/
return data.setBillingAddressOnCart.cart.billing_address;
},
1.0.0-rc.2
Chrome
14.x
No response
If I click on product title on wishlist sidebar I should be redirected to product page.
If I click on product title on wishlist sidebar I'm not redirected to product page.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
Now in the Magento 2 connector, the user has on the MyAccount a Shipping address and billing address, but in Magento there is just on DB storage for addresses, and default for shipping and billing.
We need to improve the current model to look like this:
On the checkout process, we need to make sure there is just one group of addresses with the default billing on the billing step, the same for shipping.
If possible transform the composeables to have unique address management and update the client-API to do the same.
I should be able to increase or decrease product quantity from micro cart.
I can't increase or decrease product quantity from micro cart.
{"graphQLErrors":[{"message":"The cart isn't active.","extensions":{"category":"graphql-no-such-entity"},"locations":[{"line":266,"column":3}],"path":["updateCartItems"]}],"networkError":null,"message":"GraphQL error: The cart isn't active."}
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
When you change your password, you should see a notification.
When you change your password, you can't see any notification on screen.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
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
It needs to fix and apply the correct search function on the AppHeader.vue, and check if the search URL is working also.
In the Category.vue
page the filters
sidebar is not working, due to the integration with the Magento aggregations
.
It needs to be added.
When you update your personal data, you should see a notification.
When you update your personal data, you can't see any notification on screen.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
How can we handle payments through external payment providers (e.g. Adyen, Stripe, Mollie)? It could be that I am asking this question in the wrong place, since it might apply to Vue Storefront in general. But since every integration could handle payments different, I figured I should ask it here.
Imagine I want to implement iDEAL by Mollie payments to finalize an order. How would I go about that? I cannot find much documentation about this.
1.0.0-rc.2
No response
export const transformUserUpdateAddressInput = (addressInputParams): {
addressId: number;
input: CustomerAddressInput;
} => {
const {
apartment,
...address
} = addressInputParams.address;
const addressParams: CustomerAddressInput = {
...address,
street: [address.street, apartment],
};
return {
// @ts-ignore
addressId: params.address.id,
input: {
...addressParams,
default_shipping: true,
},
};
};
remove this line
default_shipping: true
export const transformUserUpdateAddressInput = (addressInputParams): {
addressId: number;
input: CustomerAddressInput;
} => {
const {
apartment,
...address
} = addressInputParams.address;
const addressParams: CustomerAddressInput = {
...address,
street: [address.street, apartment],
};
return {
// @ts-ignore
addressId: params.address.id,
input: {
...addressParams,
},
};
};
No response
1.0.0-rc.2
14.x
Chrome
macOS
No response
When I click on Forgotten password link, I should be able to reset my password if I have an account.
When I click on Forgotten password link, nothing happens.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
When order is created shipping price is added to order and displayed on order totals
No response
2.4.3
14.17.4
Chrome, FF
Ubuntu 20.04
No response
If I click on a product image thumbnail on product page, it should change the main image display on screen.
Nothing happen if I click on a product image thumbnail on product page.
For information, on direct access to a product page, if I click on a product image thumbnail, it switches it to the main image correctly.
No response
New Products
blockAdobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
change params to addressInputParams in
return {
// @ts-ignore
addressId: addressInputParams.address.id,
input: {
...addressParams,
default_shipping: true,
},
};
when update shipping addres
We need to create a dynamic AppHeader.vue
component that request the categories
from the store and displays as the menu for the client.
I should be able to see categories in header navigation menu and browse category / product pages.
When I launch build I can see the following error several times as output:
ERROR [VSF][error]: [GraphQL error]: Message: Cannot query field "swatch_data" on type "ConfigurableProductOptionsValues"., Location: [column: 7, line: 94], Path: undefined
I can't:
No response
Run yarn && yarn dev
and check output:
ERROR [VSF][error]: [GraphQL error]: Message: Cannot query field "swatch_data" on type "ConfigurableProductOptionsValues"., Location: [column: 7, line: 94], Path: undefined 15:37:45
Adobe Commerce 2.4.3
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
If you access a fake product URL, you should have a 404 content page with HTTP code 404.
If you access a fake product URL, you have a product page with a 200 HTTP Code and a product name as undefined, price as USD 0,00.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
Pagination on product list page (for example category page) works fine
Links in pagination bar looks like https://vsf.mediabridge.solutions/c/[object%20Object] , what produces error on pagination switch
2.4.3
14.17.4
Chrome, FF
Ubuntu 20.04
No response
Discount is displayed like on M2 FE:
Discount is not displayed in basket overlay
Discount is displayed wrong on order summary page
No response
develop
14.17.4
Chrome, FF
Ubuntu 20.04
No response
This is an early-stage roadmap with some of the features that are needed, to have a complete store running and be able to be production-ready.
Contributing instructions should be more detailed to avoid confusion
Some information and defaults are either missing on causing confusion when setting up the repo for contribution and getting the project running locally.
Setting up repo with current information results in problems and questions
Was not able to get project running without @bloodf help
I will submit a PR for this
When VSF is connected to sample M2 data the categories and products in categories are loaded like on M2 FE ( https://vsf-magento.mediabridge.solutions/women.html ) or like on VSF1 demo ( https://capybara.storefrontcloud.io/women.html, https://demo.vuestorefront.io/women.html )
Some categories are displayed, but their subcategories and products inside are not loaded. Instead products and subcategories from other categories are displayed: https://vsf.mediabridge.solutions/c/women.html
Not clear yet what produces such behavior and how to fix it. Still in investigation process.
The reason could be way how products are assigned to categories in M2: if product is assigned to subcategory it does not automatically means it's also belongs to main category.
2.4.3
14.17.4
Chrome, FF
Ubuntu 20.04
No response
It needs to implement the ConfigurableProduct correct rendering with options in the Product.vue
page
If you access a fake category URL, you should have a 404 content page with HTTP code 404.
If you access a fake category URL, you have a 500 HTTP Code and error page.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
No response
No response
1.0.0-rc.2
Chrome
14.x
No response
Actually when you access VSF2 it automatically creates an empty cart.
Most users and bots only visit pages and don't perform an add to cart action at all. Why flood M2 database with empty carts all the time?
Cart should only be created when a product is added to the cart.
No response
We need to improve the errors on the Login dialog for the user, when there is an wrong password, problematic account or problem with the account creation.
I want to access the customizable product directly when accessing the shared URL
VSF should connect to my Magento site and load products
No products appear on the page, but I receive connection errors in the console:
ERROR [VSF][error] [Network error]: TypeError: Only absolute URLs are supported 21:27:31
ERROR [VSF][error] useCart/load Request failed with status code 500 21:27:31
at createError (/Users/markwlodawski/dev/vsf2ports-magento/magento2/node_modules/axios/lib/core/createError.js:16:15)
at settle (/Users/markwlodawski/dev/vsf2ports-magento/magento2/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/Users/markwlodawski/dev/vsf2ports-magento/magento2/node_modules/axios/lib/adapters/http.js:260:11)
at IncomingMessage.emit (events.js:327:22)
at endReadableNT (_stream_readable.js:1220:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
I'm not sure whether this is related to Axios, Apollo, or
I actually first had this issue a few days ago when my Magento site was still located only at its static IP address, so I spent a couple of days directing the nameservers of mqexports.com to the Magento installation, hosted on Google Cloud services, hoping the problem would go away. Apparently, it wasn't the source of the problem, because now the issue is still there.
MAGENTO_GRAPHQL=https://mqexports.com/graphql
MAGENTO_EXTERNAL_CHECKOUT=https://mqexports.com
MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
Magento Documentation on "Multistore":
https://devdocs.magento.com/guides/v2.4/config-guide/multi-site/ms_websites.html
We should implement useStore
feature from core, taking advantage of Magento "Multistore" feature.
Describe the solution you'd like
The Multistore feature allow merchants to use a single Magento installation and admin to rule multiple stores/ catalogs/ currencies
What i did to solve this was to use @vue/composition-api defineComponent function wrapping vue template on it.
Every component and pages of the application have this problem...
In develop branch at step 8 when running yarn dev:theme file I got error message "file was not found" in a nutshell.
in packages/theme/pages/MyAccount.vue on line 50
import MyProfile from './MyAccount/MyProfile';
should be changed to
import MyProfile from './MyAccount/MyProfile.vue';
The docs need to be updated with the new structure and how to start development and how to start locally when the package is available on NPM
If you access a fake page URL, you should have a 404 content page with HTTP code 404.
If you access a fake page URL, you have a 500 HTTP Code and error page.
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
Update my newsletter subscription should work.
I can't update my newsletter subscription option:
It's actually calling /api/magento/updateCustomerEmail
endpoint posting [{}] 0: {}
{"graphQLErrors":[{"message":"Variable \"$email\" of required type \"String!\" was not provided.\n\nVariable \"$password\" of required type \"String!\" was not provided.","extensions":{"category":"graphql"}}],"networkError":null,"message":"GraphQL error: Variable \"$email\" of required type \"String!\" was not provided.\n\nVariable \"$password\" of required type \"String!\" was not provided."}
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
If I click on product title on micro cart I should be redirected to product page.
If I click on product title on micro cart I'm not redirected to product page.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
It needs to check if the Upsell products and Related products are being fetched correctly and rendering correctly on the Product.vue
page.
It need to implement the Complete checkout flow through the VueStorefront client. removing the mocked data.
In guest mode, when I browse from homepage to PLP and PDP, we should have a smooth transition without a complete loading page.
It should only load missing components from the new page we are accessing.
In guest mode, when I browse from homepage to PLP and PDP, I can see a blank page and a full loading page, assets load again.
It seems we don't have smooth PWA effect loading only missing components from the new page we are accessing.
No response
Adobe Commerce 2.4.3 / VSF 1.0.0-rc.2
v14.17.5
Chrome 92.0.4515.159 (Official Build) (x86_64)
Mac OSX
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.