using rokbox for new/edit address

Trying to figure out how to use the rokbox plugin to display new addresses instead of the standard Joomla shadowbox.

According to the rokbox documentation: www.rockettheme.com/extensions-joomla/rokbox I should be able to insert

into the link that calls the popup.

Looking at the templates I see that the popup is called several times in the address_view file of the checkout view - links such as;

<a class="modal hikashop_checkout_<?php echo $this->type;?>_address_edit" rel="{handler: 'iframe', size: {x: 450, y: 480}}" href="<?php echo hikashop::completeLink('address&task=edit&redirect=checkout&address_id='.$address->address_id.'&step='.$this->step,true);?>" onclick="SqueezeBox.fromElement(this,{parse: 'rel'});return false;"><img src="<?php echo HIKASHOP_IMAGES; ?>edit.png" border="0" /></a>

If I just change the "rel" to

The edit address page now opens in both the standard shadowbox AND the rokbox.

I assumed this was something to do with the "onclick" part of the link. I completely removed the onclick section and still have the same (very slow) behaviour of opening both the shadowbox AND the rokbox -perhaps there is something in a different file? Currently my links are as such;

<a class="modal hikashop_checkout_<?php echo $this->type;?>_address_edit" rel="rokbox" href="<?php echo hikashop::completeLink('address&task=edit&redirect=checkout&address_id='.$address->address_id.'&step='.$this->step,true);?>"><img src="<?php echo HIKASHOP_IMAGES; ?>edit.png" border="0" /></a>

Can't understand what else I need to change. Also have no idea I would change the "New" button to also open in a rokbox

Thanks for your help.
Simon

Joomla modal system can be lodaded by two different ways:
1. set the class model in your link (the page is parsed in javascript to add an event on those links)
2. set the onlcick code that we have.

We had to put both in order to be able to work on all the different versions of mootools as well as avoid some problems on some templates (with javascript errors for example)

You removed the onclick event but you still have the modal class in the link. Once you remove it, you will only have the rokbox popup.


The new button will have a different HTML depending on the button style option in the configuration and by default it's a submit button, so it triggers the popup on the link above it self to open the popup. I didn't see any JS code to create the popup on a specific element in the rokbox documentation, so you might want to ask them. Otherwise, you can just remove it and just keep the code you generate the href link and use an image button like we do for the edit and delete buttons. That will be simpler. So it would be:

<a class="hikashop_checkout_<?php echo $this->type;?>_address_new" rel="rokbox" href="<?php echo hikashop::completeLink('address&redirect=checkout&task=add&step='.$this->step,true);?>"><img src="<?php echo HIKASHOP_IMAGES; ?>new.png" border="0" /></a>

okay, thanks.

I removed the modal class from the edit links and now they open in only the rokbox - which is great.

I have left a message at the rockettheme forum regarding the JS. If not I may have to go with the image option you detailed.

Many thanks
Simon

While I am here could you please explain how I can change the styling of the address form inside the popup? It looks rather ugly as it is. You mention in a different post that it is controlled by "your templates component.php" file - looked in here and not really sure what I am looking for - please advise.

Simon

Normally, in your template index.php file a lot of stuff should be loaded like css and javascript files in order to make the website pretty.
If they are not also in the component.php file, then you won't get the same look.
You might wanna ask your template developer about that.
The component.php file is used to display only the main part of the website without all the modules around and is not really used a lot. That's why template developers don't spend a lot of time on it and sometimes just provide the basic html without any styling in it.

Right - I understand now.

Will take a look at that tomorrow.

Regards
Simon

Hello.

Looking for a way to use RokBox with products images.

Your solution is for address.

But for products images, where is the php file to modify?

Can't find this part of code (product page):

<div id="hikashop_product_image_main">
<div id="hikashop_main_image_div">
<div id="hikashop_main_image_thumb_div" class="hikashop_product_main_image_thumb">
<a id="hikashop_main_image_link" onclick="SqueezeBox.fromElement(this,{parse: 'rel'});return false;" href="*url*" target="_blank" rel="{handler: 'iframe', size: {x: 189, y: 600}}">
<img id="hikashop_main_image" width="33" height="120" style="margin-top: 10px; margin-bottom: 10px; display: inline-block; vertical-align: middle;" alt="Champagne Baudry Brut Tradition" src="*url*">

Many thanks for your help

Hello.

Looking for a way to use RokBox with products images.

Your solution is for address.

But for products images, where is the php file to modify?

Can't find this part of code (product page):

<div id="hikashop_product_image_main">
<div id="hikashop_main_image_div">
<div id="hikashop_main_image_thumb_div" class="hikashop_product_main_image_thumb">
<a id="hikashop_main_image_link" onclick="SqueezeBox.fromElement(this,{parse: 'rel'});return false;" href="*url*" target="_blank" rel="{handler: 'iframe', size: {x: 189, y: 600}}">
<img id="hikashop_main_image" width="33" height="120" style="margin-top: 10px; margin-bottom: 10px; display: inline-block; vertical-align: middle;" alt="Champagne Baudry Brut Tradition" src="*url*">

Many thanks for your help

The code can be found in the file administrator/components/com_hikashop/helpers/image.php in the function display.

My solution with Hikashop 1.4.9 + Joomla! 1.5 + RokBox 2.6

File: administrator/components/com_hikashop/helpers/image.php
Lines 135-142

It seems to work fine, but any advice would be welcome.

Important: this mod needs to be check after each upgrade (using a text tool to compare and merge files)

As you can see, there is an override you can use.
You need to create the file: templates/YOUR_TEMPLATE/html/hikashop_image.php and put in it:

<?php
function hikashop_image_link_render(&$obj,$path,$addpopup,$optionslink,$html){
return '<a rel="rokbox(album)" title="'.$alt.'" target="_blank" href="'.$obj->uploadFolder_url.$path.'" onclick="SqueezeBox.fromElement(this,{parse: \'rel\'});return false; " '.$optionslink.'>'.$html.'</a>';
}

function hikashop_small_image_link_render(&$obj,$path,$addpopup,$optionslink,$html){
return '<a class="hikashop_image_small_link" rel="rokbox(album)" title="'.$alt.'" href="'.$obj->uploadFolder_url.$path.'" onclick="SqueezeBox.fromElement(this,{parse: \'rel\'});return false;
" target="_blank" onmouseover="return hikashopChangeImage(\''.$addpopup.'\',\''.$obj->uploadFolder_url_thumb.'\',\''.$obj->thumbnail_x.'\',\''.$obj->thumbnail_y.'\',this);" '.$optionslink.'>'.$html.'</a>';
}


That way, you won't loose your modifications when updating.

So much better!

Thank You!

Hi, please how can i apply RokBox for add to cart popup ?

Modify this ? how ?
File: administrator/components/com_hikashop/helpers/cart.php

Thank you very much

For the notice popup, the link is triggered automatically in js. You would have to do the same with the rokbox js library. Since I don't know it I can't tell you the code to use.
If you know how to do that, you can put your code in the override functions hikashop_popup_render and hikashop_popup_js_render in a file templates/YOUR_TEMPLATE/html/hikashop_button.php like for the other template overrides.

Looking at component.php, it looks like my "edit address pop-up" is probably being controlled by my body bg, which is black.

I need to either change edit address popup's bg to white, or change the type on the header and form to white. Currently, the words are not visible. I do not want to change the form type to white across the whole site, only in the pop-up.

Any ideas?

You could just add directly a css header with such code in the component.php file of your template :
boy{ color:white !important;}