From 55fc73eeb1edc6e140005ca811f090f06ab35435 Mon Sep 17 00:00:00 2001 From: Jeff Hubbard Date: Fri, 2 Nov 2018 11:41:06 -0700 Subject: [PATCH] PROJECT-2272: Add support for declarative data tag analytics Co-authored-by: ranjitha venkataramani Co-authored-by: Senthil Krishnasamy Co-authored-by: Ryan Greenberg Co-authored-by: Adam Bilsing --- CHANGELOG.md | 1 + assets/js/theme/common/product-details.js | 98 +++++++++++++++++++ assets/js/theme/product.js | 1 + config.json | 3 +- templates/components/amp/products/grid.html | 2 +- .../components/amp/products/list-item.html | 2 +- templates/components/amp/products/list.html | 2 +- .../components/brand/product-listing.html | 6 +- templates/components/cart/content.html | 1 + templates/components/cart/preview.html | 2 +- .../components/category/product-listing.html | 14 ++- templates/components/common/body.html | 2 +- templates/components/common/footer.html | 23 ++++- templates/components/common/header.html | 8 +- templates/components/products/card.html | 20 ++-- templates/components/products/carousel.html | 3 +- .../components/products/description.html | 2 +- templates/components/products/featured.html | 4 +- templates/components/products/grid.html | 2 +- templates/components/products/list-item.html | 18 ++-- templates/components/products/list.html | 6 +- templates/components/products/new.html | 6 +- .../components/products/product-view.html | 6 +- templates/components/products/quick-view.html | 2 +- templates/components/products/related.html | 4 +- templates/components/products/tabs.html | 9 +- templates/components/products/top.html | 13 ++- .../components/search/product-listing.html | 14 ++- .../components/search/quick-results.html | 5 +- templates/pages/amp/category.html | 3 +- templates/pages/amp/product.html | 4 +- templates/pages/blog.html | 2 +- templates/pages/brand.html | 2 +- templates/pages/category.html | 2 +- templates/pages/compare.html | 6 +- templates/pages/product.html | 2 +- templates/pages/search.html | 2 +- 37 files changed, 229 insertions(+), 73 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9631c959bf..87b8004e97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Draft Add support for Card Management: List, Delete, Edit, Add and Default Payment Method [#1376](https://github.com/bigcommerce/cornerstone/pull/1376) +Add support for declarative data tag analytics. [#1377](https://github.com/bigcommerce/cornerstone/pull/1377) ## 2.5.2 (2018-10-24) - Product review modal error message is now accurate. [#1370](https://github.com/bigcommerce/cornerstone/pull/1370) diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js index fb8324bbda..4078756e73 100644 --- a/assets/js/theme/common/product-details.js +++ b/assets/js/theme/common/product-details.js @@ -27,6 +27,7 @@ export default class ProductDetails { $productOptionsElement.on('change', event => { this.productOptionsChanged(event); + this.setProductVariant(); }); $form.on('submit', event => { @@ -76,6 +77,103 @@ export default class ProductDetails { return formData; } + setProductVariant() { + const unsatisfiedRequiredFields = []; + const options = []; + + $.each($('[data-product-attribute]'), (index, value) => { + const optionLabel = value.children[0].innerText; + const optionTitle = optionLabel.split(':')[0].trim(); + const required = optionLabel.toLowerCase().includes('required'); + const type = value.getAttribute('data-product-attribute'); + + if ((type === 'input-file' || type === 'input-text' || type === 'input-number') && value.querySelector('input').value === '' && required) { + unsatisfiedRequiredFields.push(value); + } + + if (type === 'textarea' && value.querySelector('textarea').value === '' && required) { + unsatisfiedRequiredFields.push(value); + } + + if (type === 'date') { + const isSatisfied = Array.from(value.querySelectorAll('select')).every((select) => select.selectedIndex !== 0); + + if (isSatisfied) { + const dateString = Array.from(value.querySelectorAll('select')).map((x) => x.value).join('-'); + options.push(`${optionTitle}:${dateString}`); + + return; + } + + if (required) { + unsatisfiedRequiredFields.push(value); + } + } + + if (type === 'set-select') { + const select = value.querySelector('select'); + const selectedIndex = select.selectedIndex; + + if (selectedIndex !== 0) { + options.push(`${optionTitle}:${select.options[selectedIndex].innerText}`); + + return; + } + + if (required) { + unsatisfiedRequiredFields.push(value); + } + } + + if (type === 'set-rectangle' || type === 'set-radio' || type === 'swatch' || type === 'input-checkbox' || type === 'product-list') { + const checked = value.querySelector(':checked'); + if (checked) { + if (type === 'set-rectangle' || type === 'set-radio' || type === 'product-list') { + const label = checked.labels[0].innerText; + if (label) { + options.push(`${optionTitle}:${label}`); + } + } + + if (type === 'swatch') { + const label = checked.labels[0].children[0]; + if (label) { + options.push(`${optionTitle}:${label.title}`); + } + } + + if (type === 'input-checkbox') { + options.push(`${optionTitle}:Yes`); + } + + return; + } + + if (type === 'input-checkbox') { + options.push(`${optionTitle}:No`); + } + + if (required) { + unsatisfiedRequiredFields.push(value); + } + } + }); + + let productVariant = unsatisfiedRequiredFields.length === 0 ? options.sort().join(', ') : 'unsatisfied'; + const view = $('.productView'); + + if (productVariant) { + productVariant = productVariant === 'unsatisfied' ? '' : productVariant; + if (view.attr('data-event-type')) { + view.attr('data-product-variant', productVariant); + } else { + const productName = view.find('.productView-title')[0].innerText; + const card = $(`[data-name="${productName}"]`); + card.attr('data-product-variant', productVariant); + } + } + } + /** * Since $productView can be dynamically inserted using render_with, * We have to retrieve the respective elements diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js index 56b430aab1..84aa74e1be 100644 --- a/assets/js/theme/product.js +++ b/assets/js/theme/product.js @@ -30,6 +30,7 @@ export default class Product extends PageManager { collapsibleFactory(); this.productDetails = new ProductDetails($('.productView'), this.context, window.BCData.product_attributes); + this.productDetails.setProductVariant(); videoGallery(); diff --git a/config.json b/config.json index 3077ef71c3..2bbf0c648f 100644 --- a/config.json +++ b/config.json @@ -31,7 +31,8 @@ "product_videos", "google_amp", "customized_checkout", - "account_payment_methods" + "account_payment_methods", + "enhanced_ecommerce" ] }, "css_compiler": "scss", diff --git a/templates/components/amp/products/grid.html b/templates/components/amp/products/grid.html index 0b58c4d515..c2ab04f4d9 100644 --- a/templates/components/amp/products/grid.html +++ b/templates/components/amp/products/grid.html @@ -1,7 +1,7 @@
    {{#each products}}
  • - {{>components/amp/products/card show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}} + {{>components/amp/products/card settings=../settings show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
    • {{/each}}
diff --git a/templates/components/amp/products/list-item.html b/templates/components/amp/products/list-item.html index 877c3090d4..044bdd2873 100644 --- a/templates/components/amp/products/list-item.html +++ b/templates/components/amp/products/list-item.html @@ -29,7 +29,7 @@

{{#if out_of_stock_message }} {{out_of_stock_message}} {{else}} - {{lang "products.add_to_cart"}} + {{lang "products.add_to_cart"}} {{/if}} {{/if}} {{/unless}} diff --git a/templates/components/amp/products/list.html b/templates/components/amp/products/list.html index 0518d56db0..98b419ea9a 100644 --- a/templates/components/amp/products/list.html +++ b/templates/components/amp/products/list.html @@ -1,7 +1,7 @@
    {{#each products}}
  • - {{>components/amp/products/list-item show_rating=../settings.show_product_rating theme_settings=../theme_settings}} + {{>components/amp/products/list-item settings=../settings show_rating=../settings.show_product_rating theme_settings=../theme_settings}}
    • {{/each}}
diff --git a/templates/components/brand/product-listing.html b/templates/components/brand/product-listing.html index 963a6582bf..5e8ce406c6 100644 --- a/templates/components/brand/product-listing.html +++ b/templates/components/brand/product-listing.html @@ -1,10 +1,10 @@ {{> components/products/filter sort=pagination.brand.sort}} -
+ {{#if theme_settings.product_list_display_mode '===' 'grid'}} - {{> components/products/grid products=brand.products show_compare=brand.show_compare theme_settings=theme_settings}} + {{> components/products/grid products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}} {{else}} - {{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings}} + {{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}} {{/if}}
diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html index 3d11a1f50e..31a0d66d52 100644 --- a/templates/components/cart/content.html +++ b/templates/components/cart/content.html @@ -149,3 +149,4 @@

{{name}}

{{/each}} +{{{ remote_api_scripts }}} diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html index bada6688c8..f4424b15f0 100644 --- a/templates/components/cart/preview.html +++ b/templates/components/cart/preview.html @@ -118,7 +118,7 @@

    {{#each cart.suggested_products}}
  • - {{> components/products/card hide_product_quick_view=true theme_settings=../theme_settings}} + {{> components/products/card settings=../settings hide_product_quick_view=true theme_settings=../theme_settings}}
    • {{/each}}
diff --git a/templates/components/category/product-listing.html b/templates/components/category/product-listing.html index 1d71709527..da702865d6 100644 --- a/templates/components/category/product-listing.html +++ b/templates/components/category/product-listing.html @@ -1,10 +1,18 @@ {{> components/products/filter sort=pagination.category.sort}} -
+ {{#if theme_settings.product_list_display_mode '===' 'grid'}} - {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings}} + {{#if settings.data_tag_enabled}} + {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }} + {{else}} + {{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings}} + {{/if}} {{else}} - {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings}} + {{#if settings.data_tag_enabled}} + {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }} + {{else}} + {{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings}} + {{/if}} {{/if}}
diff --git a/templates/components/common/body.html b/templates/components/common/body.html index a0bd51ad78..b5f12e4371 100644 --- a/templates/components/common/body.html +++ b/templates/components/common/body.html @@ -1,4 +1,4 @@ -
+
{{#block "hero"}} {{/block}}
{{#block "page"}} {{/block}} diff --git a/templates/components/common/footer.html b/templates/components/common/footer.html index 71271a12d0..159d525dc4 100644 --- a/templates/components/common/footer.html +++ b/templates/components/common/footer.html @@ -1,9 +1,22 @@ {{#if banners.bottom}} -
- -
+ {{#if settings.data_tag_enabled}} +
+ {{#each (limit banners.bottom_metadata 1)}} + + {{/each}} +
+ {{else}} +
+ +
+ {{/if}} + {{/if}}