Properties

Hi

 

1.) I want to categorize the properties. For example as in the properties in the live demo. http://demo.jbzoo.co...s-eee-pc-1015bx

I want to add classify the properties like for all processor specs i have a word written Processor and all processor specs below it, Screen word above all screen specifications. How can i achieve this?

 

2.) How do i change the zebra strips of properties to some other design? or color? I mean where is that class present in which it is defined?

 

3.) Is it possible to implement the tabs using ajax or pure html? how can this be achieved

 

thanks

 

Hi

Sorry for the long answer.
I have not had a chance to answer before.

1.) I want to categorize the properties. For example as in the properties in the live demo. http://demo.jbzoo.co...s-eee-pc-1015bx I want to add classify the properties like for all processor specs i have a word written Processor and all processor specs below it, Screen word above all screen specifications. How can i achieve this?

1. I misunderstood you. You want to make a link where you will see all items with a certain processor?
Or you want to add a new property as processor?

2.) How do i change the zebra strips of properties to some other design? or color? I mean where is that class present in which it is defined?

Styles for zebra is defined in this file
\media\zoo\applications\jbuniversal\assets\css\jbzoo.css


Example for define position

<table class="jbtable"><?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable')); ?></table>

3.) Is it possible to implement the tabs using ajax or pure html? how can this be achieved

Tabs example you may see in this template
\media\zoo\applications\jbuniversal\templates\catalog\renderer\item\product\full.php
Tab is not able to load content via AJAX. You can insert ready HTML in the item template.

Hi

I want to add the a separator in the specifications which group different types of specifications together- like

http://img199.images...9/3892/9qx7.JPG

 

 

Secondly i just need to replace the code of jquery with html code for tabs??

Thanks

I want to add the a separator in the specifications which group different types of specifications together- like http://img199.images...9/3892/9qx7.JPG

 
Before the position define in your template add word "Screen", like

<h3>Screen</h3>
<table class="jbtable"><?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable')); ?></table>

Secondly i just need to replace the code of jquery with html code for tabs??

Maybe I don't understand you.
Do you understand how work the jQuery tabs in Full layout?

I want the headings like screen , process battery over various specifications groups. So do i need to use this that many times

 

I got the tabs thing...thanks

You can add to you item layout some group of properties as Screen.

Simple example of jQuery tabs in full template

for product detail page
Layout is here
media\zoo\applications\jbuniversal\templates\catalog\renderer\item\<PRODUCT ITEM ALIAS>\full.php

Add the code of tabs,
Please see comments and name of positions (as "tab-<NUMBER>")

<div id="jbzoo-tabs" class="rborder">
    
    <!-- tab headers block -->
    <ul>
        <!-- if position "tab-1" is not empty show a tab header -->
        <?php if ($this->checkPosition('tab-1')) : ?>
            <li><a href="#tab-1">Tab name #1</a></li>
        <?php endif; ?>
        
        <?php if ($this->checkPosition('tab-2')) : ?>
            <li><a href="#tab-2">Tab name #2</a></li>
        <?php endif; ?>        
        
        <?php if ($this->checkPosition('tab-3')) : ?>
            <li><a href="#tab-3">Tab name #3</a></li>
        <?php endif; ?>                
    </ul>

    <!-- tabs body blocks -->
    <!-- if position "tab-1" is not empty show a tab body -->
    <?php if ($this->checkPosition('tab-1')) : ?>
        <div id="tab-1">
            <h3>Group name #1</h3>
            <table class="jbtable">
                <?php echo $this->renderPosition('tab-1', array('style' => 'jbtable')); ?>
            </table>
        </div>
    <?php endif; ?>
    
    <?php if ($this->checkPosition('tab-2')) : ?>
        <div id="tab-2">
            <h3>Group name #2</h3>
            <table class="jbtable">
                <?php echo $this->renderPosition('tab-2', array('style' => 'jbtable')); ?>
            </table>
        </div>
    <?php endif; ?>

    <?php if ($this->checkPosition('tab-3')) : ?>
        <div id="tab-3">
            <h3>Group name #3</h3>
            <table class="jbtable">
                <?php echo $this->renderPosition('tab-3', array('style' => 'jbtable')); ?>
            </table>
        </div>
    <?php endif; ?>    
</div>

<!-- include tabs lib + jQuery -->
<?php $this->app->jbassets->tabs(); ?>

<!-- init tabs -->
<script type="text/javascript">
    jQuery(function ($) {
        $('#jbzoo-tabs').JBZooTabs(); // for JBZoo 2.0 or higher
        $('#jbzoo-tabs').tabs(); // for JBZoo 1.6.1 or lower
    });
</script>

And check positions.xml file.
It must contain the names of the new positions.

For example in product Full layout
media\zoo\applications\jbuniversal\templates\catalog\renderer\item\<PRODUCT ITEM ALIAS>\positions.xml

Hi

You are not getting what i am trying to say. i got how tabs work

I want to make divisions in the tab itself to sub headings like 

 

http://img35.imagesh...5/6210/wbor.jpg

 

 

2) I have another query at this time- 

I want to align the rating stars and its headings into same line. Now it is coming on next line. Where can i find the file to do it and what changes need to be made?

At this time it is

http://img824.images...4/5645/9qt3.jpg

Want

http://img35.imagesh...5/1854/sk95.jpg

 

 

thanks

Hi
I have tried doing this
--I added the above tab code in the full.php 

<?php if ($this->checkPosition('group-1')) : ?>
    <h3>Group #1</h3>
    <table class="jbtable">
        <?php echo $this->renderPosition('group-1', array('style' => 'jbtable')); ?>
    </table>
<?php endif; ?>

 
And in the positions.xml i added

<position name="group-1">group-1</position>

 
 
now the issue is that the group 1 is repeating in all tabs. How to set it in only one tab?
 
thanks

I also tried to use float css property but the problem is i couldn't exactly locate the file where it is to be used. Though i guessed it was at
media\zoo\elements\rating\assets\css
 
I tried to add float:left--

.yoo-zoo.rating { font-size: 12px; float:left;}

 
This dint work as i was unable to find the class of the title...Please guide
thanks