asked on

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>

Scott Fell

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

Rartemass

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.

ohmetw

ASKER

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.

Scott Fell

Just don't output the li's you don't need then.

ohmetw

ASKER

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

Scott Fell

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

Sar1973

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).

Brijesh Gandhi

Please refer it and try to use

each

function of javascript it will be dynamic
link

ohmetw

ASKER

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...

ohmetw

ASKER

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>

Scott Fell

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.

ohmetw

ASKER

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

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ohmetw

ASKER

Ok thank you for your time :-)

Sar1973

Tha Ebay policy excludes then the chance to create dynamically a list or dropdown, based on proprietary HTML code.