Add the drupal commerce products to cart without page reload programmatically

Question

How to implement following task :-

I have 2 div, In first div i have product name and add link, If user click on add link related product should be add in second div.

In second div at bottom i have add to cart button so on click cart button all added products should be add in drupal commerce add to cart page.

Just for reference please check below link :-

http://buildabagpartyfavours.ca/pages/build-your-own-goodie-bag

Answer 1

If anybody use Drupal 8, and want to solve this question, can in this way:

If you have the product variation id $var_id, you can create an "a" tag with "use-ajax" class:

<a href="/add/product/'.$var_id.'" class="use-ajax -add-to-cart">Add to cart</a>

In routing.yml you have to add the following path with controller:

path: '/add/product/{pid}'
_controller: Drupal\MY_MODULE\Controller\ShopProductController::addToCart

And you have to create controller with ajax response:

    namespace Drupal\MY_MODULE\Controller;

    use Drupal\commerce_order\Entity\OrderInterface;
    use Drupal\commerce_order\Entity\OrderItem;
    use Drupal\commerce_order\Entity\Order;
    use Drupal\Core\Ajax\AjaxResponse;
    use Drupal\Core\Ajax\HtmlCommand;
    use Drupal\Core\Ajax\CssCommand;

class ShopProductController {
    public function addToCart($pid) {

        $ajax_response = new AjaxResponse();
        #### ADD TO CART ####
        // variation_id of product.

        if (isset($pid) && !empty($pid)) {

            $store_id = 1;
            $order_type = 'default';
            $variation_id = $pid;

            $entity_manager = \Drupal::entityManager();
            $cart_manager = \Drupal::service('commerce_cart.cart_manager');
            $cart_provider = \Drupal::service('commerce_cart.cart_provider');

            // Drupal\commerce_store\Entity\Store::load($store_id);
            $store = $entity_manager->getStorage('commerce_store')->load($store_id); 
            $product_variation = $entity_manager->getStorage('commerce_product_variation')->load($variation_id);

            // order type and store
            $cart = $cart_provider->getCart($order_type, $store);
            if (!$cart) {
                $cart = $cart_provider->createCart($order_type, $store);
            }

            //Create new order item 
            $order_item = $entity_manager->getStorage('commerce_order_item')->create(array(
                'type' => 'default',
                'purchased_entity' => (string) $variation_id,
                'quantity' => 1,
                'unit_price' => $product_variation->getPrice(),
            ));

            $order_item->save();
            $cart_manager->addOrderItem($cart, $order_item);

            $ajax_response->addCommand(new HtmlCommand('.-add-to-cart', '<span class="-added">Added</span>'));

            }

            return $ajax_response;

        }
}

Answer 2

Make your button triggers some AJAX call, pass product id and on other side in your AJAX callback script collect product id, create line item from it and add it to the cart ( https://www.drupal.org/node/1288414 ).

When AJAX call is finished you'll have to call another one, to update cart block.