Announcement

Collapse
No announcement yet.

Sellerdeck Desktop v18 – Upgrading From v11 And Earlier

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Sellerdeck Desktop v18 – Upgrading From v11 And Earlier

    Sellerdeck Desktop Version 18 includes a number of layout changes that are necessary for enabling the new features included in it.

    The upgrader can apply all of these changes to version 12 sites and above, and some changes to version 11 sites and below, if you choose ‘Yes’ for the relevant option during the upgrade process:

    Click image for larger version  Name:	SD18UPgrade.png Views:	1 Size:	118.0 KB ID:	550027

    In version 11 and earlier, some changes must be applied manually. This article outlines the changes that are required, feature by feature. It indicates which will be applied automatically by the upgrader, if you so choose; and provides details changes that must be applied by hand.

    If you choose NOT to let the upgrader make changes, you will find full details of the additional changes required in the upgrader log.

    A. Wish List

    In version 11 and earlier, product layouts and themes with textual navigation bars can be supported as follows. Very old themes with image-based navigation are not friendly to search engines, and should no longer be used.

    1. To include the ‘Wish List’ link in the Horizontal Nav Bar Text Links layout, add the following lines of code between two of the existing Links, wherever you want the ‘Wish List’ link to appear:

    Code:
    <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" >
                  <span class="actxxsmall">[</span>&nbsp<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>"><span class="actxxsmall"><strong<actinic:variable name="WishListText" /></strong></span></a>&nbsp;<span class="actxxsmall">]</span>&nbsp;
    </actinic:block>
    2. To include the ‘Wish List’ link in the Vertical Nav Bar Text Links layout, add the following lines of code between two of the existing Links, wherever you want the ‘Wish List’ link to appear:

    Code:
    <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" >
                  <span class="actxxsmall">[</span>&nbsp<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>"><span class="actxxsmall"><strong<actinic:variable name="WishListText" /></strong></span></a>&nbsp;<span class="actxxsmall">]</span><br />
    </actinic:block>
    3. To include the ‘Add to Wish List’ button and popup in any Product Layout, insert the following code. (You may have to experiment with the position; and you will need to modify the style to match the theme or design in use.)

    Code:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsWishListEnabled%22%20%2f%3e%20%3d%3d%20true" >
    <p class="cart-button-placement set-below-right">
                  <actinic:variable name="AddToWishListBtn" />
     </p>
    </actinic:block>
    And also add the following line of code at the very end of every layout that is valid for the MainArea and/or the ProductPageInnerLayout selector:

    Code:
    <actinic:variable name="AddToWishListPopup" />
    4. For sites upgraded from pre-Sellerdeck versions (v11.0.2 and older) the following styles should be added to the Actinic Stylesheet layout. Some of them will need to be modified to match the theme or design in use:

    Code:
    /***** Wish list *****/
    
    .wishlistmodal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 10px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    .wishlistpop {
      background-color:#FFFFFF;
      border:1px solid #999999;
      cursor:default;
      display:none;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      padding: 25px 25px 20px;
      margin: auto;
      text-align:center;
      width:194px;
      height:80px;
      z-index:50;
    }
    .wishlistpop p, .wishlistpop.div {
      border-bottom: 1px solid #EFEFEF;
      margin: 8px 0;
      padding-bottom: 8px;
    }
    .wishlist-required input[type="number"], .wishlist-add input[type="number"] {
           width: 40px;
    }
    a.wl_gotowishlist, a.gotocart {margin-left: 5px}
    .wishlist-placement {clear: right; width: auto}
    .wishlist-button-wrapper {
           display: block;
           width: auto;
           height: 3.5em;
           margin: 0;
           float: right;
           clear: both
    }
    .wish-list-button-popup input[type=submit], .wish-list-button-popup input[type=submit]:hover {
           margin: 0;
           width: auto;
           height: 3.5em
    }
    .singleAddToCart .wishlist-button-wrapper input[type=submit] {
           width: auto !important;
           height: 3.5em !important;
    }
    .wishlist-button-wrapper input[type="submit"], .wishlist-button-wrapper input[type="submit"]:hover {
           font-size: 1em;
    }
    .wishlist-share-label {display: block}
    form.wishlist-share {padding: 0;}
    form.wishlist-share input, form.wishlist-share input:hover {float: left; margin: 0}
    form.wishlist-share input[type=text] {margin:8px 5px 0 0;}
    span.wishlist-update input, span.wishlist-cart input, span.wishlist-required input, span.wishlist-remove input,
    span.wishlist-update input:hover, span.wishlist-cart input:hover, span.wishlist-required input:hover, span.wishlist-remove input:hover {
                  margin: 0 0 5px 0;
                  }
    .wishlist-image img {width: 75px; margin: 0;}
    .wishlist-add input[type=number], .wishlist-required input[type=number] {margin: 0 8px 8px 0}
    form.wishlist-share .fb-share-button {margin: 11px 5px 0 0;}
    form.wishlist-share .twitter-share-button {float: left; margin: 11px 5px 0 0;}
    form.wishlist-share span.wish-list-copy-caption {font-weight: bold; float: left; margin: 15px 5px 0 5px;}
    form.wishlist-row label[for=idPass] {clear: left}
    form.wishlist-row input#idUser {width: 90% !important}
    .wish-list-button-popup {height: 3.5em !important;}
    
    @media screen and (max-width:600px) {
           .wishlist-table {
                  background-color: <actinic:variable name="BGColor" />;
                  width: 100%;
                  }
           .wishlist-headers {display: none}
           .wishlist-body {
                  width: 100%;
                  margin: 1% 0;
                  text-align: center;
                  border: 1px solid <actinic:variable name="Palette3" />;
                  }
           .wishlist-body div {width: 95%}
           div.wishlist-required, div.wishlist-add, span.wishlist-pair {width: auto}
           .wishlist-image, .wishlist-name, .wishlist-price, .wishlist-remove, .wishlist-required, .wishlist-ordered, .wishlist-remaining,
           .wishlist-add, .wishlist-pair, .wishlist-quantity, .wishlist-cart {
                  text-align: center;
                  display: inline-block;
                  margin: 1%;
                  }
    .wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargerFontSize" />}
           .wishlist-remove {width: auto; clear: both}
           .wishlist-quantity {vertical-align: top}
           .wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargeFontSize" />}
           .wishlist-label {font-weight: bold; padding-right: 5px; font-size: <actinic:variable name="LargerFontSize" />}
           .wishlist-required .wishlist-label {margin: 15px 0 0 0; float: left}
           .wishlist-required input[type="number"], .wishlist-add input[type="number"] {margin: 9px 5px 0 0}
           }
    
    @media screen and (min-width:601px) and (max-width:1199px) {
           .wishlist-table {
                  background-color: <actinic:variable name="BGColor" />;
                  width: 100%;
                  }
           .wishlist-headers {display: none}
           .wishlist-body {
                  width: 100%;
                  margin: 1% 0;
                  float: left;
                  border: 1px solid <actinic:variable name="Palette3" />;
                  }
    .wishlist-price, .wishlist-name {font-size: <actinic:variable name="LargerFontSize" />}
           .wishlist-image {width: 15%; min-width: 85px; float: left; height: 180px}
           .wishlist-name, .wishlist-price, .wishlist-price, .wishlist-add {width: 70%}
           .wishlist-required {width: 35%; text-align: center}
           .wishlist-ordered, .wishlist-remaining {width: 15%; text-align: center}
           .wishlist-image, .wishlist-name, .wishlist-price, .wishlist-required, .wishlist-ordered, .wishlist-remaining, .wishlist-add {
                  display: inline-block;
                  float: left;
                  margin: 1%;
                  vertical-align: top;
                  }
           .wishlist-remove {float: right}
           .wishlist-label {font-weight: bold; display: block}
           .wishlist-required .wishlist-label {float: left; margin-bottom: 1%}
           .wishlist-required input[type="number"] {clear: left}
           .wishlist-qty {display: block; margin-top: 10px; font-size: <actinic:variable name="LargerFontSize" />}
    }
    
    @media screen and (min-width:1200px) {
           .wishlist-table {
                  display: table;
                  float: left;
                  border-top: <actinic:variable name="Palette3" /> 1px solid;
                  background-color: <actinic:variable name="BGColor" />;
                  width: 100%;
                  margin: 15px 0;
                  padding 0;
                  }
           .wishlist-headers, .wishlist-body {
                  margin: 0;
                  padding 0;
                  width: 100%;
                  }
           .wishlist-table form {
                  padding: 0;
                  margin: 0;
                  width: 100%;
                  }
           .wishlist-table .wishlist-row {width: 100%;}
           form.wishlist-row .checkoutCustomers fieldset input[type=email] {float:left; clear:both; width:90%;}
           .wishlist-image, .wishlist-name, .wishlist-required, .wishlist-ordered, .wishlist-remaining, .wishlist-price, .wishlist-add {
                  display: table-cell;
                  padding: 5px;
                  vertical-align: top;
                  height: 40px;
                  border-bottom: 1px solid <actinic:variable name="Palette3" />;
                  }
           .wishlist-image {width: 16%}
           .wishlist-name {width: 25%}
           .wishlist-required {width: 15%}
           .wishlist-ordered {width: 8%}
           .wishlist-remaining {width: 8%}
           .wishlist-price {width: 8%}
           .wishlist-add {width: 20%}
           .wishlist-headers {font-weight: bold}
           .wishlist-update, wishlist-add img {float: right}
           .wishlist-label {display: none}
           .wishlist-quantity {float: left}
           .wishlist-cart {float: right}
           .wishlist-remove {float: right; clear: both}
    }
    
    @media screen and (min-width:1200px) and (max-width:1499px) {
           .wishlist-update {float: left: clear: both}
    }
    
    @media screen and (min-width:1500px) {
           .wishlist-update {float: right}
    }
    
    fieldset.quantity-box {border: none}

    5. And the following styles may need to be added to the end of the current stylesheet layout (Design Tab | Stylesheet button)

    Code:
    .content-area form .checkoutCustomers fieldset {
        float: left;
        margin: 2% 0 2% 1%;
        padding: 1%;
        width: 46%;
    }
    form.wishlist-row .checkoutCustomers fieldset label {float: left; clear: both; margin: 2% 1%}
    form.wishlist-row .checkoutCustomers fieldset input[type=password], form.wishlist-row .checkoutCustomers fieldset input[type=text] {
       display: block;
       width: 90%;
       border: 1px solid <actinic:variable name="Palette1" />;
       font-family: Arial, Helvetica;
       font-size: 11px;
    }
    form.wishlist-row .checkoutCustomers fieldset input[type=submit] {
       font-family: Arial, Helvetica;
       font-size: 11px;
       font-weight: bold;
       height: 26px;
       border: none;
       margin: 5px 5px 0 0;
       width: auto;
       padding: 5px 10px;
       color: <actinic:variable name="BGColor" />;
       background-color: <actinic:variable name="Palette1" />
    }
    form.wishlist-row .checkoutCustomers fieldset input[type=checkbox] {
       float: left;
       margin: 5px;
    }
    B. Feefo V3

    Changes applied automatically to all the required layouts for all versions:
    Standard Product Feedback Table
    Standard Product Rate Logo
    Standard Product Rate Logo Template
    Standard Site Feedback Table
    Standard Site Rate Logo

    C. ReCaptcha v2

    Changes applied automatically to all the required layouts for all versions:
    Contact Us Page Body
    Contact Us Page Body RWD
    ReCAPTCHA JS Options
    ReCAPTCHA Layout

    D. Facebook Pixel Code

    In version 11 and earlier, add the following line of code to any Outer Layouts and Extended Info Layouts used in the site, immediately below the variable JavaScriptFunctions:

    Code:
    <actinic:variable name="SocialMediaFunctions" value="Facebook Pixel Code" />
    E. PayPal Express Checkout

    Changes applied automatically to all the required layouts, in all versions:
    Receipt Delivery Address Details
    Receipt Invoice Address Details
    Standard Javascript Header Functions

    F. Multiple Coupons

    In version 11 and earlier, if ‘Allow Coupon Code Entry In Store Pages’ is enabled, add the following lines of code to the ‘Coupon Field In A Line’ and ‘Sidebar Coupon Field’ layouts, immediately above the closing </table> tag:

    Code:
      <tr>
           <td>
                  <div id="used-coupons">
                          <!-- Placeholder for list of used coupons -->
                  </div>
           </td>
      </tr>
    For pre-Sellerdeck versions (v11.0.2 and older) the following styles should be added to the Actinic Stylesheet layout, regardless of where coupon code entry is enabled:

    Code:
    #coupon-apply-btn {
           width: 12em;
           height: 3em;
           background: <actinic:variable name="Palette1" />;
           color: <actinic:variable name="BGColor" />;
           font-weight: bold;
           text-align: center;
           margin: 0 5px !important;
    }
    .remove-coupon-link {
           color: <actinic:variable name="LinkColor" />;
           cursor: pointer;
    }
    #used-coupons {
           display: inline-block;
           margin: 5px;
           width: 90%;
    }
    .coupon-list-line {
           width: 100%;
           max-width: 150px;
           clear: left;
           float: left;
           margin: 0 5px 5px 5px;
           font-size: <actinic:variable name="StandardFontSize" />;
    }
    .coupon-list-remove, .remove-coupon-link {
           float: right;
    }
    G. Security Fixes

    Buyer password hashing, password reset email & insecure links in open graph tags

    Changes applied automatically to all the required layouts for all versions:
    Forgot Password Bulk Area
    Forgot Password Bulk Area RWD
    My Account Bulk Area
    My Account Bulk Area RWD
    Password HTML Email Inner Layout
    Password Text Only Email
    Scripts for Password Encryption
    Standard Meta Tags

    H. Schema Tags

    In version 11 and earlier, add the following line of code to any Outer Layouts used in the site, immediately below the variable BaseHref:

    Code:
    <actinic:variable name="Schema" />
    I. Google Product Feed

    Feature added in v16. Changes applied automatically to the required layout in all versions:
    Google Product Feed Layout
Working...
X