With the arrival of Joomla 3.5 we were offered a very nice treat: PHP 7 support. Adopting the latest PHP version is something that you should consider as soon as possible, as this new version brings considerable performance improvements that ultimately reduce load time and memory usage. If you want to see a comparison of the same website running PHP 5.6.10 and 7.0.0, click here. Results are eye-popping.

Because of the huge revamp PHP has gone through, the latest version is not backward compatible, and some of the extensions that you're currently using might not work with PHP 7 and your site could break when you make the switch. A good approach is to make sure you are using the latest versions of your extensions, and to try the changes on your test site first.

Let's get down to business, shall we? If you are hosting your Joomla-powered website with Webfaction, the first thing that you should check is the PHP version your site is running. Do this from inside Joomla, not from the Webfaction Control Panel, as the information in the latter doesn't update when you make any changes. From the upper menu in the backend go to System->System Information. This will display the most relevant information for your system:

 

 hefesto old joomla config

What we are going to do is to create a .htaccess file (if you don't have one already) and to add the following lines to it:

<FilesMatch \.php$>
    SetHandler php70-cgi
</FilesMatch>

And that's it. Upload the file to your Joomla root directory (the path is something like $HOME/webapps/application/ where application is the name you gave to your Joomla site in the control panel).

hefesto new joomla config

Your site is now running on PHP 7. If something breaks and you need to revert the change, you probably want to go back to PHP 5.6, if that is the case, modify the handler in your .htaccess file:

<FilesMatch \.php$>
    SetHandler php56-cgi
</FilesMatch>


Don't  want to lift a finger? Grab the file, unzip, and upload to your Joomla root directory.


Virtuemart is probably the most popular shopping cart solution for Joomla. However, it needs a lot of customization before you can actually run a webstore with it: it lacks a wishlist, shipping options are not easy to configure to your liking, items in your cart are lost once you log out, and more. Despite these shortcomings, it has a lot of options and add-ons that will make you think twice before you decide to write your own. I, for one, have given up (for now).

So what's the alternative? Maybe there is a way to fix it and make you proud of your Amazon-like shopping system. This is the first of a series of articles in which I'll explain how we have solved or worked around some of the issues I have mentioned. Sometimes, it'll involve getting your hands dirty, some others, it is just a matter of choosing the right extension for the job.

Watch out Mr. Bezos, here we go!


If you came for the functionality, but you don't want to get your hands dirty, don't fret! Download the file below and paste its contents inside your template's html folder. No need to do anything else!

 

If you like the approach we suggest, but you want to style your button or make any other modifications, then you should download the following file. Add the com_virtuemart folder to your layout overrides, and paste the code in the alpha.css file inside your template's CSS file.

Please consider supporting our efforts.

Amount:


If you want to know how we did it, read on.

Step 1: Identify what you'll need to change

If you want to add a Buy Now button to Virtuemart, you'll have to modify two views: Products and Product Details. We are going to use Layout Overrides for this, since we are not really changing the functionality of Virtuemart. Besides, this prevents our changes from getting lost when we update our component.

Inside your template, create an html folder (if you haven't done so already). Then create yourtemplate/com_virtuemart/productdetails and yourtemplate/com_virtuemart/sublayouts, your folder should look like this

 

We'll start by modifying the Product Details view. It makes sense to have the new button right next to the Add to Cart button, so our first task is to identify the code that generates such button. Go to components/com_virtuemart/views/productdetails. Copy the file default.php to your layout override folder (i.e. yourtemplate/html/com_virtuemart/productdetails/). Inside your copy, look for the line

 

 
echo shopFunctionsF::renderVmSubLayout('addtocart',array('product'=>$this->product));
 

(This is line 157 in Virtuemart 3.0.14). We see that this line calls a sublayout. Our approach will be to create new sublayouts that closely mimic the original ones, but without replacing them. This way we can disable the new functionality easily if we need to. Change that line to

 
echo shopFunctionsF::renderVmSubLayout('addtocartbuynow',array('product'=>$this->product));
 

Now copy addtocart.php from com_virtuemart/sublayouts/ to yourtemplate/html/com_virtuemart/sublayouts. Rename the file to addtocartbuynow.php. Your folder now looks like this:

sublayouts

Inside the addtocartbuynow.php file, look for a call to the addtocartbar (line 60 in VM3.0.14):

 
echo shopFunctionsF::renderVmSubLayout('addtocartbar',array('product'=>$product));
 

and replace it with

 
echo shopFunctionsF::renderVmSubLayout('addtocartbarbuynow',array('product'=>$product));
 

You also have to copy addtocartbar.php from com_virtuemart/sublayouts/ to yourtemplate/html/com_virtuemart/sublayouts. Rename this file to addtocartbarbuynow.php.

 addtocartbar

These changes will add the button we want to the product details, but we also want to add this functionality to the list view. From com_virtuemart/sublayouts/ copy the file products.php to your sublayouts folder. This time you don't have to change the name. Open the file and replace the line

 
echo shopFunctionsF::renderVmSubLayout('addtocart',array('product'=>$product,'rowHeights'=>$rowsHeight[$row], 'position' => array('ontop', 'addtocart'))); ?>
 

with this

 
echo shopFunctionsF::renderVmSubLayout('addtocartbuynow',array('product'=>$product,'rowHeights'=>$rowsHeight[$row], 'position' => array('ontop', 'addtocart'))); ?>
 

In the end, your sublayouts folder should look like this

sublayouts final

Step 2: Modify the sublayout that does the job

addtocartbar.php is the file that ultimately calls the Add to Cart button. In our new version of this file (addtocartbarbuynow.php) we are going to add the code for including a second button, next to the original that calls the addJS() method from the cart controller via Ajax. This method requires only the product ID and the quantity to be added. Once the product is added to the cart, we are going to redirect to the cart view. The final code looks like this:

             <span class="quantity-controls js-recalculate">
                <input type="button" class="quantity-controls quantity-plus"/>
                <input type="button" class="quantity-controls quantity-minus"/>
            </span>
            <?php }
            if(!empty($addtoCartButton)){
                ?><span class="addtocart-button">
                <?php echo $addtoCartButton ?>
                </span>
                <span class="buynow-sp">
                    <input type="button" title="Buy Now" value="Buy Now" class="buy_now" >
                </span>
                <script>                    
                    jQuery('.buy_now').click(function(event) {
                        event.stopImmediatePropagation();
                        btn=jQuery(this);
                        var quant_may=btn.closest(".addtocart-bar").find("input[name='quantity[]']").val();
                        var pid_may=btn.closest(".addtocart-bar").find("input[name='virtuemart_product_id[]']").val();
                        var data = "quantity[]="+quant_may+"&virtuemart_product_id[]="+pid_may;                    
                        jQuery.ajax({               
                            type: "GET",
                            dataType: 'json',
                            url: "index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS",
                            data: data,
                            success: function(data) {
                                            window.location.href = "http://yourwebsite.com/index.php?option=com_virtuemart&view=cart";
                                        }
                        });
                    });
                </script>
                <?php
            } ?>
            <input type="hidden" name="virtuemart_product_id[]" value="<?php echo $product->virtuemart_product_id ?>"/>
            <noscript><input type="hidden" name="task" value="add"/></noscript> <?php
        }
    } ?>
    </div><?php
} ?>

The highlighted lines are the changes with respect to the addtocartbar.php file. Don't forget to change link in line 26 to your website.

Step 3: Make it look good

By now we have added a fully functional Buy Now button to our Product Details and our Products view. However, it doesn't look good.

product details

The problem is that there is no CSS style associated with the "buynow-sp" and "buy_now" classes. To fix this, add the next declarations to your stylesheet:

/* virtuermart Buy Now button*/
.buynow-sp .buy_now{
    background: #0077b3 none repeat scroll 0 0;
    border: 1px solid #00669a;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 0;
    max-width: 100%;
    padding: 12px;
    text-align: center;
}
.buynow-sp{
    background: #0077b3 none repeat scroll 0 0;
    border: 1px solid #00669a;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 0;
    max-width: 100%;
    text-align: center;
    
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}

Now your button will look like the Add to Cart button. You can play with the properties to get it to look just like you want it.

buynow details

Do you want to see this in a real store? Try our electronics website: emb-ideas.com.