Σ Sigma Hosting is mainly a video tutorial website

Σ Sigma Hosting is mainly a video tutorial website that make it easier for you to search within the transcript of videos for solutions of problems you might face during your journey in dealing with different webhosting companies. So, we are very sorry if the text is not well organized and we may work on it in the future but for now we hope you get the benefit mainly from the video then you may need to have a look on the transcript. Thanks for your understanding 🙂

hi today I'll show you how to use a gallery or repeater to fully customize your online store with corvid api's customers will be able to view your products from multiple angles choose from several colors and add items to their cart right from your gallery or repeater before you begin make sure corvid is enabled then click my store on the left to view and manage your products choose a product from your store for this example we've added a pair of sunglasses that come in different colors the product images are grouped by color and angle next choose a gallery or repeater to showcase your products in this example we'll use a repeater go to add lists and grids and select a repeater keep in mind all images and text in your repeater are placeholders until you connect to your products database from the properties panel change the ID of the repeater to products repeater this will be used later in your code now edit the design of your repeater so it looks exactly the way you want when you're done select the image then from the properties panel change its ID to image next select the text for your product name from the properties panel change its ID to product name then select the product price change its ID to product price select the entire product container and change its ID to product container add a button to let customers add products to their cart directly from the repeater go to Add button and choose the one you like change its ID to Cart button then add three icon buttons to show your color options go to add button and scroll down to icon buttons customize the button colors to match your products select all the buttons and click group elements drag this group into your container now when customers select a color your product image will change next change the ID of each individual button to its color red pink and yellow then change the idea of the group to group color picker you can hide the color picker and Add to Cart button so they only appear when customers hover over a product go to the properties panel and check the box hidden on load keep in mind you need to do this for each element finally add a box to the right of your repeater customize your box so it's transparent then change its ID to right box when you're done copy it drag it to the left and change its ID to left box when customers hover over these boxes they'll see different angles of your product now your repeaters all set up then add a data set go to add database and select data set click manage data set and connect it to your products collection next connect your repeater to the stores products data set to start adding functionality to your repeater open the code panel at the bottom of the page define global variables to match your products with an ID from the color picker the products map variable is a JavaScript object that saves transformations of Product data this simplifies the way your repeater is built and sends the correct item to the add to cart' function next use the on item ready event so each product loads in your repeater for each product a record will be created with a product object and saved to the global products map now add the create product object function this function gets a record from the stores products collection and creates an object with specific information like selected color or price to display in a repeater then set the main image price and name from the product object to add hover functionality to your products call the init product hover function and init direction hover function keep in mind you'll add different functionality for mobile since there's no hover with the init product hover function the color picker and Add to Cart buttons will only appear when customers hover over the product otherwise they'll remain hidden then use the init directions hover function this function changes the product images as customers hover over the right and left boxes in your repeater to add functionality to your color picker use the init color picker function set the on click event to display product images selected by customers this function will save the customers color choice to the global products map object then set the behavior for your Add to Cart button when customers click on this button the product object will be called from the global products map by the matching product ID the selected product and color will be added to the cart click preview to see how it works the repeater displays all your products when you hover over an image you can view the item from different angles select the color you want and buy it in one click now you're ready this video is always here so come back and watch it again for more help you can also visit our resources page for tutorials articles example code and more .

Video Discription

To learn more visit:

Learn how to use a gallery or repeater to fully customize your online store. In this video, we’ll use Corvid APIs so customers will be able to view products from multiple angles, choose from several color options and add items to their cart—right from a repeater.

About Corvid:
Corvid is an open development platform that lets you build advanced web applications. With serverless computing and hassle-free coding, you can manage all your content from integrated databases, add your own code in the built-in IDE or work in your own environment, and connect to 100s of APIs. Plus, you get total design freedom from the Wix Editor and optimized business applications—all in one integrated platform. Build, manage, deploy and scale your next web project with Corvid.

Corvid—Accelerated Development of Web Applications

About Wix:
Create a stunning, professional website.

With Wix, the possibilities are endless. You can create any kind of website for yourself or others. Choose a template or start from scratch. Push the limits with advanced design features. Add your own fonts and bring your site to life with video backgrounds, parallax scroll, retina ready image galleries, and more. Wix offers countless professional features – from an online booking system and online store to a beautiful blog and SEO tools.

 

Leave a Reply