VirtueMart Forum

VirtueMart 2 + 3 + 4 => Virtuemart Development and bug reports => Topic started by: JeeT.Birdi on February 02, 2015, 19:04:59 PM

Title: How to submit a form when clicking to Addtocart?
Post by: JeeT.Birdi on February 02, 2015, 19:04:59 PM
I created a form module in my product page because i needed a colorpicker.
Is that a way to create an Event when clicking on Addtocart to submit the form at the same time?

Form created with Chronoforms V5
Joomla 3.3.6 + VM3
Title: Re: How to submit a form when clicking to Addtocart?
Post by: GJC Web Design on February 02, 2015, 23:01:58 PM
in assets/js/vmprices.js is

Virtuemart.productUpdate = function() {
   // This Event Gets Fired As Soon As The New Product
   // Was Added To The Cart
   // This Way Third Party Developer Can Include Their Own
   // Add To Cart Module And Listen To The Event: "updateVirtueMartCartModule"
   jQuery('body').trigger('updateVirtueMartCartModule');
}
Title: Re: How to submit a form when clicking to Addtocart?
Post by: JeeT.Birdi on February 03, 2015, 01:26:55 AM
I added this but lost validation....
document.getElementById("BrickColor").submit();      
Title: Re: How to submit a form when clicking to Addtocart?
Post by: JeeT.Birdi on February 03, 2015, 05:43:11 AM
In my form 'Brickcolor' I have 2 radio field ('choixtext' and 'choixbrick') with 2 options, by default none is selected.
I need to check if they're checked, if yes then submit, if not give an alert and stay on the page.

So I've added some lines but it's not working. (I have almost no knowledge in JS, so my code must be wrong)

Virtuemart.productUpdate = function() {
   // This Event Gets Fired As Soon As The New Product
   // Was Added To The Cart
   // This Way Third Party Developer Can Include Their Own
   // Add To Cart Module And Listen To The Event: "updateVirtueMartCartModule"
   jQuery('body').trigger('updateVirtueMartCartModule');
   //Added those lines
   function RadioValidator()
{
    var ShowAlert = '';
    var AllFormElements = window.document.getElementById("BrickColor").elements;
    for (i = 0; i < AllFormElements.length; i++)
    {
        if (AllFormElements.type == 'radio')
        {
            var ThisRadio = AllFormElements.name;
            var ThisChecked = 'No';
            var AllRadioOptions = document.getElementsByName(ThisRadio);
            for (x = 0; x < AllRadioOptions.length; x++)
            {
                 if (AllRadioOptions
  • .checked && ThisChecked == 'No')
                     {
                         ThisChecked = 'Yes';
                         break;
                     }
                }   
                var AlreadySearched = ShowAlert.indexOf(ThisRadio);
                if (ThisChecked == 'No' && AlreadySearched == -1)
                {
                ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
                }     
            }
        }
        if (ShowAlert != '')
        {
        alert(ShowAlert);
        return false;
        }
        else
        {
        return true;
        }
    }
       if ($RadioValidator=true) then document.getElementById("BrickColor").submit()};
    }
          ;      
    }

Title: Re: How to submit a form when clicking to Addtocart?
Post by: JeeT.Birdi on February 06, 2015, 03:29:32 AM
Hi,
I lost my validation i think it was a Javascript problem. 
Also when I already entered something in my field, and then select a child variant, my productpage was reloaded with empty field and no Javascript functionnality anymore.

I solve this problem by:

1-- Create a custom position
       a)  I gave a cutom postion to my module: positionjeet
       b)  I needed to add my module just after the rating in my product page, so in /components/com_virtuemart/views/productdetails/tmpl/default.php I added

<?php
      echo shopFunctionsF::renderVmSubLayout('rating',array('showRating'=>$this->showRating,'product'=>$this->product));

        // I ADDED THE FOLLOWING LINES
       $modules = JModuleHelper::getModules('positionjeet');       
        foreach($modules as $mod)
        {
           echo JModuleHelper::renderModule($mod);
        }
        // UNTILL HERE

      if (is_array($this->productDisplayShipments)) {


2--  Now that I had my module in my custom postion, I needed to add a trigger from my addtocart to my submit. 

a) I changed the type of my submit to hidden so it was not visible on the product page

b) In  /components/com_virtuemart/assets/js/vmprices.js at line 61 I added 1 line:

Virtuemart.sendtocart = function (form){
   if (Virtuemart.addtocart_popup ==1) {
         
//ADDED FOLLOWING LINES!!!
   document.getElementById("BrickColor").submit();
//UNTILL HERE
      Virtuemart.cartEffect(form) ;
   } else {

GJC Web Design advice me to add my code in another section but my form was not saving the inputed data in those fields (I tested it sending the form on submit to my email adress, all field was blank), and also after selecting a child variant my Javascript was not working (for my color picker and some other stuff).

So this way everything seems to work fine.

Title: Re: How to submit a form when clicking to Addtocart?
Post by: Milbo on February 06, 2015, 14:16:17 PM
Please read here

http://docs.virtuemart.net/tutorials/development/196-the-vm-javascript-handler.html
just teh right use of defer could already solve your problem
Title: Re: How to submit a form when clicking to Addtocart?
Post by: JeeT.Birdi on February 07, 2015, 03:20:30 AM
Thanks Milbo, is it applicable to VM3?