HTML bulleted list, 10 variables, only want bullet if variable has a value

I am trying to automatically populate a list of 'product features' on an eCommerce site for many products.  each product has up to 10 features and I'm having trouble have bullets only appear for 'feature name xx' variables with an actual value....so if a product only has 3 features (1-3) I don't want to have 7 empty bullets following the first three....which is what I am dealing with now.  I'd prefer to solve this in html only, but if javascript is necessary to handle the if-then logic that is fine too, will just need good examples....I'm a novice :-)

Here is the html I am currently using...hopefully it's a simple rework of this!

<div id="block_feat_only">
<div id="itemfeatures">
<ul>
<li> {{FEATURE NAME 1}} </li>
<li> {{FEATURE NAME 2}} </li>
<li> {{FEATURE NAME 3}} </li>
<li> {{FEATURE NAME 4}} </li>
<li> {{FEATURE NAME 5}} </li>
<li> {{FEATURE NAME 6}} </li>
<li> {{FEATURE NAME 7}} </li>
<li> {{FEATURE NAME 8}} </li>
<li> {{FEATURE NAME 9}} </li>
<li> {{FEATURE NAME 10}} </li>
</ul>
</div>
</div>
ohmetwAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
It looks like you are trying to work around the Channel Advisor system.  You should check your documentation there.

Based on your question and things we have offered and not worked, the answer is it simply can't be done.

You are going to have to find a way to work within channel advisor to only list the item information available or create single templates for each product and update the ebay page for that manually.  

If you can't run css or js, you are stuck with straight html.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Working sample using jquery http://jsbin.com/kijof/1/ although I think I would do this using my serverside code

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git1.js"></script>
  <meta charset="utf-8">
  <title>padas Q_28417178</title>
</head>
<body>
<ul class="item_details">
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
</body>
</html>

Open in new window

$(function() {

$('.item_details li').each(function(){
   var detail=$(this).text();
   var test = detail.length;  
   if(!test){
     $(this).hide();
   }
});
  
});

Open in new window

0
 
RartemassService Desk AnalystCommented:
Are you building the eCommerce site yourself?
If you are novice as you indicate this may be a large undertaking for you.
I would recommend one of the free options to start with like WooCommerce.
PayPal have shopping cart software and there are plenty of WordPress plugins for them that already have what you need.
If you want to build it from scratch then awesome, but for my money and time I'd go with one already created that I can modify.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
ohmetwAuthor Commented:
well...I tried.  apparently I am not able to embed javascript in my html  (these are items being listed on eBay and they will not allow that)  any other ideas?  sorry for overlooking that.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Just don't output the li's you don't need then.
0
 
ohmetwAuthor Commented:
It's a template. I have a data feed that sends data to each listing. So I need a flexible template that will show a bullet if there is data the associated variable. And not show a bullet if the variable is empty
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can't you do that in your template?

Handlebars as example http://handlebarsjs.com/
<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

Open in new window

{{#list people}}{{firstName}} {{lastName}}{{/list}}

Open in new window


Another option using css, no jquery  
http://jsbin.com/kijof/2/edit
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>padas Q_28417178</title>
  <style>
    li:empty{display:none;}
    </style>
</head>
<body>
<ul class="item_details">
  <li>data</li>
  <li>data</li>
  <li>data</li>
  <li></li>
  <li></li>
  <li></li>
  </ul>
</body>
</html>

Open in new window

0
 
Sar1973Commented:
You could inner the HTML of the bulleted list you want to appear in your page (see http://www.w3schools.com/TAGS/tag_li.asp, http://www.w3schools.com/jsref/prop_html_innerhtml.asp).
0
 
Brijesh GandhiProgrammerCommented:
Please refer it and try to use
each
function of javascript it will be dynamic
link
0
 
ohmetwAuthor Commented:
Sar1973 and brijeshghandi21, I am not familiar with inner html enough to know how to apply that to work for this implementation.  

Scott, I tried using the last example you posted including  this
  <style>
    li:empty{display:none;}
    </style>

but all bullet points are still being displayed.  Do I need to create a head and body section in my html.  I know I keep apologizing for being a novice but I do need some guidance in that regard if this could be the solution.  Also....is all the code I would need embedded in the html, or would I need to add some code to my css file?
also, although not as clean, can I just embed this script in each line like this?
<li:empty{display:none;}> {{FEATURE NAME 1}} </li>
<li:empty{display:none;}> {{FEATURE NAME 2}} </li>
etc...
0
 
ohmetwAuthor Commented:
Hi Scott, I have been trying the last two examples from others without any luck.  I am looking at your handlebars example....and wondering if that may work....I'm just not sure how to apply this to my example

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

I attempted to piece it together below.  Am I close? ...also...this is code within a bigger html file....and I'm not completely clear on how to use head and body....or than head contains code not to display on the page and body does...but not sure if I should do it this way...or if I can add a head section in the middle or not.  there isn't currently a head / body section defined in the html.  

<head>
{{#list features}} {{FEATURE NAME 1}} {{FEATURE NAME 2}} {{FEATURE NAME 3}} {{FEATURE NAME 4}} {{FEATURE NAME 5}}
{{FEATURE NAME 6}} {{FEATURE NAME 7}} {{FEATURE NAME 8}} {{FEATURE NAME 9}} {{FEATURE NAME 10}} {{/list}}
</head>

<body>
<ul class="people_list">
      <div id="block_feat_only">
      <div id="itemfeatures">
            {{#each people}}
            <li>{{this}}</li>
          {{/each}}
      </div>
      </div>
</ul>
</body>
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Can you please explain in more detail how you are sending dynamic html to ebay.  Where are you getting your instructions from?  

>Do I need to create a head and body section in my
Don't confuse the head section of the html with what may be called the header of the page.  As example, on this page, everything in the teal blue you could consider the page header.  However, that is in the <body> section of the html.

Looking here, http://www.ebay.com/gds/How-To-Upload-A-Custom-Storefront-/10000000002146153/g.html they explain how to upload  your custom header.  That would be like the blue area above inside the <body> tag.  Are you 100% sure you are supposed to be uploading a full html page and not  just the html needed for the body?

I think you need to help by finding the specific page on ebay that details what you want to do.
0
 
ohmetwAuthor Commented:
yes, this is for the product detail page, the html that you can add below each listing to further describe your product.  we have an html template that will load html onto any new listings we load to eBay.  We use a system called Channel Advisor to manage our inventory and list our items, so this middleware will push the html to the listing as it is created...then this also allows us to easily make global changes to all listings.  so...if features change, or we change the formatting for listing details, we can easily update these from the middleware.  SO, eBay will allow you to use html in this description area, for some javascript is restricted
here is a link to the restrictions.  so....if you think there is a way to use javascript that will fit within these guidelines I am happy to try it!  :-)

http://pages.ebay.com/help/policies/listing-javascript.html
0
 
ohmetwAuthor Commented:
Ok thank you for your time :-)
0
 
Sar1973Commented:
Tha Ebay policy excludes then the chance to create dynamically a list or dropdown, based on proprietary HTML code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.