Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PROJECT-2272: Add support for declarative data tag analytics #1377

Merged
merged 1 commit into from
Nov 2, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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