Following my question here I have an issue where my form doesn't update the basket but only on mobile devices. How can I trigger from my phtml file that Magento needs to update the mini cart?

The gifts.phtml file I've created looks like:


$product_id = $block->getData('product');

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

$productHelper = $objectManager->get('\Magento\Catalog\Model\Product');
$_product = $productHelper->load($product_id);

$listBlock = $objectManager->get('\Magento\Catalog\Block\Product\ListProduct');
$addToCartUrl =  $listBlock->getAddToCartUrl($_product);


<form action="<?php /* @escapeNotVerified */ echo $addToCartUrl ?>" method="post"
  id="product_addtocart_form"<?php if ($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<?php echo $block->getBlockHtml('formkey')?>
<?php echo $block->getChildHtml('form_top'); ?>
<?php if (!$block->hasOptions()):?>
    <?php echo $block->getChildHtml('product_info_form_content'); ?>
<?php else:?>
    <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
        <?php echo $block->getChildChildHtml('options_container') ?>
    <?php endif;?>
<?php endif; ?>

<?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
    <?php echo $block->getChildChildHtml('options_container') ?>
<?php endif;?>
<?php echo $block->getChildHtml('form_bottom'); ?>
<button type="submit" title="Add to Cart" class="btn redButton">
    <span>Add to Cart</span>

<a href="#" data-post='<?php  echo $this->helper('Magento\Wishlist\Helper\Data')->getAddParams($_product) ?>' class="action towishlist gift-wish" data-action="add-to-wishlist">
    <i class="fa fa-heart" aria-hidden="true" style="color:#bc0120;font-size: 20px; margin-top:1"></i>

1 Answer 1


I managed to fix this by having the following script

], function ($) {
    'use strict';

    $('#product_addtocart_form').mage('validation', {
        radioCheckboxClosest: '.nested',
        submitHandler: function (form) {
            var widget = $(form).catalogAddToCart({
                bindSubmit: false

            widget.catalogAddToCart('submitForm', $(form));

            return false;

Which then allowed the mobile mini-cart to update via ajax.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.