【问题标题】:Magento - Product add to mini cart from sliderMagento - 产品从滑块添加到迷你购物车
【发布时间】:2014-01-11 14:38:58
【问题描述】:

我想将产品从滑块添加到迷你购物车。

滑块包含产品缩略图的数量(它是从管理员端动态生成的。当管理员添加产品时,产品图像也会自动添加到滑块中。)

现在我的问题是

-> 如果我使用图片获取产品 ID,是否足够?如果不是,需要什么参数?

我对 Magento 没有更多的了解,如果你知道上面的一点,请指导我。解决问题对我更有帮助。

【问题讨论】:

    标签: php magento magento-1.7 shopping-cart cart


    【解决方案1】:

    截至本文:(EE 1.12 或 CE 1.7)

    将产品添加到(迷你)购物车/购物车在整个网站上保持相对相同的过程,但是,您在哪里添加此滑块? 主页?产品列表页面?产品视图/详细信息页面?其他?

    1) 是的,如果您通过链接、图片或(添加到购物车)按钮正确链接产品,您可以将商品添加到购物车中。见下文。

    2) 我们使用 ID/SKU 来检索产品信息,然后它是图像/小/缩略图图像以及标签、短/长描述或任何其他与 SKU/ID 的产品相关的数据,所以是的产品 ID 足以将产品添加到购物车。

    您是否使用特定的滑块?自己制作?

    通过列表页面的滑块模板,阅读、应用和扩展;不要只是复制和粘贴。

    //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:
    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><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) ?>" /></a>            
    
    //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>
    

    有关其他详细信息,以下还提供了完整的实现。 下面提供了一个很好的逻辑示例: http://tutorialmagento.com/add-multiple-product-to-cart-using-magento-ajax-add-cart

    -- 更新: Magento 的 EE Iphone Theme 还添加了用于将产品添加到购物车的视觉效果。

    请查看以下文件 (EE 1.12),我必须检查它是否在 CE 中可用,请记住,这是一个详细信息页面,主页上的目标产品 ID 会有所不同,但是,找到产品 ID 后,其余部分均适用。

    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>
    

    【讨论】:

    • 感谢您的回复。我在主页中添加自定义滑块。你的意思是我只能根据产品的 id 在迷你购物车中添加产品,我的意思是如果我得到带有拇指 url 的产品 ID。够了吗?
    • 是的,您可以通过 ID 将产品添加到购物车,上面我展示了一个示例。图像移动等的可见性将通过额外的 javascript(很多使用 jquery)来完成。移动 (iphone) 主题实际上使用“ajax”添加到购物车示例,该示例在视觉上将产品扔到 Minicart 中。所有这些视觉效果只是按钮触发的 javascript。
    • 感谢兄弟给我宝贵的时间。 :P
    猜你喜欢
    • 1970-01-01
    • 2023-03-10
    • 1970-01-01
    • 1970-01-01
    • 2017-05-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多