Solved

php html delete

Posted on 2014-02-13
5
209 Views
Last Modified: 2014-03-19
Hi ,

I use the below code, so user choose the select item type in drop down and the image will display based on the selection.

I dont want the "select item type" , need only the images.

Please help .

            <div id="select_phone_type" class="t_shirt tab_content">
                <div class="wrap_product_type">
                    <h3 class="product-type-title numbers first"><?php echo $this->__("Select Item Type") ?></h3>
            		<select id="t-shirt-type">
                        <?php 
                            $group_items = Mage::getModel( 'pdp/pdpgroup' )->getPdpGroup();
                            foreach ($group_items as $group_item ){ ?>
                                <option value='<?php echo $group_item->getId() ?>' <?php if($dt_ts[0]==$group_item->getId()) echo 'selected="selected"'; ?>><?php echo $group_item->getTitle() ?></option>
                            <?php }
                        ?>
                    </select>
                </div>
        		<div class="color_wrap no-display">
                    <h3 class="color-option"><?php echo $this->__("Select Item") ?></h3>
            		<div color="list" id="list_color">
            			<ul>
            			<?php $img_all = ''; $fi=0; foreach ($designs as $design) {
            			     if($dt_ts[4]==''){
            			         if($fi++==0){
                			         //$f_img_act = 'class="active"';
                			     }else{
                			         $f_img_act = '';
                                 }
            			     }else{
            			         if($dt_ts[4]==$design->getId()){
            			             $f_img_act = 'class="active"';
            			         }else{
                			         $f_img_act = '';
            			         }
            			     }
            				$option = unserialize($design->getOptions());
            				$frontInlay = $helper->getInlayInfoByFilename($design->getFilename());
            				$backInlay = $helper->getInlayInfoByFilename($design->getFilenameBack());
            				$leftInlay = $helper->getInlayInfoByFilename($design->getFilenameLeft());
            				$rightInlay = $helper->getInlayInfoByFilename($design->getFilenameRight());
                                                                             
                            $img_all .= '<img src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'pdp/images/'.$design->getFilenameBack().'" /><img src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'pdp/images/'.$design->getFilename().'" />';
            				echo '<li '.$f_img_act.' did="'.$design->getId().'" inlay="'.$frontInlay . '-' . $backInlay . '-' . $leftInlay . '-' . $rightInlay . '" relf="'. $design->getFilename().'" relb="' . $design->getFilenameBack() .'" relr="' . $design->getFilenameRight() .'" rell="' . $design->getFilenameLeft() .'" tt="'. $design->getPdpgroup() .'" price="'.$design->getPrice().'" ><img src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).'pdp/images/'.$design->getFilename().'" /></li>';
            			} ?>
            			</ul>
            		</div>

Open in new window

magento-custom-module.gif
0
Comment
Question by:magento
  • 2
  • 2
5 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You can't change a dropdown to display images, you have to rewrite the page code to display images with appropriate links.
0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi Dave,

The idea is to remove the dropdown first.

So after that the ...

products are available in $group_item->getId() then use the $design->getId() and show only the images instead of product .

The screenshot attached is what i looking for, but not sure how to make that part work.

Thanks
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You basically take the link and image that you have and duplicate it with the other options from the dropdown.  I'm not sure what your code is going to look like because you have a lot of things there that are not familiar to me.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
Is the code you posted already generating the list with images?

If so - can you not simply hide the <select> and put some javascript in on the image click to trigger a select change. That way you keep the integration between Magento engine and the select.

 Here is a very simple example.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#test').change(function() {
    console.log('Changed to ' + $(this).val());
  });
  $('li img').click(function() {
    $('#test').val($(this).data('id')).trigger('change');
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <select id="test">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
  </select>
  <ul>
    <li><img src="images/00100_thm.jpg" data-id="1"/></li>
    <li><img src="images/00105_thm.jpg" data-id="2" /></li>
    <li><img src="images/00102_thm.jpg" data-id="3" /></li>
    <li><img src="images/00101_thm.jpg" data-id="4" /></li>
  </ul>
</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:magento
Comment Utility
Hi Julian,

Thanks for your email.

originally i have a dropdown with 3 values, when i click 1st value, it displays 1 st values image
when i click 2nd value in fropdown it shows 2nd values image and so on.

Since the customers may get confused because both of them are same. Now instead of that dropdown i want to display only product  images of 3 values .

I have hidden the select html

                        <select id="t-shirt-type" style="visibility:hidden;">

And now 50% of my goal is done.

But i cant able to make the javascript you have provided in my code.

Can you please check my code and advice?

Thanks
magento-custom-module.gif
t-shirt.html
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Every business owner understands the significance of online customer reviews and the impact it can have on sales and revenues. With technology advancing at such a rapid pace, getting online reviews has never been easier, especially when many regions…
The viewer will learn how to dynamically set the form action using jQuery.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now