Solved

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

Posted on 2014-04-21
15
286 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:Tony
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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

803 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