Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Expose admin-ui for custom fields on ProductVariantPrice. #3020

Open
lzzfnc opened this issue Aug 19, 2024 · 6 comments · May be fixed by #3263
Open

Expose admin-ui for custom fields on ProductVariantPrice. #3020

lzzfnc opened this issue Aug 19, 2024 · 6 comments · May be fixed by #3263
Labels
contributions welcome P4: low Non-critical, workarounds exist type: feature ✨ @vendure/admin-ui

Comments

@lzzfnc
Copy link
Contributor

lzzfnc commented Aug 19, 2024

Is your feature request related to a problem? Please describe.

Custom fields for ProductVariantPrice at the moment don't expose an admin-ui.

Describe the solution you'd like

Custom fields are rendered as it happens for other entities.

Describe alternatives you've considered

@michaelbromley mentioned a workaround here:

A work-around solution would be to define a Custom Detail Component block on the product variant detail page as part of a UI extension, and in that block you can have a form which exposes the custom fields. The main drawback here is that it will not be hooked up to the overall form save mechanism for the detail page, so changes made to the custom fields would need their own "save" button inside the custom detail component.

#2654 (comment)

Additional context

I'm trying to setup a system to show discounts on product variants in the catalog. As far as I understood, In order to display the discounted prices in the catalog this cannot be made with a promotion, since it gets applied during checkout, so I'm going with custom fields.

At the moment I managed to implement a single channel version adding a Recommended Retail Price custom field to the ProductVariant, the only problem is that this custom field seems to be not channel aware, meaning that I cannot have the same product with different discounts in different channels. It seems that is possible to set the custom field to ProductVariantPrice intead, and that would be channel-aware apparently. However it doesn't expose any field in the admin UI.
@lzzfnc
Copy link
Contributor Author

lzzfnc commented Aug 19, 2024

I would be up to work on a contribution for this, @michaelbromley could you point me at where to start? Are there any example to follow in the source?

For the ui part I imagine probably to work here, but not sure if also the services should be addressed

https://github.com/vendure-ecommerce/vendure/tree/8f99b2dac250ca110b6a5ff4e0fa8aebff424888/packages/admin-ui/src/lib/catalog/src/components/product-variant-detail

@michaelbromley
Copy link
Member

Great, here's some pointers:

  • First you'll need to get access to the custom field defs for prices, in the same way we do here for ProductVariant and ProductOption.
  • This config then gets passed to the TabbedCustomFieldComponent in the template, which will render the controls

@lzzfnc

This comment was marked as outdated.

Sign in to view
@lzzfnc
Copy link
Contributor Author

lzzfnc commented Aug 27, 2024

After some tryouts I realized that ProductVariantPrice is actually an array of prices, so had to consider that when dealing with the binding.

The customFields are rendered properly now, but an error that comes when trying to update them is

Variable "$input" got invalid value { price: 124500, currencyCode: "USD", delete: false, customFields: { RRP: 130000 } } at "input[0].prices[0]"; Field "customFields" is not defined by type "ProductVariantPriceInput".

@michaelbromley I'm wondering if I have to include it in the type definition somewhere?

@dlhck
Copy link
Collaborator

dlhck commented Sep 24, 2024

@lzzfnc you might need to update the input type here:

vendure/packages/core/src/api/schema/admin-api/product.api.graphql

Line 137 in a735bdf

input ProductVariantPriceInput {

@dlhck dlhck moved this to 👀 Under consideration in Vendure OS Roadmap Sep 24, 2024
@lzzfnc
Copy link
Contributor Author

lzzfnc commented Oct 9, 2024 •
edited
Loading

Hey thanks for the hint!

I had a look at the schema you linked, but it doesn't seem that hard coding the customField field to the input there is the way to deal with it? Mostly because there are no other inputs with custom fields there.

I wonder if the way to do it could be to add a function addProductVariantPriceCustomFields function to graphql-custom-fields.ts,

https://github.com/vendure-ecommerce/vendure/blob/a735bdf9eaadb83251eec1a135b084569d10e333/packages/core/src/api/config/graphql-custom-fields.ts

and then using it in the buildSchemaForAPI function

vendure/packages/core/src/api/config/configure-graphql-module.ts

Line 145 in a735bdf

async function buildSchemaForApi(apiType: 'shop' | 'admin'): Promise<GraphQLSchema> {

@Draykee Draykee linked a pull request Dec 6, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contributions welcome P4: low Non-critical, workarounds exist type: feature ✨ @vendure/admin-ui
Projects
Vendure OS Roadmap
Status: 👀 Under consideration
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add ProductVariantPrice custom fields ui inputs Draykee/vendure
3 participants
@michaelbromley @dlhck @lzzfnc