How To Move Product Options To Separate Block?

Store Builder Questions
1

I have CS-CART 4.



Here is what I (and most of us) have now on the product page:





Here is what I am trying to achieve:



Basically I’m trying to move product options to a separate side block.



Here is what I did with no success unfortunately:



Attempt #1. I have tried to shift options to the right using negative margins. And here is the result:



As you can see there is some success, but… other side blocks obviously do not want to move down as they have different parent DIVs. I did try to play with CSS to push them down with no luck.



Attempt #2. I made a copy of the default_template.tpl thinking I can remove product options from the original file and remove everything but product options from the copy (didn’t modify the files yet). Then I have created HTML with Smarty support block with the following content:

<br />
{include file="blocks/product_templates/my-options.tpl" product=$product}<br />

```<br />
and placed it in the right column. Unfortunately the created block does not pull up content from the database. May be I have to link the file some other way?<br />
<br />
Any suggestions?
2

Hi @AXeOMA,

You are on the right track, i see the same solution and this because options must remain in the product , but i see it done with javascript because options are dynamic created can be 2,3,6 or none and for this reason you need to generate margin top for the Side Block 1







Please try:

<br />
(function(_, $) {<br />
$(document).ready(function() {<br />
  S1 = ''; //px<br />
  S2 = ''; //px<br />
  S3 = ''; //px<br />
  Options = ''; //jQuery Selector ex: $('#Options_Block');<br />
  SideBlock1 = ''; //jQuery Selector ex: $('#Side_Block_1');<br />
  Options.css('margin-left','-'+(Options.outerWidth()+S1+S2)+'px');<br />
  SideBlock1.css('margin-top', (Options.outerHeight()+S3)+'px');<br />
});<br />
}(Tygh, Tygh.$));<br />

```<br />
<br />
I hope that helps,<br />
<br />
---<br />
Valentin<br />
[color=#808080][size=2]part of hungryweb.net[/size][/color]
3

Thank you, Valentin!



Can you clarify where I have to use the code?



Thanks.

4

You need to add a js script using my_changes add-on and paste the code there

If you cannot manage to do it please contact me on [url=“CS-Cart Free Add-ons, Modules and Custom Development | Hungryweb”]CS-Cart Free Add-ons, Modules and Custom Development | Hungryweb and i will help you with this for free



—

Valentin

[color=#808080][size=2]part of hungryweb.net[/size][/color]