Vorbly Code | WIX REPEATER ANIMATE INDIVIDUAL ITEMS

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER ANIMATE INDIVIDUAL ITEMS

Need to animate individual items in your Wix Repeater? For example, allowing customers to select quantity of products after they click on "Add To Cart" button. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/3

THE ELEMENTS

The Page

Repeater: #repeater1

  • Product Name: #name

  • Product Description: #description

  • Price: #price

  • Quantity Available: #stock

  • Add To Cart Button: #button1

  • Quantity Input Field & Buttons: #group1

The Database

Create a database: Products (dataset1)

  • Product Name: name

  • Product Description: description

  • Price: price

  • Quantity Available: stock

Then link fields to your repeater.

THE CODE

Page Code

$w.onReady(function () {

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

        $w("#button1").onClick(async (event, $w) => {

 

            $w('#button1').hide();  // "ADD TO CART" button //

            $w('#group1').show();  // Quantity input fields and buttons //

 

        });

    });

 

});

Negative Example

// DO NOT USE THIS - All items will be animated //

 

$w.onReady(function () {

 

            $w('#button1').hide();  // "ADD TO CART" button //

            $w('#group1').show();  // Quantity input fields and buttons //

});

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP