-
-
Save swym-public/e792039732102a09762080655351fb8b to your computer and use it in GitHub Desktop.
Code for creating a custom wishlist page with Swym APIs for Shopify - Single Wishlist Example
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
<div class="page-width"> | |
<div class="grid"> | |
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth"> | |
<div class="section-header text-center"> | |
<h1>{{ page.title }}</h1> | |
</div> | |
<div class="rte"> | |
{{ page.content }} | |
<div id="wishlist-items-container"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="{{ 'swym-wishlist.js' | asset_url }}" async="async"></script> | |
<!-- Swym Custom Page CSS --> | |
{% include 'swym-custom-wishlist-page-css'%} |
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
<style class="custom-swym-wishlist-css"> | |
#wishlist-items-container { | |
max-width: 1180px; | |
margin: auto; | |
} | |
#wishlist-items-container .swym-wishlist-grid { | |
max-width: 900px; | |
margin: auto; | |
width: 100%; | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: left; | |
} | |
.swym-wishlist-grid .swym-is-anchor { | |
opacity: 1; | |
cursor: pointer; | |
text-decoration: none; | |
touch-action: manipulation; | |
} | |
.swym-wishlist-grid * { | |
font-size: 100%; | |
font: inherit; | |
font-family: "HelveticaNeue",Helvetica,Verdana,Arial,sans-serif; | |
line-height: 1.4em; | |
vertical-align: baseline; | |
box-sizing: border-box; | |
border: 0; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
text-transform: none; | |
} | |
a.swym-wishlist-item.swym-is-anchor { | |
background: #fff; | |
border: 1px solid #333; | |
width: 21%; | |
margin: 0 4% 4% 0; | |
display: flex; | |
flex-direction: column; | |
position: relative; | |
justify-content: space-between; | |
cursor: pointer; | |
} | |
button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button { | |
position: absolute; | |
right: 8px; | |
top: 8px; | |
width: 25px; | |
height: 25PX; | |
background: #fff; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.swym-wishlist-grid .swym-wishlist-image-wrapper { | |
overflow: hidden !important; | |
height: 180px; | |
} | |
.swym-wishlist-grid .swym-wishlist-image-wrapper img { | |
max-width: 100%; | |
} | |
.swym-wishlist-grid .swym-is-button { | |
text-align: left; | |
background: inherit; | |
height: auto; | |
width: auto; | |
z-index: auto; | |
display: inline-block; | |
background: 0; | |
border: 0; | |
text-transform: none; | |
bottom: auto; | |
box-shadow: none; | |
clear: none; | |
cursor: pointer; | |
font-family: inherit; | |
font-size: medium; | |
font-style: normal; | |
font-variant: normal; | |
font-weight: normal; | |
height: auto; | |
left: auto; | |
letter-spacing: normal; | |
line-height: normal; | |
margin: 0; | |
max-height: none; | |
max-width: none; | |
min-height: 0; | |
min-width: 0; | |
opacity: 1; | |
padding: 0; | |
position: static; | |
right: auto; | |
text-align: inherit; | |
text-decoration: none; | |
text-transform: none; | |
top: auto; | |
transform: none; | |
visibility: visible; | |
} | |
.swym-wishlist-grid .swym-wishlist-item .swym-delete-btn ::before { | |
color: #000; | |
content: "X"; | |
font-size: 16px; | |
} | |
button.swym-add-to-cart-btn.swym-button.swym-button-1.swym-is-button.swym-is-button { | |
z-index : 1000; | |
} | |
button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button { | |
z-index : 1000; | |
} | |
.swym-is-button .swym-title.swym-title-1 { | |
font-weight: bold; | |
font-size: 16px; | |
color: #4f4f4f; | |
margin: 12px 15px 6px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.swym-wishlist-grid .swym-wishlist-item .swym-variant-title { | |
font-size: 14px; | |
line-height: 16px; | |
color: #333; | |
margin: 0 15px 10px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.swym-wishlist-grid .swym-wishlist-item .swym-product-price { | |
color: #333; | |
font-weight: bold; | |
font-size: 18px; | |
padding: 0 15px 13px; | |
display: flex; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.swym-wishlist-grid .swym-product-price .swym-product-final-price { | |
display: inline-block; | |
margin-right: .4em; | |
} | |
.swym-wishlist-grid .swym-wishlist-item .swym-add-to-cart-btn { | |
background: #dc3b1a; | |
font-weight: bold; | |
font-size: 14px; | |
text-align: center; | |
text-transform: uppercase; | |
padding: 6px; | |
display: block; | |
color: #fff; | |
} | |
/* Mobile Screens */ | |
@media only screen and (max-width: 900px){ | |
#wishlist-items-container .swym-wishlist-grid .swym-wishlist-item { | |
width: 48%; | |
max-width: none; | |
margin: 0 4% 4% 0; | |
} | |
#wishlist-items-container .swym-wishlist-grid .swym-wishlist-item { | |
width: auto ; | |
margin: 0 0 4% 0; | |
padding: 0px; | |
} | |
#wishlist-items-container .swym-wishlist-grid { | |
justify-content: center; | |
} | |
} | |
/* Ipad */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
.swym-wishlist-grid .swym-wishlist-image-wrapper { | |
overflow: hidden !important; | |
height: 280px; | |
} | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
.swym-wishlist-grid .swym-wishlist-image-wrapper { | |
overflow: hidden !important; | |
height: 100px; | |
} | |
} | |
button#swym-custom-add-toCartBtn[data-state-cart="swym-added"]{ | |
background : green; | |
} | |
</style> |
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
var productCardMarkup = | |
`<div class="swym-wishlist-grid"> | |
{{#products}} | |
<a href="{{du}}"aria-label="{{dt}}" class="swym-wishlist-item swym-is-anchor"><button id="swym-remove-productBtn" aria-label="Delete" data-variant-id="{{epi}}" data-product-id="{{empi}}" class="swym-delete-btn swym-nav swym-nav-1 swym-is-button"><span class="swym-icon"></span></button> | |
<div class="swym-wishlist-image-wrapper"><img alt="" class="swym-wishlist-image" src="{{iu}}"></div><button class="swym-is-button"> | |
<div class="swym-title swym-title-1"> | |
{{dt}} | |
</div></button> | |
<div class="swym-variant-title swym-text swym-title-2 swym-variant-title-spacer"> | |
{{variantinfo}} | |
</div> | |
<div class="swym-product-price swym-text swym-text-1"> | |
<div class="swym-product-final-price swym-value"> | |
{{cu}}{{pr}} | |
</div> | |
</div> | |
<button id="swym-custom-add-toCartBtn" data-state-cart="{{#isInCart}}swym-added{{/isInCart}}"data-product-url="{{du}}" data-variant-id="{{epi}}" data-product-id="{{empi}}"class="swym-add-to-cart-btn swym-button swym-button-1 swym-is-button swym-is-button"> | |
{{#isInCart}}Added to cart{{/isInCart}}{{^isInCart}}Add to cart{{/isInCart}} | |
</button> | |
</a> | |
{{/products}} | |
</div>`; | |
function getVariantInfo(variants) { | |
try { | |
let variantKeys = ((variants && variants != "[]") ? Object.keys(JSON.parse(variants)[0]) : []), | |
variantinfo; | |
if (variantKeys.length > 0) { | |
variantinfo = variantKeys[0]; | |
if (variantinfo == "Default Title") { | |
variantinfo = ""; | |
} | |
} else { | |
variantinfo = ""; | |
} | |
return variantinfo; | |
} catch (err) { | |
return variants; | |
} | |
} | |
if (!window.SwymCallbacks) { | |
window.SwymCallbacks = []; | |
} | |
window.SwymCallbacks.push(swymRenderWishlist); /* Init Here */ | |
function swymRenderWishlist(swat) { | |
// Get wishlist items | |
swat.fetch(function(products) { | |
console.log(products) | |
var wishlistContentsContainer = document.getElementById("wishlist-items-container"); | |
var formattedWishlistedProducts = products.map(function(p) { | |
p = SwymUtils.formatProductPrice(p); // formats product price and adds currency to product Object | |
p.isInCart = _swat.platform.isInDeviceCart(p.epi) || (p.et == _swat.EventTypes.addToCart); | |
p.variantinfo = (p.vi ? getVariantInfo(p.vi) : ""); | |
return p; | |
}); | |
var productCardsMarkup = SwymUtils.renderTemplateString(productCardMarkup, { | |
products: formattedWishlistedProducts | |
}); | |
if(wishlistContentsContainer){ | |
wishlistContentsContainer.innerHTML = productCardsMarkup; | |
attachClickListeners(); | |
} else{ | |
console.log("Container not found, Wishlist Page element not found"); | |
} | |
}); | |
} | |
function onAddToCartClick(e) { | |
e.preventDefault(); | |
var productId = e.currentTarget.getAttribute("data-product-id"); | |
var variantId = e.currentTarget.getAttribute("data-variant-id"); | |
var du = e.target.getAttribute("data-product-url"); | |
e.target.innerHTML = "Adding.."; | |
window._swat.replayAddToCart({ | |
empi: productId, | |
du: du | |
}, variantId, function(c) { | |
e.target.innerHTML = "Added to Cart"; | |
e.target.setAttribute("data-state-cart", "swym-added"); | |
console.log("Successfully added product to cart.", c); | |
}, function(e) { | |
console.log(e); | |
}); | |
} | |
function attachClickListeners() { | |
var addToCartButtons = document.querySelectorAll("#swym-custom-add-toCartBtn"); | |
var removeBtns = document.querySelectorAll("#swym-remove-productBtn"); | |
// Add to cart Btns | |
for (var i = 0; i < addToCartButtons.length; i++) { | |
addToCartButtons[i].addEventListener('click', onAddToCartClick, false); | |
} | |
// Remove Buttons | |
for (var k = 0; k < removeBtns.length; k++) { | |
removeBtns[k].addEventListener('click', onRemoveBtnClick, false); | |
} | |
console.log("Events attached!"); | |
} | |
function onRemoveBtnClick(e) { | |
e.preventDefault(); | |
var epi = +e.currentTarget.getAttribute("data-variant-id"); | |
var empi = +e.currentTarget.getAttribute("data-product-id"); | |
window._swat.fetch(function(products) { | |
products.forEach(function(product) { | |
if (epi && empi && product.epi == epi && product.empi == empi) { | |
window._swat.removeFromWishList(product, function() { | |
if (!window.SwymCallbacks) { | |
window.SwymCallbacks = []; | |
} | |
window.SwymCallbacks.push(swymRenderWishlist); | |
}); | |
} | |
}); | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment