[EXTENSION] EGuiders

[left]

[/left]Would you like to focus user attention on this new feature you’ve implemented last night ? Do you need to need to introduce a brand new GUI to your users ? and what about a simple and interactive tutorial that can be easely added to your pages ? … well, one solution is to use the Guiders JQuery plugin, now available in Yii as the EGuiders extension.

To know more, check the demo page ! and if it can be useful to you, then download it from official Yii extension page.

ciao

B)

This is a really interesting idea. I’m still trying to decide if I like them or not but I could see using them in certain applications. I might be more inclined to trigger the effect with a button rather than autostarting them on page load. I could see them working for ‘take the tour’, ‘learn more’, ‘show me how’ type scenarios. Nice work!

hi markscarbrough,

I agree with you. I see Guiders like a ‘gadget’, something that I could add to my webapp at the end … a nice-to-have. For instance I saw that Google sometimes uses a guide (a single one) to show some new features from GMail or Agenda. In the end, if it is well used it can really bring something more to the user experience, but again you can live without it.

By the way, you can easely start the guided tour by clicking on a button, or a link. Assuming you want to display the ‘intro’ guide, just add this to your page :




<button onclick="guiders.show('intro');return false;">Start The tour</button>



Could it be more simple ? ;)

ciao

B)

Hi Raoul,

niiice extension, im pretty new to yii and am basically a UI guy.

im trying to set this up on a uniprogy/couponic application and am having a small issue with getting the sample working.

what ive done:

extracted to protected/extensions

in the base uniprogy/couponic install you can set up static pages in

protected/views/system/pages

all works well until i start calling "_guide_intro"

from page

protected/views/system/pages/new.php

error: [color="#FF0000"]DefaultController cannot find the requested view "_guide_intro".[/color]

any ideas would be great…im a css guy LOL’s

thanks again for your time to release this extension

Hi Nixon,

thanks for your interest in this extension.

From what I understand, it seems that the file _guide_intro.php (that contains the content of your firts guider) is not located where it should be.

Usually if you create a EGuider widget in a view located folderA, if you use renderPartial to create the content of your guider, then the partial view should be located in folderA.

Is it clear ? …as a CSS guy, do you have any idea what I’m talking about ? :D … ok if not, then could you send me the code for DefaultController, the view that creates the Guider, and the folder name where it is located (protected/controllers/folderA …).

ciao

B)

oh,…thanks for replying

im totally lost now, ive done everything i can.

in my

protected/views/system/pages/

i have all the guide***.php files

what i have done is just copy over the sample files into that directory

placed what i had to in to extensions folder

uniprogy/couponic comes with 20+ defaultcontroller.php for various sections

the

modules/base/controllers/DefaultController.php is basically empty


<?php

class DefaultController extends UController

{

}

this works and displays a modal with css etc


<?php

$this->widget('ext.eguiders.EGuider', array(

		'id'=> 'first',

		'next' => 'second',

		'title'=> 'Daily Deals L.A Website Tour',

		'buttons' => array(array('name'=>'Next')),

		'description' => 'some text here, add more later',

		'overlay'=> true,

		'xButton'=>true,

		'show'=> true

	)

 );

?>

<?php $this->endWidget('ext.eguiders.EGuider'); ?>

this doesnt:


<?php

$this->widget('ext.eguiders.EGuider', array(

        'id'            => 'intro',

        'next'          => 'first',

        'title'         => 'Welcome',

        'buttons'       => array(array('name'=>'Next')),

        'description' 	=> $this->renderPartial('_guide_intro',null,true),

        'overlay'       => true,

        'xButton'       => true,

        'show'          => true

    )

);

?>

<?php $this->endWidget('ext.eguiders.EGuider'); ?>

even

protected/views/system/pages/guiders.php

throws the same error

im screwed i guess

thanks anyway

ok don’t worry, we’ll find someting…

Let’s try something simple. If I understood well, all your Guiders views are located in protected/views/system/pages/. Right ? So could you please replace …


 'description'   => $this->renderPartial('_guide_intro',null,true),

…with…


 'description'   => $this->renderPartial('//system/pages/_guide_intro',null,true),

Let me know if it’s better …

B)

Hi Raoul,

Thanks for your time again.

Yes you are correct

the url when called:

website.com/page/guiders

Just tried this approach with the same error


 'description'   => $this->renderPartial('//system/pages/_guide_intro',null,true),

i made sure that all the files _guider etc are in the same folder and tried different variations on the description/location

im not getting error when calling the extension (im very happy about that)

just racking down the correct location is turning out to be the pain (14hrs infront of a screen today)

Once again, thanks so much just for your time

hum… this is very strange. I’ve tested that on a sample app and if your guide***.php files are located in protected/views/system/pages then a call to renderPartial(’//system/pages/guide***,null,true) should work fine.

Can you show me the error displayed when you try this ?

8)

ps: sure you don’t have any typos errors ? … well after 14 hours in front of the screen, that would not be surprising ;)

hey Raoul,

have it working 100% now

had to place it in this location:

\framework\yii\widgets\eguiders\EGuider.php

code was changed to reflect new path

<?php

app()->controller->beginWidget(‘zii.widgets.eguiders.EGuider’, array(

‘id’=> ‘first’,

‘next’ => ‘second’,

‘title’=> ‘test text’,

‘buttons’ => array(array(‘name’=>‘Next’)),

‘description’ => app()->controller->renderPartial(’/system/pages/tour’,null,true),

‘overlay’=> true,

‘xButton’=>true,

‘show’=> true

));

app()->controller->endWidget(‘zii.widgets.eguiders.EGuider’);

?>

thanks once again for all your time to help an idiot LOL’s

\have a great weekend

cool !! Glad to hear it’s working now ! … no ‘idiot’ here, just someone how needs to rest ;)

good week-end to you too

8)

Thanks for sharing, bookmarked until I need it:)

Hi

Thanks for this great extension

I have a use case where I’d like to have only one guider declared and

modify "description" and "attachTo" attribbutes from a javascript call , is this possible ?

auto Answer :

this works

$("#guidersId .guider_title").html('title : '+contents);

$("#guidersId .guider_description").html('desc : '+contents);

Hi,

[center][size="5"]The [color="#0000FF"]EGuider [/color]extension has been updated today !! [/size]

[/center]

It now uses the latest version (1.2.8 ) of the great Guider JQuery plugin. This version provides some new features :

  • autoFocus : auto scroll to the target element
  • closeOnEscape : close the guide with the esc key
  • isHashable : the guider will be shown auto-shown when a page is loaded with a url hash parameter #guider=guider_name
  • onClose, onHide : 2 new event handlers

The demo page has also been updated :

  • ‘highlight’ option usage example : when overlay is displayed, the highlighted element is visible (on top)
  • guide your user among pages

Resources :

  • download from the Yii Extension page
  • visit the github repository
  • don’t miss the demo page

…and again, credit is to the JQuery Guider Plugin Author.

ciao

B)