Display top 3 customer details with photo in homepage dawn theme

[Aravinthmoshi]

Hi All,

I want to display the top 3 customer details with photo in homepage(Based on the order they completed). I am using dawn theme.. is it possible to do ?? Can anyone pls help me on that..

thanks

[oscprofessional]

Hello @Aravinthmoshi ,

You want to say that you want to show Customer testimonials in Home page?

[Aravinthmoshi]

No. Based on their products purchased ranking(orders placed in website), need to display the top 3 customer details with photo in homepage.

Thanks.

[oscprofessional]

@Aravinthmoshi ,

Can you share the store URL ?? so that I can check and let you know!

Have a Nice Day!

[Aravinthmoshi]

Thanks for your response.

store url: https://northmistnew.myshopify.com/

pwd:northmist

[Aravinthmoshi]

In that homepage, leaderboard section- need to show the top ranked customer details.

thank you.

[SheetalZadfiya]

Hi @Aravinthmoshi 

To display top 3 customer details you need to add below code in to your section.

Display customer image shopify does not provide option for add customer image.

Create new file and add below code. Use this section where you want to display top 3 customers.

<div class="top_customer">
  <div class="container">
    <div class="top_customer_block"></div>
  </div>
</div>
<script>
  $(document).ready(function(){
    var ajax = {
      type: "GET",
      url: "/admin/api/2022-04/customers/search.json?order=orders_count",	
      dataType: "json",
      success: function(data){
        console.log(data,'data');
        let allData = data.customers;
        let getJson = []; 
        getJson.push(allData);
        $.each(getJson,function(num,value){
          let mainHtml = '';
          $.each(value,function(i,val){
            if(val.orders_count > 0){
              let state = val.state;
              if(state != 'disabled'){
                if (i > 3)
                  return false;
                mainHtml += '<div>';
                mainHtml += '<div class="customer_img"></div>'
                mainHtml += '<h2>'+ val.first_name +'  '+ val.last_name +'</h2>';
                mainHtml += '<p>'+ val.email +'</p>';
                mainHtml += '</div>';
                $('.top_customer_block').html(mainHtml);
              }
            }
          });
        });
      },
      error: function(){
        console.log('error');
      }
    };
    $.ajax(ajax);
  });
</script>

{% schema %}
  {
    "name": "Top Customer",
    "settings": [],
	"presets":[
      {
      	"name": "Top Customer"
      }
	]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Thank You.

[Aravinthmoshi]

@SheetalZadfiya Thanks for your code.. I have tried your code, But it is not working for me.. can you pls help me out on this?

Thanks,

Aravinth.