Module Functionality Impacts in BigCommerce

Product Listing Page

Product listing page will show the Personalized products where the product will be having a ‘Personalize’ button instead of an Add to Cart button so that the end user can click on it and go to the product detail page.

To change “Add to cart” button with “Personalize” button , follow the following steps:

Go to the template Source code window and open the template file HomeNewProductsItem.html.
Edit the below highlighted code in this :

<div class="ProductActionAdd" style="display:block;"> 

        <a href="%%GLOBAL_ProductURL%%" class="btn icon-%%GLOBAL_ProductAddText%%" title="%%GLOBAL_ProductAddText%%"> Personalize </a>

    </div> <!-- %%GLOBAL_HideActionAdd%%   →

Also , go to the CategoryProductsItem.html template file and edit the below highlighted code:

<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">

<a href="%%GLOBAL_ProductURL%%" class="btn icon-%%GLOBAL_ProductAddText%%" title="%%GLOBAL_ProductAddText%%">Personalize</a>  </div>

Personalize button will redirect the product to the Personalization page where the end user is able to customize the product.

Product Detail Page

Product details page will show the Product details.

We have to hide this whole product details and show artifi personalization iframe div on that place.

To achieve this task, go through the following steps:

Go to the template source code window
Open ProductThumbImage.html and edit the below-highlighted code

<div class="ProductThumbImage" style="display:none;">

<a rel="prodImage" style="margin:auto;" href="%%GLOBAL_InitialZoomImage%%"  onclick="%%GLOBAL_TinyImageClickJavascript%% return false;">

<img class="cloudzoom" src="%%GLOBAL_ThumbImageURL%%" alt="%%GLOBAL_ImageDescription%%" title="%%GLOBAL_ImageDescription%%"/>

        </a>

</div>

Now , go to the productaddtocart.html file and put the whole code in the div. i.e hide the whole code.

Now, goto the Productdetails.html file and put the Iframe div. i.e put the below highlighted div

<div class="left-content">

<span style="font-weight:bold; font-size:20px;">%%GLOBAL_ProductName%% </span>   

<!-- <span class="ProductPrice VariationProductPrice" style="font-size:20px; margin-left:20px">%%GLOBAL_ProductPrice%%</span>  --> 

          <div id="iframeDiv">     </div>

          </div>

Personalize Product Detail Page

Once clicked on the personalized button, the personalization detail page will open where the user can customize with the various options provided (Text, Options, Graphics, Snapshots, etc) by Artifi engine. After customizing, the user is able to add the product into the cart.

Personilized product.jpg

To achieve the above task go through the following steps:

Go to the template source code window and open template file ProductDetails.html.
Put the following javascript code in the page

<script type="text/javascript"src="http://demo1admin.artifi.net/Script/jquery-1.7.1.js">

</script>



<script src="http://demo1designer.artifi.net/Script/SASIntegration/ArtifiIntegration.js">

</script>        

<script type="text/javascript">



Artifi.Initialize('%%GLOBAL_SKU%%', 11, 11,"iframeDiv","a9e31d6c-3532-4fa5-9c78-69ec1a660e64",true, 1012,605);

 

      if (window.addEventListener) {

        addEventListener("message", receiveMessage, false);

    } else {

        attachEvent("onmessage", receiveMessage);

    }

 

     

  function receiveMessage(event)

  {

    

     var eventObj = JSON.parse(event.data);

       

     var action = eventObj.action;

     // action represents the type of action performed for posting the iframe.

    

 if (action == undefined || action == "undefined") return;

    

     var designobj = eventObj.data.savedDesigns[0];

      sessionStorage.designobj = event.data;

    // alert(designobj);

    

     switch (action)

     {

         case Artifi.Constant.addToCart:

             {

                  var data = eventObj.data;

                  var a = 0; 

                  $('.productAttributeValue input').each(function(e){$(this).attr('id',a);a++;  });

        

                  document.getElementById("0").value = data.custmizeProductId;

           /* document.getElementById("1").value = designobj; */

             

                   document.getElementById("productDetailsAddToCartForm").submit();

             }

      }

   }

Shopping Cart Page and Mini Cart

Personalized products added to the cart will always have a unique design. Means each time, the end-user personalizes and adds any product to cart; the product will appear in a new unique row. Even if the same product is personalized twice, it will act as different products into the cart with its unique personalized design.

Products added normally using Add to cart functionality without personalizing will behave as per Bigcommerce default functionality.

An end user would be able to edit personalized products through cart where the product can be re-customized as per requirement and will get updated with its new design.

Shopping cart.jpg

Problem Faced

Option set values (i.e customized-product-id and saved-design) is viewable in the Cart.php page but it is not accessible through code because the cart.php file is not accessible to store developers.

Remaining Work

1) View Customized image on cart The user can see personalized product image in shopping cart.php page.

2) Preview popup window of Design Product

The user can preview personalized products on a popup in the cart.php page.