Jump to content

Adjust distance between Add button and product image


CoderJim

Recommended Posts

I have the same issue as another member but I am using (CC 6.2.2 Foundation instead) but the advice provided was not applicable to my situation so I am starting a new topic, I hope that's the correct forum procedure rather than 'replying'. As always I search before adding.

I need to move the price and the 'Add To Basket' button closer to the product main image, it is now at the far right at the top (even with product image top) of the wrapper and using the inspector I do not see that control. I do see the whole space is 12 columns wide and if that is changed it does reduce the wrapper space and moves the button/price left but also distorts the product image in the process.

Or if possible, I would like to move the price and Add button to below the single product image on the left side.

Thank you for any help you can provide.

Link to comment
Share on other sites

Try:

element.product.vertical_gallery.php

From:

   <div class="small-5 medium-7 columns text-center nopad">
      <a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="img-preview"></a>
      <p class="show-for-small-only">{if $image@total==1}{$LANG.catalogue.tap_enlarge}{else}{$LANG.catalogue.tap_gallery}{/if}</p>
   </div>
   <div class="small-7 medium-5 columns thinpad-left">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}
   </div>


To:

   <div class="small-5 medium-7 columns text-center nopad">
      <a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="img-preview"></a>
      <p class="show-for-small-only">{if $image@total==1}{$LANG.catalogue.tap_enlarge}{else}{$LANG.catalogue.tap_gallery}{/if}</p>
      {include file='templates/element.product.call_to_action.php'}
   </div>
   <div class="small-7 medium-5 columns thinpad-left">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
   </div>

But there is still the <div medium-5> block that holds options choosers and product review indicator.

Link to comment
Share on other sites

Correct, however on this site there are no options or reviews so I left that blank in the design. There is only one product per page, it is a digital file sale. For the forum member/visitor that has only one main image only and no thumbs, this pushes the image flush left and so far I have seen no negative repercussions.

Thanks again for your help

Link to comment
Share on other sites

On this button placement issue I'm having, and though using the element.product.call_to_action.php does allow the change in size of the Add To Basket button however what I need to do is to move the whole Price/Quantity Field/Add To Basket group left and I do not see how to do that within this element.

FYI change size of button... (element.product.call_to_action.php)

<div class="small-12 medium-10 columns"> <- change this to alter size of Add To Basket button in the CC 6.2.2 Foundation skin
      <link itemprop="availability" href="http://schema.org/InStock" />
<button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button postfix">{$LANG.catalogue.add_to_basket}</button>

Thanks

Link to comment
Share on other sites

Correct, if we are speaking of the space under the product image where it has both 'Product Information' and 'Specification', there are no options or reviews nor plans for any. I have included a photo of this. The yellow is the cover of the book being sold, the copy is blurred for this demonstration.

under.product copy.jpg

As far as I'm concerned, the problem with the cover image is solved and I hope we provided the members enough information if they require the main product image placement to be flush left in CC 6.2.2 Foundation.

Now on to my next problem, as I noted before I wish to have the Price/Quantity field/Add... button closer to the product image, I intend that the space between them be blank and prefer them to be closer. I have included a photo indicating the specific area in question.

Thanks for your help with my most recent posts.

button.product.space.jpg

I should have noted this site is using CC 6.2.2 and the default Foundation skin.

Link to comment
Share on other sites

The Options and Reviews summary are located just above the price (on the original layout - see: https://demo.cubecart.com/cc6/tv-home-cinema/3d-tvs/sony-kdl-32hx753-3d-tv.html).

You will also note the image will sit very close to the Add button provided the source image is large enough (the image on this page is displayed incorrectly - see https://demo.cubecart.com/cc6/3d-glasses-tdg-br200/w.html).

So, let's start by verifying the dimensions of the source image of this book cover.

Link to comment
Share on other sites

Okay, understood, the space above the price, I should have looked at my other sites.. duh, but blank for this one.

For the sake of discussion let me set the viewing parameters. Firefox at normal default display/view setting. I am moving this site to another server with more storage but I still have the old site open and can see the earlier Foundation display and the Price/Filed/Button is in fact closer and the image on that site is approx. 345.

Okay, in this new case the image, as best I can quantify, is around 325 pixels wide on the screen, the .jpg is actually 545px wide. If the CC would display the product image at the actual size, I think the problem would be solved or at least improved... I suppose the question is, why is CC reducing this image and where is that control?

Thanks

Link to comment
Share on other sites

Why CubeCart is using a reduced image is unclear. In my opinion, just send the one large size and let the browser resize it to fit the area it is to be shown in. (Sometimes this does not work well with some types of images.)

Generally, I think rendering and delivering various sizes of an image is an older idea to accommodate skins that aren't responsive. But anyway...

The image shown on the View Product page is the rendered 500 pixel size*. However, the container for this image is <div medium-6> and is likely, at most, 375 pixels wide by 225 pixels high.

* The rendered image maintains its dimension ratio, and the longest side, width or height, is that size. So, a source image 350 wide by 800 high will be rendered for the 500 variant at 218 wide by 500 high. Then the browser scales it to 98 wide by 225 high. A 98 pixel wide image leaves a lot of the 375 pixel width of the container empty.

We need to discern what is limiting the height of the container to 225 pixels and increase it, so that a 'letter' or 'A4' dimension image will fill more width.

Link to comment
Share on other sites

I agree, though in this rendering the image height is displaying at approx. 447 high and 325 wide. The images for this site are actually 545x586 and that is what was uploaded, no reduction was made. I understand the browser resizing due to the code, used that for years to fit things and if I could get to right side of the Price/Field/Add button I would pop in a dot.clear.gif and push the group over. I am satisfied with the image size as it is but if it could be bigger and result in the button being visually closer I'd be a happy camper.

So 447 is pretty close to 500 you noted and frankly I lack the ability to measure the image precisely. I do know however exactly what size the image was created and it is 586 high, rendering that height parameter to 500 would reduce the width accordingly but not to the 325 we see now. Wouldn't you agree?

Since you noted the image size could solve this I have looked and used my inspector tool to change things around and changed code with no luck. So where so I start looking for that control for the A4 dimension?

Thanks so much CC 6.2.2 Foundation

Link to comment
Share on other sites

Please note the properties in the skin's config.xml file. There, you will find various named sizes and the max dimension specified (longest side).

In the template element.product.vertical_gallery.php, we see the image src attribute is {$PRODUCT.medium}. The config.xml details for the medium image has 500 pixels (on the longest side).

Also, the browser should give an indication of the images displayed. In Firefox, for example, right-click on the image and select View Image Info. A popup will have the page details. The Media tab will list the images on the page, and the selected image (the 500.jpg) will detail the actual and displayed (scaled) dimensions.

In the skin's javascript file 2.cubecart.js, the first function makes some calculations and sets the height of the image to be 70% of the displayable width of the container(?).

Link to comment
Share on other sites

CC 6.2.2 Foundation

Thanks for the tip, the image is scaled down to 447 high and 417 wide though it notes the image is actually 466*500 and the config.xml has 500 yet the container is reducing it. The other site (old) has the image at 408*437 and is the same image.

Thanks for all your help on this resizing issue but I think we may have hit the wall in the capabilities of this software.

How about this, we go back to moving the group left. I have attached a photo from the old site and you can see that they are closer, why I have no idea and I don't recall making that happen.

***

Success, sort of

Moving the group Price/Quantity/Add To Basket to the left closer to the gallery photo on the product page, I did this.

Okay, I think I did it, sort of, I just need to change the size of the Add To Basket bit because now it's huge and most likely responsible for this change. So it continues...

I changed in the element.product.vertical.php at the bottom.

 <div class="small-7 medium-7 columns">
      {include file='templates/element.product.options.php'}
      {include file='templates/element.product.review_score.php'}
      {include file='templates/element.product.call_to_action.php'}...
   </div>


From medium-5 to medium-7 and it looks like the image attached, the same as the old site.

Thanks for all you help, there may be more questions...

add.button.photo.jpg

Link to comment
Share on other sites

  • 1 month later...

New problem perhaps connected with the issue above. Running CC 6.2.4 Foundation. Using element.product.horizontal_gallery.php and its showing the default thumbnail in the gallery/product display, there is only one product (digital), no need for a 'tn' and I am at a loss what to try next.

Thanks

Link to comment
Share on other sites

Sorry, I should have been clearer, I meant thumbnail and that is what is showing by default, I need the full size to show by default, there is no need for a thumbnail since there is only one product and it has one image.

Thanks

Jim

CC 6.2.4 Foundation

Link to comment
Share on other sites

If there is only one image that could be shown in the small (horizontal) gallery - that of the one and only main image - then none of that will be displayed.

The main image uses a 'medium' variant of the source image: 500 pixels on its longest side (according to the config.xml file).

You can also use 'source' in the HTML:

From:

<div id="open-clearing-wrapper"><a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="img-preview"></a></div>

To:

<div id="open-clearing-wrapper"><a href="#" class="open-clearing" data-thumb-index="0"><img src="{$PRODUCT.source}" alt="{$PRODUCT.name}" id="img-preview"></a></div>

The browser will scale it down to fit the available real estate.

Link to comment
Share on other sites

Thanks, I did this fix to the element.product.horizontal_gallery.php and it did not fix the issue I'm having, (as always, I clear the cache). I have attached two redacted grabs, the first is the default that shows on opening, its a thumbnail, then if a browser reload is performed (not sure why this happens) the full size image is displayed as in the second grab. I need the large one to open when the page is opened for the first time.

Thanks

Jim CC 6.2.4 Foundation

thumb.jpg

full.size.jpg

Link to comment
Share on other sites

For my dev-install, I was looking at a product page and the image was normal. I then requested the product's category page (via the breadcrumb). Then I pressed the browser's back button to re-show the product page. Then I clicked the browser's reload button (not the same reload that fetches fresh copies of the page's resources). The screen real estate given to the image has shrunk from 225 pixels max-height to 75.6 pixels max-height.

The max-height values are added to the image and the image's <div> block via javascript when the page loads (2.cubecart.js).

Link to comment
Share on other sites

Okay, well this is fun. In the 2.cubecart.js I did as suggested in the Github post and changed line 4 from

if($('a.open-clearing img#img-preview').length) {

to

if($('a.open-clearing img#img-preview').load(function()) {

and from this at line 14

 }

to

});

And that seems to fix the image opening size in the product view, but that also, as happens so often, this changed the category gallery view to list version and without the icon view function. Fix one, crash another it seems. Thoughts?

Thanks

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...