Add to Cart Gallery

//-------------Imports-------------//  import wixWindow from 'wix-window';  //-------------Global Variables-------------//  // Available colors. const colorPicker = ['red', 'pink', 'yellow']; // Map of product data. let productsMap = {};  //-------------Repeater Setup-------------//  // Set up each item in the products repeater as it is loaded. export function productsRepeater_itemReady($w, itemData, index) {   // Create a product object from the current item's data by calling the createProductObject() function. let product = createProductObject(itemData); // Add the newly created product to the global product map. productsMap[product.productId] = product;   // Set the item's image to the main image from the product object. $w('#image').src = product.mainImage.src; // Set the item's price to the price from the product object. $w('#price').text = product.price; // Set the item's name to the name from the product object. $w('#productName').text = product.name;   // If the site is being viewed on a mobile site: if (wixWindow.formFactor === 'Mobile') { colorPicker.forEach(color => { $w(`#${color}`).show(); }); $w('#cartButton').show(); } else { // Set the items's hover functionality by calling the initProductHover() function and passing it a selector scoped to the current item. initProductHover($w); // Set the item's direction hover functionality by calling the initDirectionsHover() function   // and passing it a selector scoped to the current item along with the current product object. initDirectionsHover($w, product); } // Set the item's color picker functionality by calling the initColorPicker() function // and passing it a selector scoped to the current item along with the current product object. initColorPicker($w, product);   // Set the action that occurs when a user clicks the "Add to Cart" button for the current item. $w('#cartButton').onClick(() => { // Get the current product's object from the global products object. let productObj = productsMap[product.productId]; // Add the current product to the shopping cart with the selected color. $w("#shoppingCartIcon").addToCart(productObj.productId, 1, { choices: { Color: productObj.colorSelected } }) .then(() => console.log('added!')) .catch(console.error); }); }  //-------------Utility Functions for Repeater Setup-------------//  // Create an object that represents a project from the product data. function createProductObject(productRecord) { let product = { colorSelected: 'red', productId: productRecord._id, productImagesByColor: { red: { front: productRecord.mediaItems[0], right: productRecord.mediaItems[1], left: productRecord.mediaItems[2] }, pink: { front: productRecord.mediaItems[3], right: productRecord.mediaItems[4], left: productRecord.mediaItems[5] }, yellow: { front: productRecord.mediaItems[6], right: productRecord.mediaItems[7], left: productRecord.mediaItems[8] } }, mainImage: productRecord.mediaItems[0], price: productRecord.formattedPrice, name: productRecord.name }   return product; }  // Initialize the product hover functionality. function initProductHover($w) { // Set the action that occurs when the mouse enters a product area. $w('#productContainer').onMouseIn(() => { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Show the color button. $w(`#${colorChoice}`).show(); }); // Show the "Add to Cart" button. $w('#cartButton').show(); });   $w('#productContainer').onMouseOut(() => { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Hide the color button. $w(`#${colorChoice}`).hide(); }); // Hide the "Add to Cart" button. $w('#cartButton').hide(); }); }  // Initialize the color picker functionality for a product. function initColorPicker($w, product) { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Set the action that occurs when that color's corresponding button is clicked. $w(`#${colorChoice}`).onClick(() => { // Get the current product's object from the global productsMap variable. let productObj = productsMap[product.productId]; // Set the product objects selected color to the color that was clicked. productObj.colorSelected = colorChoice; // Set the product image to the frontal image from the product object that corresponds to the color that was clicked.   $w('#image').src = productObj.productImagesByColor[colorChoice].front.src; }); }); }  // Initialize the direction hover functionality for a product. // Each product has a transparent box on the left third and right third of the product image.  function initDirectionsHover($w, product) { // Local variables: let productObj; let colorSelected; const directions = ['left', 'right'];   // For each direction in the directions list: directions.forEach(direction => { // Set the action that occurs when the user mouses into the box on that side of the image. $w(`#${direction}Box`).onMouseIn(() => { // Get the current product object. productObj = productsMap[product.productId]; // Get the color that is currently displayed. colorSelected = productObj.colorSelected; // Set the product image to be the image for the current product // with the selected color facing the direction that the mouse entered.   $w('#image').src = productObj.productImagesByColor[colorSelected][direction].src; }); // Set the action that occurs when the user mouses out of the box on that side of the image. $w(`#${direction}Box`).onMouseOut(() => { // Get the current product object. productObj = productsMap[product.productId]; // Get the color that is currently displayed. colorSelected = productObj.colorSelected; // Set the product image to be the image for the current product with the selected color facing forwards.   $w('#image').src = productObj.productImagesByColor[colorSelected].front.src; }); }); }

//-------------Imports-------------//  import wixWindow from 'wix-window';  //-------------Global Variables-------------//  // Available colors. const colorPicker = ['red', 'pink', 'yellow']; // Map of product data. let productsMap = {};  //-------------Repeater Setup-------------//  // Set up each item in the products repeater as it is loaded. export function productsRepeater_itemReady($w, itemData, index) {   // Create a product object from the current item's data by calling the createProductObject() function. let product = createProductObject(itemData); // Add the newly created product to the global product map. productsMap[product.productId] = product;   // Set the item's image to the main image from the product object. $w('#image').src = product.mainImage.src; // Set the item's price to the price from the product object. $w('#price').text = product.price; // Set the item's name to the name from the product object. $w('#productName').text = product.name;   // If the site is being viewed on a mobile site: if (wixWindow.formFactor === 'Mobile') { colorPicker.forEach(color => { $w(`#${color}`).show(); }); $w('#cartButton').show(); } else { // Set the items's hover functionality by calling the initProductHover() function and passing it a selector scoped to the current item. initProductHover($w); // Set the item's direction hover functionality by calling the initDirectionsHover() function   // and passing it a selector scoped to the current item along with the current product object. initDirectionsHover($w, product); } // Set the item's color picker functionality by calling the initColorPicker() function // and passing it a selector scoped to the current item along with the current product object. initColorPicker($w, product);   // Set the action that occurs when a user clicks the "Add to Cart" button for the current item. $w('#cartButton').onClick(() => { // Get the current product's object from the global products object. let productObj = productsMap[product.productId]; // Add the current product to the shopping cart with the selected color. $w("#shoppingCartIcon").addToCart(productObj.productId, 1, { choices: { Color: productObj.colorSelected } }) .then(() => console.log('added!')) .catch(console.error); }); }  //-------------Utility Functions for Repeater Setup-------------//  // Create an object that represents a project from the product data. function createProductObject(productRecord) { let product = { colorSelected: 'red', productId: productRecord._id, productImagesByColor: { red: { front: productRecord.mediaItems[0], right: productRecord.mediaItems[1], left: productRecord.mediaItems[2] }, pink: { front: productRecord.mediaItems[3], right: productRecord.mediaItems[4], left: productRecord.mediaItems[5] }, yellow: { front: productRecord.mediaItems[6], right: productRecord.mediaItems[7], left: productRecord.mediaItems[8] } }, mainImage: productRecord.mediaItems[0], price: productRecord.formattedPrice, name: productRecord.name }   return product; }  // Initialize the product hover functionality. function initProductHover($w) { // Set the action that occurs when the mouse enters a product area. $w('#productContainer').onMouseIn(() => { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Show the color button. $w(`#${colorChoice}`).show(); }); // Show the "Add to Cart" button. $w('#cartButton').show(); });   $w('#productContainer').onMouseOut(() => { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Hide the color button. $w(`#${colorChoice}`).hide(); }); // Hide the "Add to Cart" button. $w('#cartButton').hide(); }); }  // Initialize the color picker functionality for a product. function initColorPicker($w, product) { // For each color defined in the global colorPicker variable: colorPicker.forEach(colorChoice => { // Set the action that occurs when that color's corresponding button is clicked. $w(`#${colorChoice}`).onClick(() => { // Get the current product's object from the global productsMap variable. let productObj = productsMap[product.productId]; // Set the product objects selected color to the color that was clicked. productObj.colorSelected = colorChoice; // Set the product image to the frontal image from the product object that corresponds to the color that was clicked.   $w('#image').src = productObj.productImagesByColor[colorChoice].front.src; }); }); }  // Initialize the direction hover functionality for a product. // Each product has a transparent box on the left third and right third of the product image.  function initDirectionsHover($w, product) { // Local variables: let productObj; let colorSelected; const directions = ['left', 'right'];   // For each direction in the directions list: directions.forEach(direction => { // Set the action that occurs when the user mouses into the box on that side of the image. $w(`#${direction}Box`).onMouseIn(() => { // Get the current product object. productObj = productsMap[product.productId]; // Get the color that is currently displayed. colorSelected = productObj.colorSelected; // Set the product image to be the image for the current product // with the selected color facing the direction that the mouse entered.   $w('#image').src = productObj.productImagesByColor[colorSelected][direction].src; }); // Set the action that occurs when the user mouses out of the box on that side of the image. $w(`#${direction}Box`).onMouseOut(() => { // Get the current product object. productObj = productsMap[product.productId]; // Get the color that is currently displayed. colorSelected = productObj.colorSelected; // Set the product image to be the image for the current product with the selected color facing forwards.   $w('#image').src = productObj.productImagesByColor[colorSelected].front.src; }); }); }


How We Built It

We added three different pairs of sunglasses to our store’s Products. Each pair of sunglasses has three images: one facing forward, one facing right, and one facing left. The order of these images is important because the code that controls the image rotation requires that order.

Each pair of sunglasses also has three color options: red, pink, and yellow.

Creating the Custom Gallery

We added a Sunglasses page and created a custom gallery using a repeater connected to the Products collection. This collection is in the Stores section of the Database.

To create the image rotation effect, we placed a product image in the repeater with one transparent container box over its right side and one over its left side. These containers are then set to change the product image so that it displays either the right or left image of the product when a user hovers over it. The front-facing image is displayed when the visitor is no longer hovering on either container.

The repeater also contains elements that display the product’s name and price, as well as color selectors and an Add to Cart button. All these elements are in another transparent container that also overlaps the product image. These elements are set to be hidden on load, and are displayed only when a visitor hovers anywhere on their container.

The color selectors are set to change the product’s display color, as well as to set the current item to the selected color. So when a visitor clicks Add to Cart, the selected color for that product is added to their cart.