Magento : Convert Ajax Request To Normal Page Call

Question

I am trying to change the ajax call on click of add to cart button to a normal page call.

This is the code for the button

<button type="button" title="<?php echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart btn gr lg" onclick="productAddToCartForm.submit(this)"><?php echo $buttonTitle ?></button>

This is the function that is being called after clicking add to cart :-

<script type="text/javascript">

                    var productAddToCartForm = new VarienForm('product_addtocart_form');
                    productAddToCartForm.submit = function(button, url) {

                        if (this.validator.validate()) {

                           var currency = jQuery('#current_currensy').text();

                            var descX = "<?php echo str_replace(array('\'', '"'), '', $_product->getShortDescription()); ?>";
                            var shortDesc = descX;


                            var brand = "<?php echo str_replace(array('\'', '"'), '', $_product->getName()); ?>";
                            var brandName = brand;


                            dataLayer.push({
                              'event': 'addToCart',
                              'ecommerce': {
                                'currencyCode': currency,
                                'add': {                                
                                  'products': [{                        
                                    'name': shortDesc,       
                                    'id': '<?php echo $_product->getSku(); ?>',
                                    'price': '<?php echo $_product->getFinalPrice(); ?>',
                                    'brand': brandName,
                                    'quantity': 1
                                   }]
                                }
                              }
                            });


                            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;
                            }

                        }
                        alert("inside function");
                    }.bind(productAddToCartForm);

                    productAddToCartForm.submitLight = function(button, url){
                        if(this.validator) {
                            var nv = Validation.methods;
                            delete Validation.methods['required-entry'];
                            delete Validation.methods['validate-one-required'];
                            delete Validation.methods['validate-one-required-by-name'];
                            // Remove custom datetime validators
                            for (var methodName in Validation.methods) {
                                if (methodName.match(/^validate-datetime-.*/i)) {
                                    delete Validation.methods[methodName];
                                }
                            }

                            if (this.validator.validate()) {
                                if (url) {
                                    this.form.action = url;
                                }
                                this.form.submit();
                            }
                            Object.extend(Validation.methods, nv);
                        }
                    }.bind(productAddToCartForm);
                //]]>
                </script>

I want to remove the above ajax call. So I did something like this :-

Code for the button :-

<button type="button" title="<?php echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart btn gr lg" onclick="productAddToCartForm(this)"><?php echo $buttonTitle ?></button>

I wrote the replacement of the ajax code in a different file in the same folder as the button html code:-

<script type="text/javascript">

<?php
                function productAddToCartForm($button, $url) {

                    echo "control coming in this function";
                    exit;

                    $descX = $_product->getShortDescription();
                    $shortDesc = $descX;

                    $brand = $_product->getName();
                    $brandName = $brand;

                    $data = ["name" => $shortDesc, "id" => $_product->getSku(), "price" => $_product->getFinalPrice(), "brand" => $brandName, "quantity" => 1];

                    $options = [
                        $http = [
                            "header"  => "Content-type: application/x-www-form-urlencoded\r\n",
                            "method"  => "POST",
                            "content" => http_build_query($data)
                            ]
                        ];
                    $context  = stream_context_create($options);
                    $result = file_get_contents($url, false, $context);
                    var_dump($result);
                }
                ?>
</script>

But the above function is not getting called on button click. When I click the button nothing happens. While if keep the previous code on button click it works.

I do not understand what I am doing wrong.

Answer 1

You need to try code like this.

Your button code like this :

<button type="button" title="<?php echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart btn gr lg" onclick="Productaddtocartform();"><?php echo $buttonTitle ?></button>

Your script code like this :

<script type="text/javascript">
function Productaddtocartform()
{
    alert('Custom Function Called');
    // Do YOUR Custom Login Here
}
</script>