Repeater Image click selects option on dropdown

Ask the community
,
1

Hi,

Having a little trouble with getting over the last hurdle with this bit of code i’ve created and cant quite figure out what i’ve got wrong.

I want visitors to be able to click on the images in the categories repeater containing images and and titles (furniture, bars, accessories etc).

I’ve got the code to a point when clicking on the repeater item image will change the catagory dropdown accordingly but for some reason clicking every images selects ‘furniture’ on the dropdown can anyone explain why this might be?

Code:

$w.onReady(function () {
});

export function imageX10_click(event, $w) {
  categoryImageFilter();
  subCategoryDDFilter();
}

function categoryImageFilter (){
  $w("#repeater3").onItemReady( ($w, itemData, index) => {
    $w("#imagex10").image = itemData.image
    $w("#text22").text = itemData.category;
       $w("#dropdown2").value = itemData.category
    });
    $w("#dataset5").setFilter( wixData.filter()
  .eq("category", $w("#dropdown2").value)
  );
}

function subCategoryDDFilter (){
  $w("#dataset5").setFilter( wixData.filter()
  .eq("category", $w("#dropdown2").value)
  );
}

Link to page on website:
https://www.velvetliving.co.uk/blank-2-1

Any help would be massively appreciated in getting over this last hurdle.

Thanks,
Owen

2

Try:

$w.onReady(function () {
$w("#repeater3").onItemReady( ($i, itemData, index) => {
    $i("#imagex10").image = itemData.image;
    $i("#text22").text = itemData.category;
       $i("#dropdown2").value = itemData.category;
	$i("#imageX10").onClick(event => {
		 categoryImageFilter($i("#dropdown2").value);
})
    });
});

function categoryImageFilter (cat){
    $w("#dataset5").setFilter( wixData.filter()
  .eq("category", cat)
  );
}

Or something like that. (I don’t really understand the details of your idea, but you can modify the code)

3

Hi J.D,

Gave this a try without much luck.

I seem to have reached a stage now where the coding works and behaves as it should. However on clicking the repeater item image the dropdown then changes to the text in the last repeater item rather than the one I have clicked on.

Code is currently as below:

// IMAGE CLICKS

// Category Image click

export function imageX10_click(event, $w) {
  categoryImageFilter();

    $w("#dataset5").setFilter(wixData.filter()
     .contains("category", $w('#dropdown2').value))

    .then((results) => {
      console.log("Dataset is now Filtered");
   $w("#repeater2").data = results.items;
     })
  .catch((err) => {
   console.log(err);
  });      
 
  $w("#section13").expand();
  $w("#repeater2").expand();
}


function categoryImageFilter (){
  $w("#repeater3").onItemReady( ($w, itemData, index) => {
    $w("#imagex10").image = itemData.image;
    $w("#text22").text = itemData.category;
       $w("#dropdown2").value = itemData.category;
    });
}



// Sub Category Image click

export function imageX15_click(event, $w) {
  subCategoryImageFilter();

    $w("#dataset1").setFilter(wixData.filter()
     .contains("subCategory", $w('#dropdown1').value))

    .then((results) => {
      console.log("Dataset is now Filtered");
   $w("#repeater1").data = results.items;
     })
  .catch((err) => {
   console.log(err);
  });      
 
  $w("#section16").expand();
  $w("#repeater1").expand();
}
function subCategoryImageFilter (){
  $w("#repeater2").onItemReady( ($w, currentItemData, index) => {
    $w("#imagex15").image = currentItemData.image;
    $w("#text27").text = currentItemData.subCategory;
       $w("#dropdown1").value = currentItemData.subCategory;
    });
    $w("#dataset1").setFilter(wixData.filter()
  .eq("subCategory", $w("#dropdown1").value)
  );
}
4

@owen30059 this is not what I posted above. Your code can’t work.