10 Sep

Display Products image using thickbox to oscommerce admin section

Category:
ecommerce
oscommerce

Posted On : September 10, 2013

| No Comment

This article describe how can you can display products image in thickbox in admin panel.

First download jquery thickbox plugin from any website. thickbox plugin is contain thickbox css and js file and images.

Now open the /admin/ directory and create a new folder in there.give it names thickbox. Now upload all thickbox js file , css file and image in to /admin/thickbox/ directory.

Next open the categories.php file in text editor from /admin/ directory and find the following code\

View Code JAVASCRIPT

<script type="text/javascript"><!--
  updateGross();
  </script>

Add the following code below the code

View Code JAVASCRIPT

<script type="text/javascript" src="thickbox/thickbox.js"></script>
 <link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />

Next find the following code

View Code PHP

   <div><?php echo '<strong>' . TEXT_PRODUCTS_MAIN_IMAGE . ' <small>(' . SMALL_IMAGE_WIDTH . ' x ' . SMALL_IMAGE_HEIGHT . 'px)</small></strong><br />' . (tep_not_null($pInfo->products_image) ? '<a href="' . DIR_WS_CATALOG_IMAGES . $pInfo->products_image . '" target="_blank">' . $pInfo->products_image . '</a> &#124; ' : '') . tep_draw_file_field('products_image'); ?></div>

Replce the above code with following code

View Code PHP

   <div><?php echo '<strong>' . TEXT_PRODUCTS_MAIN_IMAGE . ' <small>(' . SMALL_IMAGE_WIDTH . ' x ' . SMALL_IMAGE_HEIGHT . 'px)</small></strong><br />' . (tep_not_null($pInfo->products_image) ? '<a href="' . DIR_WS_CATALOG_IMAGES . $pInfo->products_image . '" class="thickbox">' . $pInfo->products_image . '</a> &#124; ' : '') . tep_draw_file_field('products_image'); ?></div>

Now find the following code

View Code PHP

   echo '                <li id="piId' . $pi_counter . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s" style="float: right;"></span><a href="#" onclick="showPiDelConfirm(' . $pi_counter . ');return false;" class="ui-icon ui-icon-trash" style="float: right;"></a><strong>' . TEXT_PRODUCTS_LARGE_IMAGE . '</strong><br />' . tep_draw_file_field('products_image_large_' . $pi['id']) . '<br /><a href="' . DIR_WS_CATALOG_IMAGES . $pi['image'] . '" target="_blank">' . $pi['image'] . '</a><br /><br />' . TEXT_PRODUCTS_LARGE_IMAGE_HTML_CONTENT . '<br />' . tep_draw_textarea_field('products_image_htmlcontent_' . $pi['id'], 'soft', '70', '3', $pi['htmlcontent']) . '</li>';

Replace the above code with following code and save the file

View Code PHP

   echo '                <li id="piId' . $pi_counter . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s" style="float: right;"></span><a href="#" onclick="showPiDelConfirm(' . $pi_counter . ');return false;" class="ui-icon ui-icon-trash" style="float: right;"></a><strong>' . TEXT_PRODUCTS_LARGE_IMAGE . '</strong><br />' . tep_draw_file_field('products_image_large_' . $pi['id']) . '<br /><a href="' . DIR_WS_CATALOG_IMAGES . $pi['image'] . '" class="thickbox">' . $pi['image'] . '</a><br /><br />' . TEXT_PRODUCTS_LARGE_IMAGE_HTML_CONTENT . '<br />' . tep_draw_textarea_field('products_image_htmlcontent_' . $pi['id'], 'soft', '70', '3', $pi['htmlcontent']) . '</li>';

Then Login in your oscommerce store admin panel and go to catalog -> Categories / Products section. Now click on the product and then click on edit button.

Now In the product edit page you can see the product images same as following snap.

Now finally click on product image name and you can see products image will open in thickbox popup.just check it out following snap.

Tags: