Connecting buttons inside repeater to CMS dataset on (item) page

Question:
:red_question_mark: Can buttons inside a repeater have individual click actions listed inside dataset? Or do only buttons outside repeaters cooperate with datasets?

Product:
Wix Studio

What are you trying to achieve:
There are multiple retailers from which to buy the item. I have buttons inside different repeaters (to better manage the look/feel & spacing of buttons). I would like each button to link to the right retailer on each different item page.

What have you already tried:

First I tried adding the buttons & repeaters to the item pages and simply added the link URL to each button as you would with any normal button. But of course this made all the links the same on all the different item pages, regardless of it being a different item.

Next, I created URL fields in the dataset… unwieldy given how many there are and how long and narrow it makes my database, but whatever.

Then, I tried adding the repeater to the entire dataset. This deleted most of my buttons and renamed them with the button name in the first button. I could not add any more buttons to the repeater (manage completely grayed out) and if I changed the name of one button, all three would change. If I selected the “click action connects to” URL, it would make all the buttons identical.

I returned to my original repeater to try connecting it to the item dataset. This removes all the buttons but one and the “manage” is grayed out so I can’t add more buttons to test. I can link that one button to a click action, but this obviously doesn’t solve the problem.

Reverting again to my original repeater buttons, I tried to connect each individual buttons to both the entire dataset & the item dataset. Both deleted all buttons, only showing one that could not be added to:

:double_exclamation_mark: I can find tutorials for repeaters. I can find tutorials for linking buttons to a dataset. I can find no documentation or tutorials for linking buttons to a dataset inside a repeater.

Additional information:
I have been able to successfully link individual buttons outside of a repeater to the (item) dataset and those are working properly on all item pages. But so far cannot figure out how to make the buttons inside repeaters work.

Hi, @J-Ride !!

Have you already read the instructions regarding repeaters? :smiling_face_with_sunglasses:

@onemoretime Yes, as stated in my original post, I can’t find any documentation on using buttons linked to the CMS inside repeaters. Did you not understand my questions? What can I clarify?

If there is a section in your linked Velo area that deals with buttons connected to CMS inside a repeater, please let me know. I can’t find anything on that topic.

How to do it best?

  1. Concentrate first onto your element! What is exactly your ELEMENT? → BUTTON !!!
  2. Now ask yourself if your BUTTON is → INSIDE or OUTSIDE of the → REPEATER ?
  3. Read this —> https://forum.wixstudio.com/t/reset-button-for-elements-on-each-repeater-item/36420**strong text**
1 Like

Thanks @CODE-NINJA - I’m still pretty confused. My buttons are inside the repeater.
I am not using the code or the developer tools. Just the drag & drop repeater, drag & drop button inside that repeater. Then trying to connect repeater & buttons to dataset. It doesn’t work.

How would that code help my situation? I need each button to connect to an OUTSIDE URL (not anything inside the CMS or item page system). URLs are inside the dataset, but please note they are external links:

Here’s an example of someone doing what I’m trying to achieve (she’s on WordPress): https://zarakeane.com/books/dial-p-for-poison/ - each button links to a different format or retailer for their book.

I have a bunch of clients who write books who are sick to death of WordPress’s security issues. I need to be able to turn over a site where they can easily manage all their book links and they can change/update them easily without messing up the page. When I list the buttons in stacks instead of repeaters, I can link them to their respective URLs in the dataset, but then clients can EASILY screw up the whole format by trying to add or delete a button since they have to copy and paste and they don’t want to learn Wix and figure out how stacks work. A repeater would simplify this for them so much.

When I spoke with a Wix expert this morning via chat, they said it wouldn’t be possible to link an external URL listed in the CMS dataset to a button inside a repeater. However! When I went to make a feature request, the system wouldn’t let me because its says this already fixes the problem: CMS: Displaying Collection Content in a Repeater | Help Center | Wix.com - only it doesn’t. When I follow those instructions precisely, I cannot link my buttons to the dataset without losing buttons and the remaining buttons duplicating themselves as in my screenshots above.

Hello. I’m sorry if I gave the impression that I didn’t understand your question. The link I shared contains all the information about what can be done with repeaters in Wix, so I included it just as an initial reference. At the time I responded, I probably thought that given the structure of the data, it might end up needing some code. So my intention was the same as CODE-NINJA’s—I meant to suggest using onItemReady(). I apologize for causing any confusion. :innocent:

I just re-read your initial post, and I realized that there might be a slight misunderstanding regarding the structure of the repeater data. It looks like your repeater only has one button. If there’s only one element, you can only connect one field to it. Since a repeater’s role is to repeat that structure, in the current setup, if you connect it to the Amazon field, everything will end up being Amazon.

1 Like

What you are trying to achieve cannot be done without code.

Very basically - repeaters are supposed to work for ‘rows’ not ‘columns’ where every new row is considered as a new repeater item. What you are trying to achieve here is that you want a new repeater item for each column that has a link. And since in this case your columns are the URL fields, you can’t have a repeater item for each column by simply connecting a dataset.

The only way to do this is by writing code, which shouldn’t be much difficult if you know the basics of working with repeaters in Velo. So take a look at the documentation that other users have provided in the previous posts and try coding it out. Or if you don’t know how to code, static buttons is your last resort.

1 Like

Well, i took a look onto your setup …

Like Phratam already mentioned, this won’t work. He also described you exactly what to change to make it work.

You are generating your DATABASE filling it → HOTIZONTALY, instead you should fill your DATABASE → VERTICALY ! —> (ROWS vs COLUMNS.)

The repeater will read your database → VERTICALY <—, meaning it will scan → EACH of ROWS (like already explained).

Doing that changes, will give you exactly this result…

Let’s generate an absolutely simple example DATABASE…

ID Title URL
1 Introduction to Databases https://example.com/databases-intro
2 SQL Basics https://example.com/sql-basics
3 Advanced SQL Queries https://example.com/advanced-sql
4 Database Indexing https://example.com/database-indexing
5 NoSQL Overview https://example.com/nosql-overview
6 Data Normalization https://example.com/data-normalization
7 ER Diagrams Explained https://example.com/er-diagrams
8 PostgreSQL Tips https://example.com/postgresql-tips
9 MySQL vs PostgreSQL https://example.com/mysql-vs-postgresql
10 MongoDB Introduction https://example.com/mongodb-intro

So connecting your DATASET (REPEATER) to this DATABASE, would mean, that you get 10 ITEMS (URL-BUTTONS in total) → ONE for each of ITEMS.

What does mean → ITEM ← ???
The ITEM is the current selected ROW-DATA, including (ID, TITLE & URL).

Now back to your SETUP!!! Since you mentioned this…

You are using several repeaters. That means you would also have several DATABASES connected trough DATASETS to get everything working.

You wanted to achieve a specific design order, so you have used 3xREPEATERS.

That means you should also have → 3 ← DATASETS connecting to 3 different DATABASES, because each DATASET can connect only to 1-DATABASE.

But at the end, all of those 3 generated DATABASES would have the structure described by Phratam.

My recommendation would be to go always the coding way. With CODE you can do everything, but if you are not very familiar, you will have first to learn the basics.
ONEMORETIME mentioned where to find the right DOCs for studiying.

A simple example you can get in my provided post of how to work with repeaters.

If still not understanable → all you have to do is to type in REPEATER into the search, you will get totns of example and ready solutions for any usecase. In my about 9000-post 65% were about or connected to REPEATERS. So there is a lot of stuff out there.

What i would not recommend to do is →

…or if you don’t know how to code, static buttons is your last resort…

Always generate your website → DYNAMICALLY <—, never go the → STATIC ← way. Every good WEBSITE is driven by a DATABASE in the background.

Thanks for replying @CODE-NINJA and @Pratham I’m definitely not familiar with Velo code, I have only used Wix’s drag and drop tools. So it’ll take me some time to parse all of this.

One point of clarification on the databases columns/vs rows. My above database screenshot was taken scrolling farther to the right so you could see the URLs, but the books themselves ARE set up vertically.

Each book has the following fields:
Number (for sorting purposes), Book title, Image, Long Description, Short Description, Item link, dataset name (mossley-series), Series Title, Series Order. Then their individual product links: Goodreads, Bookbub, Amazon ebook, Apple ebook, Nook ebook… etc, etc. (there are a lot of product links).

So I think I have it set up like you say?

Since you have several URLs → you should use an ARRAY!
The most of your VALUEs are → SINGLE-DATA ←
Your URL-FIELD should be either an ARRAY-FIELD or similar to it.
Similar FIELD could be a → TAG-FIELD ← which also works for multiple values.

Multiple means → you can put more then one items/value into it..

EXAMPLE how ARRAYS work…

  1. Let’s say you have an → ARRAY —> [ … ]
  2. Let be the ID of your ARRAY → ‘myArray’.
    const myArray = [];
  3. Now you want to add a new item to your ARRAY —>
    myArray.push('item-0');
  4. Another way of how to add an item to an array →
    myArray[1] = 'new_Item-1)

So if you would ask for OUTPUT, you would get → 2-items right now from that array…

const myFirstItem = myArray[0]; console.log(myFirstItem);
…showing you the first inserted item in the CONSOLE.

the same for second item you pushed into the array before…
const mySecondItem = myArray[1]; console.log(myFirstItem);

As you can see → THE COUNTING INSIDE AN ARRAY STARTS FROM → 0 <—

This way, your ARRAY could hold thousands of values…


const myARRAY = ['0', '1', '2', '3', '4' ,'5'  .......... '999', '1000']

and to get any of them…

const _501 = myArray[500];
const _887 = myArray[888];

…and so on…

…in your case…

const myURLs = [
   'http://www.google.com',
   'http://www.google.com',
   'http://www.google.com',
   **'http://www.eBay.com',**
   'http://www.google.com',
   'http://www.google.com',
   'http://www.google.com',
]

…of course holding different URLs.

How to get the url for eBay?

So at the end —> you need only —> 1 <— ARRAY-FIELD to be able to hold all your URLs in one place.

And now a big HINT for you —> What do you think a REPEATER is using to show it’s DATA ???

ARRAYs can also include other/further ARRAYs —> ARRAY INSIDE AN ARRAY

const myArray = [
    'Item1',
    'Item2',
    [0, 1, 2, 5, 9, 77],
    'Item3'
]

You also can have 2-dimensional arrays and so on and so on …

Once you know exactly what are ARRAYS and OBJECTS → you will understand how coding works.

Okay, probably a dumb question since I’m clearly in over my head here, but I can see where I can add an Array field, so it would look something like this? (Only with the correct URLs?)

ALMOST! But you get something in → RED ← indication that something is still wrong!!!
First try to find out what it could be on your own. You are here to learn :upside_down_face:, right?

Already tried the TAGs-FIELD ?

Look at that…


Even telling you → it’s also an ARRAY! To be more precise → an Array-String!

Could there be also an OBJECT-FIELD out there? :thinking:

And what is JSON ? :thinking:

Sorry, if i make you deep-diving into the world of CODE (but neccessary) :grin:
Your adventures has just begun!!!

And when you are done!!! —> Read this —>

Absolutely made for you. (it covers 100% of your issue) !!!

Don’T forget to like it, if you really liked it :upside_down_face:

@CODE-NINJA Okay, pounding headache here. Before I delve any deeper into this Greek you call code, is it going to be possible for the different items within the same dataset to display different buttons? For example, if one book has ‘wide’ distribution with a bunch of links & formats, another book might be exclusively listed with just one retailer. And another book might not have the audiobook out yet, so can that section be hidden?

Using that example above, this book in this author’s series is “wide” with many retailer links: https://zarakeane.com/books/dial-p-for-poison/ While this other book in her same series isn’t listed as many places, or in as many formats: https://zarakeane.com/books/to-hatch-a-thief/

And if I can work all of this out in code, will it be easy for other authors to update and change/update links on different books or add new series? Because if they also have to learn all this code, then I’m not sure this will work as an author service.

First of all → everything is possible if you do it byCODE <—.
For CODED-SOLUTIONS there are almost → ANY-BOUNDARIES.

What you are describing is a simple Object including arrays, not even.

And yes, once setted up by code and connected to database → you won’t need any maintanance anymore, because generated solution by CODE → are a way more flexible and dynamic then any provided solution out of the Wix-Box.

You must understand, that all of Wix-Elements → are also JUST CODED :wink:

And if I can work all of this out in code, will it be easy for other authors to update and change/update links on different books or add new series? Because if they also have to learn all this code, then I’m not sure this will work as an author service.

Once your setup is ready and working bugfree, you can simply adjust and modify all your data …

  1. Either directly inside of your DATABASE, just by generating new content.
  2. Generating a FRONTEND-TEMPLATE, where you can do so (template will be just the visualisation reflected by the database).

As conclusion, WEBSITE without a DATABASE working at BACKGROUND → is no real Website.