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?

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! :)

  • 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 '14 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;
  • Hi. I'm sorry could tell me what j2t stands for? Is this a new extension that I need to install? – James Sep 10 '14 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. – Namita sheth Sep 10 '14 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. – Namita sheth Sep 10 '14 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 '14 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. – Namita sheth Sep 11 '14 at 5:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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