After saving a customized product or adding the product to cart, end user may wish to see the preview of the customized product before they buy, for this purpose, Artifi provides the method Artifi.PreviewPopup() to show the preview of the customized product via a popup.
The PreviewPopup method is used to open a preview of a saved product (Product which is customized or added to cart) in a popup. Here, enduser cannot modify the design.
This method can be used when a user customizes a product and adds that product to the cart, and may want to see the final design of the product.
You have to provide the link to the user to view a preview of the product and call the "PreviewPopup" method on the click event of the link. When the user will click on the link, it will open a preview of the product in a popup.
For example, You have the html link for the “Preview” action as
<a onclick="ShowPreview();" href="javascript:void(0);">Preview</a>
You can perform the action on the button as well. Write the javascript code to call the PreviewPopup method of the Artifi in
“ShowPreview()” method.
<script language="javascript">
// Implement the javascript method
function ShowPreview()
{
// Call the Artifi.PreviewPopup method to show the preview of the
customized
// product.
// syntax:
// Artifi.PreviewPopUp (integrationValues)
// Where, integrationValues is the collection of productCode, websiteId,
// userId, isGuest, width, height, designId, sku, webApiclientKey,
// extraQueryString and cartQueryString
// usage:
var integrationValues = {};
integrationValues.productCode = "ombrechevroncase" ;
integrationValues.websiteId = “26”;
integrationValues.webApiclientKey = “actualkeyhere”
integrationValues.userId = ”123”;
integrationValues.isGuest = true;
integrationValues.width = “100%”;
integrationValues.height = “100%”;
integrationValues.designId = 1632;
integrationValues.sku = “blue variant”;
Artifi.PreviewPopUp (integrationValues);
// parameter description:
// integrationValues is the object and will collect data for productCode,
// websiteId, userId, isGuest, width, height, designId, sku,
// webApiclientKey, extraQueryString and cartQueryString
// "ombrechevroncase" represents the code of the product whose
// preview is to be shown “true” represent the enduser who customized
// the product is the guest user of your ecommerce website.
// 800 and 600 is the width and height of the popup that is to be shown
and
// “blue variant” is the sku of the particular variant of the product which is
// saved or added to the cart.
// 1632 is the id of the customized product which generated by the Artifi
on
// adding product to cart or on saving the customized product.
}
</script>
Preview of the customized product will be a simple popup without any form. The user cannot modify the design of the product. To edit the design or re-customize the product, you have to call the Artifi. Initialize method and specify the customized product’s Id in “designId” optional parameter. This will open the customized product in the Artifi editor and the user will be able to redesign the designed product. For this action, you have to create a link for editing the customized product and call the Artifi. Initialize method with design id on the click of the link.