Can I remove the product ID from the Global Options?

I’m trying to stylize a particular set of global options across a number of products using CSS. I see that when you create a global option, CS-cart creates a unique number for that global option and applies that number to the ID of the global option. Which is great! until you realize that it also applies the product ID to that same ID. Basically making that a unique ID, only to that particular product. So I can’t use CSS to stylize that particular global option, unless I do it product by product. Which is not possible. Is there any way to remove the product ID from displaying in the ID of the Global options?






<br />
<div class="form-field product-list-field clear" id="opt_1408_95"><br />
  <label for="option_1408_95" class="cm-required ">Select Your Frame Type (1):</label><br />
  <select name="product_data[1408][product_options][95]" id="option_1408_95" onChange="fn_change_options('1408', '1408', '95');" ><br />
    <option value="499" selected="selected">Select Frame Type </option><br />
    <option value="437" >Semi Rimless (grooved)  (+$10.00)</option><br />
    <option value="436" >Full Plastic </option><br />
    <option value="435" >Full Metal </option><br />
  </select><br />
  <p class="description clear-both">Your Frame Information1</p><br />
</div>

You should be using a class then, not an ID. ID's are supposed to be unique to a page.


id="opt_1408_95" class="form-field product-list-field clear"






The ID is opt_1408_95. So _1408 is the product id assigned by cs-cart and _95 is the global option.





So the ID would still be unique without the product ID. Which would mean I could use CSS to target all products that use the global option _95. But with the addition of the product ID I can not. Class doesn't help at all, since it's not unique.



So I can do this one of two ways. I can just remove the product ID from appearing in the ID of the product options. Or just add the global option id (_95) to the class of the option like “option_95” to make the class more unique.





Can I do this in the product_data.tpl?



I found this bit of code on line 316.



{hook name="products:product_option_content"}
{if $disable_ids}
{assign var="_disable_ids" value="`$disable_ids``$obj_id`"}
{else}
{assign var="_disable_ids" value=""}
{/if}
{include file="views/products/components/product_options.tpl" id=$obj_id product_options=$product.product_options name="product_data" capture_options_vs_qty=$capture_options_vs_qty disable_ids=$_disable_ids}
{/hook}




It's checking to see if I have disabled IDs? Is there a way to shut generating product IDs off somewhere? If not I guess I'll have to make some edits to product_options.tpl

Not if you list multiple products on one page. Generally in cs-cart, ID's are used for dynamic updates via jQuery and other javascript approaches. You should use classes for the vast majority of your styling adjustments.

My product options don't display on the category pages, since there are about 10 or so options per product. But I can do what I want by just adding


opt_{$po.option_id}




to the class in the product_options.tpl


```php


```

So that gives me something I can work with across the entire site. To do this I had to make a change to the original product_options.tpl file. Is there a way to make this change like hooks so I can minimize my edits to system files? I tried creating a hook for "products:product_option_content" and just changing the path to my edited version of the file, but it's not working.


```php
{hook name="products:product_option_content"}
{if $disable_ids}
{assign var="_disable_ids" value="`$disable_ids``$obj_id`"}
{else}
{assign var="_disable_ids" value=""}
{/if}
{include file="addons/my_changes/hooks/products/components/product_options.override.tpl" id=$obj_id product_options=$product.product_options name="product_data" capture_options_vs_qty=$capture_options_vs_qty disable_ids=$_disable_ids}
{/hook}
```