Image link to page

  • Posts: 154
  • Thank you received: 10
11 years 11 months ago #80740

Hi!

Quick question, a customer wants to have the following:

On the productpage, the image file normally links to the image in larger form. So if you click it, the popup shows up with the picture but bigger.
My client wants it so, that if you click the image file a popup appears with an information window.
This window should be a .html file and it should be different with every product, so an extra line in the backend would be great to link it to.

Any way I can do this?


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
11 years 11 months ago #80803

Hi,

I think that it can be done by creating your html pages, adding a custom field in the table product with the path of the html file.
And in the view "product / show_block_img" call the html page instead of the image.

It require some PHP knowledge.

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 11 months ago #80805

I thought I might,

If I give the custom field the name 'html_productpage'
What would be the code I have to enter in the show_block_img file?

I can work my way around editing existing php a little, but not creating it.


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 26152
  • Thank you received: 4027
  • MODERATOR
11 years 11 months ago #80886

Hi,

It would require some modification in HikaShop.
HikaShop uses the Joomla modal library to display image. The link for this modal request an image display.
It is possible to call a webpage or to override his content thanks to javascript.

HikaShop have integration with other "lightboxes" like ShadowBox ( www.hikashop.com/en/support/documentatio...ox-media-player.html ).

I think you should modify the modal links in order to not displaying an image but some HTML content.
The content would be modified dynamically by some javascript in order to change the image in the content, or to create the content using the image path and an hidden div (with your html content).
It is a consequent development with several modifications.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 11 months ago #80895

Hi Jerome,

I would like something like this: www.de-meerkoet.nl In the footer there's a Hiswa logo, click it to see the popup I would like.
On that site I did it simply with Joomla code in the index.php:

<div align="right" style="width:100%; height:24px; position:relative; right:-20px; top:-55px"><a class="modal" href="http://www.hiswa.nl" rel="{handler: 'iframe', size: {x: 1000, y: 700}}"><img border="0" src="http://www.de-meerkoet.nl/templates/meerkoet_008_006/images/footer.png"></a></div>

That works great! I just need it to show the html page that I input in a custom input box.


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 82817
  • Thank you received: 13360
  • MODERATOR
11 years 11 months ago #81044

If you want to use the value of a custom field on the product page, you can use such code:
echo $this->element->html_productpage;

That will display the content of the input custom field on the page. So you can just add it inside a href attribute of a link.

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 11 months ago #82009

Hi!

Thanx, that works like a charm.

Just one problem, I'm trying to get rid of the initial link to the bigger sized picture but I'm not having the best of luck with that.

I'm using this show_block_img.php at the moment, and 'TESTING' and the entire table are a link to the HTML_PRODUCTPAGE content but the image still refers to the full size image.

<?php
/**
 * @package  HikaShop for Joomla!
 * @version  2.0.0
 * @author  hikashop.com
 * @copyright  (C) 2010-2012 HIKARI SOFTWARE. All rights reserved.
 * @license  GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?>

<?php
$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
  $variant_name = $this->variant_name;
  if(substr($variant_name, 0, 1) != '_')
    $variant_name = '_' . $variant_name;
  $variant_main = $variant_name;
  $display_mode = 'display:none;';
}
?><div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
  <div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div">
    <?php
      if(!empty ($this->element->images)){
        $image = reset($this->element->images);
      }
      $height = $this->config->get('product_image_y');
      $width = $this->config->get('product_image_x');
      if(empty($height)) $height=$this->config->get('thumbnail_y');
      if(empty($width)) $width=$this->config->get('thumbnail_x');
      $divWidth=$width;
      $divHeight=$height;
      $this->image->checkSize($divWidth,$divHeight,$image);

      if (!$this->config->get('thumbnail')) {
        if(!empty ($this->element->images)){
          echo '<img src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
        }
      } else {
        $style = '';
        if (!empty ($this->element->images) && count($this->element->images) > 1) {
          if (!empty ($height)) {
            $style = ' style="height:' . ($height +20) . 'px;"';
          }
        }
        $variant_name='';
        if(isset($this->variant_name)){
          $variant_name=$this->variant_name;
        }

        ?>

        <div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
          <div style="height:<?php echo $divHeight+20;?>px;text-align:center;clear:both;" class="hikashop_product_main_image">
            <div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_main_image_subdiv"><!-- HIER WORD DE LINK GEMAAKT NAAR DE GROTE AFBEELDING! -->
			 
			<a class="modal" href="<?php echo $this->element->html_productpage;?>" rel="{handler: 'iframe', size: {x: 1050, y: 700}}"><table width="100%" height="100%" border="3"><tr><td>TESTING
			<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image"', $width,  $height);
            ?></td></tr></table></a>
			<!-- EINDE -->
			
            </div>
          </div>
        </div>
      <?php
      }
      ?>
      </div>
      <div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
      <?php
      if (!empty ($this->element->images) && count($this->element->images) > 1) {
        foreach ($this->element->images as $image) {
          echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);
        }
      }

    ?>
    </div>
</div>

I tried modifying every aspect of this file but the image is always a link to the .jpg :(
Any clue as to what part I need to edit so it only links to the html_productpage?

Thanx a lot!


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 82817
  • Thank you received: 13360
  • MODERATOR
11 years 11 months ago #82164

Are you sure that you're editing the correct file for the correct template ?
If you don't see your changes on the frontend, it's highly probable that it's not the case.

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #82223

Hi Nicolas,

I see the changes I make, I just can't find the line to remove the original link.

I created a table around the picture so I can narrow it down, but no matter what I edit it always gives me the image popup when i click the image :(


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 82817
  • Thank you received: 13360
  • MODERATOR
11 years 10 months ago #82490

Try to change that line:
<?php echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image"', $width, $height);

to:
<?php echo $this->image->display(@$image->file_path,false,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image"', $width, $height);

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #82675

Awesome! That worked, well at least it removed the link to the image, so simple ^^

How can I get the

<a class="modal" href="<?php echo $this->element->html_productpage;?>" rel="{handler: 'iframe', size: {x: 1050, y: 700}}">
to work?

When I have the original code (true) in use, the code works, the site opens in an iframe (check the test article: www.anthemisshop.com/anthemis12/index.ph...-artikel-1-2400-gram )
Click the TEST text and see what I mean. That works! But when I change it to 'false' it just opens in a new window. The TEST text, but also the image link.

Any ideas?


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 82817
  • Thank you received: 13360
  • MODERATOR
11 years 10 months ago #82870

That's probably because need to load the modal library instead of the code of the image library doing it for you:
<?php JHTML::_('behavior.modal'); ?>

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #82900

Hi Nicolas,

YEAH! Thanx! That's exactly what I needed to add. You rule!! :)

Hikashop rules too!!


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #82902

Oeh, one quick question, How can I make sure there is nó link when the field is left empty? Or should I put a default 'no info' page in the popup?


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 26152
  • Thank you received: 4027
  • MODERATOR
11 years 10 months ago #82984

Hi,

You should add a security.

<?php if(!empty($this->element->html_productpage)) { ?>
<a class="modal" href="<?php echo $this->element->html_productpage;?>" rel="{handler: 'iframe', size: {x: 1050, y: 700}}">
<?php } ?>
And same thing for the end of the "</a>".

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: anypc

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #83103

Thanx that did the trick!

Awesome support you guys!!!


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #83230

Hmm, it works fine except for one little thing :(

www.anthemisshop.com/anthemis12/index.ph...b/Product/151-acacia

Click on the image and it works! But if you change the value of the characteristic (variant) the image popup gets disabled and it just opens in thesame window :(

Any ideas to fix this? :)


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

  • Posts: 26152
  • Thank you received: 4027
  • MODERATOR
11 years 10 months ago #83395

Hi,

First, it could be interesting to add "&tmpl=component" in order to have a better look.

After that, when you change a variant, the html content of the page would be modified and the javascript which as been attached to the previous link, would not work anymore.
The best way is to add directly the javascript in the link.

<a class="modal" href="<?php echo $this->element->html_productpage;?>" onclick="return window.hikashop.openBox(this);" rel="{handler: 'iframe', size: {x: 1050, y: 700}}">

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 154
  • Thank you received: 10
11 years 10 months ago #83595

Thanx Jerome!

Have a GREAT new Year's eve!


Proud of my website www.hetcomputerwinkeltje.nl

Currently just running catalog mode, but hope to go live soon again :)

Please Log in or Create an account to join the conversation.

Time to create page: 0.092 seconds
Powered by Kunena Forum