Solved

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

Posted on 2014-04-21
15
283 Views
Last Modified: 2014-05-12
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>
0
Comment
Question by:ohmetw
  • 6
  • 5
  • 2
  • +2
15 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40013967
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
 
LVL 18

Expert Comment

by:Rartemass
ID: 40014036
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
 

Author Comment

by:ohmetw
ID: 40014037
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40014069
Just don't output the li's you don't need then.
0
 

Author Comment

by:ohmetw
ID: 40014094
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40014101
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
 
LVL 9

Expert Comment

by:Sar1973
ID: 40014227
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 6

Expert Comment

by:Brijesh Gandhi
ID: 40014300
Please refer it and try to use
each
function of javascript it will be dynamic
link
0
 

Author Comment

by:ohmetw
ID: 40015713
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
 

Author Comment

by:ohmetw
ID: 40020816
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 40021054
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
 

Author Comment

by:ohmetw
ID: 40023718
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
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 40023809
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
 

Author Comment

by:ohmetw
ID: 40024139
Ok thank you for your time :-)
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 40026990
Tha Ebay policy excludes then the chance to create dynamically a list or dropdown, based on proprietary HTML code.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now