Custom "add to cart" button not updating minicart

Question

I've added a custom "add to cart" button by overwriting the configurable.phtml file in my theme.

The button adds the product to the cart, however it doesn't seem to show up in the minicart -

Looking at the newtwork tab, it doesn't seem to pick up any actual items -

Whereas using the default template it passes stuff over in this -

Am I missing something in passing over this data?

I'm essentially changing the configurables from showing in a drop down menu, to having each simple product have an "add to basket" button on the page.

I've tried both adding to cart with AJAX and with refreshing the page, but neither seems to work. Once you go to the actual cart page, you can see what these items are - it's just the minicart that isn't displaying the items.

I'm also including the

 <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
            'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            }
        }
    </script>

On the page, which has all the simple product details in JSON.

Here is a code excerpt of how i'm displaying / using the buy now button on my custom template -

<?php
        foreach ($_children as $child) :
            $productName = $child->getName();

            if ( strpos($productName, '-UK') !== false ) :
        ?>

        <div class="configurable-details">
            <div class="configurable-details--left">
                <div class="configurable-price"><?php
                    $price = $child->getPrice();
                    echo $this->helper('Magento\Framework\Pricing\Helper\Data')->currency($price,true,false);
                    $productID = $child->getId();
                    ?></div>
                <div class="configurable-name"><?php echo $child->getAttributeText('subscription_terms'); ?></div>
            </div>
            <div class="configurable-details--right">

                <?php if ( strpos($productName, '-Q-') !== false || strpos($productName, '-A-') !== false ) : ?>
                <a class="btn" href="LINK TO CUSTOM SITE">Buy Now</a>
                <img class="configurable__direct-debit" src="<?php echo $this->getViewFileUrl('images/logos/logo_direct-debit.png'); ?>" />

                <?php else : ?>

                <form class="btn--form" data-role="tocart-form" action="<?php echo $cartHelper->getAddUrl($child);?>" method="post">
                    <?php echo $block->getBlockHtml("formkey");?>
                    <button type="submit" title="Add to Cart" class="action tocart primary"><span> Add to cart</span></button>
                </form>

                <ul class="configurable__payments">
                    <li><img alt="Maestro" src="<?php echo $this->getViewFileUrl('images/logos/logo_maestro.png'); ?>" /></li>
                    <li><img alt="Mastercard" src="<?php echo $this->getViewFileUrl('images/logos/logo_mastercard.png'); ?>" /></li>
                    <li><img alt="Verified by Visa" src="<?php echo $this->getViewFileUrl('images/logos/logo_verified-by-visa.png'); ?>" /></li>
                    <li><img alt="PayPal" src="<?php echo $this->getViewFileUrl('images/logos/logo_paypal.png'); ?>" /></li>
                </ul>

                <?php endif; ?>
            </div>
        </div>

        <?php endif;
            endforeach;
        ?>

I'm doing a FOREACH on each simple assigned to the configurable, doing an IF to make sure the SKU is of a certain type and then outputting a Add to cart button for each one.

To get around another problem with the first item not actually going in the basket, I had to add an empty form -

  <form type="hidden" data-role="tocart-form" action=""  method="post"> <?php echo $block->getBlockHtml("formkey");?>
            <input type="hidden" name="product" value="">
            <input type="hidden" name="selected_configurable_option" value="">
        </form>

Could this be the cause of it?

Answer 1

From what I can gather, Magento will iterate the simple child products of the configurable and crate options.

For what you want to do, it would have to create a form for each simple product instead. It can be done, but I would suggest you look at the options template and change that to create the form/button that you want with the data that it passes to the front end.

I hope this can point you in the right direction but I can't give you a concrete solution.