0

I'm trying to display the cart in a popup on the product detail page once the user clicks on the 'Add to cart' button.

I use a Ajax cart popup extension which displays a pop with option to continue shopping or go to the cart page after the user clicks on the add to cart button. Is it possible to show the cart contents in a popup similar to this?

I found that we can check the add to cart action with the event 'checkout_cart_add_product_complete'. Any ideas?

2 Answers 2

1

You can try these:

http://www.magentocommerce.com/magento-connect/header-mini-cart.html http://benfrain.com/magento-how-to-add-a-cart-summary-to-the-header-using-local-xml/

Good luck! :)

1
  • This shows the cart content in the header, I want to show the cart in a popup on add to cart action.
    – James
    Sep 10, 2014 at 9:57
1

If you have used http://www.magentocommerce.com/magento-connect/j2t-ajax-cart.html extension then following code will work.

To show the cart page at the popup insted of continue shopping button you can do this by following steps

1) Update the j2tajaxcheckout_index_cart block at file app/design/frontend/your_package/your_theme/layout/j2tajaxcheckout.xml

<j2tajaxcheckout_index_cart>
   <reference name="content">
        <block type="j2tajaxcheckout/cart" name="j2tajaxcheckout" template="j2tajaxcheckout/ajaxcart.phtml">
              ----------------------------
               Existing Blocks
              ----------------------------
              Add Following Block
              <block type="checkout/cart" name="cart_content_ajax">
                    <action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
                    <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
                    <action method="chooseTemplate"/>
                    <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/item/default.phtml</template></action>
                    <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/item/default.phtml</template></action>
                    <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/item/default.phtml</template></action>

                    <block type="core/text_list" name="checkout.cart.top_methods" as="top_methods" translate="label">
                        <label>Payment Methods Before Checkout Button</label>
                        <block type="checkout/onepage_link" name="checkout.cart.methods.onepage" template="checkout/onepage/link.phtml"/>
                    </block>

                    <block type="page/html_wrapper" name="checkout.cart.form.before" as="form_before" translate="label">
                        <label>Shopping Cart Form Before</label>
                    </block>

                    <block type="core/text_list" name="checkout.cart.methods" as="methods" translate="label">
                        <label>Payment Methods After Checkout Button</label>
                        <block type="checkout/onepage_link" name="checkout.cart.methods.onepage" template="checkout/onepage/link.phtml"/>
                        <block type="checkout/multishipping_link" name="checkout.cart.methods.multishipping" template="checkout/multishipping/link.phtml"/>
                        <!--added by krishin on 13-05-2014
                        To show the paypal express button after remove product with the ajax addtocart extension-->
                        <block type="paypal/express_shortcut" name="checkout.cart.methods.paypal_express.bottom" before="-" template="paypal/express/shortcut.phtml">
                            <action method="setIsQuoteAllowed"><value>1</value></action>
                        </block>
                        <!-- End on 13-05-2014 express checkout button -->
                    </block>

                    <block type="checkout/cart_coupon" name="checkout.cart.coupon" as="coupon" template="checkout/cart/coupon.phtml"/>
                    <block type="checkout/cart_shipping" name="checkout.cart.shipping" as="shipping" template="checkout/cart/shipping.phtml"/>
                    <block type="checkout/cart_crosssell" name="checkout.cart.crosssell" as="crosssell" template="checkout/cart/crosssell.phtml"/>

                    <block type="checkout/cart_totals" name="checkout.cart.totals" as="totals" template="checkout/cart/totals.phtml"/>
                </block>
        </block>
   </reference>
</j2tajaxcheckout_index_cart>

2) Update the JS file to replace the buttons with the cart data at skin/frontend/your_package/your_theme/js/j2t/ajax_cart.js

(1)function j2tSendCartUrl(url, qty_to_insert)

replace following data

         var middle_text = ''; 
            if ($('j2t-temp-div').down('.back-ajax-add')){
                middle_text = '<div class="j2t-cart-bts">'+$('j2t-temp-div').down('.back-ajax-add').innerHTML+'</div>';
            } else {
                j2t_error += " - Unable to find .back-ajax-add element.\r\n";
            }

with

       var full_cart_content = '';
            if ($('j2t-temp-div').down('.j2t_full_cart_content')){
                full_cart_content = $('j2t-temp-div').down('.j2t_full_cart_content').innerHTML;
            }
}

and following

$('j2t_ajax_confirm').innerHTML = '<div id="j2t_ajax_confirm_wrapper">'+return_message + middle_text + upsell_items + '</div>';

with

$('j2t_ajax_confirm').innerHTML = '<div id="j2t_ajax_confirm_wrapper">'+return_message + full_cart_content + upsell_items + '</div>';

(2) function j2tSendCartUrl(url, qty_to_insert)

replace following data

         var middle_text = ''; 
            if ($('j2t-temp-div').down('.back-ajax-add')){
                middle_text = '<div class="j2t-cart-bts">'+$('j2t-temp-div').down('.back-ajax-add').innerHTML+'</div>';
            } else {
                j2t_error += " - Unable to find .back-ajax-add element.\r\n";
            }

with

       var full_cart_content = '';
            if ($('j2t-temp-div').down('.j2t_full_cart_content')){
                full_cart_content = $('j2t-temp-div').down('.j2t_full_cart_content').innerHTML;
            }
}

and following

   var content_ajax = return_message + middle_text + upsell_items;

with

var content_ajax = return_message + full_cart_content + upsell_items;
5
  • Hi. I'm sorry could tell me what j2t stands for? Is this a new extension that I need to install?
    – James
    Sep 10, 2014 at 11:21
  • The way you described the extension that you used. i thought you have used this extension.link My code will work for this extension. sorry if not useful. Sep 10, 2014 at 11:27
  • If this didn't help please provide the link of extension if free, that you have used will try to customize that as per your requirenment. Sep 10, 2014 at 11:36
  • @Namitha sorry for not mentioning the extension I am using. Its the aheadworks ajax cart pro extension, its a paid extension.Thank you for your response.
    – James
    Sep 11, 2014 at 5:38
  • ok . hope my answer help someone else. but you can try by following the steps. you just need to find the block from where the buttons are added and replace it with the cart block. All the best. Sep 11, 2014 at 5:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.