Wish List with Sellerdeck Swift if Customised Design Elements

Call 01323 872296


Wish List with Sellerdeck Swift if Customised Design Elements

In my previous post I related the workaround from Sellerdeck Development to enable the Wish List Function to work in the new Swift Template. This involves importing a partial design snapshot with the wish list elements. Unfortunately this snapshot will overwrite some major Swift design layots and if you have customised any of these your customisation will be overwritten and lost.

The layouts that will be overwrittent are:

  • Add To Wish List Button
  • Add to Wish List Popup
  • Customisable Product Layout
  • Javascript Footer Functions Swift
  • Regular Product Summary
  • Section Page Body
  • Swift Outer Layout
  • UXHeader Swift
  • Wish List Bulk Area RWD

If you have customised versions of these layouts you can edit them to add the actual changes necessary to implement the wish list without affecting your customisations. NB: You will still need to make the Database edit and the Stylesheet changes described at: https://www.graphicz.co.uk/blog/wish-list-with-sellerdeck-swift/ however one entry in the stylesheet will be different and is as follows:

/*== Color changed to #111 === */
.wishlistpop.atcpopup {
    position: absolute;
    z-index: 99999999999;
    background: rgba(50, 51, 51, 0.62);
    color: #111;
    padding: 15px;
    display: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Add To Wish List Button

Use the new button code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" >
<!-- This code is used when the cart button is visible to all customers -->
<span class="button-wrapper wishlist-button-wrapper wish-list-button-popup m-0"><button id="WL_<actinic:variable name="ProductID" />" value="Add To Wish List" name="WL_<actinic:variable name="ProductID" />" type="submit" class="btn theme-primary-btn" onclick="return ValidateChoices(&#34;<actinic:variable name="ProductID" />&#34;, false, this);"/><i class="fa fa-heart"></i> I Wish</button></span>
</actinic:block> 
<actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22">
	<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e">
	<!-- This code is used when the cart button is visible to retail customers, but not all other customer groups -->
	<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />">
	<span class="button-wrapper wishlist-button-wrapper"><button id="WL_<actinic:variable name="ProductID" />" value="Add To Wish List" name="WL_<actinic:variable name="ProductID" />" type="submit" class="button cart-button" onclick="return ValidateChoices(&#34;<actinic:variable name="ProductID" />&#34;, false, this);"/><i class="fa fa-heart"></i> I Wish</button></span>
	</Actinic:ShowForPriceSchedule>
	</actinic:block>
	
	<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" >
	<!-- This code is used when the cart button needs to hidden from retail customers -->
	<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<span class='m-0 button-wrapper wishlist-button-wrapper wish-list-button-popup'><button id="WL_<actinic:variable name="ProductID" />" value='Add To Wish List' name='WL_<actinic:variable name="ProductID" />' type='submit' class='button cart-button' onclick='return ValidateChoices(&#34;<actinic:variable name="ProductID" />&#34;, false, this);'/><i class='fa fa-heart'></i> I Wish</button></span>"></Actinic:ShowForPriceSchedule>
	</actinic:block>
</actinic:block>

Add to Wish List Popup

Use the new popup code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true">
	<!-- This will show a popup for wish list add to wish list operation -->
	<div class="wishlistmodal">
		<div class="wishlistpop atcpopup">
		<div class="modal-dialog">
		 <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          
          <h4 class="modal-title"><i class="fa fa-heart"></i> Wishlist</h4><button type="button" class="close wl_goback" data-dismiss="wishlistmodal">&times;</button>
        </div>
        <div class="modal-body">
          			<p>Item added to your wishlist</p>
			<p>
			<a class="wl_gotowishlist" href="/"><actinic:variable name="WishListGoToWishListCaption" /></a><br />
			Or click close to return to your product
			</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default wl_goback" data-dismiss="wishlistmodal">Close</button>
        </div>
      </div>
 </div>
		</div>
	</div>
</actinic:block>

Customisable Product Layout

Line 111 After:
							<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
								<span class="btn-danger btn"><actinic:variable name="CatalogSuspended" /></span>
							</actinic:block>

Remove

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
								<p class="cust-cart-button">
									<actinic:variable name="AddToWishListBtn" />
								</p>
							</actinic:block>



Line 150 after:
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
								<span class="btn-danger btn"><actinic:variable name="CatalogSuspended" /></span>
							</actinic:block>

Remove
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
								<p class="cust-cart-button">
									<actinic:variable name="AddToWishListBtn" />
								</p>
							</actinic:block>


Line 197 After:
							<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
								<span class="btn-danger btn"><actinic:variable name="CatalogSuspended" /></span>
							</actinic:block>

Remove
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
								<p class="cust-cart-button">
									<actinic:variable name="AddToWishListBtn" />
								</p>
							</actinic:block>

Add Lines 208 - 210;
				<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
					<actinic:variable name="AddToWishListBtn" />
				</actinic:block>

It may be you don’t want or need to do any of these changes as they seem to just alter where the btton is displayed rather than its functionality.

Javascript Footer Functions Swift

You will need to add a chunk of code after the last entry in the javascript footer functions layout. Here is what you add:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%20OR%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Search%20Results%22" >
	$(document).ready(function() {
		if( $(".clear-button:visible").length==0 && $("#update_lnk:visible").length ) {
			$("#update_lnk").hide();
		}
		$(".mobileToggleFilter").click(function(){
			if($(".filter-list input[type='checkbox']:checked").length){
				$("#update_lnk").show();
			}
			else{
				$("#update_lnk").hide();
			}
			$("#productFiltersLeft").slideToggle(400, function(){
				$("body").toggleClass("filtering-activated");
			});
		});
	});

	/***********************************************************************
	*
	* CreateClearButton						- Create clear button dynamically
	*
	* Inputs:	sID							- property ID
	*
	* Returns:									- nothing
	*
	************************************************************************/
	function CreateClearButton(sID)
		{
		var sClearButtonElement = document.getElementById(sID + '-clear-button');	// get the clear button elements	
		if (sClearButtonElement)							// is already there?
			{
			sClearButtonElement.style.cssText = 'display:block';	// ensure to show
			return;
			}
		//
		// Create the clear button
		//
		var sFilterHeaderElement = document.getElementById(sID);
		if (sFilterHeaderElement)
			{
			var sClearButton = '<a href=\'javascript:ClearFilterOptions(\"' + sID + '\");\' id="' + sID + '-clear-button" class="clear-button">Clear</a>';
			sFilterHeaderElement.innerHTML = sFilterHeaderElement.innerHTML + sClearButton;
			}
		}	
	/***********************************************************************
	*
	* ShowHideClearButton					- Show or hide the clear button dynamically
	*
	* Inputs:	bShow							- show/hide the clear button
	*				sID							- clear button ID
	*
	* Returns:									- nothing
	*
	************************************************************************/
	function ShowHideClearButton(bShow, sID)
		{
		var sClearButtonElement = document.getElementById(sID + '-clear-button');	// get the clear button elements
		
		if (sClearButtonElement)
			{
			if (bShow)											// show clear button
				{
				sClearButtonElement.style.cssText = 'display:block';
				gMapPropIdToBtnClearStatus[sID] = true;	// button shown
				}
			else													// hide clear button
				{
				sClearButtonElement.style.cssText = 'display:none';
				gMapPropIdToBtnClearStatus[sID] = false;	// button hidden
				}
			}
		else if (bShow)
			{
			CreateClearButton(sID);
			gMapPropIdToBtnClearStatus[sID] = true;		// button shown
			}
			if($(".filter-list input[type='checkbox']:checked").length){
				$("#update_lnk").show();
			}
			else{
				$("#update_lnk").hide();
			}
		}
</actinic:block>

Regular Product Summary

Wish list button removed

lines 67 – 71

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
    <p class="wishlist-placement cart-button-placement set-right">
        <actinic:variable name="AddToWishListBtn" />
    </p>
</actinic:block> 

also

<div class="cart-button-placement set-right">
instead of
<p class="cart-button-placement set-right">

Section Page Body

Add line 113:

<button type="button" class="form-control mobileToggleFilter"><img src="filter-results-button.png" alt="" />Filter</button>

Weird (actinic:block if=”false” ) added round:

<actinic:block if="false" >
	<actinic:variable name="AddToWishListPopup" />
</actinic:block>

Swift Outer Layout

Line 87 Changed:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Section%22%20AND%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Product%20Page%22%20AND%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Search%20Results%22%20AND%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Brochure%22%20AND%20%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Wish%20List%20Page%22" >

Chunk of code added after

<actinic:variable name="UXTemplateArea" value="UXSubBodyCode Swift" />

Add this:

<actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22" >
			<actinic:variable name="AddToWishListPopup" value="Add to Wish List Popup" />
			<script type="text/javascript">
			$(document).ready(function(){
				$(".imageOnLeftTextWrappedAround [id^=WL_]").click(function() {
					Wishlistpopinterval = setInterval(isWishlistpopActive,500);
				});
			});
			function isWishlistpopActive(){
				if($(".wishlistpop.atcpopup:visible").length>0) {
					$(".wishlistmodal").addClass("active");
					clearInterval(Wishlistpopinterval);
				}
			}
</script>
		</actinic:block>
		
		<!--[Sellerdeck Swift v1.0.1]-->

UXHeader Swift

Line 11 12 13 BlockIf added

<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22None%22" >
<div style="display: inline-block;" class="sub-header-links">
<actinic:variable name="BrochurePageList" value="Plain Brochure Page List (TopMenu) Swift" />
</div>
</actinic:block>

After line 17

<ul class="d-flex justify-content-end ">

Add

<actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true%29%20%26%26%20%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%21%3d%20%22Wish%20List%20Page%22%29" >
							<li><a href="<actinic:variable name="WishListLinkText" />?ACTION=SHOWFORM<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE">&SHOP=<actinic:variable name="ShopID" /></actinic:block>"><actinic:variable name="WishListText" /></a></li>
						</actinic:block>

Wish List Bulk Area RWD

Use the new code as is replacing the layot code that is currently there. Here is the new code:

<actinic:variable name="CheckoutArea" value="Scripts for Password Encryption" />
<div class="px-3">


<Actinic:REMOVE TAG="idWISH_LIST_ACCOUNT">
<form method="post" name ="wishlistlogin" class="wishlist-row login auth theme-shadow bg-white pt-4 pb-4" action="<actinic:variable name="WishListLinkText" />">
	<div class="custom-error">
		<actinic:variable Name="ValidationError"/>
	</div>
	<div class="checkoutCustomers d-flex justify-content-center">
	<Actinic:NOTINB2B>
	<fieldset>
		<h1 class="theme-title"><actinic:variable name="WishListLoginLabel" /></h1>		
		<div class="form-group">
			<label><actinic:variable name="WishListEmailAddressCaption" /></label>
			<input class="input-text form-control" type="text" name="USER" id="idUser" maxlength="60" tabindex="5" />
		</div>
		<div class="form-group">
			<label for="idPass"><Actinic:Variable Name="PasswordPrompt"/>*</label>
			<input class="input-text form-control" type="password" name="PASS" id="idPass" maxlength="60" tabindex="6" />
		</div>
		<div class="form-group">
			<input type="checkbox" id="idWLRememberMe" tabindex="7" />
			<label for="idWLRememberMe" ><actinic:variable name="WishListRememberMeCaption" /></label>
		</div>
		<div class="form-group">
			<input class="button login btn btn-theme" type="submit" name="ACTION_LOGIN" value="<Actinic:Variable Name="Login"/>" id="idWLLogin" tabindex="8" onclick="return SubmitLogin(this.form.name, true);"/>
			<input type="hidden" name="HASH" value="" />
			<input class="button btn btn-default forgotpassword" type="submit" name="ACTION_SEND_FORGOT_PWD_LINK" value="<actinic:variable name="ForgotPassword" />" id="idWLSendPwdReminder" tabindex="9" />
			<actinic:variable name="WishListReferrer" />
		</div>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSSLUsedForWholeSite%22%20%2f%3e" />
			<input type="hidden" name="SSLBOUNCE" value="1" />
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsSSLNotUsed%22%20%2f%3e">
			<input type="hidden" name="SSLBOUNCE" value="" />
		</actinic:block>
		<input type="hidden" name="challenge" value="<Actinic:Variable Name="Challenge"/>" />
		<input type="hidden" name="challengeout" value="" />
	</fieldset>
	<fieldset>
		<h1 class="theme-title"><actinic:variable name="WishListCreateNew" /></h1>
		<div class="form-group" id="idWLNameLabel">
			<label><actinic:variable name="WishListNameCaption" />*</label>
			<input class="input-text form-control" type="text" id="idWLName" name="WLNAME" size="30" maxlength="255" value="" tabindex="10" />
		</div>
		<div class="form-group">
			<label id="idINVOICEEMAILlabel"><actinic:variable name="WishListEmailAddressCaption" />*</label>
			<input class="input-text form-control" type="email" id="idINVOICEEMAIL" name="USERNAME" size="30" maxlength="255" value="" tabindex="11" />
		</div>
		<div class="form-group">
			<label id="idNEWCUSTOMERPASSWORDlabel"><actinic:variable name="WishListEnterPwdCaption" />*</label>
			<input class="input-text form-control" type="password" name="NEWCUSTOMERPASSWORD" id="idNEWCUSTOMERPASSWORD" size="20" maxlength="60" tabindex="12"/>
		</div>
		<div class="form-group">
			<label id="idNEWCUSTOMERPASSWORD2label"><actinic:variable name="CheckoutReTypePasswordCaption" />*</label>
			<input class="input-text form-control" type="password" name="NEWCUSTOMERPASSWORD2" id="idNEWCUSTOMERPASSWORD2" size="20" maxlength="60" tabindex="13"/>
		</div>
		<div class="form-group">
			<input class="input-text form-control" type="checkbox" name="RECEIVE_EMAILS" id="idWLReceiveEmails" tabindex="14" />
			<label for="idWLReceiveEmails"><actinic:variable name="WishListReceiveEmailsCaption" />*</label>
		</div>
		<div class="form-group">
			<input class="button login btn btn-theme" type="submit" name="CREATE_ACCOUNT" value="Create Wish List" />
		</div>
	</fieldset>
	</Actinic:NOTINB2B>
	</div>
</form>
</Actinic:REMOVE>
<Actinic:REMOVE TAG="idWISH_LIST_HEADER">
<div align='right' style='font-size: 14px;'><actinic:variable name="WishListToggleView" /> <actinic:variable name="WishListRefresh" /> <actinic:variable name="WishListLogout" /></div>
<h2 class='theme-title'><actinic:variable name="WishListPageTitle" /> <actinic:variable name="WishListAccountEmail" /></h2>
<actinic:block if="%3cactinic%3avariable%20name%3d%22WishListInfoMessage%22%20%2f%3e%20%21%3d%20%22%22" >
	<h3 class='mb-4'><actinic:variable name="WishListInfoMessage" /></h3>
</actinic:block>

</Actinic:REMOVE>
<Actinic:REMOVE TAG="idWISH_LIST">
<Actinic:REMOVE TAG="idWISH_LIST_GUEST_VIEW">
	<form method="post" class="wishlist-share" action="<actinic:variable name="WishListLinkText" />">
		<!-- Display private or public wish list share UI -->
		<Actinic:REMOVE TAG="idWISH_LIST_MAKE_PRIVATE">
			<!-- Display Share with a Friend URL and Make Private button-->
			<div class="copy-share-field">
				<div class="wishlist-share-label"><actinic:variable name="WishListShareWithAFriendCaption" /></div>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22FacebookPageName%22%20%2f%3e%20%21%3d%20%22%22" ><div class="fb-share-button" data-href="<actinic:variable name="WishListGuestUrl" />" data-layout="button" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<actinic:variable name="WishListGuestUrl" />%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div></actinic:block>
				<actinic:block if="%3cactinic%3avariable%20name%3d%22TwitterHandle%22%20%2f%3e%20%21%3d%20%22%22" ><a href="https://twitter.com/share" class="twitter-share-button"data-text="<actinic:variable name="WishListGuestUrl" />" data-lang="en" data-dnt="true">Share</a></actinic:block>
				<div class="copy-share-sec">
					<span class="wish-list-copy-caption">Copy: </span>
					<input type='text' id='idCopyTarget' class='w-100' value='<actinic:variable name="WishListGuestUrl" />' readonly='readonly'>
					<input type='submit' class='btn btn-theme' value='<actinic:variable name="WishListMakePrivateCaption" />' name='ACTION_MAKE_PRIVATE'>
				</div>
			</div>				
		</Actinic:REMOVE>
		<Actinic:REMOVE TAG="idWISH_LIST_MAKE_PUBLIC">
			<!-- Display Make Public button-->
			<input type='submit' class='btn btn-theme' value='<actinic:variable name="WishListMakePublicCaption" />' name='ACTION_MAKE_PUBLIC'>
		</Actinic:REMOVE>		
	</form>
</Actinic:REMOVE>

<actinic:variable name="AddToWishListPopup" value="Add to Wish List Popup" />

<div class="wishlist-table">
	<div class="wishlist-headers">
		<div class="wishlist-image">&nbsp;</div>
		<div class="wishlist-name"><actinic:variable name="WishListTblHeadDesc" /></div>
		<div class="wishlist-price"><actinic:variable name="WishListTblHeadPrice" /></div>
		<div class="wishlist-required"><Actinic:REMOVE TAG="idWISH_LIST_GUEST_VIEW"><actinic:variable name="WishListTblHeadQtyRequired" /></Actinic:REMOVE></div>
		<div class="wishlist-ordered"><Actinic:REMOVE TAG="idWISH_LIST_GUEST_VIEW"><actinic:variable name="WishListTblHeadQtyOrdered" /></Actinic:REMOVE></div>
		<div class="wishlist-remaining"><actinic:variable name="WishListTblHeadQtyRemaining" /></div>
		<div class="wishlist-add"><actinic:variable name="WishListTblHeadAddQty" /></div>
		<div class="wishlist-image">&nbsp;</div>
	</div>
	<Actinic:XMLTEMPLATE NAME="WishListLines">
	<form method="post" class="wishlist-row" action="<actinic:variable name="WishListLinkText" />">
		<input type="hidden" name="PRODREF" value="<actinic:variable name="WishListProdRef" />"/>
		<div class="wishlist-body">
			<div class="wishlist-image"><actinic:variable name="WishListImage" /></div>
			<div class="wishlist-name"><actinic:variable name="WishListProductName" />&nbsp;<actinic:variable name="WishListVariants" /></div>
			<div class="wishlist-price"><actinic:variable name="WishListPrice" /></div>
			<div class="wishlist-required"><span class="wishlist-label"><Actinic:REMOVE TAG="idWISH_LIST_GUEST_VIEW"><actinic:variable name="WishListTblHeadQtyRequired" /></Actinic:REMOVE></span><actinic:variable name="WishListRequiredQty" /> <span class="wishlist-update"><actinic:variable name="WishListUpdate" /></span></div>
			<div class="wishlist-ordered"><span class="wishlist-label"><Actinic:REMOVE TAG="idWISH_LIST_GUEST_VIEW"><actinic:variable name="WishListTblHeadQtyOrdered" /></Actinic:REMOVE></span><span class="wishlist-qty"><actinic:variable name="WishListOrderedQty" /></span></div>
			<div class="wishlist-remaining"><span class="wishlist-label"><actinic:variable name="WishListTblHeadQtyRemaining" /></span><span class="wishlist-qty"><actinic:variable name="WishListRemainingQty" /></span></div>
			<div class="wishlist-add"><div class="wishlist-pair quantity-box"><span class="wishlist-quantity input-group"><actinic:variable name="WishListQuantity" /></span><span class="wishlist-cart"><actinic:variable name="WishListAddToCart" /></span></div></div>
			<span class="wishlist-image"><actinic:variable name="WishListRemove" /></span>
		</div>
	</form>
	</Actinic:XMLTEMPLATE>
</div>
</Actinic:REMOVE>
</div> <script type="text/javascript"> $(document).ready(function() { $(".wishlist-cart input").click(function(e) { $(".wishlistmodal").addClass("active"); //console.log(e.pageX +', '+ e.pageY); //$(".wishlistpop.atcpopup").css({'left':e.pageX, 'top':$(this).position()}) }); }); </script>

This is posted without warranty in the hope that it may be helpful to some of you.


No Comments » for Wish List with Sellerdeck Swift if Customised Design Elements
1 Pings/Trackbacks for "Wish List with Sellerdeck Swift if Customised Design Elements"
  1. […] Following Selledeck’s instructions posted below will overwrite several of your layouts. If you have customised any of the following layouts please see my post at: https://www.graphicz.co.uk/blog/wish-list-with-sellerdeck-swift-if-customised-design-elements/ […]

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz