Jump to content



Photo
- - - - -

Additional popup boxes in the product page


This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1   belilan

belilan
  • Members
  • 43 posts

Posted 16 July 2012 - 12:12

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.lejoailli...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&egrave;ce et main d&#39;oeuvre contre tout probl&egrave;me technique et / ou de fonctionnement.</li>
<li>
est <strong>garantie 100% authentique</strong> et originale (aucune pi&egrave;ce pirate ou parall&egrave;le).</li>
<li>
provient d&#39;une <strong>origine certifi&eacute;e</strong> et non &quot;douteuse&quot;.</li>
</ul>
<p style="text-align: justify;">
En cas d&#39;application de la garantie pour un probl&egrave;me technique, nous confions la montre, en fonction de la marque de celle-ci, &agrave; l&rsquo;un de <em>nos trois horlogers dipl&ocirc;m&eacute;s et certifi&eacute;s</em>. Nos horlogers ne travaillent qu&#39;avec les pi&egrave;ces d&#39;origine ainsi qu&#39;avec les &eacute;quipements ad&eacute;quats requis. Pas de place pour les bricolages hasardeux !</p>
<p style="text-align: justify;">
&nbsp;</p>
<p style="text-align: justify;">
En outre, <em>nous pouvons &eacute;galement entretenir, r&eacute;parer, restaurer, repolir, nettoyer ou expertiser votre montre</em>, que celle-ci provienne de notre magasin ou non.&nbsp;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&eacute;alisent peu &agrave; peu qu&#39;il est souvent bien plus int&eacute;ressant d&#39;acheter une montre d&#39;occasion r&eacute;cente et ce, pour plusieurs raisons:</p>
<ul>
<li>
le <strong>prix</strong>, bien entendu;</li>
<li>
le fait qu&#39;une montre bien port&eacute;e <strong>ne s&#39;use ni ne se d&eacute;grade</strong> (&hellip;), &agrave; l&#39;inverse par exemple d&#39;une voiture;</li>
<li>
la <strong>garantie</strong> d&#39;un an offerte sur chacune de nos montres et le service apr&egrave;s-vente d&#39;une rapidit&eacute; in&eacute;gal&eacute;e;</li>
<li>
le fait que nous rachetons apr&egrave;s usage les montres que nous vendons avec une <strong>d&eacute;cote ridiculement faible</strong>, ce qui permet aux acheteurs de changer r&eacute;guli&egrave;rement de montres &agrave; moindre prix.</li>
<li>
Je ne suis ni agent, ni repr&eacute;sentant, ni concessionnaire officiel de quelle marque que ce soit, ce qui, d&#39;une part, m&#39;interdit de vous procurer les services d&eacute;pendant de ces r&eacute;seaux mais qui, d&#39;autre part, m&#39;assure une libert&eacute; totale (qu&#39;il s&#39;agisse de la tarification des prix ou des services) et une <strong>ind&eacute;pendance</strong> vous garantissant un conseil non-orient&eacute;.</li>
<li>
<p>
Mon &eacute;tablissement est install&eacute; &agrave; Bruxelles mais je suis &agrave; <strong>Paris</strong> minimum un jour par semaine.</p>
<p>
J&#39;entretiens des relations de collaboration privil&eacute;gi&eacute;es avec des correspondants en France, Suisse, Italie, Allemagne, Hollande, UK, USA, &agrave; 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&egrave;res et meetings de collectionneurs, ce qui me permet d&#39;agir sur ce march&eacute; &quot;global&quot;.</p>
<p>
Je peux donc vous trouver n&rsquo;importe quelle montre ou mod&egrave;le, &agrave; des conditions g&eacute;n&eacute;ralement tr&egrave;s avantageuses, les diff&eacute;rents march&eacute;s g&eacute;ographiques impliquant de vraies opportunit&eacute;s compl&eacute;mentaires.</p>
<p>
Des dizaines de montres - d&#39;occasions et neuves - nous sont propos&eacute;es chaque jour et nous op&eacute;rons une s&eacute;lection orient&eacute;e sur les demandes les plus fr&eacute;quentes; il se peut toutefois que le mod&egrave;le que vous recherchez sp&eacute;cifiquement soit disponible et nous ait &eacute;t&eacute; propos&eacute; il y a une minute... Alors n&#39;h&eacute;sitez pas &agrave; nous consulter, nous vous la trouverons aux meilleures conditions!!!</p>
<p>
Je me fais d&#39;autre part un plaisir de r&eacute;pondre personnellement &agrave; toutes les demandes formul&eacute;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');
?>

Attached Files



#2   belilan

belilan
  • Members
  • 43 posts

Posted 16 July 2012 - 17:11

Ok, I found it.
I made a mistake in the code.
It works now.