Magento - Product add to mini cart from slider - php

Question

I want to add product to mini cart from slider.
Slider contain number of thumbnails of products ( It is dynamically generate from admin side. When admin is adding product, the product image will automatically adding in slider too.)
Now my question is
-> If user clicks on specific thumbnail, and click to add-to-cart button, it should be add in Mini cart in header using ajax.
-> If I'm getting product id with Image, Is it enough ? If not, what are parameters are required ?
I haven't more knowledge for Magento, If you knowing even One point from above, please guide me. It will me more helpful to solve out issue.

Answer 1

As of this post:(EE 1.12 or CE 1.7)
Adding a product to the (mini) cart/cart remains relatively the same process across the site, however, where are you adding this slider?
Home Page? Product Listing Page? Product View/Detail Page? Other?
1) Yes, if you properly link the Product via: Link, Image, or (Add to Cart) button, you can have the item added to the cart. See below.
2) We use the ID/SKU to retrieve the product information and in turn it's Image/Small/Thumbnail images as well as Label, Short/Long Description or any other Product related data to the SKU/ID, so yes the product ID is enough information to add the product to the cart.
Are you using a specific slider? Making your own?
Slider Template via Listing Page, read, apply, and expand; do not just copy and paste.
//You'll want to loop through your collection for the slider, is this collection from a category? Custom module?
<?php foreach ($_productCollection as $_product): ?>
//Get/Load the Product Id when looping through a/your collection:
<?php $product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
//Get the Image/Link Information you want to display for your slider:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(100); ?>" width="100" height="100" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
//Basic Add to Cart:
<?php //echo $this->helper('checkout/cart')->getAddUrl($_product) ?>
//Ajax Button
<button onclick="productAddToCartForm.submit()" class="button btn-cart"><span><span>Get a Quote</span></span></button>
//Basic Javascript for Button
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
//]]>
</script>
For additional Details, the following provides a complete implementation as well.
The following provides a good example of the logic though:
http://tutorialmagento.com/add-multiple-product-to-cart-using-magento-ajax-add-cart
--
Update:
Magento's EE Iphone Theme also add's in a visual for adding the product to the cart.
Please see the following file (EE 1.12), I'll have to check to see if this is available in CE, keep in mind this is a Detail page and targeting product ID's on the home page will be different, however, once the Product ID is found, the rest is applicable.
app/design/frontend/enterprise/iphone/template/catalog/product/view.phtml
<?php // SAMPLE?>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->setEscapeMessageFlag(true)->toHtml() ?></div>
<div class="product-view">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-essential">
<div class="product-img-box">
<?php echo $this->getChildHtml('media') ?>
</div>
<div class="product-shop">
<div class="product-main-info">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
</div>
<?php echo $this->getChildHtml('tierprices') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php endif; ?>
</div>
<?php else:?>
<?php if ($_product->isSaleable() && $this->hasOptions() && $this->getChildChildHtml('container1') ):?>
<div class="options-container-small">
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
</div>
<?php endif;?>
<?php endif; ?>
<?php echo $this->getChildHtml('other');?>
</div>
</div>
// -------
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
var transformValue = {};
if ( Modernizr.csstransforms3d ) {
transformValue[Modernizr.prefixed('transform')] = 'translate3d(-82px, -106px, 2px) scale(0) rotate(200deg)';
} else if ( Modernizr.csstransforms ) {
transformValue[Modernizr.prefixed('transform')] = 'translate(-82px, -106px) scale(0) rotate(200deg)';
} else {
this.form.submit();
return false;
}
var originalImg = $$('.product-image-wrap .product-image img')[0];
originalImg.up('.product-image-wrap').insert(originalImg.clone().addClassName('cloned'));
setTimeout(function () {
$$('.cloned')[0].setStyle(transformValue);
}, 1);
$$('.product-image-wrap .cloned')[0].observe(transEndEventName, function(e) {
this.form.submit();
}.bind(this));
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>