Display price in add to cart form BEFORE add to cart button

Question

the logical flow of choosing attributes is seeing price adjustments based on the attributes chosen before the buy button ... how can i display the price in the form itself so it appears BEFORE the add to cart button?

here is an example of what i am talking about ... you have attributes, then you have price calculations based on attributes selected and very last thing is the buy button ... this is logical and i can't figure it out.

i did try using jquery to append the price to a div inside the form .. but that is a mess. all sorts of problems with ajax etc and not the correct approach anyway.

Answer 1

I also believe the default UX (price above variations, or below add to cart), is a mess.

There's an issue about Moving price before/above add-to-cart button, where I posted a workaround :

/**
 * Implements hook_form_FORM_ID_alter.
 */
function my_theme_form_commerce_order_item_add_to_cart_form_alter(
  array &$form,
  FormStateInterface $form_state
) {
  $form_data = $form_state->getStorage();

  if (!empty($form_data['selected_variation'])) {
    $selectedVariation = ProductVariation::load(
      $form_data['selected_variation']
    );
    $footer_price = $selectedVariation->price->view();
  }
  else {
    $parameter = \Drupal::routeMatch()->getParameter('commerce_product');
    $product = \Drupal\commerce_product\Entity\Product::load(
      (int) $parameter->id()
    );

    $entity_manager = \Drupal::entityTypeManager();

    $product_variation = $entity_manager->getStorage(
      'commerce_product_variation'
    )->load((int) $product->getVariationIds()[0]);

    $footer_price = $product_variation->get('price')->view();
  }

  $form['footer']['price'] = $footer_price;
}

So far it works, even if I think there might be a slimmer solution. Credits to Alen Simonyan.

Answer 2

I spent weeks on trying to find a clean solution using the commerce-product.html.twig template but to no avail. The problem is the fact that the variation fields and add-to-cart button are packed together into one component (product.variations) in a way that is difficult to decompose. I cannot think of a way to insert the price in there somewhere. Someone should create an issue about this.

Here is a hacky CSS-workaround.

First, create some space above the add-to-cart button:

.commerce-order-item-add-to-cart-form .form-actions {
   margin-top: 4em;
}

Now place the price div into the created space:

article .field--type-commerce-price {
   position: absolute;
   bottom: 2.5em;
}

This also works when the price is updated.

Still looking for a cleaner solution.

Answer 3

@kojo thanks for your answer. I just had to change it so it would also read my custom PriceResolver. I added 'default' as displayOption for the view so it's now using my calculated formatter.

 /**
 * Implements hook_form_FORM_ID_alter.
 * Show price in add to cart form
 */
function template_form_commerce_order_item_add_to_cart_form_alter(array &$form, FormStateInterface $form_state) {
  $form_data = $form_state->getStorage();
  if (!empty($form_data['selected_variation'])) {
    $selectedVariation = ProductVariation::load($form_data['selected_variation']);
  }
  else {
    /** @var \Drupal\commerce_product\Entity\Product $product */
    $product = \Drupal::routeMatch()->getParameter('commerce_product');
    $selectedVariation = $product->getDefaultVariation();
  }
  $form['footer']['price'] = $selectedVariation->price->view('default');
}