Need advanced help with code to create a multi-option menu for the items I want to sell

[Colter_Fulbright]

I am building my website to sell my boat wrap designs. I have the design part down (as I have 15+yrs experience in Graphic Design) however, I am new to the whole “coding” or back end of it.

For each of my wrap designs (40+) I have a designated page and want to include a custom menu design (one style) that i can add to each wrap design page.

I have included pictures of how I want the menu to function and when you select the “17FT BOAT” button, I want it to display the cost for that size in the cost window. As well as the button selected show in green. So if you select a different size (ie 18FT BOAT) that button will then be highlighted and the value (cost) in the window changes to the cost for that selection.

I hope this makes sense and is something that is possible with this platform.
Thanks for the help!

[CODE-NINJA]

Depends on where you are building your menu. Wix-Stores?
Elaborate more.

Generating such a menu shouldn’T be a big deal for a Wix coder.

You could generate it by using different elements like…

1. MSB (Multistate-Box)
2. REPEATER
3. HTML-COMPONENT
4. CUSTOM-ELEMENT

And if this should be just a static menu, you even can use simple buttons.
But since your description is not detailed enough (you even did not mentioned that you are working on Wix-Stores and this menu maybe should run on ADD-TO-CART-PAGE or PRODUCT-PAGE or whereever and maybe also should be connected to your stores items and also be → DYNAMICALLY ← thinghs go much more CRAZY very fast.

[Colter_Fulbright]

My apologies for not being elaborate enough with what I am trying to accomplish. I put together 2 examples for you in hopes that this will help.

In the first example “practice page 1” I am using selection tags as my options or buttons. This example I am able to accomplish the button selection issue, (only selected button stays lit when clicked upon) however I am unsure of how to tie in the cost that is shown in the container box for that button.

In the second example “practice page 2” I am using individual buttons and am able to get the desired price once button is selected. However, I cant get the button to turn off when another option is chosen.

I am perfectly fine with either one (selection tags, or individual buttons) as long as it works the way its supposed to.

This will be visible on all individual wrap design pages so it wont ever change. But I will be needing to tie it into the wix purchase button and store.

I am not literate when it comes to coding or the terminology, but I am a extremely quick learner. Oh and stubborn lol

Thank You CODE-NINJA for taking the time to reply.

[Colter_Fulbright]

[CODE-NINJA]

Did i understand you right, your main ISSUE is the → ONE-TAG-SELECTION ← at once?

Yes, selection-tags are made for the purpose to be able to make a → MULTIPLE-SELECTION<–, but of course you can change their behaviour by code. I have seen this problem a lot in the past. But shouldn’t the selection-tag element provide settings where you simply can turn it into a → SINGLE-TAG-SELECTOR ← but maybe i am also wrong.

But you can take a look here…

Selection Tags - Single Selection

Hi everyone. I’m a novice in coding so I would love some help with my selections tags. I’ve set up a repeater in a page and used selection tags to filter according using the tutorial from this video. https://www. youtube. com/ watch?v=PRdm7NjOouU Can I make it so that when a visitor clicks a tag, it automatically clears the previous tag as I’m afraid the current setup would be confusing from a customer perspective? I’ve seen other posts in the forum, but nothing I tried worked. This is my …

…or here… a very old post…

Allow Only 1 Selection Tag on Dynamic Page

@zedsickwidit I do everything on Chrome → so for me it works well on Chrome (PC-Edition).

…or here…

Use Selection Tags element with one option at a time without having to unclick the option?

@russian-dima Hi, I am also having the same issue where I’m still seeing content from the previous tag selection. I haven’t used Wix-UI for the dataset (as far as im aware) here is my current code: import wixData from 'wix-data'; const collectionName = 'AllGames'; const fieldToFilterByInCollection = 'gameType'; $w.onReady(function () { setRepeatedItemsInRepeater(); loadDataToRepeater(); $w('#gametags').onChange((event) => { const selectedTags = $w('#gametags').value; …

Ok, i think enough information about the SELECTION-TAG-ISSUE.

Well on my opinion you are making things very complicated, i would use maybe a repeater for this and even having my menu drivven by DATABASE (CMS) what is a way more dynamic and easier to maintain.

Example? Take a look here…

REPEATER-ISSUE-1 | My Site 1

In this example you will see a REPEATER, driven by a DATABASE in the background.
You can modify the repeater design and behavioureasily, for example changing the amount of rows and cols and the type of presentation.

Since i have only 5 items inside my example-CMS → you also see only 5 buttons.
Upscaling CMS to 10 items → would result into 10 buttons generating a secong row set of 5 buttons.

The post connected to this REPEATER you will find here…

Change image when hovering on repeater

Hello - This is the code I used - it is the only code I have ever written in my life. The post you linked to helped me immensely., import wixData from “wix-data”; $w.onReady(function () { $w(“#repeater2”).onItemReady(($item, itemData, index) => { $item("#button2").onMouseIn(() => { $w("#mainimage").src = itemData.image; $w("#mainimage").show(); }); // $item(“#button2”).onMouseOut(() => { // $w(“#mainimage”).hide(); // }); }); wixData .query(“testdata”) .find() .then((resul…

UPGRADED code…

import wixData from "wix-data";
//-----------------[ USER-INTERFACE ]-----------------
const REPEATER = 'repeater1';
const SECTION = 'section1';
const BOX = 'box3';
const IMAGE = 'mainimage';
const BUTTON = 'button1';
const CMS = 'Backgrounds';
//-----------------[ USER-INTERFACE ]-----------------

$w.onReady(async()=> {console.log('Page ready...');
	let repData = await get_CmsData(); console.log('Repeater-Data: ', repData);
	$w(`#${REPEATER}`).data = repData;
    
	$w(`#${REPEATER}`).onItemReady(($item, itemData, index)=> {console.log('Index: ', index);
        console.log('Item-Data: ', itemData);
        $item(`#${BUTTON}`).onMouseIn(()=> {console.log('Mouse-In');
        	$w(`#${IMAGE}`).src = itemData.image;
        	$w(`#${SECTION}`).background = itemData.image;
			//$w(`#${BOX}`).style.backgroundColor = itemData.image;
        });

        $item(`#${BUTTON}`).onClick(()=> {console.log('Click');
			reset_ButtonBGColors();
        	$item(`#${BUTTON}`).style.backgroundColor = 'blue';
        	$w(`#${SECTION}`).background = itemData.image;
			//$w(`#${BOX}`).style.backgroundColor = itemData.image;
        });
  	});  
});

function get_CmsData() {
    return wixData.query(CMS)
    .find()
    .then((results)=> {let items = results.items; console.log('Items: ', items);
        if (items.length > 0) {console.log('Some DATA has been found!!!');
			return items;            
        } else {console.log('DATA is empty!!!');}
    })
	.catch((err)=>{console.log(`ERROR: ${err}`);
		console.log('Something went wrong!!!');
		return [];
	});	
}

function reset_ButtonBGColors() {
	$w(`#${BUTTON}`).style.backgroundColor = 'black';
}

To make the —> SELECTED-BUTTON-EFFECT (blue-button & only clicked one)