Jump to content
Dnj1964

Product Options/Attributes

Recommended Posts

When adding product options the standard layout is to display options to the right of the product image.

Wanting to display the options below the image

tried modifying the code in \includes\modules\content\product_info\cm_pi_gallery.php

My knowledge of php is throw html at it until it works or breaks. Then start again.

This is on CE BS4

Php 7.1.25

 

The add-on is:
JcM Product info description_tabs CE
By JcMagpie

Add-on works perfectly, it is a width issue with the attributes beside the image instead of below it
 

image.thumb.png.0d7a38ba51f9d7919d98f67e3b914ea3.png

 

Edited by Dnj1964

Share this post


Link to post
Share on other sites

Place the options at a higher number than the image and make them full width, that will lace it below the image. Then if image is not full width use a little css to place options below by moving it left or right.

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

The only problem you have is that if you do not set width to 12 it will pull left! So it must be 12 wide or share the width with another part? or as I said set to width required and fudge using css ( unless I'm missing something which some one may point out)


 

Share this post


Link to post
Share on other sites

Quick and dirty css fix,

.col-sm-4.cm-pi-options-attributes {
    margin-left: 65% !important;
}

will give this, I think that is what you were after.

image.png.95cb999ebe6bf26e3f2cc86c69307b48.png


 

Share this post


Link to post
Share on other sites
4 hours ago, JcMagpie said:

Quick and dirty css fix,


.col-sm-4.cm-pi-options-attributes {
    margin-left: 65% !important;
}

will give this, I think that is what you were after.

 

Try using class="ml-auto" instead of doing this.

Share this post


Link to post
Share on other sites

Added another product without any options/attributes and the image totally refuses to move.

Set image to 12 which should relocate it directly below the Add To Cart.

And left column is also being ignored and is placed below the tabs

 

Back to the drawing board.

image.png.dbd5c47a1eb6c68133d782a148287481.png

Edited by Dnj1964

Share this post


Link to post
Share on other sites

One issue found

Not really related

.rmm.style ul ul li a {
padding: 2px 50px; color:#B62285;; 
}

To lazy to type copy and pasted a bit to much

Share this post


Link to post
Share on other sites
41 minutes ago, JcMagpie said:

Yes but that would require the OP editing a stock file!  css can just be dumped in user.css or have I missed somthing?

The notion of not wanting to edit "stock" files is ridiculous. The CE is not a product that allows for this. There's a difference between a core file and a template file. Users should be encouraged to change template files instead of dumping everything into a user.css, which loads on every page. Totally inefficient, besides the fact that you're now adding redundant layers of CSS, duplicating the bootstrap CSS.

Share this post


Link to post
Share on other sites

JcMagpie

Solved my issue, was a width issue.

Amazing, after I butcher his code to suit my own purposes he fixes for me!

Absolutely unbelievable.

A huge thank you!

All the help is greatly appreciated.

Share this post


Link to post
Share on other sites

Ok quite possibly I am stupid, but I don't see where to Warranty Information or Manuals

Share this post


Link to post
Share on other sites

warrenty text uses the keyword box in products edit page.

Manuals are independent of the code, you simply folow instructions in readme file and make folder and put the pdf files with corect name into it.

public_html/manuals

if  your product has model number "Galaxy S9" then you make the manuals named as

Galaxy S9_PDF1.pdf

Galaxy S9_PDF2.pdf

and simply place them in the folder and they will be automaticly picked up and displayed. If a product has no manuals then it simply displays no manual available for this product.

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

Wanting to eliminate a lot of dead real estate and move the product attributes directly under image. (Shortening Product Description is the obvious answer. Not an option)

Description 8/60 & Gallery 4/60

Setting the Attributes to 4/65 would think would move Attributes unless description set at 60 pushes the 65 setting to the bottom regardless.

Thanks in advance. I know someone has the answers and solutions that elude me!

image.thumb.png.1bb151b8dc130d3e47458b9ea3a53e7d.png

 

Share this post


Link to post
Share on other sites

Yes it can but be carfull as messing with layout can mess up mobile view. So set tabs, image and atts all to same number, tabs 8 wide image 4 wide and atts 4 wide.

Now the fiddle, pull atts left however you wish to do it, css or class change, then you need to add some css that will only affect large screens only.

@media screen and (min-width: 800px) {
    /*this css will only be used when the screen size is min 800px*/
.col-sm-4.cm-pi-options-attributes {
    margin-top: -45% !important;
}
}

Any thing else will mess up mobile views. The example is using @Hotclutch class change class="ml-auto" with the above css change.

image.thumb.png.af419709f266740680115bac25ac2f52.png

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

yeah, the short answer to this question is that it can't be done, without creating a mess with CSS.

The better solution would be to redefine the layout for modules in the product_info.php.

Share this post


Link to post
Share on other sites

Try just rearanging the blocks pull the atts above the tabs and image and make it 12 wide the rest stays the same. The layout stays the same for products with no attr's

and those that have them still look ok on both PC and mobile.

 

image.thumb.png.9899028e970d46556407c9d9555f748c.png


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×