Merging Skin Changes for 1.20 - Prefix

preFIX 1.20 includes some new features and fixes which may require an extra installation step before they can take effect.

If you would like to enable Facebook Pixel, Google Enhanced Ecommerce, or the full Bootstrap update, you may need to make some adjustments to your site's custom skin. This solution will take you through how to do that.

OpenGraph and TwitterTag - Modifying Views

• In order to use these new features you will need to make a slight change to _Head.cshtml which exists in your Skin folder in the Views\Shared  directory. Please make sure the @Html.Action portion at the top looks similar to this:

@Html.Action(
  ActionNames.Detail, 
  ControllerNames.MetaTag, 
  new 
  { 
    metaTitle = @ViewBag.MetaTitle, 
    metaDescription = @ViewBag.MetaDescription, 
    metaKeywords = @ViewBag.MetaKeywords, 
    openGraphTags = @ViewBag.OpenGraphTags, 
    twitterCardTags = @ViewBag.TwitterCardTags 
  })

Bootstrap Upgrade to 3.4.1

• In preFIX 1.20 we are upgrading Bootstrap from version 3.3.7 to version 3.4.1. This upgrade improves JavaScript security and also updates the base Bootstrap style files.
• The security update (bootstrap.js) which comes with 3.4.1 has been automatically applied to your site.
• The style updates are not automatically applied to your store and are optional.

Optional File Changes - Style Files (.less, .css)

Optionally, you can choose to upgrade the Bootstrap style files. Bootstrap often updates its styles between versions, reorganizes styles, and makes general improvements. You may choose not to upgrade styles if your site has made customizations to these files. Before updating files on your live site, keep a backup just in case you need to revert.

The updated style files need to be placed in the less and less\mixins folders of your skin. Please download Bootstrap-3.41-Style-Files.zip, which is available at the bottom of this page.  Bootstrap-3.41-Style-Files.zip has a copy of the following updated files:

• \less\mixins\alerts.less
• \less\mixins\border-radius.less
• \less\mixins\buttons.less
• \less\mixins\center-block.less
• \less\mixins\clearfix.less
• \less\mixins\forms.less
• \less\mixins\gradients.less
• \less\mixins\grid.less
• \less\mixins\grid-framework.less
• \less\mixins\hide-text.less
• \less\mixins\image.less
• \less\mixins\opacity.less
• \less\mixins\reset-text.less
• \less\mixins\resize.less
• \less\mixins\responsive-visibility.less
• \less\mixins\vendor-prefixes.less

• \less\alerts.less
• \less\badges.less
• \less\bootstrap.css
• \less\bootstrap.less
• \less\breadcrumbs.less
• \less\button-groups.less
• \less\buttons.less
• \less\carousel.less
• \less\close.less
• \less\code.less
• \less\component-animations.less
• \less\dropdowns.less
• \less\forms.less
• \less\glyphicons.less
• \less\grid.less
• \less\input-groups.less
• \less\jumbotron.less
• \less\labels.less
• \less\list-group.less
• \less\media.less
• \less\modals.less
• \less\navbar.less
• \less\navs.less
• \less\normalize.less
• \less\pager.less
• \less\pagination.less
• \less\panels.less
• \less\popovers.less
• \less\print.less
• \less\progress-bars.less
• \less\responsive-embed.less
• \less\responsive-utilities.less
• \less\scaffolding.less
• \less\store.less
• \less\tables.less
• \less\theme.less
• \less\themestyles.css
• \less\thumbnails.less
• \less\tooltip.less
• \less\type.less
• \less\utilities.less
• \less\variables.less

Google Enhanced Ecommerce, Facebook Pixel - XMLPackages

Updating Modified Layouts

Do you have modified layouts (XMLPackages) in your skin? These are XMLPackages that exist in your Skins/[YourSkinFolder]/XMLPackage folder.

Modified layouts are not automatically updated when we update your website with new releases. Updates to XMLPackages are placed in the root XMLPackages folder. You have four options for how to deal with these updates:

Before exploring the following options, please back up your Skin XMLPackages folder.

1. Merge the new code from the root XMLPackages folder into your modified layouts, preserving your changes and updating your layouts with the latest fixes and features (for advanced users!).
2. Remove or rename your modified skin layouts so that you revert to using the latest layouts (in the root XMLPackages folder). This is the simplest option and makes sure you are caught up with the latest changes. You can remove your modified layout by logging in to your website's FTP account and navigating to your Skins/[YourSkinFolder]/XMLPackage folder. You can then delete the files there (or rename them, example: product.SimpleProduct.xml.config could be renamed to backup.product.SimpleProduct.xml.config). Deleting or renaming these packages will revert your site to using the root XMLPackages layouts.
3. Selectively copy the latest changes to your modified layouts. The remainder of this solution will go over how to do this.
4. Ignore the latest updates. If you've made heavy customization to the layouts in your skin, it might be best to keep what you have. This prevents you from receiving updates, which can cause future problems as preFIX continues to improve. Please consider submitting a ticket for help on updating your layouts.

Option C: Selectively Updating Your Layouts

• If you would like to use Google Enhanced Ecommerce on your site, you will need to make three updates:
  • 1.) Update Entity XMLPackages (Those that you are using)
  • 2.) Update Product XMLPackages (Those that you are using)
  • 3.) Update "Script" XMLPackages (script.bodyclose.xml.config and script.head.xml.config)
• If you only would like to use Facebook Pixel, you just need to do that final step with one more XMLPackage:
  • 3.) Update "Script" XMLPackages (script.bodyclose.xml.config, script.bodyopen.xml.config, and script.head.xml.config)

Option C: 1.) Updating Entity XMLPackages

Google Enhanced Ecommerce is supported for the following Entity XMLPackages:

• entity.grid.xml.config
• entity.gridwithprices.xml.config
• entity.simpleproductlist.xml.config
• entity.tableorderform.xml.config
• entitygridpage.xml.config
• featuredproducts.xml.config
• page.bestsellers.xml.config
• page.kitheader.xml.config
• page.recentadditions.xml.config
• page.search.xml.config
• page.searchadv.xml.config
• relatedproducts.xml.config
• upsellproducts.xml.config

In order to add support, please first find the following line in the XMLPackage:

<xsl:template match="/">

The following three lines will need to be put just below that:

    <xsl:if test="string-length($ProductIdsOnPage) &gt; 0" >
        <xsl:value-of select="aspdnsf:XmlPackage('script.datalayer.xml.config', concat('productIdList=', $ProductIdsOnPage))" disable-output-escaping="yes" />
    </xsl:if>

The end result should look like this:

<xsl:template match="/">
    <xsl:if test="string-length($ProductIdsOnPage) &gt; 0" >
        <xsl:value-of select="aspdnsf:XmlPackage('script.datalayer.xml.config', concat('productIdList=', $ProductIdsOnPage))" disable-output-escaping="yes" />
    </xsl:if>

    <!--(XMLPackage Continues)-->

Option C: 2.) Updating Product XMLPackages

Google Enhanced Ecommerce is supported for the following Product XMLPackages:

• product.SimpleProduct.xml.config
• product.SimpleProductLargeImage.xml.config
• product.TabbedUI.xml.config
• product.VariantsInDropDown.xml.config
• product.VariantsInGrid.xml.config
• product.VariantsInList.xml.config
• product.VariantsInRightBar.xml.config

In order to add support, please first find the following line in the XMLPackage:

<xsl:template match="Product">

Scroll down and find the ending </xsl:template> tag. It's very important that this is the tag that closes the <xsl:template match="Product"> tag. There may be multiple </xsl:template> tags in your package, and you need to find the one that matches up. Here is an example of how it will look:

<xsl:template match="Product">
    <!--....Additional tags....-->
        </xsl:otherwise>
    </xsl:choose>

</xsl:template>

The following line will need to be put just above the </xsl:template> tag:

<xsl:value-of select="aspdnsf:XmlPackage('script.datalayer.xml.config', concat('productId=', ProductID, '&amp;variantId=', $SelectedVariantID))" disable-output-escaping="yes" />

The end result should look like this:

        </xsl:otherwise>
    </xsl:choose>

    <xsl:value-of select="aspdnsf:XmlPackage('script.datalayer.xml.config', concat('productId=', ProductID, '&amp;variantId=', $SelectedVariantID))" disable-output-escaping="yes" />

</xsl:template>

<!--(XMLPackage Continues)-->

Option C: 3.) Update "Script" XMLPackages

If none of the XMLPackages below exist in your Skins/[YourSkinFolder]/XMLPackage folder, you do not need to take any action for this step.

If one or more does, and you would like to gain Google Enhanced Ecommerce or Facebook Pixel support without losing your current customizations, you'll need to compare the /XmlPackages version of the file with the Skins/[YourSkinFolder]/XmlPackages and merge the updated files from the /XmlPackages folder into your customized skin XmlPackages. Need help? Please submit a ticket.

For Google Enhanced Ecommerce you will need the latest version of these two XMLPackages:

• script.bodyclose.xml.config
• script.head.xml.config

For Facebook Pixel you will need the latest version of these three XMLPackages:

• script.bodyclose.xml.config
• script.bodyopen.xml.config
• script.head.xml.config