SobiPro Templating How To

SobiPro Templating How To…

Posted on Monday, June 20th, 2011 at 11:51 am

I am not against anyone making money from their great work and the developers of SobiPro are no exception. However I do believe that if you are providing a solution that is supposedly for free that it comes with some basic documentation on how to use the product. However to access this basic documentation a ‘club’ membership is required which I feel is wrong, but that is only my view, yours may be different. During my use of SobiPro I have been compiling a list of how to references on using the SobiPro Template framework and the template language (XSL) used.

UPDATE: Yesterday I decided to trial a Club Membership and bought a 1 month membership to see what the documentation was like, and to be honest I was pleasantly surprised and really do believe that a 1 or 3 month membership is worth it as the documentation is very good. It fills the gap between what I already knew and what I have been trying to work out. So if you can afford a single months membership I suggest you get it, or better yet a 3 month membership. The only thing that they need to consider adding is an upgrade path from a Bronze to Silver to Gold which I think will assure ongoing payments by users as they notice the true value of the documentation.

Anyone that has previously used Sobi2 prior to SobiPro would have seen the great documentation provided on the Sigsiu website of which, through the use of that documentation, many were able to make their sobi2 site look, work and play as they wanted it to, it was what made sobi2 so great. That documentation gave quite detailed descriptions, guides and examples on how to create, edit and customise the templates used for the front end of the Sobi2 system. Unfortunately that information is not being provided for SobiPro unless you obtain a SobiPro Club Membership with a minimum cost of 30 Euro for a single months access. The developers have decided that any and all documentation is only provided via a Club Membership. that is fine and that is their choice, but I feel the basic documentation should be provided freely with SobiPro just like it was for Sobi2. Please do not take me the wrong way of not supporting developers for their work, I have bought quite a few add-ons for the previous sobi2 solution and would have again with SobiPro if it went down that same path.

So anyway while starting to use SobiPro I have been compiling my own set of ‘template’ guide notes for SobiPro so that I can refer to them when I need to for any other future SobiPro sites. This list is not exhaustive and only covers those template functions I have needed so far and therefore is not a complete list of template functions and how to’s. I am also not an XSL expert by any stretch of the imagination but I am learning thanks to SobiPro. I also need to point out that all of the information has been gathered from actually using SobiPro with some trial and error to see the end results. Much of the detail is actually freely available from within the included templates (vehicle section template) of the base SobiPro install, you just need to know where to look. I have not yet purchased a Club Membership so I have no access to any of that documentation, even if I did I would not divulge the content that is beyond the basics of SobiPro core as that would not be right. I need to be clear that I am not seeking to take anything away from the SobiPro developers, but rather help other SobiPro users too understand how the template system works and hopefully it will enable them to better utilise SobiPro, just as we were able to do with Sobi2. If of course the SobiPro developers decide to make the core documentation that contains what I have below and more public, then that is great and is in my view what should have been done in the first place..

Please also note the following is from my own use and testing, there may be more efficient ways of doing some of the below which I have yet to discover and test. If you are a SobiPro user feel free to submit additions to this post, but please if you have bought a membership do not provide any non core documentation content as that is what you (and others) should be paying for to support the ongoing development of sobi* in general.

Please, I need to be clear here that I am not out to be destructive or negative towards SobiPro or Neo and Trinity at Sigsiu.net. Far from it, I would like to support it more if I could and I hope by helping others that I am doing just that and not simply seen as being ‘destructive’ as Neo has mentioned here. I would be very happy to buy a Club Membership ‘IF’ the price for that membership was more reasonable.

The Basics:

Differences between Vcard and Details view

When looking to insert fields into the vcard and the details view there is two small differences between the two.

For vcard view the fields are added by simply prefixing the field you want with field/

For the Details view you need to prefix the fields with entry/field

Some of this is shown below in the examples provided.

Getting a field label:

On the Card view;

On the Details view;

The field_NAME is the actual field name that you wish to have the label for.

Adding text within a field area:

Surround the text with the following code

  YOUR TEXT

Where YOUR TEXT is any text you want displayed in or around the field label or field data.

Displaying a fields data:

On the Card view;

On the Details view;

field_NAME is the field to which you want the data displayed

Displaying an Image field:

For a single image in the vcard use the code

For a single image in the detail sview use the code

Where field_item_main_image is the name of the image field you want displayed.

Display a web site URL field as a link (updated).

The field label is of course optional.

For the Card view

  :                             

For the Details View

  :                             

Where field_web_site is your web site field.

Conditional Publish Statement:

If you wish to check a value and if correct publish or if not then not publish the code is simply

For vcard;

For Details;

The value is whatever you want to check if something is equal to it, for example is the field equal to 100, you would add 100 in the THEVALUE location. Take note also that there is no elseif in XSL, you can use otherwise (shown in next how to example) or you can nest additional if statements if you want it to check for more values.

Outputting content without html being shown:

In the xsl value section add the following after the field data

  disable-output-escaping="yes"

so for example on the card view use

Or on the details view use (though I do not think you need to for the details view, but here it is anyway)

Truncating a fields output:

                        ...                            

Replace YOURFIELD with the field name that you want to have truncated, e.g. fields/field_item_detail/data

Replace MAXLENGTH with the maximum length of the output you want, e.g. 80.

Show more than 15 sub-categories:

If you want to show more than the max subcategories set by the sections General Configuration simply open up the your SobiPro template folder and locate the common/category.xsl file and edit line 28

Change the +1

to whatever number you want it to be, e.g. + 30

Now up to 45 sub category items will display (if you selected 15 in the General Configuration)

Choosing one value over another, conditional result

This is useful if you want to test a value to have a value and if not then use an alternative value. For example if I want to check to see if the listing is in a US State I can have two fields, one for US States (field_state) and one for Non US States (field_non_us_state). I have a select drop down box for all US states, but also one for Non US State. When a user enters their record they can enter either the US State or they can select Non US State and then enter the non US State in the field provided (field_non_us_state). Now I want to show the correct data for that record, being either the US state or the Non US State, to do this and to cover both options I can have something like this. Remember the field display differences between Card view and Details view shown above.

              ,                  ,         

The above will check via a choose command to see if the first value is correct and if so it will apply that data, if not it will then move to the next option and that being the US State. It is kind of like an IF statement but less messy as it will choose the correct result.

Adding the Category Name to the page heading (content).

When you view a page within your SobiPro front end you will see the section name as the component heading name on all pages, while this is good I wanted to also add the category name to that title as well. So instead of just having Business Directory at the top of the page I can now have Business Directory – Category Name. It is very simple to do.

In your template folder and the category folder select the view.xsl file and add

   - 

after

to end up with

   - 

The Result will be your SobiPro Section name and then the Category name.

If you want the same also added to an entries details page (entry/details.xsl), the code for that is slightly different, add

   - 

after

so you end up with

   - 

Now you will have the Section and category name displayed on the top of the page.

Outputting the date of entry or date of update in a format you want.

I wanted to display the date an entry was added and last updated which is easily done by using the following (for details page)

  :     |    :    

However the output of the date comes out like this 2011-08-09 00:00:00

I wanted it to only show the date and as date/month/year, to do this I was able to change the date format by using the built in FormatDate function, like this

You can use different date formats by using the correct date codes for php found at http://php.net/manual/en/function.date.php.

Note if you want to add the dates to your vcard you will need to change;

  string(entry/updated_time)

to

  string(updated_time)

Replace the jquery modal box with mootools slimbox.

For unknown (and quite frankly a poor decision) reasons Sigsiu has implemented jQuery for its javascript requirements over mootools which is the preferred javascript framework for Joomla. Having jquery also as part of your site on top of mootools can cause conflicts and result in unpredictable outcomes and output to your web site. So I am on a path to remove jquery from SobiPro completely, but this is the start, the thumbnail to full size image view in the entries details page.

The example provided to start me off is what is provided in the ‘vehicles’ template, the code for the modal jquery pop up image is written as

You will need to edit the details.ini file and replace

  js_files = "jquery,details,box"

with

  js_files = "slimbox"

and replace

  css_files = "default,details,box"

with

  css_files = "default"

Now the code I am using in my details.xsl file to replace the modal one (shown above) is the following, you can style it differently if you want;

The @original is what is used to create the link to the original file. this is what is shown when the user clicks on the thumbnail image. Ensure that in your SobiPro field for your image that you have set the thumbnail to be shown as default in the details view.

You will also need to obtain slimbox – get it from http://www.digitalia.be/software/slimbox but remember that slimbox2 uses jquery, so get slimbox 1.7x.

I then copied all of the slimbox css and placed it into the default.css file for my Sobipro template, and likewise copied the images into the css folder as well. I copied the slimbox.js file to the js directory of the template I am using, which you referenced already above. Save it all.

That should be it, test your SobiPro front end and details view to check that it is working for you.

Setting a Default Category for those sections with only one category

Thanks to KST for help in working out this solution

First identify the ID of the category you will use as your default.

Add this line just after the last div in the default template / entry / edit.xsl file, where XX is your default category.

Then delete lines 26 to 46

Save and test.

Adding alt and title text to an image

When developing your site you should always ensure that you use an ‘alt’ and ‘title’ tag for all of your images. SobiPro however does not provide this by default so you need to build that into your template;

Lets say for example you want to have a main image on your entries details page, first you need to create the image field, lets just call it ‘field_my_image’ for this example, here is how the code needs to look to enable it to use an alt and title tag

What we have done here is split up the img src code into segments so we can control what is used and how it is displayed. For the ‘alt’ and ‘title’ tags I have chosen to use the entry name field, you can of course use another specific field if you want. As can be seen I have set a value for the title, the alt and of course the image itself, The end result is your image is displayed and now includes alt and title in its source.

The same can also be done for the vcard view, you simply need to remove the entry/ part of the fields code, so that would look like this;

Nice and Easy

Showing a field only if it contains data.

This is a variation of the check for specific data as I have provided above, but since this was asked for specifically here is the way to do it.

Basically what you are about to do is simply check that the field contains data, if it does then show the field (and other data linked to it) otherwise do not show that field at all. This is a basic IF statement that checks for a null value. This example uses a filed named ‘field_name’ just substitute that for your field.

In the vcard view

   
     Field Name:         
 

In the Details view

   
     Field Name:         
 

Simple hey

… more to come as I use SobiPro more and more

Oh if you want to post some code for me to see what issues you are having use the code button and then use ‘<‘ in place of ’<’ and ‘>‘ in place of ‘>’

source: http://thatnetsite.com/2011/06/sobipro-templating-how-to/

How To Set Relative Position without taking up space

just take same amount of -margin :P

How do you hide something from logged in users?

Starting in Joomla! 1.6 you can hide modules, menu items, content and other things from logged in users by using the Guest feature.

To make this work you have to go to the user manager and create a new user group, which we could call Guest (although it could be anything). Then create an viewing access level and also call that Guest (or something else if you would rather).

Then go to the user manager options and set the Guest Group to Guest (or the name you chose).

Then finally, assign those modules, menu items or content items which you want to only be visible to visitors who are not logged in to the Guest access level.

Now only users who are not logged in will be able to see those things.

Using Modal Windows With Joomla

I tend to write these guides when I look for information on a particular subject and can't find what I need, and end up having to figure it out for myself. This is very much the case with the current subject. So here is my rough guide to using the Joomla modal script in your extension or template.

In spite of some limitations (mentioned below), the Joomla modal script is a useful way to add a basic lightbox function to your site without requiring any specialist extensions.

Basic Usage

Basic usage is actually very simple. First of all you need to include the following in the php code for your extension or template:

Example 1

 JHTML::_('behavior.modal'); 

This simply ensures that the modal.js script and the modal.css stylesheet are loaded, plus the mootools javascript framework which the script requires, and initialises the modal window. You can add it to your site template very easily by opening the Joomla template manager, finding the list of site templates, then clicking on your default site template name. In Joomla 1.5 you will see a button labelled 'edit HTML'. In Joomla 1.6+ there is a more extensive list of options, you need to click on 'edit main template' from the options. In either case you need to make sure that the code is added to the php code at the top of the index.php file, not the html code.

Then to create a popup you simply give the css class 'modal' to the link <a> tag which links to the content you want to display. This is easier to demonstrate than explain. For example, if you have an image which you want to display in a modal (lightbox) window you can just use the following:-

Example 2

<a href="http://www.example.com/images/myimage.jpg"   class="modal">  Click here to see my image</a>

You can also load an existing html element from your page, using the element id, for example suppose your page contains some html such as the following:-

Example 3

<div id="loadDiv">    A div element containing some text that you want to display.  </div>

Then you can create the link

<a href="#loadDiv"   class="modal">Click here to load the text in a popup</a>

Options and Handlers

In some cases you want to supply options which give added control to how the content is presented. This is done using the 'rel' attribute of the anchor tag, the options are listed using javascript object notation, for example the following would resize the popup to 700 x 300 pixels, and make it impossible to close. I'm not sure why you would want to do that, but there might be occasions when it is useful.

Example 4

<a href="http://www.example.com/images/myimage.jpg"   class="modal"   rel="{size: {x: 700, y: 300}, closable: false}">  Click here to see my image</a>

A common use of options is to set the appropriate handler. The modal script includes a variety of handlers: image, iframe, string, ajax, clone (also known as adopt, which is used to load an existing html element). Where the link is to an image, or an element on the page, as in the examples above, the script is smart enough to automatically detect this and load the appropriate handlers. In other cases you will need to do this explicitly. For example a common use of the modal window is to load the contents of an URL into an iframe, for this you need to set the iframe handler:-

Example 5

<a href="http://www.example.com/somepage.html"   class="modal" rel="{size: {x: 700, y: 500}, handler:'iframe'}"   id="modalLink1">  Click here to see this interesting page</a>

Scripting With the Modal Window

There may be times when it is more useful to use javascript to control the modal window, for example when the content of the popup needs to be set dynamically, or load the window immediately when the page loads.

Depending on the application you may want to load the modal script and stylesheet, and initialise the popup yourself rather than using the modal behaviour. If so, the following included in the PHP code will load the relevant files in Joomla 1.5:-

Example 6

JHTML::_('behavior.mootools');  JHTML::_('script','modal.js', 'media/system/js', true);  JHTML::_('stylesheet','modal.css');

In Joomla 1.6+ you can use:-

JHTML::_('behavior.framework',true);  $uncompressed = JFactory::getConfig()->get('debug') ? '-uncompressed' : '';  JHTML::_('script','system/modal'.$uncompressed.'.js', true, true);  JHTML::_('stylesheet','media/system/css/modal.css');

For example, if you want to use a different stylesheet for the popup you can substitute your own stylesheet for the default '/media/system/css/modal/css'.

In the javascript the window is referred to as 'Squeezebox'. You will need to initialise the Squeezebox with the options you want to use, then add call to the setContent method with the handler and the content as arguments. For example the following will display a popup window containing any text is passed to it which closes itself after a time interval of 3 seconds.

Example 7

var timeoutID = null;    function example_alertBox( boxText )  {     if(timeoutID)   {      SqueezeBox.close();    }       var options = {size: {x: 300, y: 250}};   SqueezeBox.initialize(options);   SqueezeBox.setContent('string',boxText);        timeoutID = setTimeout( 'SqueezeBox.close()', 3000 );  }  

I should add that in a case like this you should be careful about where the text is coming from, if it is being supplied from user input you will want to do some filtering to prevent scripting attacks.

To open an iframe using a script you can use

   SqueezeBox.setContent('iframe',url);   

where url is the URL of the page you want to load into the iframe.

You can also use the fromElement() method to load the popup. The following example will load the iframe from example 5 above immediately when the page loads:-

Example 8

<script type="text/javascript">   window.addEvent('domready', function() {       SqueezeBox.fromElement('modalLink1');    });   </script>

The Ajax Handler

Unfortunately, unless I am missing something, the Ajax handler doesn't seem to work. (If anyone reading this has some examples that work I would be pleased to hear them). If you want the results of an Ajax request to be displayed in a popup window then you can submit the request yourself using the Mootools Request class, update the results to your page, then use the Squeezebox 'clone' handler to load the results into the modal window, using

 SqueezeBox.setContent('clone',updateID); 

where updateID is the ID of the element containing the results.

More Options

I have found that not all of the modal window options appear to work as they should, so if you find this too, you are probably not going mad. For example you would think that the boolean option 'closeBtn' could be used to set whether or not the close button is displayed, but in fact it does nothing. There are also options for a series of event handlers: onOpen, onClose, onUpdate, onResize, onMove, onShow, and onHide. Unfortunately these all seem to fire when the window is opened (in Firefox and IE9 at least), so are less useful than you might hope.

http://www.spiralscripts.co.uk/Joomla-Tips/using-modal-windows-with-joomla.html

virtuemart layout customization (checkout page)

components\com_virtuemart\themes\default\templates\basket\basket_b2b.html.php
components\com_virtuemart\themes\default\templates\basket\basket_b2c.html.php

Seassion code for landing page

<body>

<?php

//require_once(JPATH_SITE.DS.'administrator'.DS.'components'.DS.'com_hwdvideoshare'.DS.'libraries'.DS.'smarty'.DS.'Smarty.class.php');

//$smartyvs = new Smarty;



$session = &JFactory::getSession();

$letin = $session->get('letin');

if ($_POST['hid']!=1 && !isset($letin)) {

?>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/adult/css/style1.css" type="text/css" />

<div id="land_wrapper">

<div id="land_content">

code for land

>>>>>

</div>

<?php

}

else

{

$session =&JFactory::getSession();

$session->set('letin', 1);

?>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/adult/css/style.css" type="text/css" />

<div id="wrapper">

<div id="header">

sub string find and replace with new one

<?php

$posn = strpos($product_price, 'Coming Soon');

if ($posn !== false){?>

<?php $str = str_replace("Coming Soon", "", $product_price, $count);

$str2 = str_replace(" ", " class='Notify_button' style='float: left; margin-left:5px;' ", $str, $count);



echo $str2;

?>