Tabbed Products ''LITE'' version - Delimiter based

[jesseasi]

I have been working with another member in this forum to setup these tabs.

I am in charge of entering in all the data for the different tabs. I am running into a problem when using tables.

For some reason each tab does not really recognize the tables and all the tables "overflow" the tab fields.

In other words the tab window is not being stretched to fit the table.

Any ideas?

[Woodymon]

Recently I made the addition above that I was toying around with, that lets you add the core tags to the product description so you choose from there which products set the additional images. product details, and customers also purchased as tabs.

I will upload the "release" version today to the contrib area.

Very cool. Look forward to it.

Assuming the tab transparency details are still to be hammered out?

The body bg color of my site is lite blue but I wished to set the product description panel bg to match the background color of the focused (foreground) tab which is white by default (default_tab_bg_white_left.gif). Thus I added the entry below to stylesheet_tablitev2.css.

.ditch-tab-pane-wrap {
			background: #000000; /* prod-desc pane bg color */
			}

Is this the recommended method to ensure the panel and focused tab bg colors match?

Woody

[Woodymon]

Q-

FYI - Regarding your demo site at http://www.unbannable.com/zen/index....&products_id=1
When I click on the tabs (focused and unfocused) I get no response. In IE6 or Firefox 1.5.0.4. It was working before. I assume you are tweaking code ;-)

Woody

[qhome]

Q-

FYI - Regarding your demo site at http://www.unbannable.com/zen/index....&products_id=1
When I click on the tabs (focused and unfocused) I get no response. In IE6 or Firefox 1.5.0.4. It was working before. I assume you are tweaking code ;-)

Woody

Yea sorry.. i got some new inspiration for when javascript is off. Now if jscript is off, it hides the actual tabs and instead lays out each box as normal. I'm still working on some features of that on my test server tho.

[Woodymon]

Yea sorry.. i got some new inspiration for when javascript is off. Now if jscript is off, it hides the actual tabs and instead lays out each box as normal. I'm still working on some features of that on my test server tho.

Cool to hear. I keep on forgetting to test fallback when JavaScript is off. Thanks for the reminder to do this. BTW I don't observe your mod available via the Downloads area yet? I observe other mods were added very recently. Should it appear in "Other Modules" or elsewhere? Maybe I am impatient ;-)

[qhome]

heh .. this is always my problem with coding.. i keep saying "it will be out soon" and then i have these plans and visions in my head so I keep changing and working on new features If I don't force myself to stop every so often I'd never get my project out.

You should be able to test my demo site with and without jscript and see how it works. Now that I got this done.. that template is a varitable sandbox mess so I'm trying to clean things up. I hope I don't have any more visions before I'm finished so I can release it.

Also, as I mentioned a few posts up, a major change in the release version will be the tags for the core stuff. Now if you want Additional Images, Product Details, and Customers Also Purchased tabs to appear, you need to add the preset hardcoded tag for them to your description (more about this will be in the readme). This allows you to enable/disable those as tabs for each product separately. If you don't add those tags to your description, then they will just appear as normal (unless you disabled those boxes altogether in the admin)

I'm thinking I might table-ize each section if jscript is off so they would be a separate box each instead of running together in the same party box. But thats it. I'm releasing after that.

[Woodymon]

I hope I don't have any more visions before I'm finished so I can release it.

Visions can be good. Don't rush. The nice improvements you've implemented in each update so far have made waiting well worth it. Eventually I suspect you will want to enable the mod so much of the configuration can be done via Admin? But no care for that now. I will take new features over admin configurability any day.

[sanguisdesign]

Price tab contrib hey this is a grad add on
Just made a tab for priccing and atributes as well as the add to cart box add

Add

$price_tabs = true; // Puts the Price info in the tab
$price_tabs_name = 'Pricing'; // If using the tabbed view, set the title

to the foist commented block

Add

//price tab, tab or not
					if ($price_tabs == true) {
							echo '<div id="'.$g.'" onclick="org.ditchnet.jsp.TabUtils.tabClicked(event);" class="ditch-tab ditch-unfocused">';
							echo '<span class="ditch-tab-bg-left"></span><a href="" onclick="return false;">'.$price_tabs_name.'</a>';
							echo '</div>';
							$g++;
					}
					//price tab tab end

right above the line w/

echo '<br class="ditch-clear" />'; //prevent tabs from appearing inside the box

and finaly add

		//price tab content
					if ($price_tabs == true) {
							echo '<div id="'.$a.'" class="ditch-tab-pane" style="display:none;">';
								//<!--bof Product Price block -->
							echo '<h2 id="productPrices" class="productGeneral">';
								// base price
								if ($show_onetime_charges_description == 'true') {
								    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
								  } else {
								    $one_time = '';
								  }
								  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
								echo '</h2><!--eof Product Price block -->	<!--bof free ship icon  -->';
								if(zen_get_product_is_always_free_shipping($products_id_current)) {
									echo '<div id="freeShippingIcon">'. TEXT_PRODUCT_FREE_SHIPPING_ICON .'</div>';
								}
								//<!--eof free ship icon  -->
								//<!--bof Add to Cart Box -->
								if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
									// do nothing
								} else {
									$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
									if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
										// hide the quantity box and default to 1
										$the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
									} else {
										// show the quantity box
										$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
									}
								$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
								if ($display_qty != '' or $display_button != '') { 
									echo '<div id="cartAdd">';
									echo $display_qty;
									echo $display_button;
									echo '</div>';
								} // display qty and button 
								} // CUSTOMERS_APPROVAL == 3 
								//<!--eof Add to Cart Box-->
								//<!--bof Attributes Module -->
								if ($pr_attr->fields['total'] > 0) {
									/**
									* display the product atributes
									*/
									require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); 
								}
	
								//<!--eof Attributes Module -->
					  		
							echo '<br /></div>';
							$a++;
					}
					//end price tab content

Above

echo '</div>'; //ditch-tab-pane-wrap

In your css dir create a file called 'product_info_display.css' and
enter

#cartAdd {
float:none;
}

find all of the Bof comments and wrap them w/ an iff statement allont the lines of

if ($price_tabs == false){ 

that have the price, attributes and addt to cart box.

JOsh

[qhome]

Glad to see you found it easy enough to add your own Sanquis!


OK, I cleaned up and commented the code the best I could. I am finishing up the readme and will upload it to the contribs area.

New stuff

• If jscript is off, it will shows all the data as a whole, and remove the tabs. I jscript is on, it will show the tabs.
• Added Hardcoded tags for AdditionalImages, ProductDetails, and CustomersAlsoPurchased have been created. This allows you to show these tabs on a per product basis rather than globally. More info in the readme on how to use those.
• Cleaned up the code, indented it all properly (including some of the misaligned core code)
• Commented the code where I added stuff and tried to explain what it did.
• Transparency images are also added to the images folder. Images still confuse me a bit. i tried to make it so I could just make the corners of the original images transparent, so you wouldn't see the outer blockiness. But that looked fine on a colored background, but when I went back to the white background, they looked weird. So I included both versions of images.
  
  Also, I didn't include images for totally seeing through the tabs. That could be accomplished by making the main tab area transparent, but I dont like the way it looks at the moment.
  
  Best Advice would be to use the full color tabs, but make your own left tab image thats flat on the side to hide that background corner. Its hokey, but I can't figure out what else to do there for now. I will look into those sites like nifty tabs and other posted above for future versions.

It should be easier to merge other contribs like Cross Sell into this template. I decided NOT to implement hardcode tags for these other contribs, as they may change and be difficule to maintain. I did however try to show how users could add their own.

[sanguisdesign]

It was, you have very clean code
thgank you agian for this great piece of work