Web viewTechnical Manual. Team No-1 (Frenzy) Overview. The Document provides the detailed changes...

Technical ManualTeam No-1 (Frenzy)

Overview

The Document provides the detailed changes made by Team No-1 during their redesigning of the frenzy.me website. The technical manual will act as a guide for future developers working on frenzy.me website to understand the modifications done.

Client enlisted the following task to be performed during the course work.

Core Capabilities worked on

1.) Clothing Tags2.) Shop Widget3.) Shop Similar4.) Sort Functionality

The document contains the list of the files accessed to add the functionalities and the sections of the files modified to achieve the desired result.

Clothing Tags

Code Modification performed on the following documents

1.) Article Runway View

PHP files-

public_html/application/views/article/article_runway.php

{Similar implementation for views:

public_html/applicaton/views/article/article_stylemap.php

public_html/applicaton/views/search/serach_article.php

public_html/applicaton/views/userProfile/user_wall_new.php}

Code-

<div class="img-content" onmouseover="showtags()" onmouseout="hidetags()"> …………….

<div ng-controller="itemDetailCtrl"> //controller used for handing tags

<div class="gallery-tag" onmouseover="hideData()" onmouseout="showData()">//popup window when mouse is hovered on tags

<div class="gallery-tag-inner" ng-click="viewItemDetails(TagedItemDetail,$event)">//image of the item displayed in the popup

<i ng-click="closeItemDetail($event)" class="icon-closeb1"></i>//close button on the top right corner of the popup window

<img thumb-img alt="" style="width:160px; height:190px" ng-if="TagedItemDetail.Images[0].ImageUrl" server="<?php echo IMAGE_SERVER_PATH; ?>" thumb-width="TagedItemDetail.Images[0].Size > 0 ? 190 : 160" thumb-height="TagedItemDetail.Images[0].Size > 0 ? 160 : 190" item="TagedItemDetail.Images[0]" />//displays the image of size 160*190px without cropping it from amazon cloud

<div id="maskdisp" class="mask_runway"></div>//opaque mask on the image to make the price and similar button visible

<aside class="gallery-tag-cost" ng-if="TagedItemDetail.Price!='$0'" ng-bind="TagedItemDetail.Price"></aside>//price displayed on the top-left corner

<a data-rel="Clip’d" ng-if="TagedItemDetail.isclip=='0'" class="button-blk clip-link for-tag-runway for-tag-runway-{{TagedItemDetail.ItemGuID}}" ng-click="clipItem(TagedItemDetail.ItemGuID,$event)" href="javascript:void(0);">

<span>SAVE</span>//top save the article on the user’s profile

</a>

<a data-rel="Clip’d" ng-if="TagedItemDetail.isclip!='0'" class="button-blk clip-link cliped" href="javascript:void(0);">

<span>SAVED</span>//displayed when article is already present in the user profile

</a>

<a class="button-blk" id="button_call"onmouseover="button_color()" onmouseout="button_colorback()" style="background-color:rgba(33,177,255,1)" ng-click="TagedItemDetail.Source!=''?redirectToSource(TagedItemDetail.Source,$event):'javascript:void(0)'">BUY</a>//redirects user to the retailers website

<div class="gallery-tag-similar"> <span class="similar_img"></span><span class="similar" style="margin-top:-2px">Similar</span></div>

</div>//similar button present in the lower left corner of the popup

<div class="gallery-tag-bottom cursor-pointer" ng-click="viewItemDetails(TagedItemDetail,$event)">

<div class="brand1"><aside class="tag-detail" style="word-wrap: break-word;height: auto;" ng-bind="TagedItemDetail.Brand"></aside></div>//Brand of the item

<aside class="title1 tag-detail sm" style="height:39px;margin-top: -2px;" ng-bind="TagedItemDetail.Title"> </aside>//information of the item

</div>

</div>

<div class="runwayImg-block ng-scope" ng-controller="itemDetailCtrl" >//animated tags

<div class="show_tags" onmouseover="hideData()" onmouseout="showData()" >

<i data-ng-repeat="hotSpotTag in runwayArticleTag | filter:filterHotspot" ng-mouseenter="getTagedItemDetail(hotSpotTag.ItemGuID,1)" class="icon-imgtag" data-type="tagtiprunway" ng-style="{'left':hotSpotTag.FromLeft+'%', 'top':hotSpotTag.FromTop+'%'}"></i>//white ring present on the article displayed

<span id="inner_tag"><i data-ng-repeat="hotSpotTag in runwayArticleTag | filter:filterHotspot" ng-mouseenter="getTagedItemDetail(hotSpotTag.ItemGuID,1)" class="icon-imgtag2" data-type="tagtiprunway" ng-style="{'left':hotSpotTag.FromLeft+'%', 'top':hotSpotTag.FromTop+'%'}"></i></span>//black tags present inside the white rings

</div>

<img thumb-img thumb-type="article" ng-click="$parent.viewArticleDetails($parent.runwayArticleDetail)" server="<?php echo IMAGE_SERVER_PATH; ?>" thumb-width=530 thumb-height=610 item="runwayArticleDetail.Images[0]" alt="">//larger image present on which tags are displayed

</div>

</div>

………</div>

Script- (same file)

<script>

window.onload = function() {

//document.getElementsByTagName("body");

if($( '#LoginSessionKey').val() == '' ){

$('body').addClass('bannerSection');

}

$('#inner_tag').hide();

$('#maskdisp').hide();

};

function dim(){

$(".accordion-block").css({"background-color":"rgb(195,195,195)","color":"black"});

$(".image-detail").css({"background-color":"rgb(161,161,161)"});

$(".not-active").css({"pointer-events":"none"});

$(".img-footer-nav").css({"background-color":"rgb(195,195,195)","color":"black"});

}

function closeDim(){

$(".accordion-block").css({"background-color":""});

$(".image-detail").css({"background-color":"#ddd"});

$(".not-active").css({"pointer-events":"auto"});

$(".img-footer-nav").css({"background-color":"","color":""});

}

function hideData()

{

$('.icon-imgtag').hide();

$('#maskdisp').show();

}

function showData()

{

$('.icon-imgtag').show();

$('#maskdisp').hide();

}

function button_color()

{

$('#button_call').css("background-color","rgba(0,115,230,1)");

}

function hide_mask()

{

$('.mask_runway').hide()

}

</script>

CSS file

public_html/application/assets/css/main.css

Fonts

public_html/application/assets/css/Century Gothic

Images

public_html/application/assets/img

2.) Article Detail view

PHP file:

public_html/application/views/article/article_detail.php

Code:

<ul class="articleimg-slider articalDetail" ng-if="itemDetails.length >= 0">

<li data-ng-repeat="article in articleDetail.Images" repeat-done="articlelayoutDone();">

<div class="tagView" onmouseover="show_tags()" onmouseout="hide_tags()">//div of the image on which tags are present

<img thumb-type='article' thumb-img thumb-height=610 thumb-width=530 server="<?php echo IMAGE_SERVER_PATH; ?>" item='article' alt="" title="" />

<div class="show_tags_detail" onmouseover="hide_data()" onmouseout="show_data()">

<i data-ng-repeat="hotSpotTag in article.Tags | filter:filterHotspot" class="icon-imgtag-deail”{{hotSpotTag.ItemGuID}}" data-type="tagtipDetail" ng-style="{'left':hotSpotTag.FromLeft+'%', 'top':hotSpotTag.FromTop+'%'}"> </i>//white rings present on the article image

<span id="inner_tags_detail" style="display:none;"><i data-ng-repeat="hotSpotTag in article.Tags | filter:filterHotspot" class="icon-imgtag-blk {{hotSpotTag.ItemGuID}}" data-type="tagtipDetail" ng-style="{'left':hotSpotTag.FromLeft+'%', 'top':hotSpotTag.FromTop+'%'}" >

//inner black tags present inside the rings

<div class="gallery-tag" ng-controller="itemDetailCtrl" ng-init="populateItemDetail(hotSpotTag.ItemGuID,true)">

//pop up window displayed when hovered on the tags

<div class="gallery-tag-inner"ng-click="viewItemDetails(itemDetail, $event)">

<i ng-click="closeItemDetail($event)" class="icon-closeb-detail"></i>//close button on the top right corner

<img thumb-img item="itemDetail.Images[0]" server="<?php echo IMAGE_SERVER_PATH; ?>" thumb-width=220 thumb-height=220 alt=""/>//image of the item present inside the gallery tag

<aside class="detail_price"><span ng-if="itemDetail.Price!='$0'" class="prduct-cost-price">{{itemDetail.Price}}</span></aside>price of the item displayed on the top left corner

<a data-rel="Clip’d" ng-show="itemDetail.isclip=='0'" class="button-blk clip-link for-tag-runway for-tag-runway-{{itemDetail.ItemGuID}}" ng-click="clipItem(itemDetail.ItemGuID,$event)" href="javascript:void(0);">

<span>SAVE</span>

</a>

<a data-rel="Clip’d" ng-if="itemDetail.isclip!='0'" class="button-blk-saved clip-link cliped" href="javascript:void(0);">

<span>SAVED</span>

</a>

<a class="button-blk" ng-click="itemDetail.Source!=''?redirectToSource(itemDetail.Source,$event):'javascript:void(0)'">BUY</a>

<a class="button-blk" ng-click="itemDetail.Source!=''?redirectToSource(itemDetail.Source,$event):'javascript:void(0)'"><i class="similar_symbol"></i><span class="similar_detail">Similar</span></a>//similar button present on the gallery tag

</div>

<div class="gallery-tag-bottom" >

<aside class="brand2 tag-detail" style="word-wrap: break-word;height: auto;" ng-click="viewItemDetails(itemDetail)" ng-cloak="">{{itemDetail.Brand | cut:true:24:' ...'}}</aside>//brand of the item

<aside class="title2 tag-detail sm " style="height:42px;margin-top: 4px;" ng-click="viewItemDetails(itemDetail)" ng-cloak>{{itemDetail.Title | cut:true:45:' ...'}} </aside>//detail of the item

</div>

</div>

</i></span></div>

</div>

</li>

</ul>

Script:

<script>

window.onload = function() {

//document.getElementsByTagName("body");

};

function button_color()

{


}

function button_colorback()

{

$('#button_call').css("background-color","rgba(33,177,255,0.9)");

}

function show_tags()

{

$('#inner_tags_detail').show();

}

public_html/application/assets/css/main.css

Fonts

public_html/application/assets/css/Century Gothic

Images

public_html/application/assets/img

Shop Similar Queries Front End :-

article_runway.php

<div class="ShopSimilarCheckBox" ng-if = "IsVisible" ng-model="IsVisible" style="z-index:1000;width: 1989px;margin-top:2px;">

<p>&nbsp Show Similar &nbsp

<input id="1" type="checkbox" ng-disabled="FirstCheck" class="ShopSimilarCheck" name="sortsimilar" value="sortsimilar" ng-click="sameBrand(ItemGuID,1)" ng-bind="itemDetails" ng-checked="FirstCheck" > More from {{ItemArrayBrand | cut:true:10:' ...'}} &nbsp &nbsp

<input id="2" type="checkbox" ng-disabled="SecondCheck" name="sortsimilar" class="ShopSimilarCheck" value="sortsimilar" ng-click="sameCategoryColor(ItemGuID,1)" ng-bind="itemDetails" style="color:white;" ng-checked="SecondCheck" > Same Category &nbsp &nbsp &nbsp

<input id="3" type="checkbox" ng-disabled="ThirdCheck" name="sortsimilar" class="ShopSimilarCheck" value="sortsimilar" ng-click="lowerPrices(ItemGuID,1)" ng-bind="itemDetails" style="color:white;" ng-checked="ThirdCheck" > Lower Prices

</p>

</div>

FrontEnd Queries Requests part 1 (part 1 methods invoke part 2 methods)

item_controller.js ( Lower Prices , Same brand, Same Category )

/*Function Name: getLowerPrices

* Description: Get all item details of prices lower than the specified ItemGuid

*

*/

$scope.lowerPrices = function(ItemGuID,runway){

$scope.itemDetails = null;

$('#myGif').show();

$scope.FirstCheck = false; // adjusting the checkboxes behavior (should act like radio button)

$scope.SecondCheck = false;

$scope.ThirdCheck = true;

var reqData = {LoginSessionKey: $scope.LoginSessionKey,ItemGuID:ItemGuID};

console.log(ItemGuID);

itemDetailService.get_itemLowerPrices(reqData).then(function(response){

console.log("AM HERE");

$scope.IsVisible = true; // sends the same brand query request object

$scope.itemDetails = response.Data;

console.log(response.Data);

$('#myGif').hide();

}),function(error){

}

}

/*

* Function Name: getSameBrand Request

*/

$scope.sameBrand = function (ItemGuID, runway) {


$('#myGif').show();

$scope.FirstCheck = true;

$scope.SecondCheck = false; // adjusting the checkboxes behavior (should act like radio button)

$scope.tempItemId = ItemGuID;

$scope.ThirdCheck = false;



itemDetailService.get_itemSameBrand(reqData).then(function(response){ // sends the same brand query request object

$scope.IsVisible = true;

$scope.itemDetails = response.Data;


$('#myGif').hide();

}),function(error){

}

}

/*

* Function Name: getSameCategoryColor

* Description : this function calls get_itemSameCategoryColor in item_services.js

*/

$scope.sameCategoryColor = function (ItemGuID, runway) {


$('#myGif').show();

$scope.FirstCheck = false; // adjusting the checkboxes behavior (should act like radio button)

$scope.SecondCheck = true;

$scope.ThirdCheck = false;



itemDetailService.get_itemSameCategoryColor(reqData).then(function(response){

$scope.IsVisible = true;

$scope.itemDetails = response.Data; // sends the same brand query request object


$('#myGif').hide();

}),function(error){

}

}

FrontEnd Query Request part 2

item_services.js

These methods invokes the controllers in the backend that's located in application/controller/api/item.php

get_itemSameBrand:function(reqData){


d.reject(data);


});

return d.promise;

},

BackEnd Queries :-

mainItem.php

Remember to allow function service calls by adding it in the if () here !

if ($logged_user_data['ResponseCode'] != 200 && $method!='mostPopular' && $method!='lowerPrices' && $method!='sameBrand' && $method!='sameColorCategory' && $method!='viewItem' && $method!='viewItemWithIncrement' && $method!='clipedItemUsers'&& $method!='searchItem'&& $method!='searchItemNew' && $method!='viewItems') { // Line 22

item.php

Function that calls getSameColorCategory() in item_model to fetch itemGuId of same category and color

for each itemGuid stored in temp['Data'], call black box getItem() in item_model

public function SameColorCategory_post(){

$Return['ResponseCode'] = 200;

$Return['ServiceName'] = 'sameColorCategory';

$Return['Message'] = 'Success';

$Return['Data'] = array();

$temp['Data'] = array();

$Data = $this->post_data;

if(isset($Data) && (!empty($Data['ItemGuID']))){

$resultArray = $this->item_model->fetchData(ITEM, array('ItemGuID' => $Data['ItemGuID']), array('ItemID','UserID'), true);

$temp['Data'] = $this->item_model->getSameColorCategory($resultArray['ItemID']);

$loggedInUserId = $userId = $this->UserID; //getSameColorCategory() fetches the itemGuIds with same color and category as $resultArray['ItemID']

$collectionGuID = !empty($Data['CollectionGuID'])?$Data['CollectionGuID']:'';

foreach ($temp['Data'] as $itemGuID){

$Return['Data'][] = $this->item_model->getItem(array('LoggedUserId'=>$loggedInUserId,'UserID'=>$userId,'ItemGuID'=>$itemGuID['ItemGuID'],'CollectionGuID'=>$collectionGuID));

}

}

else{


$Return['Message']=lang('input_invalid_format');

}

$this->response($Return);

}

Function that calls SameBrand() in item_model to fetch itemGuId of same brand

for each itemGuid stored in temp['Data'], call black box getItem() in item_model

public function SameBrand_post(){


$Return['ServiceName'] = 'sameBrand';




if(isset($Data) && ( !empty($Data['ItemGuID']))) {


$temp['Data'] = $this->item_model->getSameBrand($resultArray['ItemID']);//getSameBrand() fetches the

//itemGuIds with same same brand as $resultArray['ItemID']

$loggedInUserId = $userId = $this->UserID;




}

}

else{



}

$Outputs = $Return;

$this->response($Outputs);


}

Function that call getLowerPrices in item_model to fetch items of lower prices

Description :- for each itemGuid stored in temp['Data'], call black box getItem() in item_model

public function LowerPrices_post(){


$Return['ServiceName'] = 'lowerPrices';



$temp['Data'] = array();


if(isset($Data) && (!empty($Data['ItemGuID']))){


$temp['Data'] = $this->item_model->getLowerPrices($resultArray['ItemID']);//getLowerPrices() fetches the

//itemGuIds with lower prices as $resultArray['ItemID']

$loggedInUserId = $userId = $this->UserID;


//print_r($temp['Data']);



}

}

else{



}


}

item_model.php

/*

* Function Name: getSameCategoryColor

* Description: get items of a particular color and size

*

*/

function getSameColorCategory($itemID){

$this->db->select('*');

$this->db->from(ITEM_SEARCH);

$this->db->where('ItemID',$itemID);

$query = $this->db->get();

$color_category = $query->result_array();

$whereClauseSameCategoryColor = array('Color' => $color_category[0]['Color'], 'Category' => $color_category[0]['Category']);

$this->db->select('ItemGuID');


$this->db->join(ITEM,'ItemSearch.ItemID = Item.ItemID','left');

$this->db->where($whereClauseSameCategoryColor);

$this->db->limit(10);


return $query->result_array();

}

/*

* Function Name: getLower Prices

* Description: get items of lower prices

* get maximum product itemGuIDs between segements Price / 4 and Price / 4 * 3 .. upto 6 products in total

* get remaining product itemGuIDs from remaining segments

*/

function getLowerPrices($itemID){


$this->db->from(ITEM);






$query2 = $this->db->get();

$price = $query->result_array();

$category1 = $query2->result_array();

$category = $category1[0]['Category'];

//print_r($price[0]['Price']);

$six = $price[0]['Price'];

$five = $six*7/8;

$four = $six*3/4;

$three = $six/2; // this range needs to be dynamic, as median should also be customer price expectation dependent

$two = $six/4;

$one = $six/8;

$query = $this->db->query("(Select * FROM ebdb.Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID

WHERE Item.Price > '$five' AND Item.Price < '$six' AND ItemSearch.Category='$category' LIMIT 1 )

UNION

( SELECT * FROM Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID Where Item.Price > '$four' AND Item.Price < '$five' AND ItemSearch.Category='$category' LIMIT 1 )

UNION

( SELECT * FROM Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID Where Item.Price > '$three' AND Item.Price < '$four' AND ItemSearch.Category='$category' LIMIT 3 )

UNION

( SELECT * FROM Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID Where Item.Price > '$two' AND Item.Price < '$three' AND ItemSearch.Category='$category' LIMIT 3 )

UNION

( SELECT * FROM Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID Where Item.Price > '$one' AND Item.Price < '$two' AND ItemSearch.Category='$category' LIMIT 1 )

UNION

( SELECT * FROM Item Left Join ItemSearch on ItemSearch.ItemID = Item.ItemID Where Item.Price > 0 AND Item.Price < '$one' AND ItemSearch.Category='$category' LIMIT 1 );

");


}

/*

* Function Name: getSameBrand

* Description: get items of a Particular Brand

*/

function getSameBrand($itemID){

$this->db->select('Brand');

$this->db->from(ITEM_DETAIL);



$brand = $query->result_array();




$query1 = $this->db->get();

$category = $query1->result_array();

$this->db->select('ItemGuID','Brand');

$this->db->from(ITEM_DETAIL);

$whereClauseSameBrandCategory = array('ItemDetail.Brand' => $brand[0]['Brand'], 'Category' => $category[0]['Category']);

$this->db->join(ITEM.' as itm','ItemDetail.ItemID = itm.ItemID','left');

$this->db->join(ITEM_SEARCH.' as itmSearch','ItemDetail.ItemID = itmSearch.ItemID','left');

$this->db->limit(10);

$this->db->where($whereClauseSameBrandCategory);



}

Shop Widget Functionality

This function changes the shop widget view's state to shop similar view when shop similar button is clicked

$scope.ShowHide = function (ItemGuID,ItemGuIDImage,ItemGuIDBrand) {

$scope.IsVisible = false;

//If DIV is visible it will be hidden and vice versa.

$scope.IsVisible = $scope.IsVisible ? false : true;

setBXViewPortHeight(); //refer to main.js // increase height of bx viewport

setOpacityBackGroundShopPopUp(); // increase opacity of background and shop popup to 0

setOpacityMaskHeight(); // adjusting shop similar opacity mask on individual product elements

$scope.ItemGuID = ItemGuID;

$scope.ImageArrayItem = ItemGuIDImage;

$scope.ItemArrayBrand = ItemGuIDBrand;

$scope.sameBrand(ItemGuID,1); //calling the same brand function to initiate this query by default

}

This function revives the original shop widget state of shop popup when back button is clicked

item_controller.js

/*

Function Name: reviveShopWidgetState

To revive the original shop widget view on back button click

*/

$scope.reviveShopWidgetState = function(){

$('#myGif').show();

$scope.itemDetails = $scope.tempItemDetails;

$scope.IsVisible = false;

setOpacityBackGroundShopPopUpShopWidget(); //changing opacity to 0.7 for all these methods refer main.js

//set arrow position

//set save and buy buttons not sure

$('#myGif').hide();

}

/*

Sort functionality

*/

$scope.sortMe = function(val){

$scope.$itemDetails = null;

if(val == 2){

$scope.tempz = $filter('orderBy')($scope.itemDetails,'PriceFloat'); //sorting low to high by price

$scope.mostPopular = false;

$scope.newArrivals = false;

$scope.lowPrices = true;

$scope.highPrices = false;

}

else if(val == 3){

$scope.tempz = $filter('orderBy')($scope.itemDetails,'-PriceFloat'); // sorting high to low by price

$scope.mostPopular = false;


$scope.lowPrices = false;

$scope.highPrices = true;

}

else if(val == 0){

$scope.tempz = $filter('orderBy')($scope.itemDetails,'-NoOfViews'); //sorting high to low by number

//of views

$scope.mostPopular = true;




}

else if(val == 1){

$scope.tempz = $filter('orderBy')($scope.itemDetails,'ModifiedDate');

$scope.mostPopular = false; //to be sorted based on modified date

$scope.newArrivals = true; // this snippet lexicographically arranges dates which is flawed



}

$scope.itemDetails = $scope.tempz;

$timeout(function() {

articleLook();

}, 0); // wait...

$timeout(function () {

shopPopupLook();

},0);

console.log($scope.itemDetails);

}

article_runway.php

IsVisible flag is true to show shop similar view element and false to show shop widget elements

BACK BUTTON FUNCTIONALITY

<div ng-if= "IsVisible" ng-model="IsVisible" class="back-this" ng-mouseover="backState=true" ng-mouseleave="backState=false" ng-init="backState = false">

<input ng-if="!backState" class="icon-backpopup1" ng-click="reviveShopWidgetState()" ng-bind="itemDetails+IsVisible"/>

<div ng-if="backState" class="wow1" ng-model="backState">

<img class="wow" ng-bind="itemDetails+IsVisible" style="width: 60px;height:70px;float: right;margin-top: -110px;border:2px solid grey;" thumb-img alt="" server="<?php echo IMAGE_SERVER_PATH; ?>" thumb-width="ImageArrayItem.Size > 0 ? 190 : 160" thumb-height="ImageArrayItem.Size > 0 ? 160 : 190" item="ImageArrayItem"/> //product element that was preciously clicked

<div style="background-color:grey; width:115px;height:25px;position: absolute;float: right;box-shadow:-2px -2px 0px #888888;right:-20px;top:-3px;margin-top:-25px;">

<img class="OkEnough" src="/assets/img/backbuttonToolTip.png" style="width:115px;position:absolute;right:2px;top:25px;height:25px;float: right;margin-top: -25px;color: black;" >

</div>

<input class="icon-backpopup2" ng-click="reviveShopWidgetState()" ng-bind="itemDetails+IsVisible" />

</div>

</div>

Showing product elements in the shop widget view in a loop

<li data-ng-repeat="(runwayItemKey, runwayItemDetail) in itemDetails" ng-model="itemDetails" ng-mouseenter="showArticleItemDetail($index);counter=true;" ng-mouseleave="counter=false;" ng-init="counter=false;"repeat-done="shoplayoutDone();" style="margin-right:30px;">

Text Alignment Function

county is true on mouseover of product elements and shows item details referencing that product elements

<div ng-if="county" ng-model="county">

<div class="popup-header" style="background-color: transparent;height : 30px;margin-bottom: 10px;">

<div class="cursor-pointer popup-title" style="z-index:99999; margin-bottom: 10px;" ng-click="viewItemDetails(showArticleItem)">

<label class="label" style="margin-left:20px;z-index:99999;font-family:jamesfontbold;font-size: 75%; font-weight: bold;" ng-bind="(runwayItemDetail.Brand | cut:true:10:' ...')"></label>

<span class="product-name" style="margin-left:-8px;z-index:99999;font-size: 75%;" ng-bind="(runwayItemDetail.Title | cut:true:35:' ...')"></span>

<span class="prduct-cost" style="margin-left:30px;z-index:99999;font-family:jamesfontbold;color:red;font-size:95%;font-weight: bold;" ng-bind="runwayItemDetail.Price"></span>

</div>

</div>

</div>

<div ng-if="!county" ng-model="county">

<div class="popup-header" style="background-color: transparent;height:30px;margin-bottom: 10px;">

</div>

</div>

Changing each product element image in loop and attaching mouseover activating opacity mask

<img class="outerImage" style = "margin-top:6px;margin-bottom: 5px;margin-left: 5px;margin-right: 5px;" thumb-img alt="" ng-click="$parent.viewItemDetails($parent.runwayItemDetail)" server="<?php echo IMAGE_SERVER_PATH; ?>" thumb-width="runwayItemDetail.Images[0].Size > 0 ? 190 : 160" thumb-height="runwayItemDetail.Images[0].Size > 0 ? 160 : 190" item="runwayItemDetail.Images[0]" >

<div class="opacityMask" ng-show="county" ng-click="$parent.viewItemDetails($parent.runwayItemDetail)" style="background-color: grey;opacity: 0.4;z-index: 9999;position: relative;width:93.3%;height:95%;top:6.4px;right:-5.8px;">

Animating save buy and sold out buttons

<div class="shop-popup-action" ng-mouseover="county=true" ng-mouseleave="county=false">

<div class="x1" ng-if="!IsVisible" ng-model="IsVisible">

<a style="position: absolute;z-index: 99999;top:10px;left: 0px;" id="for-shop-runway-{{runwayItemDetail.ItemGuID}}" ng-if="runwayItemDetail.isclip=='0'" ng-

click="clipItem(runwayItemDetail.ItemGuID,$event)" href="javascript:void(0);" class="button-blk clip-link for-shop-runway">

<div class="newImage"></div>

<span>SAVE</span>

</a>

</div>

<div class="x2" ng-if="IsVisible" ng-model="IsVisible">

<a style="position: absolute;z-index: 99999;top:35px;left: 0px;" id="for-shop-runway-{{runwayItemDetail.ItemGuID}}" ng-if="runwayItemDetail.isclip=='0'" ng-click="clipItem(runwayItemDetail.ItemGuID,$event)" href="javascript:void(0);" class="button-blk clip-link for-shop-runway">

<div class="newImage"></div>

<span>SAVE</span>

</a>

</div>

<a style="position: absolute;z-index: 99999;top:10px;left: 0px;" ng-if="runwayItemDetail.isclip!='0'" href="javascript:void(0);" class="button-blk clip-link cliped" data-rel="Clip’d">

<span>SAVED</span>

</a>

<div class="x3" ng-if="!IsVisible" ng-model="IsVisible">

<a id="button_call1" style="position: absolute;z-index: 99999;top:50px;left: 0px;" id="button_call1" ng-if="runwayItemDetail.StockStatus == 0" onmouseover="button_color1()" onmouseout="button_colorback1()" ng-click="runwayItemDetail.Source!=''?redirectToSource(runwayItemDetail.Source):'javascript:void(0)'" class="button-blk">BUY</a>

</div>

<div class="x4" ng-if="IsVisible" ng-model="IsVisible">

<a id="button_call1" style="position: absolute;z-index: 99999;top:75px;left: 0px;" id="button_call1" ng-if="runwayItemDetail.StockStatus == 0" onmouseover="button_color1()"

onmouseout="button_colorback1()" ng-click="runwayItemDetail.Source!=''?redirectToSource(runwayItemDetail.Source):'javascript:void(0)'" class="button-blk">BUY</a>

</div>

<div class="x5" ="!IsVisible">

<a ng-if="runwayItemDetail.StockStatus != 0" style="position: absolute;z-index: 99999;top:50px;left: 0px;background-color: rgba(0,0,0,1);" ng-click="runwayItemDetail.Source!=''?redirectToSource(runwayItemDetail.Source):'javascript:void(0)'" class="button-blk">SOLD OUT</a>

</div>

<div class="x5" ="IsVisible">

<a ng-if="runwayItemDetail.StockStatus != 0" style="position: absolute;z-index: 99999;top:50px;left: 0px;background-color: rgba(0,0,0,1);" ng-click="runwayItemDetail.Source!=''?redirectToSource(runwayItemDetail.Source):'javascript:void(0)'" class="button-blk">SOLD OUT</a>

</div>

</div>

Shop Similar Transition on mouse over

<div ng-if = "!IsVisible" ng-model="IsVisible" style="width: 171px;height:55px;background-color:white;"ng-mouseover="count=true" ng-mouseleave="count=false" ng-init="count = false">

<input class ="GifTester1" type="image" ng-click="ShowHide(runwayItemDetail.ItemGuID,runwayItemDetail.Images[0],runwayItemDetail.Brand);" style = "margin-left: 5.9px;margin-right: 5px;position: absolute;top:273px;" ng-if="!count" src="/assets/img/ShopSimilar.png" />

<img class= "GifTester2" type="image" ng-click="ShowHide(runwayItemDetail.ItemGuID,runwayItemDetail.Images[0],runwayItemDetail.Brand);" ng-bind="itemDetails" name="shopSimilar" style = "margin-left: 5.9px;top:273px;margin-right: 5px;position: absolute;" ng-if="count" ng-src="{{decachedImageUrl}}" />

</div>

Sales Ribbon Functionality

<img ng-if="runwayItemDetail.StockStatus == 1" class="innerImage" src="/assets/img/Saleribbon.png"

Web viewTechnical Manual. Team No-1 (Frenzy) Overview. The Document provides the detailed changes...

Documents

Transcript of Web viewTechnical Manual. Team No-1 (Frenzy) Overview. The Document provides the detailed changes...