Table of Content

  1. Overview
  2. Elements
  3. Code
  4. YouTube Tutorial

Overview

“I need a blog website on wix, but I want it to be unique”

Some Random Wix User

How do you answer the question above? You need a calculator. Just kidding. You need your own design knowledge and wix collection. Many wix users may be unaware of the tons of opportunities right on their finger tips to actually having any type of website they deserve. With zero-code, it is possible to have your own custom-built blog website by simply connecting your items to your database.

Wix repeater on the other hand, can easily be customized to suit your taste. You can add whatever element you want and style it just the way you want it to be. In this tutorial, I have edited and styled my repeater by adding image, text, icon elements. Just that? Well, yeah! It is nothing technical, all you need is a good design idea (Which I believe yours could be better). The remaining part of this tutorial will take you through the steps I took at getting this all sorted out. Let’s go!


Elements

First and foremost, let’s talk about the elements we used to display the blog posts. They were briefly mentioned above, but I will be showing you visually what they are and where you can find them.

Repeater

WIX Repeater

Text Element

WIX Text Element

Icon

WIX Icon Elements

Code

The code used in this tutorial is somewhat basic. They are captioned briefly for guidance.

Character limit code
$w.onReady( () => {
  $w("#dataset1").onReady( () => {

    $w("#repeater4").onItemReady( ($item, itemData, index) => {
      let theItem = itemData.description;
      var shortDescription = theItem.substr(0,115);
      $item("#text25").text = shortDescription + "...";
    
		});

  } );
  
} );

// Sports Character Limit
$w.onReady( () => {
  $w("#dataset3").onReady( () => {

    $w("#repeater2").onItemReady( ($item, itemData, index) => {
      let theItem = itemData.description;
      var shortDescription = theItem.substr(0,115);
      $item("#text11").text = shortDescription + "...";
    
		});

  } );
  
} );

// Politics Character Limit
$w.onReady( () => {
  $w("#dataset2").onReady( () => {

    $w("#repeater3").onItemReady( ($item, itemData, index) => {
      let theItem = itemData.description;
      var shortDescription = theItem.substr(0,115);
      $item("#text18").text = shortDescription + "...";
    
		});

  } );
  
} );

Copy and paste the code in your page code section and replace the following element IDs with yours;

  • dataset1 – ID of the dataset connecting the first repeater
  • repeater4 – First repeater
  • text25 – Text element of the description

—do this for the other datasets, repeaters and text elements

Replacing the IDs

Collapsing Element Code

 
function toggleFold(index) {
    let $fold = $w('#fold' + index);
    let $arrowDown = $w('#arrowDown' + index);
    let $arrowRight = $w('#arrowRight' + index);
    // toggle the fold at the index
    if ($fold.collapsed) {
        $fold.expand();
        $arrowDown.show();
        $arrowRight.hide();
    }
    else {
        $fold.collapse();
        $arrowDown.hide();
        $arrowRight.show();
    }
    // collapse the other folds
    [1,2,3,4]
        .filter(idx => idx !== index)
        .forEach(idx => {
            $w('#fold' + idx).collapse();
            $w('#arrowDown' + idx).hide();
            $w('#arrowRight' + idx).show();
        })
}
 
export function box5_click(event) {
    toggleFold(1);
}
 
export function box7_click(event) {
    toggleFold(2);
}
 
export function headerBox3_onClick(event) {
    toggleFold(3);
}
 
export function headerBox4_onClick(event) {
    toggleFold(4);
}
 
 
 


YouTube Tutorial

https://www.youtube.com/watch?v=gwMeZgDvvp8
Subscribe

Leave a Reply

Your email address will not be published. Required fields are marked *