From 925a68a78c24ad18f76b4791b84e8ad6c3f8dce0 Mon Sep 17 00:00:00 2001
From: Michael Bromley <michaelbromley@users.noreply.github.com>
Date: Fri, 28 May 2021 16:19:49 +0200
Subject: [PATCH] Fix vendure variants (#338)
* Fix variant selection in Vendure provider
* Styling of checkout placeholder in Vendure provider
---
framework/vendure/api/checkout/index.ts | 7 +++++--
framework/vendure/product/get-product.ts | 11 +++++++++--
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/framework/vendure/api/checkout/index.ts b/framework/vendure/api/checkout/index.ts
index 21083e9b7..08b21f6a9 100644
--- a/framework/vendure/api/checkout/index.ts
+++ b/framework/vendure/api/checkout/index.ts
@@ -11,8 +11,11 @@ const checkoutApi = async (req: any, res: any, config: any) => {
<title>Checkout</title>
</head>
<body>
- <div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica'>
- <h1>Checkout not implemented :(</h1>
+ <div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica; color: #888;'>
+ <svg xmlns="http://www.w3.org/2000/svg" style='height: 60px; width: 60px;' fill="none" viewBox="0 0 24 24" stroke="currentColor">
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+ </svg>
+ <h1>Checkout not yet implemented :(</h1>
<p>
See <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>#64</a>
</p>
diff --git a/framework/vendure/product/get-product.ts b/framework/vendure/product/get-product.ts
index 735164ec1..4427707bd 100644
--- a/framework/vendure/product/get-product.ts
+++ b/framework/vendure/product/get-product.ts
@@ -20,6 +20,9 @@ async function getProduct({
const product = data.product
if (product) {
+ const getOptionGroupName = (id: string): string => {
+ return product.optionGroups.find((og) => og.id === id)!.name
+ }
return {
product: {
id: product.id,
@@ -33,9 +36,13 @@ async function getProduct({
variants: product.variants.map((v) => ({
id: v.id,
options: v.options.map((o) => ({
+ // This __typename property is required in order for the correct
+ // variant selection to work, see `components/product/helpers.ts`
+ // `getVariant()` function.
+ __typename: 'MultipleChoiceOption',
id: o.id,
- displayName: o.name,
- values: o.group.options.map((_o) => ({ label: _o.name })),
+ displayName: getOptionGroupName(o.groupId),
+ values: [{ label: o.name }],
})),
})),
price: {