implementing variants

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Edgar Rasquin 326 posts 925 karma points

Mar 30, 2021 @ 10:00

0

Implementing Variants

Hi,

I have added Vendr to an existing Umbraco site along the Tutorial by Paul Seal: How to build an eCommerce site in Umbraco using Vendr

Everything works fine so far. But now it need to bring in product variants. Not multiple variants, just variants as children are fine for my setup.

I tried to find my way round using the try.vendr.net demostore as a template but could only get the variants to show in the product page. At the moment they dont update the page when I switch between them and they have no impact when I try adding a variant to the cart.

Is there another tutorial or guidance I could follow along?

Thanks

Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Mar 30, 2021 @ 10:14

0

Hi Edgar,

We don't have any other tutorials at the moment. It's been on our todo list for too long, but our current focus has been on feature development.

Best option at the moment would be to take a look at the source code for the Vendr demo store (which is what is available to try at try.vendr.net) which can be found on GitHub here https://github.com/vendrhub/vendr-demo-store

If there is anything particular you are struggling with, do feel free to ask and I'll try and explain if it's not clear in the demo store code.

Matt

Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 13, 2021 @ 16:09
0
Hi Matt,

I have now started implementing variants. My client now needs the multiple variants. Therefore I tried to rebuild the structure that you use in your demostore. But I ran into trouble:

As soon as I try to create the variants I am experiencing strange behaviour:
1. When I am finished selecting the the attributes and I click on "select" that closes the side panel but the underlying variants tab stays empty. I have to actually change the node, than come back to the page to see the variants created.
2. I than start edit the first variant by filling in price an sku. When I than press submit, the side panel closes but the variant stays grey as if it did not save the changes, but they got saved.
1. When I try to filter the Variants the grid it does not work.
I also get a bunch of error messages in the DevTools Console

Does that make any sense to you? Do you know what I am doing wrong?

Thanks
Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 14, 2021 @ 15:36
0
Hi Matt,

in your ProductPage.cshtml there is the helper code:
```
@helper RenderVariants(StoreReadOnly store, ProductPage product, string addedProductReference)
```
ProductPage points to Vendr.DemoStore >Models > ProductPage.cs

In my project I have no custom Models. Do I need to create one or is it possible to use my Product.generated.cs instead?

Thanks

--

EDIT:

I have now changed it to
```
@helper RenderVariants(StoreReadOnly store, ContentModels.Product product, string addedProductReference)
```
and I check if my product has children
```
else if (product.Children.Any())
```
instead of
```
else if (product.ChildVariants.Any())
```
It seems to work allright.

Only problem now ist, that in my cart > orderlines I only get the name of my variant for example: red when really I would need the Product Name + Variant name like: Baseball red

What is the best way to go with this?

Thanks
Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Apr 13, 2021 @ 16:23

0

Hi Edgar,

Looks like you are developing with debug mode turned off so all your back office is being cached by client dependency. Either turn on debug mode in the web.config or bump the client dependency number in your config folder to clear the client dependency cache.

Matt

Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 13, 2021 @ 17:03

0

Hi Matt,

sorry...

Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Apr 13, 2021 @ 17:10

0

What version of Umbraco/Vendr are you on?

Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 13, 2021 @ 17:23

0

Umbraco version 8.11.1

Installed Version

Vendr v1.5.0

Installed Payment Providers

Vendr.Core.Web v1.5.0

Vendr.PaymentProviders.Stripe v1.2.0

Vendr.PaymentProviders.Stripe v1.2.0

Vendr.PaymentProviders.Invoicing v1.1.0

Vendr.PaymentProviders.PayPal v1.1.0

Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Apr 14, 2021 @ 08:11

0

That should be ok.

How is your variants prop editor configured? Is it pointing to an element type? And does that element type have an SKU (alias: sku) property defined on it?

Matt

Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 14, 2021 @ 08:44

0

Yes, it is pointing to productMultiVariant which is an element type and has sKU on it.

Only difference is, that the alias on my element type is in different case:

sKU instead of sku

Does that make a difference?

Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Apr 14, 2021 @ 08:56

1

Hi Edgar,

Yes it does, it should be sku all lowercase. I think this will likely be the culprit.

Matt

Copy Link
Edgar Rasquin 326 posts 925 karma points

Apr 14, 2021 @ 09:37

0

You are right. That did the trick!

I would never have thought of that.

Thank you!

Copy Link
Matt Brailsford 4125 posts 22223 karma points MVP 9x c-trib

Apr 14, 2021 @ 09:42

0

No problem.

It's annoying because Umbraco will auto generate sKU but IMO, it should try and understand acronyms and force them to all lowercase (ie, if the name is all upercase, assume it should all go to lowercase as the alias).

Matt

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?