Magento – Show popup with item info on clicking add to cart

magento-1.7

I need to display a popup with item name and its other attributes like color, manufacturer, etc when we add this product in cart.
I need to display the popup on clicking add to cart button on product page.
Please guide me, I have tried few things like getting product info after "product_add_to_cart_complete" event but didn't get appropriate result.
I want to show all the product info as it is coming in cart page, like if we have a configurable product, then product is appearing with its option on cart page, same is wanted on popup also.

Best Answer

Follow below steps for creating popup window, you will need to create your block for displaying the attributes.

add include below files using layout xml

<action method="addItem"><type>js</type><name>prototype/window.js</name></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<action method="addCss"><name>lib/prototype/windows/themes/magento.css</name></action>

below is the prototype function which will invoke the widowbox

function showPopup(sUrl) {
    oPopup = new Window({
    id:'popup_window',
    className: 'magento',
    url: sUrl,
    width: 820,
    height: 600,
    minimizable: false,
    maximizable: false,
    showEffectOptions: {
        duration: 0.4
    },
    hideEffectOptions:{
        duration: 0.4
    },
    destroyOnClose: true
    });
    oPopup.setZIndex(100);
    oPopup.showCenter(true);
}

function closePopup() {
    Windows.close('popup_window');
}

invoke function using below code

$('test_me').observe('click', function(event) {
    showPopup('<?php echo Mage::getUrl("here_url_of_block_which_will_have_those_attributes") ?>');
    //Event.stop(oEvent);
});

Related Solutions

Magento – Dynamically create add to cart block for each final configurable option, Helper for $this

Let's get to the root of what you're asking:

I need to simulate $this (whatever model, helper its referring to) so that this block works. I am without much success.

The addtocart.phtml view is called via this xml declaration in app/design/frontend/base/default/layout/catalog.xml:

<block type="catalog/product_view" name="product.info.addtocart" as="addtocart" template="catalog/product/view/addtocart.phtml"/>

That means that the $this you're referring to is the model catalog/product_view. Assuming no rewrites, that should translate to the class file Mage_Catalog_Block_Product_View, found in app/code/core/Mage/Catalog/Block/Product/View.php.

So, with all of that aside, you want $this to behave as if it's being called from the block. Assuming you're still using your standalone script called via AJAX, you should replace $this with $block - loading that as a new instance of the block model referenced above. This may lead to undesired effects - for instance - $block->getProduct() won't work.

Edited standalone addtocart.phtml:

Based on your edit, I have updated this answer:

<?php

require_once('/var/www/Staging/public_html/app/Mage.php');
umask(0);
Mage::app();

//ensure that the value is legitimate
if($_POST && is_numeric($_POST['value'])){
    $value = $_POST['value'];
}

//pass this in your ajax call for the add button
if($_POST && is_numeric($_POST['product_id'])){
    $product_id = $_POST['product_id'];
}

$helper = Mage::helper('core'); //for translation
$block = new Mage_Catalog_Block_Product_View(); // not best practice, but neither are standalones
$product =  Mage::getModel('catalog/product')->load($product_id); // no need to use the _ here, it's not protected/private; additonally Mage::registry won't work because you're technically not on a product detail page

$buttonTitle = ''; //you are using this, but it isn't set

?>
<div class="add-to-cart">
    <label for="qty"><?php echo $helper->__('Qty:') ?></label>
    <input type="text" name="qty" id="qty" maxlength="12" value="<?php echo $block->getProductDefaultQty($product) * 1 ?>" title="<?php echo $helper->__('Qty') ?>" class="input-text qty" />
    <button onclick="window.location = '<?php echo Mage::helper('checkout/cart')->getAddUrl($product);?>'" type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" id='$value'><span><?php echo $buttonTitle ?></span></button>
</div>

Some other thoughts:

You're using $_GET['value'] - don't accept unfiltered input from users. You're placing this directly into the add to cart button. Anyone could munge this to inject scripts and other bad stuff onto a page via the URL. This is called XSS - read more here: http://phpmaster.com/php-security-cross-site-scripting-attacks-xss/

If $_GET['value'] is your vendor, consider using vendor - it's semantic.

How I would implement this:

So, your approach isn't wrong, per se; it'll work. But here's how I would do it:

Create a vendor plugin
Create a custom controller action that takes an argument of vendor, using $this->getRequest()->getParams() - which filters natively for nefarious stuff
Set the output type of the controller to text/html, set to a blank theme that has no script includes or layout elements (structural blocks, etc.)

Or, instead of rolling your own, use the Unirgy Marketplace plugin which does what you're trying to do - and does it very well!

http://www.unirgy.com//products/umarketplace/magento-multi-vendor-marketplace

Magento – How to Disable ‘Add to Cart’ on Specific Products

Make sure your attribute is available on product listing page by setting "Used in Product Listing" to "Yes" when editing your attribute — screenshot
Add your logic to template/catalog/product/list.phtml to show Add to Cart/View details button

Best Answer

Related Solutions

Magento – Dynamically create add to cart block for each final configurable option, Helper for $this

Magento – How to Disable ‘Add to Cart’ on Specific Products

Related Topic