New feature on dotCMS Funnel

Owned by Hoa Tran Xuan
Last updated: Oct 21, 2020 by Chinh Phan (Unlicensed)
2 min read

  1. Use separate GTMID for each flow of funnel
    To use GTM of order page for confirm page, add this script to confirm page:

    let isUseDifferentGtmId = true;

    You can reuse WysiwygContent ( Common_GTM_Variable ) and add it to first section of page.

  2. Upsell Popup with new API and campaign Setup
    Task: https://dfoglobal.atlassian.net/browse/DFSB-5036?src=confmacro

  3. Purchase with One Click
    https://dfoglobal.atlassian.net/browse/DFSB-4980?src=confmacro

  4. Parameter to switch AOV & CVR product list
    https://dfoglobal.atlassian.net/browse/DFSB-5081

    Add class corresponding product item, example:
    1 unit - add class item-1
    2 units - add class item-2
    3 units - add class item-3
    ….

    Add widget AddStaticFileWidget, named: common_JS_adjust_product_order

  5. Email Collector Widget
    Example: https://www.infinitikloud.com/en/pre-res-sd-acpta.html
    Step 1: Add content to page, use List Items or Slider widget (You can change the content to suit each site)

    Step 2: Add js file to page (Reuse of existing widgets: AddStaticFileWidget : Common_JS_Hanlde_Popup_Email)

    Step 3: Add css for this popup, Example:



  6. July Golden Template: How to Implement: https://docs.google.com/document/d/1Wtd8P0AaWJGkmQs4LJlp9Ffaq8pnJJLf23b0n1sNTwY/edit?usp=sharing

  7. Show General content in popup: https://dfoglobal.atlassian.net/browse/DFSB-5971

Step 1: create a vtl file (application > partitals) which name is popup-iframe.vtl. After that copy the content below into this file or download here

 

<div class="popup_widget extra-popup popup_widget--theme_1 plural-item" id="popupIframe">    <div class="popup_widget_outer popup_widget_outer--scrollable popup_widget_outer--centered" style="max-width: 630px">       <div class="popup_widget_inner">          <div class="popup_widget_content">             <div class="popup_widget_header">                <span class="popup-close" data-closepopup="" onclick="window.closePopup('popupIframe')"><i class="icon-close"></i> Close</span>            </div>             <div class="popup_widget_body">                <div class="popup_widget_main">   </div>             </div>             <div class="popup_widget_footer"></div>          </div>       </div>    </div> </div>

 

Step 2: Add the code below into the file template.vtl (application > themes > basic_theme > template)

 

#if($UtilMethods.isSet($isPopup) == false)             <script scriptType="component" src="//d16hdrba6dusey.cloudfront.net/sitecommon/js/widgets/widget_popup_global.js" defer></script>             <link linkType="component" rel="stylesheet/less" type="text/css" href="//d16hdrba6dusey.cloudfront.net/sitecommon/less/widgets/widget_popup_global.less">             #set($isPopup = true) #end <link linkType="component" rel="stylesheet/less" type="text/css" href="/src/less/popup-iframe.less"> <script scriptType="component" src="/src/js/popup-iframe.js" defer></script>  #dotParse("/application/partials/popup-iframe.vtl")

Can upload css link and js link to s3

Step 3: Add the css and js files to folder /src/less/popup-iframe.less and /src/js/popup-iframe.js

Download css file in here or follow the mykoretrak site

Download js file in here or follow the mykoretrak site

Step 4: Create and Style the content of pages terms, policy, … etc

Step 5: Add class footer on the footer link

8. Hide comment section - Index page

Javascript(in floating bar, pre loading price File) will check and hide section which contains one of classes: .average-rating, .rating-block, .list-rating, .comment-block

 

9. Chrismas 2020 Banner - BHF-453

Use widget: [Event]HolidayBanner, search name: Common_EN_Christmas_2020_Banner