[SOLVED] Store collections in repeater on dinamic Collection page + Costum AddToCart button

Below is the code that solved all the questions. Thank you all for your help and support and separately @iloveditorx for the detailed video!

import { cart } from 'wix-stores';

$w.onReady(function () {

    $w("#YourRepeater").onItemReady(($item, itemData, index) => {
        $item('#additionaltext').html = itemData.additionalInfoSections[0].description;
        $item('#pricetext').text = (itemData.price + ' ₽');
    });

    $w('#addToCartbutton').onClick((event) => {

        let $item = $w.at(event.context);
        let selectedProduct = $item('#YourDataset').getCurrentItem();
        let productId = selectedProduct._id;

    $w('#shoppingCartIcon').addToCart(productId)
        .then(() => {
            console.log("add product ${productId} success");
        })
            .catch((error) => {
            console.log(error);
            });
    });
});

Hello. For several days I have not been able to resolve my issue.


Objective: Create a fully customizable dynamic page with a gallery of products from the repeater and the function of adding a product to the cart in 1 click.


Step 1 Create an empty dynamic Collections page (the URL dataset is created automatically)

Step 2 Add the product gallery repeater and add the following items to the item:

  1. Image - product image - # Image
  2. Text 1 - Product name - # productName
  3. Text 2 - Product Description - # productDescription
  4. Text 3 - Additional product field - # productAdditional
  5. Text 4 - Product Price - # productPrice
  6. Button - Add to cart button - # cartButton

Step 3 Add the Products dataset and filter by the Collections dataset. We connect repeater elements to the fields of the product dataset

We test, everything works. Switching a collection loads the desired products

Step 4 Add the code for the button for adding a product to the cart and the standard cart icon itself

We test, everything works.

Attention, my questions! =)

We have a problem with these two fields: Additional and Price

Additonal - here you need to enter information from the product card

Price - you need the cost of the product in a different format. Remove fractional ones.
350,00₽ » 350 ₽

How can I do it?

I can not place here the code for adding to the cart, who needs it, write to me and I will send it

If the code isn’t too long, you can post a screenshot of your code.

@yisrael-wix Oh, Thanks. Code Screenshot in next comment

Code for adding an item to the cart from the repeater in 1 click

cartbutton — Your button to add to cart

dataset1 — Standard collection of products

shoppingCartIcon — Standard shopping cart icon

@nikitamp3 What is it that you are trying to do? What works (with the code) and what doesn’t?

I don’t understand your code.

let selectedProduct = $item('#dataset1').getCurrentItem();

What do you mean by “an empty dynamic collections page”? What is #dataset1 connected to?

BTW…
This line is wrong:

console.log("add product ${productId} success");

Template literals use the backpack `, and not regular quotes " or tick’:

console.log(`add product ${productId} success`);

@yisrael-wix


Problem 1: It is necessary to assign this field (variable # productweight) a value from the standard collection of Products in wix stores

Problem 2: Assign the price value of the product from the wix store to the Price text (# productprice) and change the number format from 0.00 rubles to 0 ₽ (remove fractional chils and change the currency sign)

@yisrael-wix

Showing problem 1 differently

dont use the cart icon to add to cart. this is deprcated.
use this instead:


Objective: Create a fully customizable dynamic page with a gallery of products from the repeater and the function of adding a product to the cart in 1 click.


Step 1 Create an empty dynamic Collections page (the URL dataset is created automatically)

Step 2 Add the product gallery repeater and add the following items to the item:

  1. Image - product image - # Image
  2. Text 1 - Product name - # productName
  3. Text 2 - Product Description - # productDescription
  4. Text 3 - Additional product field - # productAdditional
  5. Text 4 - Product Price - # productPrice
  6. Button - Add to cart button - # cartButton

Step 3 Add the Products dataset and filter by the Collections dataset. We connect repeater elements to the fields of the product dataset

We test, everything works. Switching a collection loads the desired products

Step 4 Add the code for the button for adding a product to the cart and the standard cart icon itself

We test, everything works.

Attention, my questions! =)

We have a problem with these two fields: Additional and Price

Additonal - here you need to enter information from the product card

Price - you need the cost of the product in a different format. Remove fractional ones. 350,00₽ » 350 ₽

@zeevg Please take a look at the new look. I showed step by step where my problem is going.

@yisrael-wix Please take a look at the new look. I showed step by step where my problem is going.

You need to explain in more detail what you are trying to do.

As I understand it, you want to click on an item in the Repeater and then go to a dynamic page for the selected item. Do you have any code on the dynamic page? How are you displaying the information?

@yisrael-wix No, no click actions need to be created. I want to display the additionalfield of each product in its item in the repeater.

If you ask a question differently. How to transfer any fields from the wix Store dataset to a repeater using a code if the repeater itself is on a dynamic page?

@nikitamp3 You can use the onItemReady() function to render the Repeater, including additional fields that you would like to include.

Wonderful! Could you show an example of code how to pass additionalfield1 value to the repeater?

@nikitamp3 Something like this:

$w("#myRepeater").onItemReady( ($item, itemData, index) => {
   let additionalField1 = $item('#dataset').geCurrentItem().additionalfield1;
   $item("#repeatedElement").value = additionalField1;
   // other repeater item code
});

@yisrael-wix Thanks. I tried your example, but the code stops working already at the beginning

Wix code SDK error: The “onItemReady” function of “Collection” threw the following error: $ item (…). CurrentItem is not a function

@nikitamp3 Make sure that you have a dataset on your page, and that the code uses the name of that dataset.

Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.

@yisrael-wix Of course I changed the variables to my own.

I tried to insert the Product Name according to your method and something worked. The Product Name in the repeater contains the name of the product, but only one and is repeated on all items


We are heading in the right direction! Please don’t quit …