sass/css/_shop.scss

@@ -533,14 +533,19 @@ button {
                         .form-check {
                             min-height: 1rem;
                         }
+
+                        &.hd68-idc, &.stabilizer, &.clocker {
+                            width: 85px;
+                            left: -11px; // (card width (63) - overlay width (85)) / 2
+                        }
                     }
                 }
 
                 .overlay-smallcard {
-                    right: -38.5px; // (card width (63) - overlay width (140)) / 2
+                    left: -38.5px; // (card width (63) - overlay width (140)) / 2
                 }
                 .overlay-bigcard {
-                    right: -7px; // (card width (126) - overlay width (140)) / 2
+                    left: -7px; // (card width (126) - overlay width (140)) / 2
                 }
 
                 .hovered {

static/js/shop.jsx

@@ -705,9 +705,10 @@ class ProductCartItem extends React.PureComponent {
               ) : (options ? (<OptionsDialogPopup
                   options={options}
                   data={options_data}
+                  options_class={model.options_class}
                   key={"popover" + index}
                   id={"popover" + index}
-                  big={data.size === "big"}
+                  big={model.size === "big"}
                   target={{
                     construct: ((outvar, value) => {
                       // console.log("construct", outvar, value, options_data);

static/js/shop_components.jsx

@@ -318,7 +318,7 @@ export function FilterOptions(options, data) {
     return target
 }
 
-export function OptionsDialogPopup({options, data, target, id, big}) {
+export function OptionsDialogPopup({options, data, target, id, big, options_class}) {
     const [show, setShow] = useState(false);
     const ref = useClickAway((e) => {
             if (e.type === "mousedown") // ignore touchstart
@@ -326,7 +326,7 @@ export function OptionsDialogPopup({options, data, target, id, big}) {
         }
     );
 
-    let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard")
+    let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard " : "overlay-smallcard ") + (options_class || "");
     const handleClick = (event) => {
         setShow(!show);
     };
@@ -444,7 +444,7 @@ export function OptionsSummaryPopup({id, options, data}) {
 export function FillExtData(data, index) {
     return {
         has_previous_carrier: data.filter((value, item_index) => index > item_index && value.name === "Carrier").length > 0,
-        has_other_dio: data.filter((value, item_index) => index !== item_index && value.name.endsWith("-TTL")).length > 0,
+        has_other_dio: data.filter((value, item_index) => index !== item_index && value.name &&value.name.endsWith("-TTL")).length > 0,
         has_dds: data.filter(((value, _) => value.name === "DDS" && (!value.options_data || !value.options_data.mono_eem))).length > 0,
         has_sampler: data.filter(((value, _) => value.name === "Sampler" && (!value.options_data || !value.options_data.mono_eem))).length > 0,
     }

static/js/shop_data.js

@@ -833,6 +833,10 @@ const shop_data = {
       size: 'small',
       type: 'hd68',
       hp: 4,
+      options: [
+        {type: "Radio", args: {title: "Cable length", outvar: "hd68_cable_len", variants: ["1 M", "2 M", "3 M"], tip: "The desired length of the HD68 cable", fallback: 1}},
+      ],
+      options_class: "hd68-idc",
       nbrSlotMin: 1,
       nbrSlotMax: 4,
       nbrCurrentSlot: 0,
@@ -955,6 +959,7 @@ const shop_data = {
         {type: "Switch", args: {title: "Ext CLK", outvar: "ext_clk"}},
         {type: "Switch", args: {title: "Ext power", outvar: "ext_pwr", "tip": "Use external power supply in order to reduce number of used EEM connectors"}}
       ],
+      options_class: "clocker",
       size: 'small',
       type: 'clocker',
       hp: 4,
@@ -996,6 +1001,7 @@ const shop_data = {
       options: [
         {type: "Switch", args: {title: "Ext power", outvar: "ext_pwr", "tip": "Use external power supply in order to reduce number of used EEM connectors"}}
       ],
+      options_class: "stabilizer",
       size: 'small',
       type: null,
       hp: 4,