Skip to content

Instantly share code, notes, and snippets.

@vevgeniy85
Forked from evulse/shopify-section-ab.liquid
Created October 24, 2022 15:35
Show Gist options
  • Save vevgeniy85/57cf11779b1420d69580c084bd486884 to your computer and use it in GitHub Desktop.
Save vevgeniy85/57cf11779b1420d69580c084bd486884 to your computer and use it in GitHub Desktop.
This needs to be installed in your theme as a section
{% javascript %}
function loadSection() {
var elArray = Array.prototype.slice.call(document.querySelectorAll(".shopify-section-ab"));
if (window.parent.ThemeEditor !== undefined) {
elArray.forEach(function(el) {
el.classList.remove("ssab-neither");
el.classList.add("ssab-editor");
});
} else {
var cookie = "";
if (getCookie("shopify_section_ab") === "") {
if (Math.floor(Math.random() * 100) > 49) {
cookie = "A";
document.cookie = "shopify_section_ab=A";
} else {
cookie = "B";
document.cookie = "shopify_section_ab=B";
}
} else {
cookie = getCookie("shopify_section_ab");
}
if (cookie === "A") {
elArray.forEach(function(el) {
el.classList.remove("ssab-neither");
el.classList.add("ssab-show-a");
});
ga("send", "event", "A/B Test", "A", "Test Campaign");
} else {
elArray.forEach(function(el) {
el.classList.remove("ssab-neither");
el.classList.add("ssab-show-b");
});
ga("send", "event", "A/B Test", "B", "Test Campaign");
}
}
}
document.addEventListener("shopify:section:load", function(event) {
loadSection();
});
loadSection();
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === " ") {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
{% endjavascript %}
{% schema %}
{
"name": "A/B Test",
"class": "shopify-section-ab index-section--flush ssab-neither",
"settings": [],
"presets": [
{
"name": "A/B Test",
"category": "A/B Testing"
}
]
}
{% endschema %}
{% stylesheet %}
.shopify-section-ab {
display: none;
}
.shopify-section-ab.ssab-neither + *, .shopify-section-ab.ssab-show-b + * {
display: none;
}
.shopify-section-ab.ssab-neither + * + *, .shopify-section-ab.ssab-show-a + * + * {
display: none;
}
.shopify-section-ab.ssab-editor + *:before {
content: "A/B Test - Version A ↓";
display: block;
text-align: center;
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
padding: 30px;
}
.shopify-section-ab.ssab-editor + *:after {
content: "A/B Test - Version B ↓";
display: block;
text-align: center;
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
padding: 30px;
}
.shopify-section-ab.ssab-editor + * + *:after {
content: "A/B Test - End";
display: block;
text-align: center;
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
padding: 30px;
}
{% endstylesheet %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment