CMS Development

fazzio349
Contributor

Adding Percentage Value to Counter Stats Module

This seemed like an easy adjustment, but I'm having diffuclt trying to figure this out. I have an animated stats counter (counts up to a specific number). However the module is for numbers only, and I wanted to add the option to use a %. I created a new text field called percent, that I planned on just deleting the text inside it if not needed, however, it seems like no matter where I try to insert the module in the code, it breaks the counter. Can anybody offer some assistance as to the best way I can insert this?

 

<div class="counter-section" style="color: {{ module.text_color.color }};">
   <div id="counter">
     {% if widget.image_field.src %}
      <img src="{{ widget.image_field.src }}" alt="{{ widget.image_field.alt }}" width="{{ widget.image_field.width }}" height="{{ widget.image_field.height }}">
    {% endif %}
    <div class="counter-value" data-count="{{ widget.end_number }}"><span class="counter-num-style">{% inline_text field="counter_number" value="{{ widget.counter_number }}" %}</span>
     </div>
  	<div class="counter-name">
      <h3 style="color: {{ module.text_color.color }};">{{ widget.counter_name }}</h3>
    </div>
  	<div class="counter-content">
      <p style="color: {{ module.text_color.color }};">{{ widget.counter_content }}</p>
    </div>
  </div>
</div>
<style>
  .counter-section h3:after{
    color: {{ module.text_color.color }};
  }
</style>

 

0 Upvotes
1 Reply 1
dennisedson
HubSpot Product Team
HubSpot Product Team

Adding Percentage Value to Counter Stats Module

Hey @fazzio349 !

Still working on  this?

If so, would you mind posting a link to a page using this?  Probably would be easier to solve this if we see the complete picture.

@alyssamwilie might be able to help 😜

0 Upvotes