Question

我想通过后端的多个图像字段在类别中显示单个类别滑块。如何在类别中创建额外的图像字段以及如何在前端显示。如果我们使用安装程序，那么如何运行安装程序。提前谢谢。

Answer 1

Step #1 
create a file name it sliderimg.php

Step #2 add below code to sliderimg.php

<?php
require_once('app/Mage.php');
Mage::app()->setCurrentStore(Mage::getModel('core/store')->load(Mage_Core_Model_App::ADMIN_STORE_ID));
$installer = new Mage_Sales_Model_Mysql4_Setup;
$attribute  = array(
    'type' => 'varchar',
    'label'=> 'Slider image 1',
    'input' => 'image',
    'backend'       => 'catalog/category_attribute_backend_image',
    'global' => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
    'visible' => true,
    'required' => false,
    'user_defined' => true,
    'default' => "",
    'group' => "Slider" 
);

$installer->addAttribute('catalog_category', 'slider_img1', $attribute);
$installer->endSetup();
?>

Step # 3 Save file to your Magento root installation
Step # 4 run your "sliderimg.php" through your url www.yoursiet.com/sliderimg.php
go to admin>catalog>manage categories> you will see a new tab with image field.


#step # 5 add your slider image 
Note you can add multiple category attribute with the above script


Step # 6 

To call it in the front end. 
create a new file slider.phtml
add this code to "sldier.phtml"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ CSS ---------->





<style class="cp-pen-styles">

.slide--parent {
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
}
p {
    line-height: 1.8;
}
h1 {
    letter-spacing: 10px;
    color: #343434;
    margin: 0;
}

small {
    font-style: italic;
    font-weight: 700;
    margin-bottom: 0.5em;
    display: inline-block;
    color: #999;
    position: relative;
    padding-left: 3em;
}
    small:after {
        content: "";
        position: absolute;
        left: -0em;
        top: 50%;
        height: 4px;
        width: 2.4em;
        background: red;
        transform: translateY(-50%);
    }


.parent--el {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
    .two--col {
        display: flex;
        align-items: center;
    }


figure {
    margin: 0;
}

.is-item {
    width: 60%;
}

enter code here
    .has--img {
        width: 40%;
    }


    .the-img {
    width: 100%;
    position: relative;
    overflow: hidden;
    }
.the-img    img {
        width: 100%;
    }

    .is-item--inner {
    padding: 0em 3em;
}

hr {
    margin: 0.5em 0em;
    height: 4px;
    background: #eee;
    border: none;
}



</style>

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
        ->addAttributeToSelect(array('acc_img1'))
        ->addAttributeToFilter('is_active', 1)
        ->addIdFilter($category->getChildren())
        ->addAttributeToSort('position', ASC);
?>

<div class="slide--parent">
    <?php foreach ($category as $child): ?>
    <div class="parent--el">
        <div class="two--col"> 
            <div class="is-item has--img">
                <figure class="the-img">
                    <img src="<?php echo Mage::getBaseUrl('media') . 'catalog' . '/' . 'category' . '/' . $category->getSlider_img1() ?>">
                </figure>
            </div>
            <div class="is-item has--content">
                <div class="is-item--inner">
                    <h1><span><?php echo Mage::registry('current_category')->getAcc_title1() ?></span></h1>
                    <small>OPTIONAL ACCESSORIES</small>
                    <p><?php echo $category->getAcc_desc1() ?></p>
                <div class="msrp" style="color:#000;">MSRP <span class="msrp-price"><?php echo Mage::registry('current_category')->getAcc_msrp1() ?></span> <span style="color:#000;">usd</span></div>
                <br>
                <button type="button" class="btn btn1 menu-btn-brp-default" onclick="window.open('#' + location.search )">VIEW NOW &nbsp; <span class="glyphicon glyphicon-chevron-down"></span></button>
                </div>
            </div>
        </div>

    </div>


<?php endforeach; ?>
</div>





<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.0.5/flickity.pkgd.min.js"></script> 
<script>
var slideEl = $(".slide--parent");

slideEl.flickity({
    imagesLoaded: true,
    wrapAround: true,
    autoPlay: 6000,
    pauseAutoPlayOnHover: false
});
</script>

call you block by CMS 
{{block type="core/template" template="home/slide.phtml"}}
note if you don't have the folder "home" create one!

NOTE: I used flickity Slider 

That's it guys 
hope you like it

我想在magento的类别中为滑块创建多个图像图像字段？

1 个答案: