#StackBounty: #8 #theming #forms #hooks #ubercart Theme Ubercart product node and form in Drupal 8

Bounty: 50

I’ve been trying to do a “simple task” with Drupal 8. Using Ubercart 4.x, I want to totally change the product (add to cart) page.

For that I’ve created a twig file called node–product.html.twig and I’ve fully customized it. But the form is not there.

In order to have the form I’ve added this to my .theme file:

function theme_preprocess_node__product(&$variables) {
  // Creates a AddToCartForm for the given product (with node->id());
  $form_object = new Drupaluc_productFormAddToCartForm($variables['node']->id());
  $variables['product_form'] = Drupal::formBuilder()->getForm($form_object, $variables['node']);
}

And now the form is accessible via the product_form variable in the node–product.html.twig file.

But that’s where my issue start, I only find two ways of handling the form, either I do this:

{{ form }}

But then I have the form with the “normal” design, or I create it myself by doing something like this:

<form id="{{ product_form['#form_id'] }}" method="{{ product_form['#method'] }}" action="{{ product_form['#action'] }}">
  (...)
</form>

This way works since I can now customize the attributes, but I don’t have access to their ID (I’m getting the values from the node–product node and not the form).

So my question is:
How can I handle this in order for me to fully customize the product node?

---

Get this bounty!!!