Additional popup boxes in the product page

belilan · July 16, 2012

Hello,

On my site http://www.lejoaillier.be/, on the product page, I have a line named "Garantie" which opens a popup box with the warranty details.

You can see an example here.

http://www.lejoaillier.be/product_info.php?language=fr&products_id=350

I decided to add a second line named "achat et livraison" to add other details, and an new box with other kind of details.

I did it on my computer, and now I have 2 lines as you can see on the first picture.

My problem is that when I click on whatever lines, both boxes appear on the screen (you can see on the second pic.

I don't know how to link the line "garantie" to the box "garantie" and "achat et livraison" to the box "achat et livraison".

Below, the used code.

Thank you for any help.

Alain

Here is the code of my \languages\french\product_info.php

<?php
/*
 $Id: product_info.php $
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
define('TEXT_PRODUCT_NOT_FOUND', 'Produit non trouvé !');
define('TEXT_CURRENT_REVIEWS', 'Avis des clients sur le produit :');
define('TEXT_MORE_INFORMATION', 'Pour plus d\'informations, veuillez visiter cette <a href="%s" target="_blank"><u>page web</u></a>.');
define('TEXT_DATE_ADDED', 'Ce produit a été ajouté à notre catalogue le %s.');
define('TEXT_DATE_AVAILABLE', '<font color="#ff0000">Ce produit sera en stock le %s.</font>');
define('TEXT_ALSO_PURCHASED_PRODUCTS', 'Les clients qui ont acheté ce produit ont aussi acheté ');
define('TEXT_PRODUCT_OPTIONS', 'Options :');
define('TEXT_CLICK_TO_ENLARGE', 'Cliquer pour agrandir');
define('POPUP_HEADING', 'Garantie');
define('POPUP_TEXT', '<p>
<span style="font-size:26px;">Garantie</span></p>
<p>
Chacune de nos montres:</p>
<ul>
<li>
 est <strong>garantie un an</strong> pièce et main d'oeuvre contre tout problème technique et / ou de fonctionnement.</li>
<li>
 est <strong>garantie 100% authentique</strong> et originale (aucune pièce pirate ou parallèle).</li>
<li>
 provient d'une <strong>origine certifiée</strong> et non "douteuse".</li>
</ul>
<p style="text-align: justify;">
En cas d'application de la garantie pour un problème technique, nous confions la montre, en fonction de la marque de celle-ci, à l’un de <em>nos trois horlogers diplômés et certifiés</em>. Nos horlogers ne travaillent qu'avec les pièces d'origine ainsi qu'avec les équipements adéquats requis. Pas de place pour les bricolages hasardeux !</p>
<p style="text-align: justify;">
 </p>
<p style="text-align: justify;">
En outre, <em>nous pouvons également entretenir, réparer, restaurer, repolir, nettoyer ou expertiser votre montre</em>, que celle-ci provienne de notre magasin ou non. Chacune de nos interventions est couverte par une garantie de six mois.</p>
');
define('POPUP_HEADING1', 'Achat et livraison');
define('POPUP_TEXT1', '<p><p>
<strong>En pleine effervescence</strong> car les gens réalisent peu à peu qu'il est souvent bien plus intéressant d'acheter une montre d'occasion récente et ce, pour plusieurs raisons:</p>
<ul>
<li>
 le <strong>prix</strong>, bien entendu;</li>
<li>
 le fait qu'une montre bien portée <strong>ne s'use ni ne se dégrade</strong> (…), à l'inverse par exemple d'une voiture;</li>
<li>
 la <strong>garantie</strong> d'un an offerte sur chacune de nos montres et le service après-vente d'une rapidité inégalée;</li>
<li>
 le fait que nous rachetons après usage les montres que nous vendons avec une <strong>décote ridiculement faible</strong>, ce qui permet aux acheteurs de changer régulièrement de montres à moindre prix.</li>
<li>
 Je ne suis ni agent, ni représentant, ni concessionnaire officiel de quelle marque que ce soit, ce qui, d'une part, m'interdit de vous procurer les services dépendant de ces réseaux mais qui, d'autre part, m'assure une liberté totale (qu'il s'agisse de la tarification des prix ou des services) et une <strong>indépendance</strong> vous garantissant un conseil non-orienté.</li>
<li>
 <p>
  Mon établissement est installé à Bruxelles mais je suis à <strong>Paris</strong> minimum un jour par semaine.</p>
 <p>
  J'entretiens des relations de collaboration privilégiées avec des correspondants en France, Suisse, Italie, Allemagne, Hollande, UK, USA, à Hong Kong et au Moyen Orient.</p>
 <p>
  En outre, je parcours le monde pour me rendre dans les plus grandes foires/shows, ventes aux enchères et meetings de collectionneurs, ce qui me permet d'agir sur ce marché "global".</p>
 <p>
  Je peux donc vous trouver n’importe quelle montre ou modèle, à des conditions généralement très avantageuses, les différents marchés géographiques impliquant de vraies opportunités complémentaires.</p>
 <p>
  Des dizaines de montres - d'occasions et neuves - nous sont proposées chaque jour et nous opérons une sélection orientée sur les demandes les plus fréquentes; il se peut toutefois que le modèle que vous recherchez spécifiquement soit disponible et nous ait été proposé il y a une minute... Alors n'hésitez pas à nous consulter, nous vous la trouverons aux meilleures conditions!!!</p>
 <p>
  Je me fais d'autre part un plaisir de répondre personnellement à toutes les demandes formulées par e-mail.</p>
</li>
</ul>
</p>
');

define('POPUP_CLOSE', 'Fermez cette fenêtre');
define('POPUP_SHOW', 'Garantie');
define('POPUP_SHOW1', 'Achat et livraison');
?>

And the one of my \product_info.php

<?php
/*
 $Id$
 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com
 Copyright (c) 2010 osCommerce
 Released under the GNU General Public License
*/
 require('includes/application_top.php');
 require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCT_INFO);
 $product_check_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
 $product_check = tep_db_fetch_array($product_check_query);
 require(DIR_WS_INCLUDES . 'template_top.php');
?>
<script type="text/javascript"><!--
function popupWindow(url) {
 window.open(url,'popupWindow','toolbar=,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>
<script>
 $(document).ready(function() {
$(".popup_contents").dialog({
  autoOpen: false,
  modal: true,
  width: 500,
  buttons: [
	{
	  text: "<?php echo POPUP_CLOSE; ?>",
	  click: function() { $(this).dialog("close"); }
	}
  ]
});
$('.show_popup').click(function() {
  $('.popup_contents').dialog('open');
});
 });
</script>
<style>
a.show_popup {
 color: #69B5C4;
 text-decoration: underline;
}
a.show_popup:hover {
 color: #69B5C4;
 text-decoration: none;
}
</style>
<div class="popup_contents" title="<?php echo POPUP_HEADING; ?>">
 <?php echo POPUP_TEXT; ?>
</div>
<script>
 $(document).ready(function() {
$(".popup_contents1").dialog({
  autoOpen: false,
  modal: true,
  width: 500,
  buttons: [
	{
	  text: "<?php echo POPUP_CLOSE; ?>",
	  click: function() { $(this).dialog("close"); }
	}
  ]
});
$('.show_popup').click(function() {
  $('.popup_contents1').dialog('open');
});
 });
</script>
<style>
a.show_popup {
 color: #69B5C4;
 text-decoration: underline;
}
a.show_popup:hover {
 color: #69B5C4;
 text-decoration: none;
}
</style>
<div class="popup_contents1" title="<?php echo POPUP_HEADING1; ?>">
 <?php echo POPUP_TEXT1; ?>
</div>
<?php echo tep_draw_content_top();?>
<?php
 if ($product_check['total'] < 1) {
?>
<?php echo tep_draw_title_top();?>
<h1><?php echo TEXT_PRODUCT_NOT_FOUND; ?></h1>
<?php echo tep_draw_title_bottom();?>
<div class="contentContainer">
 <div class="contentPadd">
 <div class="buttonSet">
<span class="fl_right"><div class="bg_button22" onMouseOut="this.className='bg_button22';" onMouseOver="this.className='bg_button22-act';"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></div></span>
 </div>

</div>
</div>
<?php
 } else {
$product_info_query = tep_db_query("select p.products_id, pd.products_name, pd.products_description, p.products_model, p.products_quantity, p.products_image, pd.products_url, p.products_price, p.products_tax_class_id, p.products_date_added, p.products_date_available, p.manufacturers_id from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");
$product_info = tep_db_fetch_array($product_info_query);
tep_db_query("update " . TABLE_PRODUCTS_DESCRIPTION . " set products_viewed = products_viewed+1 where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and language_id = '" . (int)$languages_id . "'");
if ($new_price = tep_get_products_special_price($product_info['products_id'])) {
  $products_price = '<del>' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</del> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
} else {
  $products_price = '<span class="productSpecialPrice">' . $currencies->display_price($product_info['products_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) . '</span>';
}
if (tep_not_null($product_info['products_model'])) {
  $products_name = $product_info['products_name'] . '<br /><span class="smallText">[' . $product_info['products_model'] . ']</span>';
} else {
  $products_name = $product_info['products_name'];
}
?>
<?php echo tep_draw_form('cart_quantity', tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'action=add_product')); ?>

<div class="contentContainer page_un">
 <div class="contentPadd un">

<div><div class="prods_content prods_info wp big">
 <div class="bd">
 <ol class="doc">
 <li class="s1">


<?php
if (tep_not_null($product_info['products_image'])) {
  $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
?>  
 <?php
	  if (tep_db_num_rows($pi_query) > 0) {
?>

	<div id="piGal">
	  <ul>

<?php
		$pi_counter = 0;
		while ($pi = tep_db_fetch_array($pi_query)) {
		  $pi_counter++;

		  $pi_entry = '		<li><a href="';

		  if (tep_not_null($pi['htmlcontent'])) {
			$pi_entry .= '#piGalimg_' . $pi_counter;
		  } else {
			$pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
		  }

		  $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

		  if (tep_not_null($pi['htmlcontent'])) {
			$pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
		  }

		  $pi_entry .= '</li>';

		  echo $pi_entry;
		}
?>

	  </ul>
	</div>

<script type="text/javascript">
$(function(){
$('#piGal ul').bxGallery({
  maxwidth: 262,
  maxheight: 247,
  thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
  thumbcontainer: 261,
  load_image: 'ext/jquery/bxGallery/spinner.gif'
})
	});
</script>

<?php
	  } else {
// $image_width = (SMALL_IMAGE_WIDTH +(262 - SMALL_IMAGE_WIDTH));  
?>

	 <?php echo '<div id="piGal" class="wrapper_pic_div fl_left" style="width:'.(SMALL_IMAGE_WIDTH +2).'px;height:'.(SMALL_IMAGE_HEIGHT + 2).'px;"><a class="prods_pic_bg" href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), (SMALL_IMAGE_WIDTH + 2), (SMALL_IMAGE_HEIGHT + 2), ' style="width:'.(SMALL_IMAGE_WIDTH +2).'px;height:'.(SMALL_IMAGE_HEIGHT + 2).'px;"', '', '') . ''.tep_draw_prod_pic_top().''.tep_draw_prod_pic_bottom().'</a></div>'; ?>

<?php
	  }
?>

<script type="text/javascript">
$("#piGal a[rel^='fancybox']").fancybox({
  cyclic: true
});
</script>
<?php
	}
?>


		  </li>
 <li class="s2">
<div class="info">
<?php
	if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>

	<div class="data_add border_bottom"><p><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></p></div>

<?php
	}else{
?>
	<div class="data_add border_bottom"><p><?php echo sprintf(TEXT_DATE_ADDED, tep_date_long($product_info['products_date_added'])); ?></p></div>
<?php	
	}
?>

<h2><?php echo $products_name; ?></h2>
<h2><?php echo $products_price; ?></h2>



<?php
	$products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
	$products_attributes = tep_db_fetch_array($products_attributes_query);
	if ($products_attributes['total'] > 0) {
?>
		<br class="clear" />
		<div class="options">
			<p class="options-title"><?php echo TEXT_PRODUCT_OPTIONS; ?></p>
			<div class="ofh">
<?php
				  $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
				  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
					$products_options_array = array();
					$products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
					while ($products_options = tep_db_fetch_array($products_options_query)) {
					  $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
					  if ($products_options['options_values_price'] != '0') {
						$products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
					  }
					}
					if (is_string($HTTP_GET_VARS['products_id']) && isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
					  $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
					} else {
					  $selected_attribute = false;
					}
?>
					<div class="fl_left dib"><label><?php echo $products_options_name['products_options_name'] . ':'; ?></label><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute); ?></div>
<?php
	  }
?>
			</div>
		</div>
<?php
	}
?>
		<div>
		  <?php echo stripslashes($product_info['products_description']); ?>
		  <br>
		  <a href="<?php echo tep_href_link(FILENAME_CONTACT_US, 'watch_id=' . (int)$HTTP_GET_VARS['products_id']); ?>"><?php echo tep_image_button('product_contact.gif'); ?></a>
		</div>

		<div class="clear"></div>

<?php
	$reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " where products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and reviews_status = 1");
	$reviews = tep_db_fetch_array($reviews_query);
?>

		<div class="buttonSet">
			  <span class="buttonAction">
				<div class="bg_button2" onMouseOut="this.className='bg_button2';" onMouseOver="this.className='bg_button2-act';">
				  <a class="show_popup"><?php echo POPUP_SHOW; ?></a>
				</div>
			  </span>
			<?php
			if (SHOW_BUTTON == 'True') {
			  ?>
			  <div class="fl_right" align="right"><div class="bg_button22" onMouseOut="this.className='bg_button22';" onMouseOver="this.className='bg_button22-act';"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary'); ?></div></div>
			  <?php
			}
			?>
		</div>

  <div class="buttonSet">
			  <span class="buttonAction">
				<div class="bg_button2" onMouseOut="this.className='bg_button2';" onMouseOver="this.className='bg_button2-act';">
				  <a class="show_popup"><?php echo POPUP_SHOW1; ?></a>
				</div>
			  </span>
			<?php
			if (SHOW_BUTTON == 'True') {
			  ?>
			  <div class="fl_right" align="right"><div class="bg_button22" onMouseOut="this.className='bg_button22';" onMouseOver="this.className='bg_button22-act';"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary'); ?></div></div>
			  <?php
			}
			?>
		</div>

	</div>

		  </li>
 </ol>
 </div>
</div></div>

</div>
</div>
<?php
if ((USE_CACHE == 'true') && empty($SID)) {
  echo tep_cache_also_purchased(3600);
} else {
  include(DIR_WS_MODULES . FILENAME_ALSO_PURCHASED_PRODUCTS);
}
?>

</form>

<?php
 }
?>
<?php echo tep_draw_content_bottom();?>
<?php
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

belilan · July 16, 2012

Ok, I found it.

I made a mistake in the code.

It works now.

Additional popup boxes in the product page

Recommended Posts

belilan

Link to comment

Share on other sites

belilan

Link to comment

Share on other sites

Archived

Browse

Activity