Thiết kế website giá rẻ

Question

I’m trying to use google sheet as my website CMS. I wanted to filter the “status” on google list and then append it accordingly eg status a will be append to .main-div, status b will be append to .main-div2 and so on..

I tried to copy paste the function makecall(initobj) function, but it only choose one of the main-div to run. I’m not sure how to go about this.

var sheetdata = [];
//replace it with your values
makecall({
  'sheetid' : '1JNZ9-BH9S4xyugcVqmFQAmDHXsm0n352Ntqt1qLlo6c',
  'apikey' : 'AIzaSyALdBmQcULfcxOlzYAWalbLPW3qsqz5P6o',
  'parentdivclass' : '.main-div',
  'parentdivclass2' : '.main-div2',
  'elementdivclass' : '.sing-list',
  'elementdivclass2' : '.sing-list2',
  'emptylist' : '.empty-list'
});

function makecall(initobj)
{
  $('.main-div').hide();
  //&ranges=Sheet2
  $.ajax({
    url: "https://sheets.googleapis.com/v4/spreadsheets/"+initobj.sheetid+"/values:batchGet?ranges=Sheet1&key="+initobj.apikey,
    type: 'GET',
    dataType: 'json', // added data type
    success: function(res) {
      let valuerage = res.valueRanges;
      valuerage.forEach((val, mainindex) => {
        val.values.forEach((singval,index) => {
          let category = (singval[3]);
          if(index != 0 && category=="a")
          {
            sheetdata.push(singval);
          }
        });
        creatediv(initobj,sheetdata);
      });
    }
  });


  function creatediv(initobj,homedat)
  {
    for(let x=0; x<homedat.length;x++)
    {
      let singdat = homedat[x];
      $(initobj.parentdivclass).append('<div class="sing-list w-clearfix"><div class="img-wrap"><img src='+singdat[2]+'loading="lazy" alt="" class="listing-img"></div><div class="listing-det"><h2 class="listing-head">'+singdat[0]+'</h2><p class="listing-parag">'+singdat[1]+ '</p></div></div>');
    }
    $(initobj.elementdivclass)[0].remove();
    $(initobj.parentdivclass).show();
    $(initobj.emptylist).hide();
  }   
}

.section {
  padding-top: 40px;
  padding-bottom: 40px;
}

.main-div, .main-div2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.sing-list, .sing-list2 {
  width: 30%;
  padding-right: 1%;
  padding-left: 1%;
}

.img-wrap {
  position: relative;
  width: 100%;
  padding-top: 80%;
}

.listing-img {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<section class="section">
  <div class="w-layout-blockcontainer w-container">
    <h1 class="heading">SheetsCMS</h1>
    <div class="empty-list" style="display: none;">
      <div>no items to display</div>
    </div>

    <h2 class="heading">List a</h2>
    <div data-sheets-cms="" class="main-div" style="">
      <div class="sing-list w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg?loading="lazy"" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="listing-head">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>

    <h2 class="heading">List b</h2>
    <div data-sheets-cms="" class="main-div2" style="">
      <div class="sing-list2 w-clearfix">
        <div class="img-wrap">
          <img src="https://thealterreal.com/images/womens-home-1-p-800.jpg?loading="lazy"" alt="" class="listing-img">
        </div>
        <div class="listing-det">
          <h2 class="listing-head">CONTEMPORARY MASTERPIECE</h2>
          <p class="listing-parag">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Thiết kế website giá rẻ

Danh mục

Using Google Sheet as CMS and filter accordingly