Magento 1.9 - add a configurable product directly to cart from cross-sells in shopping cart

Question

I have a question about adding a configurable product directly from the cross-sell section to the cart on the shopping cart page. With a simple product, this is not a problem because it has no attributes. But for a configurable product normally I have to choose via a dropdown which properties I want to have for my product (like size or color). If I choose a configurable product as a cross-sell and I click on the "Add-to-Cart"-Button it will redirect me to the product detail page.

So the idea would be to have something like a popup where I can choose the size and color directly and add the product (with the chosen properties) to the shopping cart.

Is there a module which brings the functionality (I can't find it)? Or can I write something on my own like a form for each cross-sell?

Like the form on the product detail page

<form action="<?php echo $this->getSubmitUrl($_product, array('_secure' => $this->_isSecure())) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
    <?php echo $this->getBlockHtml('formkey') ?>
    <div class="no-display">
        <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
        <input type="hidden" name="related_product" id="related-products-field" value="" />
    </div>
...

Answer 1

Please review this code, hopefully this code have a solution.

foreach ($_productCollection as $_product) {

   ?>
   <div class="sqs-col-4 item-product">
      <div class="thumb"><a href="<?php echo $_product->getProductUrl(); ?>" title="<?php echo $_product->getName(); ?>"><img src="<?php echo $_product->getImageUrl(); ?>" alt="" /></a></div>
      <h1><a href="<?php echo $_product->getProductUrl(); ?>" title="<?php echo $_product->getName(); ?>"><?php echo $_product->getName(); ?></a></h1>
      <h4><?php echo Mage::helper('core')->currency($_product->getPrice()); ?></h4>

      <form action="<?php echo $this->helper('checkout/cart')->getAddUrl($_product);?>" method="post" id="product_addtocart_form">

        <?php 
          if ($_product->getData('type_id') == "configurable")
            {
                //get the configurable data from the product
                $config = $_product->getTypeInstance(true);
                //loop through the attributes

                foreach($config->getConfigurableAttributesAsArray($_product) as $attributes)
                {

                    ?>
                    <div id="product-options-wrapper" class="select_number">
                        <label class="required last"><em>*</em><?php echo $attributes["frontend_label"]; ?></label>
                            <select class="required-entry" name="super_attribute[<?php echo $attributes['attribute_id'] ?>]" id="attribute<?php echo $attributes['attribute_id'] ?>">
                                    <option value=""><?php echo $attributes["store_label"]; ?></option>
                                    <?php

                                    foreach($attributes["values"] as $values)
                                    {
                                        echo "<option value=".$values["value_index"].">".$values["label"]."</option>";
                                    }
                                    ?>
                            </select>
                    </div>
                    <div style="display: none;" id="advice-required-entry-attribute<?php echo $attributes['attribute_id'] ?>" class="validation-advice">This is a required field.</div>
                    <?php
                }
            }
        if(!$_product->isGrouped()): ?>
        <label for="qty"><?php echo $this->__('Quantity') ?>:</label>
        <input type="number" name="qty" id="qty" maxlength="3" value="<?php echo ($this->getMinimalQty($_product)?$this->getMinimalQty($_product):1) ?>"/>
        <?php endif; ?>

        <?php if($_product->isSaleable()): ?>
            <button type="button" id="" title="<?php echo $this->__('Add to Cart') ?>" onclick="productAddToCartForm.submit(this)" value="Add To cart" /></button>
        <?php else: ?>
            <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
        <?php endif; ?>
     </form>
  </div>
  <?php    
}

?>

Add also this script:

<script>
var productAddToCartForm = new VarienForm('product_addtocart_form');

        productAddToCartForm.submit = function(button, url) {
            if (this.validator.validate()) {
                var form = this.form;
                var oldUrl = form.action;

                if (url) {
                   form.action = url;
                }
                var e = null;
                try {
                    this.form.submit();
                } catch (e) {
                }
                this.form.action = oldUrl;
                if (e) {
                    throw e;
                }

                if (button && button != 'undefined') {
                    button.disabled = true;
                }
            }
        }.bind(productAddToCartForm);