Joomla Templates Club 406,261 posts

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#189778

Hi,
I installed JA Hawkstore and found there is no “add to cart” button in the category page. I really like the “add to cart” button in the product Detail page. I like the animation too. So is anyone can help me to put this button into my category page with the same animation?:)

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#502943

Hi henryxutao,

By default, the category page doesn’t include add to cart button and this requires custom / hack in code to achieve that. It’s best if you search or post a thread in VM forum to get the best solution.

In case that you want to do by yourself, you may consider this file to edit: /templates/ja_hawkstore/html/com_virtuemart/category/default.php and follow this sample reference

Regards,

Nazario

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#503020

Hi, Nazario,Thank you for your reply. I’ll try and post my result here later.

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#503083

Simply use: sample reference doesn’t work.
Found a solution in VM Forum :http://forum.virtuemart.net/index.php?topic=90961.0
Copy the code “just add to cart button without everything else”:
<blockquote><form method=”post” class=”product” action=”index.php” id=”addtocartproduct<?php echo $product->virtuemart_product_id ?>”>
<div class=”addtocart-bar”>
<?php // Display the quantity box ?>
<!– <label for=”quantity<?php echo $this->product->virtuemart_product_id;?>” class=”quantity_box”><?php echo JText::_(‘COM_VIRTUEMART_CART_QUANTITY’); ?>: </label> –>
<span class=”quantity-box”>
<input style=”display:none;” type=”text” class=”quantity-input” name=”quantity[]” value=”1″ />
</span>

<?php // Display the quantity box END ?>

<?php // Add the button
$button_lbl = JText::_(‘COM_VIRTUEMART_CART_ADD_TO’);
$button_cls = ”; //$button_cls = ‘addtocart_button’;
if (VmConfig::get(‘check_stock’) == ‘1’ && !$this->product->product_in_stock) {
$button_lbl = JText::_(‘COM_VIRTUEMART_CART_NOTIFY’);
$button_cls = ‘notify-button’;
} ?>

<?php // Display the add to cart button ?>
<span class=”addtocart-button”>
<input type=”submit” name=”addtocart” class=”addtocart-button” value=”<?php echo $button_lbl ?>” title=”<?php echo $button_lbl ?>” />
</span>

<div class=”clear”></div>
</div>

<?php // Display the add to cart button END ?>
<input type=”hidden” class=”pname” value=”<?php echo $product->product_name ?>”>
<input type=”hidden” name=”option” value=”com_virtuemart” />
<input type=”hidden” name=”view” value=”cart” />
<noscript><input type=”hidden” name=”task” value=”add” /></noscript>
<input type=”hidden” name=”virtuemart_product_id[]” value=”<?php echo $product->virtuemart_product_id ?>” />
<?php /** @todo Handle the manufacturer view */ ?>
<input type=”hidden” name=”virtuemart_manufacturer_id” value=”<?php echo $product->virtuemart_manufacturer_id ?>” />
<input type=”hidden” name=”virtuemart_category_id[]” value=”<?php echo $product->virtuemart_category_id ?>” />
</form></blockquote>
to /templates/ja_hawkstore/html/com_virtuemart/category/default.php, below the code:
<blockquote> <?php // Product Details Button

echo JHTML::link ($product->link, JText::_ (‘JA_PRODUCT_DETAILS’), array(‘title’ => $product->product_name, ‘class’ => ‘product-details’));

?></blockquote>
After that, it does work. But after you click the add to cart button, it pops up a window. To solve that, modify the <form> tag like this:
<blockquote><form class=”ja-vm-product” action=”/agreen/index.php/shop/all-categories/decks” method=”post” id=”addtocartproduct<?php echo $product->virtuemart_product_id ?>”></blockquote>

Then you can find it acts just like in the product detail page, except the animation.

I am still looking for the code related to the animation. Will post it here after I solved it.

1 user says Thank You to henryxutao for this useful post

1. phong nam

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#503398

To add the animation effect, the related file is /public_html/templates/ja_hawkstore/js/javmprices.js, about line 113, find the code:

if($('.productdetails-view.productdetails .main-image img').length>0){
flyToElement($('.productdetails-view.productdetails .main-image img'), $(".vmCartModule"));
}
if($(form).parent().parent().parent().find('div.vmproduct-image img').length>0){
flyToElement($(form).parent().parent().parent().find('div.vmproduct-image img'), $(".vmCartModule"));
}

after that, insert the code:

if($('img.browseProductImage').length>0){
flyToElement($('img.browseProductImage'), $(".vmCartModule"));
}

Then all done.
Hope this can help.

[henryxutao Friend henryxutaoJoin date: August 2013Posts: 26Downloads:0Uploads:4 Thanks: 3 Thanked: 3 times in 1 posts]

#504652

Recently, I found the code before is not 100% correct because it will only fly the first product image to the cart in a product list.
The correct code need to be inserted is:


if($(form).parent().parent().find('img.browseProductImage').length>0){
flyToElement($(form).parent().parent().find('img.browseProductImage'), $(".vmCartModule"));
}


[Author]

Posts