Add to Specifications

[NeatPete]

Does anyone know how I can add more details (size, dimensions etc) to the specification tab on the product page? I am using the foundation skin

 

Any help appeciated

[bsmither]

Welcome NeatPete! Glad to see you made it to the forums.

From what you are asking, can I assume all your inventory would need to display these common details: size, dimension, color, etc)? And you prefer to not have them as part of the inventory item's Description?

I suggest a mod called "Additional Product Fields" by Chuggy Skins. (If you buy this mod, do not install it. I have made a number of improvements and bug fixes.)

 

[NeatPete]

Thanks for the reply, all I wanted to do was just add the products "dimensions" to the existing specifications tab but I will certainly take a look at the "Additional Products Fields"  

Pete

[bsmither]

The Specifications tab is populated by a table containing distinct item properties - that is, each property is located in a specific column of the Inventory database table.

To identify a distinct item property, such as the desired property named 'size', one would need to be able to identify and 'name' that property in some way.

The Additional Product Fields is one way to do that.

Another way is to have the desired property in the Description field, but enclose it in a hidden <div>. Then, some javascript will read the contents within that hidden <div> and cause those contents to be displayed in a javascript appended table row in the 'product_spec' div block.

[bsandall]

I raised a feature request on Github for this, and have implemented it in my own store. The implementation branch is a little outdated now, but if you are handy with code, you could use the changeset as a starting point.

Of course, mods and plugins are the recommended way to add functionality - you should only consider modifying core code if you have a version control system in place that allows you to merge changes from the master CubeCart branch.

[jka]

I need to be able to add more specs for each product. These are individual specs for each product and not common specs. How do I get additional specs mod?

Thanks.

[bsmither]

If the specifications are not common to all products, then mentioning them in the product's Description field seems to be the appropriate solution.

Is there something I'm missing that is needed to understand to derive your solution?

[jka]

When you go to a Product, there is a "Product Information" tab and "Specification" tab right next to it. Unfortunately this "Specification" tab just has 2-3 fields like Weight, condition etc. It will be nice to add a few more tech specs of the product under this tab.

[bsmither]

Ok. As mentioned above, the APF mod adds fields that are available to all products. Thus, a field that mentions the number and size of battery cells (for a radio) wouldn't apply to a miniature golf putter.

However, the template can be coded such that if any field does not contain a value (no cells for a putter), that field would not be displayed. That means the total set of APF fields would eventually become unmanageable if your inventory were seriously large and diversified.

So, maybe we can solve this with the hidden <div> approach mentioned earlier.

I have already done that on a another project of mine (added a new tab), so it should work here as well. Let me make some experiments. Or, if you are already a capable coder, we can pound this out quickly.

[bsmither]

In the skin template file content.product.php:

Find near line 165:
<div class="content{if empty($PRODUCT.description)} active{/if}" id="product_spec">
  <table>

Change to:
<div class="content{if empty($PRODUCT.description)} active{/if}" id="product_spec">
  <div class="row">
    <div class="small-6 columns">
      <table width="100%" id="first_product_spec_table">

After that, find:
  </table>

Change to:
      </table>
    </div>
    <div class="small-6 columns" id="target_of_second_product_spec_table"></div>
  </div>

At the end of the file, add:
<script>
  $(document).ready(function(){
    if( $("#source_of_second_product_spec_table").length ){
      $("#target_of_second_product_spec_table").html( ""+$("#source_of_second_product_spec_table").html() );
    }
  });
</script>

In admin, bring up a product for editing. On the Description tab, switch the editor to Source mode. At the end of the description HTML:

Add:
<div class="hide" id="source_of_second_product_spec_table">
<table id="second_product_spec_table" width="100%">
 <tbody>
  <tr>
   <td>Name1</td>
   <td>Value1</td>
  </tr>
  <tr>
   <td>Name2</td>
   <td>Value2</td>
  </tr>
  <tr>
   <td>Name3</td>
   <td>Value3</td>
  </tr>
 </tbody>
</table>
</div>

You can try to do this by using the editor's tools to create a DIV, then create a TABLE inside that DIV. The dialog for the TABLE properties will insist on adding height and width settings. There may be a way to suppress that, but I don't know what it is.

 

[jka]

Will try to spend some time this weekend to try your suggestions and code. Will keep you posted.

Thanks.