Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

thickbox


YePix

Recommended Posts


Hello guys and girls, does any of you have experience with thickbox?

I want a page opened in a css popup. I tried to link it but without success. Can someone help me ?

 

<?php 
                  $option_popup_open = '<a href="';
                  $option_popup_open .= tep_href_link('product_popup.php', tep_get_all_get_params(array('action')) . 'products_id=' . $list_price['products_id']);
				  $option_popup_open .= '" target="_blank" rel="thickbox" title="' . $list_price['products_name'] . '">' . tep_draw_button(TEXT_LOGIN_INFO, 'fa fa-question', tep_href_link('login.php'), null, null, 'btn-reviews btn-block btn-pls') . '</a>';
				
				echo '<span class="pls_option">' . $option_popup_open . '</span>';
?>

 

Link to comment
Share on other sites

<a href='<?php echo tep_href_link('product_popup.php', 'products_id=' . $all_products['products_id']); ?>', target="_blank" onclick="window.open(this.href,this.target,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=420,height=780,screenX=150,screenY=150,top=5,left=650'); return false;"><?php echo tep_draw_button(IMAGE_BUTTON_POPUP, 'plusthick');?></a>

 

that's it. but I do not want a new window but something nice with css layer open

Link to comment
Share on other sites

@YePix

product_listing.php is used by : specials.php, products_new.php, and advanced_search_results.php ... all to display a list of products that meets the specified requirements. product_listing.php does display the purchase button. If I understand what you want, you want to replace the purchase button with a button that pops open *something* that has the attribute choices and the purchase button, without opening the product_info.php screen. Right? If so ...

1) What if a product doesn't have any attributes? Why pop up anything when your customer could just click on the purchase button?

2) You want "something nice". What about a Modal isn't nice? You could alter the way a Modal is displayed with CSS.

M

Link to comment
Share on other sites

You can do this with Bootstrap Modal pop up.

- retrieve the options/attributes info for each product, you have the code example in product_info.php

- place the options/attributes menus code in the modal

- place the add to cart button in the modal. You have the example in product_info.php

Place the modal in a simple condition "if product has attributes"

else use the standard button/link to product_info.php

Link to comment
Share on other sites

from the product_info.php works without problems. but outside I can not get any further.

 

<?php if (SHOW_BUTTON_OPTION_IMAGE == 'true') { $optionsimage = tep_image('images/' . 'prod_button_attribute.png');}?>
<?php $transimage = tep_image('images/' . 'pixel_trans.gif', '1', '12');?>
<?php if ( (tep_session_is_registered('customer_id') == true) || ($id != $customer_id) ) {?>
<div align="center">
<div class="col-sm-6" align="left"><div class="pls_infopanel">
<h4><?php echo TEXT_PRODUCT_OPTIONS . ' ' . $attribute_prod_name; ?></h4>
<?php echo $gender_text . ' ' . $addresses['lastname'] . ', ' . TEXT_PRODUCTS_ATTRIBUTE_PRODUCT_INFO
;?><?php echo $pls_separator_nb; ?>
</div></div>
<span id="myBtn"><div class="CustomButton button1">
<i class="fa fa-calculator"></i>&nbsp;&nbsp;<?php echo TEXT_PRODUCT_OPTIONS_DROPDOWN_POPUP . '<br>' . $product_info['products_name'] . ' ' . TEXT_PRODUCT_OPTIONS_LAST . ' ' . $anrede_text . ' ' . $addresses['lastname'] . $optionsimage;?>
</div></span>
</div>
<?php echo $transimage; ?>
<?php }else{?>
<div align="center">
<div class="col-sm-6" align="left"><div class="pls_infopanel">
<h4><?php echo TEXT_PRODUCT_OPTIONS . ' ' . $attribute_prod_name; ?></h4>
<?php echo TEXT_ATTRIBUTE_GUEST . ' ' . TEXT_PRODUCTS_ATTRIBUTE_PRODUCT_INFO
;?><?php echo $pls_separator_nb; ?>
</div></div>
<span id="myBtn"><div class="button button1">
<i class="fa fa-calculator"></i>&nbsp;&nbsp;<?php echo TEXT_GUEST_PRODUCT_OPTIONS_DROPDOWN_POPUP . '<br>' . $product_info['products_name'] . ' ' . TEXT_PRODUCT_OPTIONS_LAST . $optionsimage;?>
</div></span>
</div>
<?php echo $transimage; ?>
<?php }?>
<div id="myModal" class="modal">
<div class="modal-content">
<p>
<!-------   ------->    
<h4><?php echo TEXT_PRODUCT_OPTIONS . ' ' . $attribute_prod_name; ?></h4>
<?php if ( (tep_session_is_registered('customer_id') == true) || ($id != $customer_id) ) {?>
<?php echo $gender_text . ' ' . $addresses['lastname'] . ', ' . TEXT_PRODUCTS_ATTRIBUTE_INFO . $pls_separator_nb
;?>
<?php }else{
echo TEXT_ATTRIBUTE_GUEST . ' ' . TEXT_PRODUCTS_ATTRIBUTE_INFO;
}?>

<p>
<div class="pls_panel">
<?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)$_GET['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
      $numberofopt = tep_db_num_rows($products_options_name_query);	  
      $opt_count = 0;	  
      $products_attributes = array();
	  while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
	    array_push($products_attributes,$products_options_name['products_options_id']);
        $opt_count++;

        $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)$_GET['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 . "' order by pa.attribute_sort");
        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($_GET['products_id']) && isset($cart->contents[$_GET['products_id']]['attributes'][$products_options_name['products_options_id']])) {
          $selected_attribute = $cart->contents[$_GET['products_id']]['attributes'][$products_options_name['products_options_id']];
        } else {
          $selected_attribute = false;
        }
?>
<strong><?php echo $products_options_name['products_options_name'] . ':'; ?></strong><br />
<?php /* Optionen-Bilder start */ ?>
<?php
	$products_options_images_query = tep_db_query("select image, image_name from " . TABLE_PRODUCTS_OPTIONS_IMAGES . " where options_id = '" . (int)$products_options_name['products_options_id'] . "' ");
?>
<div id="piGal">
<?php
	if (tep_db_num_rows($products_options_images_query) > 0) {

		$options_images_counter = 0;
                while ($options_images = tep_db_fetch_array($products_options_images_query)) {
                  $options_images_counter++;

                  $option_images_out = '<a href="';
                  $option_images_out .= tep_href_link('images/' . 'optionsimages/' . $options_images['image'], '', 'NONSSL', false);
				  $option_images_out .= '" target="_blank" rel="colorbox" title="' . $options_images['image'] . '">' . tep_draw_button(TEXT_SHOW_IMAGE . '&nbsp;' . $options_images['image_name'] . tep_image('images/' . 'optionsimages/' . $options_images['image'], '8%', '8%'), null, null, 'btn btn-default btn-lg') . '</a>';
				
				echo '<span class="pls_optionimage">' . $option_images_out . '</span>';
				}
	}
?>

<script type="text/javascript">
	$("#piGal a[rel^='colorbox']").colorbox({
	cyclic: true
	});
</script></div>
<?php /* Optionen-Bilder ende */ ?>

<?php  $comma = "";
	   $all_option_js = "[";
	   for($t = 1;$t<=$numberofopt; $t++) {
	   $all_option_js .= $comma.'document.getElementById(\'cmbooption_'.$t.'\').value';
	   $comma = ",";				
		}
	   $all_option_js .= "]";
       echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute,' id="cmbooption_'.$opt_count.'"  onChange="getPrice('.$v_new_price.','.$v_products_price.','.(int)$_GET['products_id'].','.$all_option_js.')"'); 
      }
?></div>
<!-------   ------->    
</p><?php echo $pls_separator_nb;?>
<span class="InfoTextBottom"><?php echo TEXT_PRODUCTS_ATTRIBUTE_PRODUCT_INFO_BOTTOM;?></span><?php echo $pls_separator_nb;?>
<span class="close" style="float: left;"><?php echo TEXT_FINISH;?></span><br><br>
<br><br> </div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...