How To Move Product Options To Separate Block?

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?


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[/size][/color]

Thank you, Valentin!

Can you clarify where I have to use the code?


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


[color=#808080][size=2]part of[/size][/color]