Customisation pricing widget
- Select your desired product.
- Select the colour.
- Select quantity.
- Press Get Price to show your quoted price and a price breakdown.
Here’s a simple explanation of how the code functions:
- Product Selection: When a user visits the page, they see a dropdown menu to select a product. The available products are automatically loaded from an external database using JavaScript, so the list is always up to date.
- Variant and Quantity Selection: After choosing a product, another dropdown appears, allowing the user to select a variant (like color or size). Once they pick a variant, they can choose the quantity they want to order from predefined options.
- Fetching Prices: After the user makes their selections, they click a button to "Get Price." The code then retrieves detailed pricing information—like the cost per unit and total cost—based on what they’ve chosen.
- Displaying Prices: The pricing details are immediately displayed on the page, showing the customer exactly how much their selection will cost, including any special charges like engraving costs.
The code is designed to be responsive, meaning it works well on all devices, and only affects this specific widget, leaving the rest of the site unchanged. It's a simple, user-friendly tool that gives customers instant pricing information.