placement of button info around image

[bcot]

Hi I have just installed the plugin to a development site using joomla1.6 and everything has gone smoothly, following the instructions provided.
Thanks for that, its great when something does as advertised.

I have two problems, which are:

1. I have reduced the product image by 50% (now I am starting to lose information in the image) but still the button text is too close to it. I assume you used a specific size image when designing the plugin so that the text was a margin away from the image. If so what were the dimensions, or where can I specify a border around the image so that the button and text aren't into it.

In normal web pages this wouldn't be an issue for me but I am new to both Joomla1_6 and the plug in.

2. I have put two buttons on one page as a choice for the purchaser to pay for a downloaded item or boxed version. It works .. but I wonder if this is the best way to do this and I have the issue of how to place the buttons, plus button info, where I want in the presented article. This is because the image is part of the code.

Here is a link to the one product so far http://www.viassist.co.uk/joomla1_6/index.php/shopnew/software/19-braille-maker-professional which shows the problem.

I'm hoping there is a simple resolve I just can't see it yet..

I am using Firefox and Chrome to develop and no issue with the button but when I tested the link above in Explorer 9 there is no button or cart checkout showing.

[Michael]

Hi,

You can effect the image and other layout elements by going to Administrator>>Extensions>>Plugin Manager>>System - Nice Google Checkout. In the parameters in the right column of the page you will find a parameter labeled Widget CSS. Widget CSS contains the image CSS definition (.product-image) and CSS definitions for the other things like the cart.

As for the IE9 issue, this was brought to our attention a little while ago. There is a forum post here http://trinitronic.com/supportforum/viewtopic.php?f=3&t=339#p1556 that discusses a solution. In order for the solution to work correctly, I believe you need to add a meta-tag to your site's template file.

~ All the best

[bcot]

Hi Michael thanks for your quick reply I changed the image border to 10px and colored the border white and that gave me what I was after
After change
.product-imagecell { vertical-align:top; }
.product-image { border:solid 10px #fff; vertical-align:top; }
.product-title,
.product-price,
.product-shipping { font-weight:bold; }
.data-cell { padding:0; border:solid 10px #fff; vertical-align:top; }

I thought I would include it in case anyone else is trying to do the same thing

could you be kind enough to comment on the second part of my query which was

"2. I have put two buttons on one page as a choice for the purchaser to pay for a downloaded item or boxed version. It works .. but I wonder if this is the best way to do this and I have the issue of how to place the buttons, plus button info, where I want in the presented article."

In regard to my IE9 comment I have followed the link thanks and read the Microsoft article but I have no idea where to put the info in my joomla templates - not your problem at least I've got something to work on. If anyone else has accomplished this I'd be interested to know how.

Cheers

[Michael]

Hi,

In respect to your second question, I would probably use one tag for both items.

Example
{nicecheckout:395.00|Braille Maker Professional|http://www.viassist.co.uk/joomla1_6/images/images/braillemaker/BMPMain50.jpg|0.00|||dropprice;Version;Digital:395.00;Boxed:405.00}

In the above example, I have excluded shipping altogether and have added the extra $10 (err.... pounds sterling in your case) to the boxed version option in the drop down menu. I suppose this will be a bit of a hassle with tax and all that, but, it sure is a lot cleaner of a layout.

Also, I haven't messed around with the meta tag fix for the IE9 issue yet, but if you FTP into your site and download the sites template file, you should be able to add the meta-tag to the header of the HTML document. Of course you will need to upload the altered version back to your site. Just make sure you have a back up copy of your files before permanently overwriting any files.

~ All the best

[bcot]

Hi Michael
Many thanks for your speedy input, I'll try out the suggestions and if I can find the right file in joomla1.6 (and it works) I'll post it up.

[Michael]

Hi bcot,

Try looking under this file path joomla_root_directory/templates/name_of_your_theme/index.php. That is probably where the main theme file is located. Obviously, you will need to replace "joomla_root_directory" and "name_of_your_theme" with your specific information in the file path.

You will see the head portion of the html document it will look like this:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
   <head>
      <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
      <jdoc:include type="head" />

      <!-- The following five lines load the Blueprint CSS Framework (http://blueprintcss.org). If you don't want to use this framework, delete these lines. -->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/screen.css" type="text/css" media="screen, projection" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/print.css" type="text/css" media="print" />
      <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
       <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/joomla-nav/screen.css" type="text/css" media="screen" />
       

      <!-- The following line loads the template CSS file located in the template folder. -->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

      <!-- The following four lines load the Blueprint CSS Framework and the template CSS file for right-to-left languages. If you don't want to use these, delete these lines. -->
      <?php if($this->direction == 'rtl') : ?>
         <!--link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/rtl/screen.css" type="text/css" />
         <!--link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
      <?php endif; ?>

      <!-- The following line loads the template JavaScript file located in the template folder. It's blank by default. -->
      <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
   </head>

You will want to paste in the fix and then save the script. It should look something like this:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
   <head>
      <!-- Use IE7 mode -->
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

      <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
      <jdoc:include type="head" />

      <!-- The following five lines load the Blueprint CSS Framework (http://blueprintcss.org). If you don't want to use this framework, delete these lines. -->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/screen.css" type="text/css" media="screen, projection" />
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/print.css" type="text/css" media="print" />
      <!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />
       <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/joomla-nav/screen.css" type="text/css" media="screen" />
       

      <!-- The following line loads the template CSS file located in the template folder. -->
      <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />

      <!-- The following four lines load the Blueprint CSS Framework and the template CSS file for right-to-left languages. If you don't want to use these, delete these lines. -->
      <?php if($this->direction == 'rtl') : ?>
         <!--link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/blueprint/plugins/rtl/screen.css" type="text/css" />
         <!--link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
      <?php endif; ?>

      <!-- The following line loads the template JavaScript file located in the template folder. It's blank by default. -->
      <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js"></script>
   </head>

I think that should do the trick. As I mentioned before I have not had time to test this solution. So, let me know how it goes. If you need additional support, I will be happy to assist.

~ Best regards

[bcot]

Hi Michael

Thanks for the comment on the button code as you can see I have implemented this straightaway.

In regard to the IE9 issue I found the index php file in joomla1_6/templates/rt_modulus_j16

I added the code straight after head tag as in the file you showed and saved it back but sadly it has made no difference.
I have shown the index file below so you can see if I have the right file.

Also the other affect IE9 has is that not only do the checkout and buttons disappear but the selection of the multi choice items is not changing the price of the item. I mention this in case there is something else which is also a problem apart from compatibility.

Code: Select all

<?php
/**
 * @package Gantry Template Framework - RocketTheme
 * @version 1.6.0 June 1, 2011
 * @author RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2011 RocketTheme, LLC
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 * Gantry uses the Joomla Framework (http://www.joomla.org), a GNU/GPLv2 content management system
 *
 */
// no direct access
defined( '_JEXEC' ) or die( 'Restricted index access' );

// load and inititialize gantry class
require_once('lib/gantry/gantry.php');
$gantry->init();

function isBrowserCapable(){
  global $gantry;
 
  $browser = $gantry->browser;
 
  // ie.
  if ($browser->name == 'ie' && $browser->version < 8) return false;
 
  return true;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" > 
<head>
  <!-- Use IE7 mode -->
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  <?php
    $browser = $gantry->browser;
   
    $gantry->displayHead();
    $gantry->addStyles(array('template.css','joomla.css','overlays.css'));
   
    if ($gantry->get('fixedheader') && $gantry->get('menu-type') != 'splicemenu') $gantry->addScript('rt-fixedheader.js');
   
    if ($browser->platform != 'iphone')
      $gantry->addInlineScript('window.addEvent("domready", function(){ new SmoothScroll(); });');
   
    if ($gantry->get('loadtransition') && isBrowserCapable()){
      $gantry->addScript('load-transition.js');
      $hidden = ' class="rt-hidden"';
    } else {
      $hidden = '';
    }
  ?>
 
</head>
  <body <?php echo $gantry->displayBodyTag(); ?>>
    <div id="rt-page-surround">
      <?php /** Begin Top Surround **/ if ($gantry->countModules('top') or $gantry->countModules('header')) : ?>
      <div id="rt-top-surround">
        <div id="rt-top-surround2">
          <?php /** Begin Top **/ if ($gantry->countModules('top')) : ?>
          <div id="rt-top"><div id="rt-top2"><div id="rt-top3">
            <div class="rt-container">
              <?php echo $gantry->displayModules('top','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
          </div></div></div>
          <?php /** End Top **/ endif; ?>
          <?php /** Begin Header **/ if ($gantry->countModules('header')) : ?>
          <div id="rt-header"><div id="rt-header2">
            <div class="rt-container">
              <?php echo $gantry->displayModules('header','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
          </div></div>
          <?php /** End Header **/ endif; ?>
        </div>
        <div id="top-shadow"></div>
      </div>
      <?php /** End Top Surround **/ endif; ?>
      <div id="rt-body-bg"<?php echo $hidden; ?>>
        <div class="rt-container">
          <?php /** Begin Drawer **/ if ($gantry->countModules('drawer')) : ?>
          <div id="rt-drawer">
            <div class="rt-container">
              <?php echo $gantry->displayModules('drawer','standard','standard'); ?>
              <div class="clear"></div>
            </div>
          </div>
          <?php /** End Drawer **/ endif; ?>
          <?php /** Begin Showcase **/ if ($gantry->countModules('showcase')) : ?>
          <div id="rt-showcase"><div id="rt-showcase2"><div id="rt-showcase3"><div id="rt-showcase4">
            <?php echo $gantry->displayModules('showcase','standard','showcase'); ?>
            <div class="clear"></div>
          </div></div></div></div>
          <?php /** End Showcase **/ endif; ?>
          <div id="rt-body-surround" <?php echo $gantry->displayClassesByTag('rt-body-surround'); ?>>
            <?php /** Begin Feature **/ if ($gantry->countModules('feature')) : ?>
            <div id="rt-feature">
              <?php echo $gantry->displayModules('feature','standard','standard'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Feature **/ endif; ?>
            <?php /** Begin Utility **/ if ($gantry->countModules('utility')) : ?>
            <div id="rt-utility">
              <?php echo $gantry->displayModules('utility','standard','standard'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Utility **/ endif; ?>
            <?php /** Begin Main Top **/ if ($gantry->countModules('maintop')) : ?>
            <div id="rt-maintop">
              <?php echo $gantry->displayModules('maintop','standard','standard'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Main Top **/ endif; ?>
            <?php /** Begin Breadcrumbs **/ if ($gantry->countModules('breadcrumb')) : ?>
            <div id="rt-breadcrumbs">
              <?php echo $gantry->displayModules('breadcrumb','basic','breadcrumbs'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Breadcrumbs **/ endif; ?>
            <?php /** Begin Main Body **/ ?>
              <?php echo $gantry->displayMainbody('mainbody','sidebar','standard','standard','standard','standard','standard'); ?>
            <?php /** End Main Body **/ ?>
            <?php /** Begin Main Bottom **/ if ($gantry->countModules('mainbottom')) : ?>
            <div id="rt-mainbottom">
              <?php echo $gantry->displayModules('mainbottom','standard','standard'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Main Bottom **/ endif; ?>
          </div>
        </div>
      </div>
      <?php /** Begin Footer Section **/ if ($gantry->countModules('bottom') or $gantry->countModules('footer') or $gantry->countModules('copyright') or $gantry->countModules('debug')) : ?>
      <div id="rt-footer-bg"<?php echo $hidden; ?>>
        <div class="rt-container">
          <div id="rt-footer-surround">
            <?php /** Begin Bottom **/ if ($gantry->countModules('bottom')) : ?>
            <div id="rt-bottom">
              <?php echo $gantry->displayModules('bottom','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Bottom **/ endif; ?>
            <?php /** Begin Footer **/ if ($gantry->countModules('footer')) : ?>
            <div id="rt-footer">
              <?php echo $gantry->displayModules('footer','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Footer **/ endif; ?>
            <?php /** Begin Copyright **/ if ($gantry->countModules('copyright')) : ?>
            <div id="rt-copyright">
              <?php echo $gantry->displayModules('copyright','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Copyright **/ endif; ?>
            <?php /** Begin Debug **/ if ($gantry->countModules('debug')) : ?>
            <div id="rt-debug">
              <?php echo $gantry->displayModules('debug','standard','alternate'); ?>
              <div class="clear"></div>
            </div>
            <?php /** End Debug **/ endif; ?>
          </div>
        </div>
      </div>
      <?php /** End Footer Section **/ endif; ?>
      <?php /** Begin Popups **/
      echo $gantry->displayModules('popup','popup','popup');
      echo $gantry->displayModules('login','login','popup');
      /** End Popup s**/ ?>
      <?php /** Begin Analytics **/ if ($gantry->countModules('analytics')) : ?>
      <?php echo $gantry->displayModules('analytics','basic','basic'); ?>
      <?php /** End Analytics **/ endif; ?>
    </div>
  </body>
</html>
<?php
$gantry->finalize();

?>

Once again thanks for your quick response.
I'm having a knee operation tomorrow so won't be dealing with any response for the next 24 hrs.

[bcot]

Hi Michael
Back online
I have tried every thing I can find to do with this issue but so far no luck even found someone who suggested adding

Code: Select all

Linux htaccess

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

Still no success.

The button works okay in IE7, Mozilla, Chrome and Safari 5.0.5 (on the Mac)

Look forward to someone having the fix.

[Michael]

Hi,

I am also looking into this issue. Hopefully I can come up with s suitable solution for you.

~ All the best

[Michael]

Hi,

I spent sometime today working on this issue. As it turns out, this is an issue between Internet Explorer 9 new compatibility/security features and Google Checkout's cart code. It is important to understand that the Nice Google Checkout pulls some of its code directly from Google. Specifically the code that handles add to cart buttons and the cart itself are loaded on the page in real-time from Google Checkout's website. So, this code cannot be altered (unless you happen to be on the Google Checkout Development team). Likewise, we cannot alter the Internet Explorer 9's browser code.

After playing around with some of the suggestions found through my research, I have discovered that it is NOT so important to add the suggested meta-tag to the template file.

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Or

Code: Select all

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

In fact, I found that the presents or absence of the meta-tag had little effect on the display and proper functioning of the Google Cart.

What is important is Internet Explorer 9's settings. IE9 needs its "Compatibility View" setting enabled. To do this follow the instructions provided by Microsoft here http://support.microsoft.com/kb/956197

It is important to note, that I had to right click the top of my IE9 browser and then click/checkmark "Menu Bar" in order to access the "Tool" menu option.

~ Best regards

[bcot]

Hi Michael

Thanks very much for looking at that for me it certainly works on the individual browser. I suppose I will have to carry a warning instruction to IE 9 users on the front page of the shop.

It is strange really the fundamental reason for a web browser is to view the internet with all its varied aspects and informations, yet the latest re invention in the form of IE9 only lets you access part of it without you start re setting your browser. You would think if it can do it leave it alone. Oddly their support site looked better with compatability mode turned on.

Once again thanks for your prompt attention.

Barry

[Michael]

Hi Barry,

It is odd. While all the other browser developers out there strive to reach standardization, Microsoft consistently works to stand alone. I mean, Microsoft does comply with a certain level of standardization. But they frequently choose to not comply with one or two points. For example, a few years ago, special consideration had to be taken when building a webpage, as IE did not fully support the PNG image format, whilst all the other browsers did. Now, as I understand it, Microsoft wants a more strict (secure?) browser, so, they built IE9 to enforce this desire.

In any event, I will continue to keep my eye on this issue. I would love nothing more than to be able to add a bit of code to my extension and resolve the issue. Also, Google may produce a newer version of their cart code that is more compliant to the new IE9 browser. Or, IE 10 will be more compliant. In fact, I will look into that today an see if that is a something worth hoping for.

~ All the best