Is it possible to show color and size options when hovering over a product?

Ask the community
,
1

Is it possible to show those little color option circles and size options when hovering over a product on the shop page?

And then also when you click on the color circle, that the connected image shows?

Like this;

2032×1132 141 KB

2

I do not work with such APPs,

but this looks as if it could be what you are searching for…

import wixStores from 'wix-stores';
2
3// ...
4
5let productId = // get product ID
6let choices = {
7  "Size": "Large"
8};
9
10wixStores.getProductOptionsAvailability(productId, choices)
11  .then( (availability) => {
12      let available = availability.availableForPurchase;  // false
13      let options = availability.productOptions;          // see below
14      let mainMedia = availability.mainMedia;
15      let mediaItems = availability.mediaItems;
16      let selectedVariant = availability.selectedVariant; // null
17  } )
18  .catch( (error) => {
19    console.log(error);
20  } );
21
22/*
23 * options:
24 *
25 * "Size":{
26 *   "optionType":"drop_down",
27 *   "name":"Size",
28 *   "choices":[
29 *     {
30 *       "value":"Small",
31 *       "description":"Small",
32 *       "inStock":true,
33 *       "visible":true
34 *     },
35 *     {
36 *       "value":"Large",
37 *       "description":"Large",
38 *       "inStock":true,
39 *       "visible":true
40 *     }
41 *   ]
42 * },
3

Thanks for this! How could i try this out? I’m not familiair with code…

4

@victorvandenbos

You can do a function of this code-snipet, like this…

import wixStores von  'wix-Stores' ; 

function myFunction() {
  let productId = // get product ID <-- here the right productID
  let choices = {
    "Size": "Large"
  };

  wixStores.getProductOptionsAvailability(productId, choices)
  .then( (availability) => {
      let available = availability.availableForPurchase;
      let options = availability.productOptions;      
      let mainMedia = availability.mainMedia;
      let mediaItems = availability.mediaItems;
      let selectedVariant = availability.selectedVariant; 
  })
  .catch( (error) => {
    console.log(error);
  });
}

And start the code with an button-onClick-event…

export function button1_click(event) {myFunction(), console.log("Process started"))

But as i already said, i do not work with such APPs, so you will have to modify it for your own project at your own. For me it is not possible to do it without seeing your project, sorry.