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.

Sign up for GitHub

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

Remove references to code updates in experimentation topic #186

Merged
merged 3 commits into from
Feb 5, 2025
Merged

Remove references to code updates in experimentation topic #186

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
beed63e
Remove references to code updates in experimentation topic
keharper Feb 4, 2025
6386858
One more change
keharper Feb 5, 2025
c034116
Merge branch 'develop' into experimentation
keharper Feb 5, 2025
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
43 changes: 2 additions & 41 deletions src/content/docs/dropins/all/experimenting.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ A version of a page that is different from the original version. Variants are cr

### UI label changes

Changes to the text or labels displayed on a page. Experimenting with label changes require you to create an alternate `placeholders` file and make minor changes to the drop-in's initializer.

Changes to the text or labels displayed on a page.

### Control

Expand Down Expand Up @@ -59,13 +58,12 @@ For detailed development information, see https://github.com/hlxsites/aem-boiler

## Step-by-step

Creating an A/B experiment for a commerce storefront page includes the following tasks:
Creating an A/B experiment for a Commerce storefront page includes the following tasks:

<Steps>
1. Create a variant page for the experiment.
1. Add the experiment to the metadata block of the original page.
1. Preview the experiment using the AEM Sidekick extension.
1. Make code changes for experiments, if necessary.
</Steps>

<Tasks>
Expand All @@ -74,10 +72,6 @@ Creating an A/B experiment for a commerce storefront page includes the following

Duplicate the original page and make the changes you need to create a new page with the new content or features you want to use in the experiment. For most content changes, you can add those changes directly to the page/document. Examples include adding any of the [AEM content blocks](https://www.aem.live/developer/block-collection#boilerplate), additional commerce blocks (such as product recommendations) and more.

:::note
If you want to test changes to the UI labels in the drop-in, you can do that in code as part of the drop-in's initializer. See [Step 4: Code changes for experiments](#code-changes-for-experiments).
:::

</Task>

<Task>
Expand All @@ -101,39 +95,6 @@ Use the AEM Sidekick Preview button to preview the experiment and compare the or

</Task>

<Task>
### Code changes for experiments

Some experiments, such as creating variants of labels with the `placeholders` file, require code changes to a drop-in component's initializer code. For example, by making the following additions to the default `cart.js` initializer, you can read the metadata block from the cart page and identify when a variant is being delivered, then apply an alternate `placeholders` file.

<Diagram caption="Alternate placeholders file with different labels">![Alternate placeholders file with different labels](@images/PlaceholderChanges.png)</Diagram>

```js
/* eslint-disable import/no-cycle */
import { initializers } from '@dropins/tools/initializer.js';
import { initialize } from '@dropins/storefront-cart/api.js';
import { initializeDropin } from './index.js';
import { fetchPlaceholders } from '../aem.js';

await initializeDropin(async () => {

// Identify experiment page (Challenger 1)
const isVariantPlaceholder = document.body.classList.contains('experiment-cart001') && document.body.classList.contains('variant-challenger-1');

// Fetch labels from an alternate placeholders file
const labels = await fetchPlaceholders(isVariantPlaceholder ? '/drafts/marketer' : undefined);

const langDefinitions = {
default: {
...labels,
},
};

return initializers.mountImmediately(initialize, { langDefinitions });
})();
```

</Task>
</Tasks>

## Next steps
Expand Down