Как добавить вариант ответа в мой шаблон WordPress? - PullRequest
Новая
       0

Как добавить вариант ответа в мой шаблон WordPress?

0 голосов
/ 22 февраля 2020

Я исправляю код и немного изучаю ... вопрос в том, что я пытался добавить что-то более практичное в свой код, и оно будет адаптироваться к тому, что мне нужно в комментариях, но теперь я не знаю, как чтобы ответы отображались в моем шаблоне ...

В приложении мой код, который я несу на своем сайте (комментарии к шаблону) 

<script type="text/javascript">
  
    jQuery(document).ready(function($)
    {
        var promedio_total_estrellas = parseInt('<?php echo $promedio_total_estrellas; ?>');
        $(".c-star-rating-custom").find('li').each(function(i)
        {   
            count_li = parseInt(i+1);
            if(promedio_total_estrellas>=count_li){
                $(this).find('i').addClass('active');
            }else{
                $(this).find('i').removeClass('active');
            }
        });


        $(".rating_click").click(function()
        {
            //alert("hola");
            general_rating =  $(this).parent().find('.general_rating');
            if(general_rating.is(':visible')===false){
                $(this).parent().find('.general_rating').show(100);
            }else{
                $(this).parent().find('.general_rating').hide(100);
            }
        });

    

    });
    

</script>
<style>

    .secondtitle, .entry *:not(.fpcontent):not(.qa-faq) .secondtitle, .entry .secondtitle {
        font-size: 20px;
        color: #ffffff;
        line-height: 25px;
        text-align: center;
        margin: 20px auto 0 auto;
        /* text-shadow: 2px 2px 1px #fff; */
        display: table;
        background: rgb(63, 50, 148);
        padding: 10px;
        font-weight: 300;
        border-radius: 5px;
        border-top: 0;
    }

    i.arrow {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid rgb(63, 50, 148);
        content: '';
        display: block;
        margin: auto;
        margin-bottom: 10px;
    }

    ol.commentlist {
        padding: 0;
        margin: 20px 0;
    }

    .commentlist li {
        width: 100%;
        display: inline-block;
        margin: 10px 0%;
        padding: 0;
        border-radius: 3px;
    }
    .list_reviews {
        width: 100%;
        box-sizing: border-box;
        overflow: auto;
        background-color: #fff;
        border-radius: 3px;
        display: table;
        padding: 25px;
        text-align: left;
    }
    .list_reviews_content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
    .list_reviews_left {
        flex-basis: 80%;
        background-color: #fff;
        align-self: flex-start;
    }
    .review_author_info {
        margin-bottom: 25px;
        overflow: auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        font-weight: 200;
    }
    .review_author_info img {
        width: 40px;
        min-width: 40px;
        height: 40px;
        display: block;
        border-radius: 50%;
        float: left;
        overflow: hidden;
    }
    .lazyloaded {
        opacity: 1;
        transition: opacity 300ms;
    }
    .review_author_details {
        padding: 0 0 0 10px;
        display: inline-block;
        overflow: hidden;
    }
    .author_name {
        color: #555;
        line-height: 26px;
        text-transform: capitalize;
    }
    .review_product_type {
        margin-right: 0;
    }
    .review_product_type {
        float: right;
        margin-right: 15px;
        font-size: 14px;
        text-align: center;
    }
    .review_author_details .dashicons {
        font-size: 14px;
        width: auto;
    }

    .dashicons, .dashicons-before:before {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1;
        font-family: dashicons;
        text-decoration: inherit;
        font-weight: 400;
        font-style: normal;
        vertical-align: top;
        text-align: center;
        transition: color .1s ease-in;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .review_author_details p {
        font-size: 11px!important;
        color: #777;
        padding: 0!important;
        line-height: 1.3;
    }
    .author_name .dashicons-yes-alt {
      color: #2098ce;
      vertical-align: super;
      font-size: 12px;
    }
    .review_author_details .dashicons {
        font-size: 14px;
        width: auto;
    }
    .dashicons, .dashicons-before:before {
        vertical-align: middle;
    }
    .dashicons, .dashicons-before:before {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1;
        font-family: dashicons;
        text-decoration: inherit;
        font-weight: 400;
        font-style: normal;
        vertical-align: top;
        text-align: center;
        transition: color .1s ease-in;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .review_author_details .dashicons {
        font-size: 14px;
        width: auto;
    }
    .dashicons, .dashicons-before:before {
        vertical-align: middle;
    }
    .dashicons, .dashicons-before:before {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1;
        font-family: dashicons;
        text-decoration: inherit;
        font-weight: 400;
        font-style: normal;
        vertical-align: top;
        text-align: center;
        transition: color .1s ease-in;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
 
    .review_author_details p {
        font-size: 11px!important;
        color: #777;
        padding: 0!important;
        line-height: 1.3;
    }

    .review_product_type {
        margin-right: 0;
    }
    .review_product_type {
        float: right;
        margin-right: 15px;
        font-size: 14px;
        text-align: center;
    }

    .review_product_type {
        float: right;
        margin-right: 15px;
        font-size: 14px;
        text-align: center;
    }
    .review_author_info {
        margin-bottom: 25px;
        overflow: auto;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        font-weight: 200;
    }
    .list_reviews {
        width: 100%;
        box-sizing: border-box;
        overflow: auto;
        background-color: #fff;
        border-radius: 3px;
        display: table;
        padding: 25px;
        text-align: left;
    }
    .review_content {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 25px;
    }
    .review_pros {
        margin-bottom: 10px;
    }
    .review_pros:before, #positive:before {
        content: "\f529";
        background: #72c368;
    }
    .review_pros:before, .review_cons:before {
        float: left;
        font-family: Dashicons;
        color: #fff;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        padding: 5px;
        line-height: 12px;
        font-size: 12px;
        margin-top: 2px;
    }
    .review_cons:before, #negative:before {
        content: "\f542";
        background: #e26162;
        -moz-transform: scale(-1,1);
        -webkit-transform: scale(-1,1);
        -o-transform: scale(-1,1);
        -ms-transform: scale(-1,1);
        transform: scale(-1,1);
    }
    .review_pros:before, .review_cons:before {
        float: left;
        font-family: Dashicons;
        color: #fff;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        padding: 5px;
        line-height: 12px;
        font-size: 12px;
        margin-top: 2px;
    }  

    .rating-5 .comment-body .list_reviews_right {
        border-left-color: #84d57a;
    }
    .list_reviews_right {
        flex-basis: 20%;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        align-self: center;
        justify-content: center;
        margin: 0 0 0 40px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .c100 {
        position: relative;
        font-size: 100px;
        width: 1em;
        height: 1em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: #018ef8;
    }
    .c100>span {
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 5em;
        line-height: 5em;
        font-size: .2em;
        color: white;
        display: block;
        text-align: center;
        white-space: nowrap;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .c100 *, .c100 *:before, .c100 *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
    rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
        clip: rect(auto,auto,auto,auto);
    }
    .c100 .slice {
        position: absolute;
        width: 1em;
        height: 1em;
        clip: rect(0em,1em,1em,.5em);
    }
    .c100 *, .c100 *:before, .c100 *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .rating-5 .c100 .bar, .rating-5 .c100 .fill {
        border-color: #84d57a!important;
    }
    .c100.p100 .bar {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    .rating-5 .c100 .bar, .rating-5 .c100 .fill {
        border-color: #84d57a!important;
    }
    .detailed_ratings_list {
        /*position: absolute;*/
        display: flex;
       /* top: 70px;
        right: 10;*/
        width: 100%;
        background: #fff;
        padding: 25px;
        z-index: 900;
        z-index: 900;
        border-radius: 3px;
        box-shadow: 0 0 3px rgba(0,0,0,.3);
    }
    .list_reviews_right_labels {
        flex-basis: 60%;
    }
    .overall_rating_title {
        font-size: 22px;
        margin: 0 0 20px 0;
        line-height: 1.5;
        font-weight: 300;
    }
    .list_rating_title {
        font-weight: 300;
        line-height: 26px;
        font-size: 16px;
    }
    .list_reviews_footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .commentlist .thumbs-rating-container {
        margin: 0;
    }
    .thumbs-rating-container {
        float: none;
        margin-top: 10px;
    }
    .thumbs-rating-container {
        float: right;
        margin: -4px 0 0 0;
    }
    .vote_like {
        display: inline-block;
        cursor: pointer;
        font-size: 11px;
        color: #2098ce;
        text-transform: uppercase;
        letter-spacing: 1px;
        line-height: 25px;
        padding: 5px 15px;
        vertical-align: middle;
        border-bottom: 2px solid #2098ce;
        font-weight: 500;
        border: 2px solid #2098ce;
        border-radius: 50px;
    }
    .like.vote_like .dashicons-thumbs-up {
      padding: 0 5px 0 0;
    }
    .vote_like .dashicons {
        font-size: 16px;
    }
    .thumbs-rating-container span {
        cursor: pointer;
    }
    .dashicons, .dashicons-before:before {
        vertical-align: middle;
    }
    ul.li_ratin_comment li{
        display: inline;
    }
    ul.li_ratin_comment{
        float: right;
    }
</style>
<?php 
	
    $acumulador_promedio_rating_total = 0;
    $cont_promedios = 0;
	$args = array(
  	 'post_id' => get_the_ID(),   // Use post_id, not post_ID
	);
	$comments = get_comments( $args );


    $args_rt = array(
        'post_type'=>'target_rating_type',
        'post_status'=>'publish',
        'post_per_pages'=>-1,
    );
    $rt = get_posts($args_rt);
    $array_target_rating_type_id = array();
    //hacemos el foreach para obtener los ID 
    foreach ($rt as $key_rt => $value_rt) {
        //guardamos la ID
        array_push($array_target_rating_type_id,$rt[$key_rt]->ID);
    }

?>



<ol class="commentlist" style="display: block;">
    <?php foreach($comments as $key => $value)
    {
            $acum_rating = 0;
            $promedio_rating = 0;
            $comment_meta = get_comment_meta($comments[$key]->comment_ID, 'target_comment_start',true);
            //var_dump($comment_meta);
            //haremos un foreach rapido para recorrer el tipo de estrellas y sacar la cantidad de cada 1
            foreach($array_target_rating_type_id as $key_rtid)
            {   
                //sacamos la cantidad puntada por cada tipo de start
                $acum_rating = $acum_rating +  intval($comment_meta['target_rating_type_'.$key_rtid]);
            }//cierre del foreach 

            //sacamos el promedio de estrellas
            $promedio_rating = $acum_rating / count($array_target_rating_type_id);
            //redondeamos las estrellas
            $promedio_rating = round($promedio_rating,0,PHP_ROUND_HALF_DOWN);

            //Sacamos el promedio total para las estrellas
            $acumulador_promedio_rating_total = ($acumulador_promedio_rating_total + $promedio_rating);
            //contamos la cantidad de promedio
            $cont_promedios = ($cont_promedios + 1);

     ?> 

    <li id="review-36267" class="rating-5 level1">
                <div class="c-offer-detail__content">
                        <div class="c-offer-detail__content-wrapper o-wrapper o-wrapper--stretch" style="margin-top: 5px;">
                            <!--<h3 class="c-content-box__title">Comentarios</h3>-->
                            <div class="c-offer-detail__content-main">




        <div class="rating-5">
            <div class="list_reviews comment-body">
                <div class="list_reviews_content">
                    <div class="list_reviews_left">
                        <aside class="review_author_info"><img alt="" data-lazy-type="image" data-src="https://secure.gravatar.com/avatar/ab33fde4ff0eb3fb0db6beaeffcb8d6f?s=64&amp;d=mm&amp;r=g" srcset="https://secure.gravatar.com/avatar/ab33fde4ff0eb3fb0db6beaeffcb8d6f?s=128&amp;d=mm&amp;r=g 2x" data-srcset="https://secure.gravatar.com/avatar/ab33fde4ff0eb3fb0db6beaeffcb8d6f?s=128&amp;d=mm&amp;r=g 2x" class="avatar avatar-64 photo lazyloaded" height="64" width="64" src="https://secure.gravatar.com/avatar/ab33fde4ff0eb3fb0db6beaeffcb8d6f?s=64&amp;d=mm&amp;r=g">
                            <div class="review_author_details">
                                <div class="author_name"><?=$comments[$key]->comment_author?>&nbsp;<span class="dashicons dashicons-yes-alt" title="Este usuario est谩 verificado"></span></div>
                                <p><span class="dashicons dashicons-edit"></span>1&nbsp;comentarios</p>
                            </div>
                            <div class="review_product_type">
                                <div>&nbsp;Informaci贸n general</div>
                                <p>&nbsp;<?php echo get_comment_date("l, F jS, Y",$comments[$key]->comment_ID); ?></p>
                            </div>
                        </aside>
                        <section class="review_content">
                            <div class="review_pros">
                                <div>&nbsp;<?=$comments[$key]->comment_content?></div>
                            </div>
                           <!--<div class="review_cons">
                                <div>&nbsp;que dieran creditos a largo plazo seria ideal a pagar en varios mseses y aumentar el credito</div>
                            </div>-->
                        </section>
                    </div>
                    <div class="list_reviews_right desktop_reviews" id="list_reviews_36267" data-rating="5" data-rid="36267">
                        <div class="c100 p100 rating_click" title="" style="cursor: pointer;"> <span style="cursor: pointer;"><?php echo $promedio_rating; ?>/5</span>
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                        </div>
                       
                    </div>
                </div>
                <div class="list_reviews_footer">
                     <div class="detailed_wrap general_rating" style="width: 100%;">
                            <div class="detailed_ratings_list">
                                <div class="list_reviews_right_labels">
                                    <div class="overall_rating_title">Valoraci贸n General</div>
                                    <?php 
                                        foreach($array_target_rating_type_id as $key_rtid)
                                        { 

                                        //veremos la cantidad de rating
                                        $cont_rating = intval($comment_meta['target_rating_type_'.$key_rtid]);
                                    ?>
                                    <div class="list_rating_title"><?php echo get_the_title($key_rtid); ?> 
                                    <ul class="li_ratin_comment">
                                        <?php for($i=1; $i<=5; $i++){ ?>
                                        <li><i class="rating-star <?php if($cont_rating>=$i){ echo 'active'; } ?>"></i></li>
                                        <?php } ?>
                                    </ul>
                                    <div style="clear: both;"></div>
                                    </div>
                                    <?php 
                                        } 
                                    ?>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        

                </div>
                    </div>
                </div>

    </li>
<?php } ?>
</ol>


<?php   
    //Sacamos el promedio total de estrellas de esta forma por la cantidad de elementos tipo de estrellas que haya
    $promedio_total_estrellas = $acumulador_promedio_rating_total / $cont_promedios;
    $promedio_total_estrellas = round($promedio_total_estrellas);
?>

Я надеюсь, что вы можете мне помочь ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...