Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show spotlight when switching to variable product type (#37413)
* Show variable product tour * Only show tour when product type is changed to variable * Only show tour if it hasn't been shown before * Add variable_product_tour_shown to UserPreferences type * Store whether tour has been shown in user preferences * Record Tracks events * Add docblock for woocommerce_admin_get_user_data_fields filter * Add test for tour
- Loading branch information
1 parent
aa33543
commit 4a4b1d8
Showing
9 changed files
with
217 additions
and
10 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
packages/js/data/changelog/add-variable-product-type-spotlight
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: add | ||
|
||
Add variable_product_tour_shown to UserPreferences type. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
plugins/woocommerce-admin/client/guided-tours/variable-product-tour/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { useEffect, useState } from '@wordpress/element'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { TourKit, TourKitTypes } from '@woocommerce/components'; | ||
import { useUserPreferences } from '@woocommerce/data'; | ||
import { recordEvent } from '@woocommerce/tracks'; | ||
|
||
function getStepName( | ||
steps: TourKitTypes.WooStep[], | ||
currentStepIndex: number | ||
) { | ||
return steps[ currentStepIndex ]?.meta?.name; | ||
} | ||
|
||
export const VariableProductTour = () => { | ||
const [ isTourOpen, setIsTourOpen ] = useState( false ); | ||
|
||
const { updateUserPreferences, variable_product_tour_shown: hasShownTour } = | ||
useUserPreferences(); | ||
|
||
const config: TourKitTypes.WooConfig = { | ||
steps: [ | ||
{ | ||
referenceElements: { | ||
desktop: '.attribute_tab', | ||
}, | ||
focusElement: { | ||
desktop: '.attribute_tab', | ||
}, | ||
meta: { | ||
name: 'attributes', | ||
heading: __( 'Start by adding attributes', 'woocommerce' ), | ||
descriptions: { | ||
desktop: __( | ||
'Add attributes like size and color for customers to choose from on the product page. We will use them to generate product variations.', | ||
'woocommerce' | ||
), | ||
}, | ||
primaryButton: { | ||
text: __( 'Got it', 'woocommerce' ), | ||
}, | ||
}, | ||
}, | ||
], | ||
options: { | ||
// WooTourKit does not handle merging of default options properly, | ||
// so we need to duplicate the effects options here. | ||
effects: { | ||
spotlight: { | ||
interactivity: { | ||
enabled: true, | ||
rootElementSelector: '#wpwrap', | ||
}, | ||
}, | ||
arrowIndicator: true, | ||
liveResize: { | ||
mutation: true, | ||
resize: true, | ||
rootElementSelector: '#wpwrap', | ||
}, | ||
}, | ||
}, | ||
closeHandler: ( steps, currentStepIndex ) => { | ||
updateUserPreferences( { variable_product_tour_shown: 'yes' } ); | ||
setIsTourOpen( false ); | ||
|
||
if ( currentStepIndex === steps.length - 1 ) { | ||
recordEvent( 'variable_product_tour_completed', { | ||
step: getStepName( | ||
steps as TourKitTypes.WooStep[], | ||
currentStepIndex | ||
), | ||
} ); | ||
} else { | ||
recordEvent( 'variable_product_tour_dismissed', { | ||
step: getStepName( | ||
steps as TourKitTypes.WooStep[], | ||
currentStepIndex | ||
), | ||
} ); | ||
} | ||
}, | ||
}; | ||
|
||
// show the tour when the product type is changed to variable | ||
useEffect( () => { | ||
const productTypeSelect = document.querySelector( | ||
'#product-type' | ||
) as HTMLSelectElement; | ||
|
||
if ( hasShownTour === 'yes' || ! productTypeSelect ) { | ||
return; | ||
} | ||
|
||
function handleProductTypeChange() { | ||
if ( productTypeSelect.value === 'variable' ) { | ||
setIsTourOpen( true ); | ||
recordEvent( 'variable_product_tour_started', { | ||
step: getStepName( config.steps, 0 ), | ||
} ); | ||
} | ||
} | ||
|
||
productTypeSelect.addEventListener( 'change', handleProductTypeChange ); | ||
|
||
return () => { | ||
productTypeSelect.removeEventListener( | ||
'change', | ||
handleProductTypeChange | ||
); | ||
}; | ||
} ); | ||
|
||
if ( ! isTourOpen ) { | ||
return null; | ||
} | ||
|
||
return <TourKit config={ config } />; | ||
}; |
13 changes: 13 additions & 0 deletions
13
plugins/woocommerce-admin/client/wp-admin-scripts/variable-product-tour/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { render } from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { VariableProductTour } from '../../guided-tours/variable-product-tour'; | ||
|
||
const root = document.createElement( 'div' ); | ||
root.setAttribute( 'id', 'variable-product-tour-root' ); | ||
render( <VariableProductTour />, document.body.appendChild( root ) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
plugins/woocommerce/changelog/add-variable-product-type-spotlight
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
Significance: minor | ||
Type: enhancement | ||
|
||
Show tour when product type is changed to variable. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters