Add a views handler for a per-variation add to cart button

Tried several ways to add this without a new handler, and it never worked. So I wrote a handler for this. It needs a product variation, so a View on those or a relationship to those.

PR https://github.com/drupalcommerce/commerce/pull/583

Assuming a product view, shouldn't you be able to render the "variations" field using the "add to cart" formatter?

@bojanz yeah I tried that, but that got really messy. Also I didn't want the variation selection to show for all the rows, UX nightmare.

Ah, so you want a per-variation add to cart form, no attribute selection.
Yeah, we're missing that most likely.

I do want the attribute selection, not sure how you could have a full Add to Cart w/out it.

I have a View of product variations, and only 1 or 2 variations per product.

To add it with the variation selector I did the following:

• Add a View mode to the product entity called Add to cart
• Remove all the fields from the View mode except 'Variations'
• Set the Variations to the format 'Add to cart form'
• Go to your View
• In the View add a rendered entity field for the Product (not the variation)
• Select the Add to cart View mode to use
• Save your View

This gives me a add to cart form with a selector. Also some entity properties that I'd want to remove from display, didn't check why those are always shown.

See this screen shot of the custom Add to cart handler and the rendered entity on the same View row:

Marked #2834976: Display all variations as rendered entity with add to cart for each? as a duplicate.

Coming from #2834976: Display all variations as rendered entity with add to cart for each?

I need to display individual product variation entities by themselves, with an add to cart button, via a view mode of the variation entity, not using a view. The obvious way to do this would be a pseudo-field and formatter on the variation entity. That would also work in a view, using the rendered entity.

I'd very much prefer not to have to replicate the entity view mode using view fields and attach the view display to an empty view mode of the variation entity (ugh).

I do see the use cases for also having a views field handler however.

Separate issue?

@Lendude: This approach won't work. The Product entity's add to cart formatter is always set to the same default variation. Every add to cart button will add the same default product variation when clicked, unless the user is careful to manually change all the attribute selectors to match the variation for that row.

Misunderstood what I was looking at, sorry.

I've created a sandbox module, Commerce Variation Cart Form, that could also be used to provide this per-variation functionality in a View, using the rendered Product Variation entity instead of fields. Add or edit an entity view mode for the Variation and configure it to show the fields you want (including the Add to Cart Form field the module provides).

The module provides the same store, order type and price resolution that the standard add-to-cart form provides, by rendering that form using a different form view mode. Resolution seems to be overlooked in this patch?

@chrisrikli the add to cart form with just quantity and the button is the field you get when using the Views field in the pull request referenced in #2

@john-pitcairn Thanks for module "Commerce Variation Cart Form". Help me a lot but, i need more :))). I remove all no need attributes like qty, but ... remain all field from variantion created, For me need only price. Can help?

Doesn't help in views but anyone looking to get per variation add to cart button in product display page, you have a formatter available through a module https://www.drupal.org/project/commerce_variation_add_to_cart. It gives some extra settings as well.

#12 Commerce Variation Cart Form is good idea to integrate this module in main module.

For my project in commerce need always two mode mode for cart form
1) Product page must be with sku,price,qty, add to cart
2) Product preview where must be only add to cart.

With default add to cart can implement this, because cant select product variant to use.

#13 and #2

@Lendude: I'm new to drupal commerce migrating from woocommerce wordpress and contao isotope. I first tried kickstart 2, however I need multi-vendor option so here I am, drupal 8.

Could you explain how to use the solution you posted at #2? I don't have attributes or different variations as each product is a standalone. I have a table view for all my products, however I cannot get add to cart button to show on each row for each product. I'm hoping your solution could do the trick.

thanks

@primafrank well you need to patch your commerce module with the PR in #2 and then:

- Add a relationship to your product View from product to variation (it's called 'Product variation referenced from variations', this should exist, all products have variations in commerce 2, even if they all have only 1 variation)
- Then add the 'Add to cart' field to you View using the relationship you added.

That's it. Should just work.

Thanks for getting back. I'm sorry, I should have probably explained a bit better. The part I'm having trouble with is applying a patch, as I have never done this before.

Should this be done through a command line?

Thanks

@primafrank yes, see this https://www.drupal.org/patch

@sumanthkumarc thanks, I've read that before posting here, just got confused because in #2 we have a .php file and the documentation on patching is saying .patch file. Sorry for getting off topic.

@primafrank: on #2 we a link to a Pull Request (PR) on Github. A PR is a concept of a modern Git workflow, where you fork a repository of which you want to propose changes, then commit those changes into your fork and finally propose those changes to the original repository in form of a PR. So it basically serves the same purpose as a patch file in this issue queue.

If you want to have patch file, here's a valuable hint: you can add ".patch" to the URL of any Pull Request on Github you encounter, to get patch file of that PR -> in this case it would be https://github.com/drupalcommerce/commerce/pull/583.patch (which then gets redirected to the real url https://patch-diff.githubusercontent.com/raw/drupalcommerce/commerce/pul...)

Thanks for clarifying this for me, however, it looks like I will need to dig deeper in Drupal technicals. I think I patched the commerce module, but I still can't add the button in views. I'm posting this so someone could possibly clarify this for someone else in the future.

Here's what I did:

1. downloaded the patch from your link @agoradesign #22
2. Used CygWin to patch the c/wamp64/www/mystore/web/modules/contrib/commerce

3. $ c:/cygwin64/bin/patch.exe -p1 < c:/cart.patch
   patching file modules/order/src/Plugin/views/field/AddToCart.php
   patching file modules/cart/src/Plugin/views/field/AddToCart.php
   patching file modules/order/src/Plugin/views/field/AddToCart.php
   patching file modules/cart/src/Plugin/views/field/AddToCart.php
   patching file modules/cart/src/Plugin/views/field/AddToCart.php

4. Added the relationship on the view as #18 proposed

any help would be appreaciated.

+1 on this. Going to apply and review #2

Commerce Variation Cart Form is a full module with security support that provides this functionality.

The only requirement for use with Views is that for the form itself, you must render the product variation entity using a view mode (rendered entity field in Views), instead of (or in addition to) assembling individual product variation entity fields.

The add-to-cart fields rendered are controlled by a form mode of the order entity. This is a lightweight and robust Drupal core mechanism that does not require patches or extensive non-reusable View configuration.

So you might create a variation view mode that only displays the form (no other fields), and add that to your view as a "rendered entity" field. Any other variation fields can be added to the view individually, or to the variation view mode, as required.

Note you can't currently use more than one form mode. There is an open issue against the module to allow selecting a specific form mode per view mode, for which patches using a computed field and field formatter are welcome. Form modes may currently be created via the Form Mode Manager module, but you would need custom hook_entity_view_alter() code to swap those in for the pseudo-field.

Cool! Thanks John!

After installing the module, I think it gives some great flexibility! However I do think an add to cart handler for views is still needed. Can we roll the patch for a views handler into this issue for review?

What module should the patch be applied to in the composer.json when adding it via composer?

Drupal/commerce, or Drupal/commerce_cart?

I'm afraid this patch didn't work for me. After following the steps in #18, there is no option to include an "add to cart" button field.

Quick mention if someone else is trying to figure out a way to get an add to cart link in a view, I was able to accomplish it by using https://www.drupal.org/project/commerce_add_to_cart_link

@jastraat

Quick mention if someone else is trying to figure out a way to get an add to cart link in a view, I was able to accomplish it by using https://www.drupal.org/project/commerce_add_to_cart_link

It would be great if you could mention on how you accomplished this using the module, as I was looking at the same to build the add to a cart URL in views. https://www.drupal.org/project/commerce_add_to_cart_link/issues/3097144#comment-13371879

@BigEd

1. Add a new view mode for Product Variation. (I used the name 'Views'.)
2. Configure that new view mode to only display the "Add to cart link" from https://www.drupal.org/project/commerce_add_to_cart_link
3. In your view, add a relationship on field_product_data and then a dependent relationship on "variations: Product variation"
4. Add "Product variation: Rendered entity" with the configured view mode as a field in your view.

@jastraat many thanks that helped point me in the right direction.

With patch from here
https://www.drupal.org/project/commerce/issues/2964780
it's possible to create add to cart button for each variation in views.

But i don't understand how add quantity and calculated price.

@VasyOK - if you click on the "Add to cart" button in your view, the product variation will be added to your cart.
In your cart you can then define the quantity for each item (variation). The calculated price is shown in your cart.

The patch from #2964780: Create Add to Cart views field handler also worked perfectly for me.
It does exactly what is requested here - it adds the views handler and the ability to add and also customize (button text, button css class) the "Add to cart" button to a view with product variations.