Search code examples
coldfusionlucee

trying to make some code dynamic using some custom coldfuison

Hi I have this code in html

<div class="rating-star-wrap"> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active"> 
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> 
    </svg> </span> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active"> 
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> 
    </svg> </span> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active"> 
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> 
    </svg> </span> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating active"> 
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> 
    </svg> </span> <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="star-rating"> 
    <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"></path> 
    </svg> </span> 
</div>

where the purpose is that i am trying to use the above code basically dynamically based upon the ratings i get by the table data

what could be the best approach for dealing with this kind of code

enter image description here

that is the DB and if the division by 0, is not possible, so it should be 5 stars max, no more than 5, because that is maximum what my code does.

please guide how can i moved head with that code

the unique_content_id is the productID i have

Solution

  • You can fetch the rating per record via SQL:

    SELECT
    IF(
        (vote_up + vote_down) > 0,               -- prevent division by zero
        ((vote_up / (vote_up + vote_down)) * 5), -- 5 is the maximum of stars
        0                                        -- no votes yet
    )
    AS starRating

    You can then loop over your query result from this SELECT and print stars like this:

    <cfquery name="ratings" datasource="...">

    SELECT
        ...

</cfquery>

<cfset svgFullStar  = '<svg>...</svg>'>
<cfset svgEmptyStar = '<svg>...</svg>'>

<cfloop query="ratings">

    <cfset fullStars  = round(ratings.starRating)> <!--- or ROUND() in the SQL SELECT --->
    <cfset emptyStars = (5 - fullStars)>

    <div class="row">
        <div class="product">
            #encodeForHtml(ratings.unique_content_id)#
        </div>
        <div class="rating-star-wrap">
            #repeatString(svgFullStar,  fullStars)#
            #repeatString(svgEmptyStar, emptyStars)#
        </div>
    </div>

</cfloop>

    That's the display logic for whole stars like 3/5.