Show Configurable Product Options in UpSell Block and Add To Cart

Question

Magento 2.2.3

I currently have the Upsell block displaying configurable products on the product view page.

I would like to display a drop down of the configurable options and then be able to add the product to cart. I have the drop down working, however I can't seem to get the add to cart to recognize the configurable option that was selected. I get the following error when clicking add to cart, 'You need to choose options for your item.'

My Code,

app/design/frontend/custom_vendor/custom_theme/Magento_Catalog/templates/product/list/items.phtml

<?php
 if ($_item->getTypeId() == 'configurable') {                       
 $data = $_item->getTypeInstance()->getConfigurableOptions($_item);

 $optionhtml = '<select name="super_attribute['.$_item->getId().']" id="attribute'.$_item->getId().'">';

 foreach($data as $attr){
  foreach($attr as $p){
      $optionhtml .= '<option value="'.$p['value_index'].'">'.$p['option_title'].'</option>';
      }
    }

    $optionhtml .= '</select>';

    echo $optionhtml;
   }
?>

How do I customize the current add to cart or add a new add to cart button that will recognize what option was selected for the product?

Answer 1

You're almost there but it looks like you made a mistake in making your select. You need to include it in your foreach loop in order to use the attribute ID in the name. I also suggest changing getConfigurableOptions to getConfigurableAttributes:

$data = $_item->getTypeInstance()->getConfigurableAttributes($_item);
        $optionhtml = "";

    foreach ($data as $attr) {
        $optionhtml .= '<select name="super_attribute['.$attr->getAttributeId().']" id="attribute'.$attr->getAttributeId().'">';

        foreach($attr->getOptions() as $p){
            $optionhtml .= '<option value="'.$p['value_index'].'">'.$p['store_label'].'</option>';
        }

        $optionhtml .= '</select>';
    }

    echo $optionhtml;