646-979-0291A SASS-based website needed a VistaCreate API integration updated, and also the checkout flow modified. The primary goal was to display a preview screen for users to validate their designs.
The preview screen also shows options for approving the design or continuing editing.
Updates were made related to VistaCreate API integration. Updated API configuration, created design preview for images and PDF preview with custom watermarks.
Added two custom fields to WooCommerce product edit pages which will output as hidden fields on the product pages. These fields are related to template id, and a design format id.
Modified user workflow/checkout flow to include visual preview, approval option that lead to checkout, and continue editing option that reloads editor – all seamlessly without reloading page or redirecting user to another page.
This site is built on the WordPress platform and uses the WooCommerce plugin for eCommerce. The VistaCreate API integration was done as a custom plugin.
Some modifications to the WooCommerce product page and cart page were made within this plugin to keep all customization contained.
One of the goals for this particular modification for showing the design preview is to prevent any page reload or page redirects. The preview display is done as a seamless overlay.
The reload of the editor is also seamless. The only redirect done is when clicking the approval button on the preview window.
More modifications were added for variations. The template id and format id were added as custom fields for each variation. This data was also copied over to the primary template id and format id fields based on a condition that a variation was selected on the product page.
The primary languages used in these modifications include JavaScript, PHP, HTML, and CSS.
Date Completed: 6/30/2022
Demos: https://dev2.webtomail.ca