Skip to content

Commit

Permalink
Merge pull request #1377 from lord2800/CP-3028
Browse files Browse the repository at this point in the history
PROJECT-2272: Add support for declarative data tag analytics
  • Loading branch information
Ubersmake authored Nov 2, 2018
2 parents ad406bb + 55fc73e commit 33fdfb8
Show file tree
Hide file tree
Showing 37 changed files with 229 additions and 73 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
98 changes: 98 additions & 0 deletions assets/js/theme/common/product-details.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export default class ProductDetails {

$productOptionsElement.on('change', event => {
this.productOptionsChanged(event);
this.setProductVariant();
});

$form.on('submit', event => {
Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions assets/js/theme/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
3 changes: 2 additions & 1 deletion config.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
"product_videos",
"google_amp",
"customized_checkout",
"account_payment_methods"
"account_payment_methods",
"enhanced_ecommerce"
]
},
"css_compiler": "scss",
Expand Down
2 changes: 1 addition & 1 deletion templates/components/amp/products/grid.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="productGrid">
{{#each products}}
<li class="product">
{{>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}}
</li>
{{/each}}
</ul>
2 changes: 1 addition & 1 deletion templates/components/amp/products/list-item.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h4 class="listItem-title">
{{#if out_of_stock_message }}
<span href="{{url}}" class="button button--primary">{{out_of_stock_message}}</span>
{{else}}
<a href="{{add_to_cart_url}}" class="button button--primary">{{lang "products.add_to_cart"}}</a>
<a href="{{add_to_cart_url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--primary">{{lang "products.add_to_cart"}}</a>
{{/if}}
{{/if}}
{{/unless}}
Expand Down
2 changes: 1 addition & 1 deletion templates/components/amp/products/list.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="productList">
{{#each products}}
<li class="product">
{{>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}}
</li>
{{/each}}
</ul>
6 changes: 3 additions & 3 deletions templates/components/brand/product-listing.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{{> components/products/filter sort=pagination.brand.sort}}

<form action="{{urls.compare}}" method='POST' data-product-compare>
<form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Brand: {{brand.name}}" {{/if}} data-product-compare>
{{#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}}
</form>

Expand Down
1 change: 1 addition & 0 deletions templates/components/cart/content.html
Original file line number Diff line number Diff line change
Expand Up @@ -149,3 +149,4 @@ <h4 class="cart-item-name"><a href="{{url}}">{{name}}</a></h4>
{{/each}}
</tbody>
</table>
{{{ remote_api_scripts }}}
2 changes: 1 addition & 1 deletion templates/components/cart/preview.html
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ <h4>
<ul class="productGrid">
{{#each cart.suggested_products}}
<li class="product">
{{> 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}}
</li>
{{/each}}
</ul>
Expand Down
14 changes: 11 additions & 3 deletions templates/components/category/product-listing.html
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
{{> components/products/filter sort=pagination.category.sort}}

<form action="{{urls.compare}}" method='POST' data-product-compare>
<form action="{{urls.compare}}" method='POST' {{#if settings.data_tag_enabled}} data-list-name="Category: {{category.name}}" {{/if}} data-product-compare>
{{#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}}
</form>

Expand Down
2 changes: 1 addition & 1 deletion templates/components/common/body.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="body">
<div class="body" data-currency-code="{{currency_selector.active_currency_code}}">
{{#block "hero"}} {{/block}}
<div class="container">
{{#block "page"}} {{/block}}
Expand Down
23 changes: 18 additions & 5 deletions templates/components/common/footer.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
{{#if banners.bottom}}
<div class="banners" data-banner-location="bottom">
<div class="banner">
{{{limit banners.bottom 1}}}
</div>
</div>
{{#if settings.data_tag_enabled}}
<div class="banners" data-banner-location="bottom">
{{#each (limit banners.bottom_metadata 1)}}
<div class="banner" data-event-type="promotion" data-entity-id="{{this.id}}" data-name="{{this.banner-name}}" data-position="{{this.location}}" data-name="{{this.banner-name}}">
<div data-event-type="promotion-click">
{{{this.content}}}
</div>
</div>
{{/each}}
</div>
{{else}}
<div class="banners" data-banner-location="bottom">
<div class="banner">
{{{limit banners.bottom 1}}}
</div>
</div>
{{/if}}

{{/if}}
<footer class="footer" role="contentinfo">
<div class="container">
Expand Down
8 changes: 6 additions & 2 deletions templates/components/common/header.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
{{#if banners.top}}
<div class="banners" data-banner-location="top">
<div class="banner">
{{{limit banners.top 1}}}
{{#each (limit banners.top_metadata 1)}}
<div class="banner" data-event-type="promotion" data-entity-id="{{this.id}}" data-name="{{this.banner-name}}" data-position="{{this.location}}" data-banner-id="{{this.banner-name}}">
<div data-event-type="promotion-click">
{{{this.content}}}
</div>
</div>
{{/each}}
</div>
{{/if}}
<header class="header" role="banner">
Expand Down
20 changes: 12 additions & 8 deletions templates/components/products/card.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<article class="card {{#if alternate}}card--alternate{{/if}}">
<article class="card {{#if alternate}}card--alternate{{/if}}" {{#if settings.data_tag_enabled}} data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}" {{/if}}>
<figure class="card-figure">
{{#or price.non_sale_price_with_tax price.non_sale_price_without_tax}}
{{#if theme_settings.product_sale_badges '===' 'sash'}}
Expand All @@ -21,7 +21,7 @@
<img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
</div>
{{else}}
<a href="{{url}}">
<a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
<div class="card-img-container">
<img class="card-image lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">
</div>
Expand All @@ -32,7 +32,11 @@
{{#unless hide_product_quick_view}}
{{#if theme_settings.show_product_quick_view}}
{{#unless demo}}
<a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
{{#if settings.data_tag_enabled}}
<a href="#" class="button button--small card-figcaption-button quickview" data-event-type="product-click" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
{{else}}
<a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
{{/if}}
{{/unless}}
{{/if}}
{{/unless}}
Expand All @@ -44,16 +48,16 @@
{{#or customer (if theme_settings.restrict_to_login '!==' true)}}
{{#if show_cart_action}}
{{#if has_options}}
<a href="{{url}}" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
<a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
{{/if}}
{{#if pre_order}}
<a href="{{pre_order_add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
<a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
{{/if}}
{{#if add_to_cart_url }}
<a href="{{add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
<a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
{{/if}}
{{#if out_of_stock_message }}
<a href="{{url}}" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
<a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>
{{/if}}
{{/if}}
{{/or}}
Expand All @@ -75,7 +79,7 @@ <h4 class="card-title">
{{#if demo}}
{{name}}
{{else}}
<a href="{{url}}">{{name}}</a>
<a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
{{/if}}
</h4>

Expand Down
3 changes: 2 additions & 1 deletion templates/components/products/carousel.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<section class="productCarousel"
data-list-name="{{list}}"
data-slick='{
"dots": true,
"infinite": false,
Expand All @@ -9,7 +10,7 @@
>
{{#each products}}
<div class="productCarousel-slide">
{{> components/products/card theme_settings=../theme_settings customer=../customer}}
{{> components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
</div>
{{/each}}
</section>
2 changes: 1 addition & 1 deletion templates/components/products/description.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p class="productView-title">{{lang 'products.description'}}</p>
<div class="productView-description">
<div class="productView-description" {{#if settings.data_tag_enabled}} data-event-type="product" {{/if}}>
{{{product.description}}}
{{{snippet 'product_description'}}}
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/components/products/featured.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<h2 class="page-heading">{{lang 'products.featured' }}</h2>

<ul class="productGrid productGrid--maxCol{{ columns }}" data-product-type="featured">
<ul class="productGrid productGrid--maxCol{{ columns }}" data-product-type="featured" {{#if settings.data_tag_enabled}} data-list-name="Featured Products" {{/if}}>
{{#each products}}
<li class="product">
{{>components/products/card theme_settings=../theme_settings customer=../customer}}
{{>components/products/card settings=../settings theme_settings=../theme_settings customer=../customer event="list" position=(add @index 1)}}
</li>
{{/each}}
</ul>
2 changes: 1 addition & 1 deletion templates/components/products/grid.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="productGrid">
{{#each products}}
<li class="product">
{{>components/products/card show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer}}
{{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
</li>
{{/each}}
</ul>
Loading

0 comments on commit 33fdfb8

Please sign in to comment.