packaged version 4.12.0 (#273)

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [4.12.0]
+
+### Added
+
+- Support for fetching products by SKU via query and shortcode.
+
+- Added "Product Sync Log" section to the Settings > Diagnostics panel in the 
+  WP Admin. This shows the last 10 sync attempts and their result.
+
+- Added support for Banners via the [Banners API](https://developer.bigcommerce.com/api-reference/store-management/marketing/banners) to import and use custom banners from the BC store 
+  within your WordPress site.
+
+### Changed
+
+- Updated gallery thumbnail active slide functionality when triggering SKU specific images.
+
+- Updated "Checkout Complete" page assignment in Settings. Allows for any page to be used, 
+  as the checkout complete page.
+
+### Fixed
+
+
 ## [4.11.0]
 
 ### Added
@@ -1397,6 +1419,7 @@
   in fact, reset postdata, so far as Gutenberg 3.2.0 is concerned.
 
 
+[4.12.0]: https://github.com/bigcommerce/bigcommerce-for-wordpress/compare/4.11.0...4.12.0
 [4.11.0]: https://github.com/bigcommerce/bigcommerce-for-wordpress/compare/4.10.0...4.11.0
 [4.10.0]: https://github.com/bigcommerce/bigcommerce-for-wordpress/compare/4.9.0...4.10.0
 [4.9.0]: https://github.com/bigcommerce/bigcommerce-for-wordpress/compare/4.8.0...4.9.0

assets/js/src/public/banners/banners.js

@@ -0,0 +1,59 @@
+/**
+ * @module Banners
+ * @description Adds banners to your site.
+ */
+
+import * as GLOBALS from 'publicConfig/wp-settings';
+import { bannerWrapper, bannerContent } from '../templates/banners';
+
+const banners = {
+	top: '',
+	bottom: '',
+};
+
+/**
+ * Determines if the given banner should be displayed.
+ *
+ * @param {*} banner BigCommerce Banner object.
+ * @return {boolean} True if banner should be displayed false otherwise.
+ */
+const showBanner = (banner) => {
+	const now = Math.round(new Date().getTime() / 1000);
+
+	// check if banner is visible and not expired
+	if (!banner.visible || (banner.date_type === 'custom' && now >= banner.date_to)) {
+		return false;
+	}
+
+	return true;
+};
+
+const init = () => {
+	if (!GLOBALS.BANNERS) {
+		return;
+	}
+
+	// Loop through banners array
+	GLOBALS.BANNERS.items.forEach((banner) => {
+		if (!showBanner(banner)) {
+			return;
+		}
+
+		// append banner to location
+		banners[banner.location] += bannerContent(banner.content);
+	});
+
+	const styles = `background-color: ${GLOBALS.BANNERS.bg_color}; color: ${GLOBALS.BANNERS.text_color};`;
+
+	// insert "top" banners
+	if (banners.top) {
+		document.body.insertAdjacentHTML('afterbegin', bannerWrapper(styles, banners.top));
+	}
+
+	// insert "bottom" banners
+	if (banners.bottom) {
+		document.body.insertAdjacentHTML('beforeend', bannerWrapper(styles, banners.bottom));
+	}
+};
+
+export default init;

assets/js/src/public/banners/index.js

@@ -0,0 +1,12 @@
+/**
+ * @module Banners
+ * @description Clearinghouse for all banner scripts.
+ */
+
+import banners from './banners';
+
+const init = () => {
+	banners();
+};
+
+export default init;

assets/js/src/public/config/wp-settings.js

@@ -16,3 +16,4 @@ export const SHIPPING_API_METHODS = CONFIG.cart.methods_api_url || '';
 export const CURRENCY_CODE = CONFIG.currency_code || '';
 export const COUPON_CODE_ADD = CONFIG.cart.coupon_code_add_api_url || '';
 export const COUPON_CODE_REMOVE = CONFIG.cart.coupon_code_delete_api_url || '';
+export const BANNERS = CONFIG.banners || [];

assets/js/src/public/core/ready.js

@@ -23,6 +23,7 @@ import loop from '../loop/index';
 import page from '../page/index';
 import product from '../product/index';
 import wishLists from '../wish-list/index';
+import banners from '../banners/index';
 
 import analytics from '../analytics/index';
 
@@ -68,6 +69,7 @@ const init = () => {
 	product();
 	wishLists();
 	analytics();
+	banners();
 
 	console.info('BigCommerce FE: Initialized all javascript that targeted document ready.');
 };

assets/js/src/public/product/variants.js

@@ -163,8 +163,9 @@ const setSelectedVariantPrice = (wrapper = '') => {
  * @function showVariantImage
  * @description Shows the variant image if one is available from state.variantImage.url.
  * @param swiperInstance
+ * @param swiperNavInstance
  */
-const showVariantImage = (swiperInstance) => {
+const showVariantImage = (swiperInstance, swiperNavInstance) => {
 	const slide = document.createElement('div');
 	tools.addClass(slide, 'swiper-slide');
 	tools.addClass(slide, 'bc-product-gallery__image-slide');
@@ -178,7 +179,9 @@ const showVariantImage = (swiperInstance) => {
 	image.setAttribute('srcset', state.variantImage.srcset);
 
 	swiperInstance.appendSlide(slide);
+	swiperInstance.update();
 	swiperInstance.slideTo(swiperInstance.slides.length);
+	swiperNavInstance.slideTo(0);
 
 	_.delay(() => {
 		trigger({ event: 'bigcommerce/init_slide_zoom', data: { container: slide.querySelector('img') }, native: false });
@@ -189,8 +192,9 @@ const showVariantImage = (swiperInstance) => {
  * @function removeVariantImage
  * @description Hide the active variant image.
  * @param swiperInstance
+ * @param swiperNavInstance
  */
-const removeVariantImage = (swiperInstance) => {
+const removeVariantImage = (swiperInstance, swiperNavInstance) => {
 	let slideIndex = '';
 
 	Object.entries(swiperInstance.slides).forEach(([key, slide]) => {
@@ -203,12 +207,14 @@ const removeVariantImage = (swiperInstance) => {
 		}
 	});
 
+	swiperInstance.slideTo(0);
+	swiperNavInstance.slideTo(0);
+
 	if (!slideIndex) {
 		return;
 	}
 
 	swiperInstance.removeSlide(slideIndex);
-	swiperInstance.slideTo(1);
 };
 
 /**
@@ -231,14 +237,16 @@ const showHideVariantImage = (e, wrapper = '') => {
 	}
 
 	state.variantImage.template = variantContainer.innerHTML;
-	const swiperInstance = tools.getNodes('bc-gallery-container', false, currentWrapper)[0].swiper;
+	const swiperWrapper = tools.getNodes('bc-gallery-container', false, currentWrapper)[0];
+	const swiperInstance = swiperWrapper.swiper;
+	const swiperNavInstance = tools.getNodes(`[data-id="${swiperWrapper.dataset.controls}"]`, false, document, true)[0].swiper;
 
 	// hide the image after each variant request.
-	removeVariantImage(swiperInstance);
+	removeVariantImage(swiperInstance, swiperNavInstance);
 
 	// If there is a variant image, show it with a short delay for animation purposes.
 	if (state.variantImage.url) {
-		showVariantImage(swiperInstance);
+		showVariantImage(swiperInstance, swiperNavInstance);
 	}
 };
 

assets/js/src/public/templates/banners.js

@@ -0,0 +1,7 @@
+export const bannerContent = content => (
+	`<div class="bc-banner">${content}</div>`
+);
+
+export const bannerWrapper = (styles = null, banners = null) => (
+	`<div class="bc-banners" style="${styles}">${banners}</div>`
+);

assets/js/src/utils/tools.js

@@ -187,4 +187,4 @@ export const insertAfter = (newNode, referenceNode) => {
 
 export const insertBefore = (newNode, referenceNode) => {
 	referenceNode.parentNode.insertBefore(newNode, referenceNode);
-};
+};

assets/pcss/admin/pages/settings/_plugin-settings.pcss

@@ -402,6 +402,42 @@
 	}
 }
 
+.bc-diagnostics-data__meta-sync_logs {
+
+	.bc-diagnostics-data__meta-label {
+		display: none;
+	}
+
+	.bc-diagnostics-data__meta-value {
+		padding-left: 0;
+	}
+}
+
+.bc-product-sync-data-table {
+	border-spacing: 0;
+	width: 100%;
+
+	th,
+	td {
+		padding: 14px;
+		display: table-cell;
+	}
+
+	th {
+		font-weight: 700;
+		background-color: var(--color-bc-concrete);
+	}
+
+	tr > td {
+		border-bottom: 1px solid var(--color-bc-concrete);
+	}
+}
+
+.bc-sync-summary-meta {
+	display: block;
+	margin-bottom: 4px;
+}
+
 .bc-settings-form--bigcommerce {
 
 	p.submit {

assets/pcss/content/components/_all.pcss

@@ -21,3 +21,4 @@
 @import "order-product-row";
 @import "images";
 @import "wish-lists";
+@import "banner";

assets/pcss/content/components/_banner.pcss

@@ -0,0 +1,14 @@
+.bc-banners {
+	padding: 0.78571em 0;
+	text-align: center;
+
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.bc-banner {
+	margin: 0 auto;
+	max-width: 85.71429em;
+	width: 100%;
+}