Virtuemart

  • 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.