HOW TO: Make Shipping and Billing Modal on Checkout page

[liquid.ideas]

HI Guys,

Ok so I was hunting around the net for a while and couldn't find the answer to this. I know there are one page checkout options etc commercially available, but we cant always afford these things! Plus VM is free so lets help each other out! Anyway and alternative solution that I hva come up with for this is to make my shipping and billing info modal which cuts out a page jump, Ill add to this post as I modify my checkout page

As always please do a template override not hack the VM core as when you do an update it will get lost

You will find the file you need at:
components/com_virtuemart/views/cart/tmpl/default pricelist.php

Ship to find:

Code Select Expand

<a class="details  href="<?php echo JRoute::_ ('index.php?option=com_virtuemart&view=user&task=editaddresscart&addrtype=ST&virtuemart_user_id[]=' . $this->cart->lists['current_id'], $this->useXHTML, $this->useSSL) ?>">

and change to:

Code Select Expand

<a class="details modal" rel="{handler: 'iframe', size: {x: 1000, y: 600}}" href="<?php echo JRoute::_ ('index.php?option=com_virtuemart&view=user&task=editaddresscart&addrtype=ST&virtuemart_user_id[]=' . $this->cart->lists['current_id'], $this->useXHTML, $this->useSSL) ?>">

obviously your iframe size is up to you

Bill to find:

Code Select Expand

<a class="details"  href="<?php echo JRoute::_ ('index.php?option=com_virtuemart&view=user&task=editaddresscart&addrtype=BT', $this->useXHTML, $this->useSSL) ?>">

and change to:

Code Select Expand

<a class="details modal" rel="{handler: 'iframe', size: {x: 1000, y: 600}}" href="<?php echo JRoute::_ ('index.php?option=com_virtuemart&view=user&task=editaddresscart&addrtype=BT', $this->useXHTML, $this->useSSL) ?>">

Hope this helps someone!

[liquid.ideas]

Something I forgot to add in there is obviously you dont want the whole blasted page coming up in your modal so add " &tmpl=component " at the end of each href to give it to you in print view only

[PRO]

why not use the facebox?

[liquid.ideas]

Hahahaha Banquet, If I knew how I woulda wanna help a gal out and tell me how?

Another lil one if you could possibly help I have tries stuffing round with the code and I keep breaking the php, how do I make this modal?

Code Select Expand

<?php
if (!empty($this->layoutName) && $this->layoutName == 'default' && !$this->cart->automaticSelectedShipment) {
echo JHTML::_ ('link', JRoute::_ ('index.php?view=cart&task=edit_shipment', $this->useXHTML, $this->useSSL), $this->select_shipment_text, 'class=""');
} else {
JText::_ ('COM_VIRTUEMART_CART_SHIPPING');
}
} else {
?>

If I set the class to modal I just come up with a blank lil lightbox, tried putting in rel iframe and all that but keep breaking it!!

*hopes her hero can help*

[PRO]

I use this for the terms of service fancybox


<?php
$termsurl = JRoute::_('index.php?option=com_content&view=article&id=215&Itemid=332&tmpl=component');
   vmJsApi::js( 'fancybox/jquery.fancybox-1.3.4.pack');
   vmJsApi::css('jquery.fancybox-1.3.4');
   $box = "$.fancybox({
            href: '" . $termsurl . "',
            type: 'iframe',
            height: '550'
         });";
$document = JFactory::getDocument();
$document->addScriptDeclaration("
//<![CDATA[
   jQuery(document).ready(function($) {
      $('a.terms').click( function(){
         ".$box."
         return false ;
      });
   });
//]]>
");
?>



then I create the link like this


<a class="terms" rel="nofollow" href="<?php echo $termsurl ?>">Click Here to View Our 30 Day Return Policy</a>


THEN: I do this on the product details page. making 2 facebox pop ups
1 is ask question, & another is a "shipping info" pop up


<?php
$url2 = JRoute::_('index.php?option=com_content&view=article&id=211&Itemid=155&tmpl=component');
$url = $this->askquestion_url;
$document = &JFactory::getDocument();
$box = "$.fancybox({
            href: '" . $url . "',
            type: 'iframe',
            height: '650'
         });";
         $box2 = "$.fancybox({
            href: '" . $url2 . "',
            type: 'iframe',
            height: '600'
         });";
$document->addScriptDeclaration("
//<![CDATA[
   jQuery(document).ready(function($) {
      $('a.ask-a-question').click( function(){
         ".$box."
         return false ;
      });
   });
   jQuery(document).ready(function($) {
      $('a.ship').click( function(){
         ".$box2."
         return false ;
      });
   });
//]]>
");
?>



then create the links like this
<a class="ship" rel="nofollow" href="<?php echo $url2 ?>">

<a class="quote ask-a-question" rel="nofollow" href="<?php echo $url ?>"><?php echo JText::_('COM_VIRTUEMART_PRODUCT_ENQUIRY_LBL') ?></a>


AND you are using a current version that has fancybox right?

[liquid.ideas]

Thanks Banquet, sitting with a major headache right now but will give it a shot tomorrow and post results, always appreciative of your concise answers! PS: On 2.0.20b

[liquid.ideas]

Banquet, I learned something very cool from your post, thank you! But what I realized is that you are calling articles up, and I dont understand how to apply that to the shipping code unless I call the code in an article which I don't know if it will work?

[PRO]

did you look at this?


$termsurl = JRoute::_('index.php?option=com_content&view=article&id=215&Itemid=332&tmpl=component');

[dido76bg]

Hi!
Here is how to make it work:

First you shuld make some modifications to components\com_virtuemart\views\cart\view.html.php
find $layoutName == 'default' and add
//hack start
   if (!class_exists('vmPSPlugin')) require(JPATH_VM_PLUGINS . DS . 'vmpsplugin.php');
   JPluginHelper::importPlugin('vmshipment');
   $this->lSelectShipment();
   $pathway->addItem(JText::_('COM_VIRTUEMART_CART_OVERVIEW'), JRoute::_('index.php?option=com_virtuemart&view=cart', FALSE));
   $pathway->addItem(JText::_('COM_VIRTUEMART_CART_SELECTSHIPMENT'));
   $document->setTitle(JText::_('COM_VIRTUEMART_CART_SELECTSHIPMENT'));
   
   $this->lSelectPayment();
   $pathway->addItem(JText::_('COM_VIRTUEMART_CART_SELECTPAYMENT'));
   $document->setTitle(JText::_('COM_VIRTUEMART_CART_SELECTPAYMENT'));
//hack end

Next create a template overwrite for default_pricelist.php
1) after (first line of the file) defined ('_JEXEC') or die('Restricted access'); add JHTML::_('behavior.modal');
2) find and comment with // -> echo JHTML::_ ('link', JRoute::_ ('index.php?view=cart&task=edit_shipment', $this->useXHTML, $this->useSSL), $this->select_shipment_text, 'class=""');
and add -> echo '<a id="custom_button" class="modal" href="#updateshipping">'.$this->select_shipment_text.'</a>';
3) find and comment with // -> echo JHTML::_ ('link', JRoute::_ ('index.php?view=cart&task=editpayment', $this->useXHTML, $this->useSSL), $this->select_payment_text, 'class=""');
and add -> echo '<a id="custom_button" class="modal" href="#updatepayment">'.$this->select_payment_text.'</a>';
4) final stepat the end of the file - after -> </fieldset>, add (you can style the code for better preview)
<div style="display:none; position:relative;">
   <div class="txt_bold" id="updateshipping" style="position:absolute; top:40%; width:100%; height:10em; margin-top:-5em; text-align:center;">
      <form method="post" id="userForm" name="chooseShipmentRate" action="<?php echo JRoute::_('index.php'); ?>" class="form-validate">
<?php
   echo "<h1>".JText::_('COM_VIRTUEMART_CART_SELECT_SHIPMENT')."</h1>";
   if($this->cart->getInCheckOut()){
      $buttonclass = 'button vm-button-correct';
   } else {
      $buttonclass = 'default';
   }
   ?>
   <div class="buttonBar-right">

           <button class="<?php echo $buttonclass ?>" type="submit" ><?php echo JText::_('COM_VIRTUEMART_SAVE'); ?></button>  &nbsp;
   <button class="<?php echo $buttonclass ?>" type="reset" onClick="window.location.href='<?php echo JRoute::_('index.php?option=com_virtuemart&view=cart'); ?>'" ><?php echo JText::_('COM_VIRTUEMART_CANCEL'); ?></button>
   </div>
<?php
    if ($this->found_shipment_method) {
   // if only one Shipment , should be checked by default
       foreach ($this->shipments_shipment_rates as $shipment_shipment_rates) {
      if (is_array($shipment_shipment_rates)) {
          foreach ($shipment_shipment_rates as $shipment_shipment_rate) {
         echo $shipment_shipment_rate."<br />\n";
          }
      }
       }
    } else {
    echo "<h1>".$this->shipment_not_found_text."</h1>";
    }

    ?>

    <input type="hidden" name="option" value="com_virtuemart" />
    <input type="hidden" name="view" value="cart" />
    <input type="hidden" name="task" value="setshipment" />
    <input type="hidden" name="controller" value="cart" />
</form>

   </div>
</div>

<div style="display:none; position:relative;">
      <div class="txt_bold" id="updatepayment" style="position:absolute; top:40%; width:100%; height:10em; margin-top:-5em; text-align:center;">
         <form method="post" id="paymentForm" name="choosePaymentRate" action="<?php echo JRoute::_('index.php'); ?>" class="form-validate">
         <?php
                echo "<h1>".JText::_('COM_VIRTUEMART_CART_SELECT_PAYMENT')."</h1>";
                if($this->cart->getInCheckOut()){
                    $buttonclass = 'button vm-button-correct';
                } else {
                    $buttonclass = 'default';
                }
            ?>
            <div class="buttonBar-right">
            <button class="<?php echo $buttonclass ?>" type="submit"><?php echo JText::_('COM_VIRTUEMART_SAVE'); ?></button>
                 &nbsp;
            <button class="<?php echo $buttonclass ?>" type="reset" onClick="window.location.href='<?php echo JRoute::_('index.php?option=com_virtuemart&view=cart'); ?>'" ><?php echo JText::_('COM_VIRTUEMART_CANCEL'); ?></button>
                </div>
            <?php
                 if ($this->found_payment_method) {
                    foreach ($this->paymentplugins_payments as $paymentplugin_payments) {
                        if (is_array($paymentplugin_payments)) {
                        foreach ($paymentplugin_payments as $paymentplugin_payment) {
                            echo $paymentplugin_payment.'<br />';
                        }
                        }
                    }
                } else {
                 echo "<h1>".$this->payment_not_found_text."</h1>";
                } 
                ?>           
                <input type="hidden" name="option" value="com_virtuemart" />
                <input type="hidden" name="view" value="cart" />
                <input type="hidden" name="task" value="setpayment" />
                <input type="hidden" name="controller" value="cart" />
            </form>
   </div>
</div>