php html delete

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
LVL 5
magentoAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Julian HansenConnect With a Mentor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
You can't change a dropdown to display images, you have to rewrite the page code to display images with appropriate links.
0
 
magentoAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
magentoAuthor Commented:
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
All Courses

From novice to tech pro — start learning today.