Skip to content

Instantly share code, notes, and snippets.

@aleksanderwalczuk
Last active September 24, 2021 11:39
Show Gist options
  • Select an option

  • Save aleksanderwalczuk/8a22b7d37e9dd3d2a0918487781e29cb to your computer and use it in GitHub Desktop.

Select an option

Save aleksanderwalczuk/8a22b7d37e9dd3d2a0918487781e29cb to your computer and use it in GitHub Desktop.
ylh-custom-scripts
<style>
.picky-bundler-container {
padding-top: 48px;
padding-bottom: 36px;
}
.BundleSlide_picky-bundle-slide-container_3lty6 {
padding: 0 15px;
}
.picky-custom-html h2 {
font: 600 40px/1.1em 'Galano Grotesque', sans-serif;
color: #0e2d68;
text-align: center;
text-transform: none;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v {
width: 100%;
max-width: unset;
}
.GridLayout_picky-vertical-product-card-orientation_2XYx1 {
grid-template-columns: none;
display: flex;
}
.BundleSlide_bar-container__Nw0P {
display: none;
}
.AddSelectedToCart_picky-total-prefix_3Z1O7 {
display: none;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_carousel-wrap_9_I5y {
flex-basis: 50%;
}
.RecommendedProductCard_product-link_3k-jZ {
display: block;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v div.RecommendedProductCard_picky-product-title_1VAM6 {
font: 600 32px/1.2em 'Galano Grotesque', sans-serif !important;
margin-bottom: 16px;
display: block !important;
color: #0e2d68;
height: auto;
text-decoration: none;
cursor: default;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v div.RecommendedProductCard_picky-product-title_1VAM6:hover {
text-decoration: none;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_add-to-cart-wrap_3YPJu.RecommendedProductCard_fixed-height_3Ux1q {
display: none;
}
/* container for heading and text content */
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_picky-product-options-container_BhxH7 {
margin: 0 !important;
padding: 10px 15px;
background-color: #FCF7EC;
}
.appended_paragraph {
font: 400 18px/28px 'GalanoGrotesque-Regular', sans-serif;
color: #0e2d68;
margin-bottom: 24px;
}
.RecommendedProductCard_product-options_IhS3I {
max-width: 600px;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_picky-product-options-container_BhxH7 .RecommendedProductCard_picky-options-ttl_3akmV {
font: 600 21.5px/1.2em 'Galano Grotesque', sans-serif !important;
color: #0e2d68;
margin-bottom: 16px;
opacity: 1;
}
div.picky-bundler-container.picky-widget>div.BundleSlide_picky-bundle-slide-container_3lty6>div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL>div.picky-product-card-container.GridLayout_picky-vertical-product-card-orientation_2XYx1>div>div.RecommendedProductCard_product-options_IhS3I>div>div:nth-child(2) {
display: none;
}
.multiselect__content-wrapper {
max-height: 150px !important;
}
div.RecommendedProductCard_info-wrap_3SAac {
margin-top: 0;
padding: 0;
}
.AddSelectedToCart_picky-add-selected-to-cart-button_1WuCf {
max-width: 315px;
background-color: #F45A29 !important;
border: none !important;
display: block;
margin: 20px auto 0;
font: 22px/28px 'GalanoGrotesque-Bold' !important;
letter-spacing: 0.04em;
}
.AddSelectedToCart_picky-add-selected-to-cart-button_1WuCf span {
font-family: 'GalanoGrotesque-Bold';
font-weight: bold;
font-size: 22px;
line-height: 28px;
letter-spacing: 0.04em;
}
/* discount price next to submit btn */
div.picky-bundler-container.picky-widget>div.BundleSlide_picky-bundle-slide-container_3lty6>div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL>div.AddSelectedToCart_picky-add-selected-to-cart_2hJoJ.BundleSlide_picky-bundle-add-selected-wrap_3vc-F>div.AddSelectedToCart_picky-selected-total_lySmO>div:nth-child(2)>div {
font: 400 18px/1.2em 'Galano Grotesque', sans-serif !important;
letter-spacing: 0.03em;
color: #0e2d68;
}
div.picky-bundler-container.picky-widget>div.BundleSlide_picky-bundle-slide-container_3lty6>div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL>div.AddSelectedToCart_picky-add-selected-to-cart_2hJoJ.BundleSlide_picky-bundle-add-selected-wrap_3vc-F>div.AddSelectedToCart_picky-selected-total_lySmO>div:nth-child(2) {
display: flex;
flex-direction: row-reverse;
}
div.picky-bundler-container.picky-widget .AddSelectedToCart_picky-retail-price_1bAh6 {
display: none;
}
div.picky-bundler-container.picky-widget .AddSelectedToCart_picky-sale-price_Kv2E1 {
margin-left: 8px;
}
div.picky-bundler-container.picky-widget>div.BundleSlide_picky-bundle-slide-container_3lty6>div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL>div.AddSelectedToCart_picky-add-selected-to-cart_2hJoJ.BundleSlide_picky-bundle-add-selected-wrap_4vc-F {
display: flex;
flex-direction: column-reverse;
}
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_picky-product-options-container_BhxH7 .RecommendedProductCard_picky-options_2ivRv:not(.RecommendedProductCard_rounded_3T--8) * {
font: 400 18px/1.2em 'Galano Grotesque', sans-serif;
color: #0e2d68;
}
.picky-widget .multiselect__tags {
padding-top: 4px;
padding-bottom: 4px;
}
@media screen and (min-width: 768px) {
.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v {
flex-direction: row;
}
.RecommendedProductCard_info-wrap_3SAac {
padding: 20px 30px;
}
}
</style>
<script>
var pageFunctions = {
appendP: {
selector: 'div.picky-bundler-container.picky-widget > div.BundleSlide_picky-bundle-slide-container_3lty6 > div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL > div.picky-product-card-container.GridLayout_picky-vertical-product-card-orientation_2XYx1 > div > div.RecommendedProductCard_product-options_IhS3I > a > div',
callback: function () {
var pText = "Our Signature is perfect for snuggling up with a cup of coffee and your favourite person. Combined with the free straps, it can also be your perfect partner for autumn adventure."
var pEl = document.createElement('p')
var parentEl = document.querySelector('div.picky-bundler-container.picky-widget > div.BundleSlide_picky-bundle-slide-container_3lty6 > div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL > div.picky-product-card-container.GridLayout_picky-vertical-product-card-orientation_2XYx1 > div > div.RecommendedProductCard_product-options_IhS3I > a > div')
if (parentEl) {
pEl.textContent = pText
parentEl.appendChild(pEl)
pEl.classList.add('appended_paragraph')
}
}
},
modifyLabel: {
selector: '.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_picky-product-options-container_BhxH7 .RecommendedProductCard_picky-options-ttl_3akmV',
callback: function () {
var selectLabel = document.querySelector('.RecommendedProductCard_vertical-picky-product-card-orientation_3En3v .RecommendedProductCard_picky-product-options-container_BhxH7 .RecommendedProductCard_picky-options-ttl_3akmV')
if (selectLabel) {
selectLabel.textContent = 'Choose hammock color:'
}
},
},
// hideSoldOptions: {
// selector: '.RecommendedProductCard_picky-options_2ivRv',
// callback: function () {
// var outOfStockClassName = 'RecommendedProductCard_out-of-stock_3DBr3'
// var selectWrapper = document.querySelector('.RecommendedProductCard_picky-options_2ivRv')
// if (selectWrapper) {
// var elements = selectWrapper.querySelectorAll('.multiselect__element')
// Array.from(elements).map(function (el) {
// if (el.querySelector('.' + outOfStockClassName)) {
// el.style.display = 'none'
// }
// })
// }
// }
// },
priceLabel: {
selector: "div.picky-bundler-container.picky-widget > div.BundleSlide_picky-bundle-slide-container_3lty6 > div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL > div.AddSelectedToCart_picky-add-selected-to-cart_2hJoJ.BundleSlide_picky-bundle-add-selected-wrap_3vc-F > div.AddSelectedToCart_picky-selected-total_lySmO > div:nth-child(2)",
callback: function () {
var priceLabel = document.querySelector('div.picky-bundler-container.picky-widget > div.BundleSlide_picky-bundle-slide-container_3lty6 > div.BundleSlide_picky-bundle-slide-content_3fd1r.BundleSlide_button-below_3X1eL > div.AddSelectedToCart_picky-add-selected-to-cart_2hJoJ.BundleSlide_picky-bundle-add-selected-wrap_3vc-F > div.AddSelectedToCart_picky-selected-total_lySmO > div:nth-child(2)')
var labelPrefix = document.createElement('div')
labelPrefix.textContent = 'Regular price:'
priceLabel.appendChild(labelPrefix)
}
},
submitBtn: {
selector: '.AddSelectedToCart_picky-add-selected-to-cart-button_1WuCf',
callback: function () {
var btn = document.querySelector('.AddSelectedToCart_picky-add-selected-to-cart-button_1WuCf')
btn.textContent = 'BUY NOW | $199'
if (btn.hasAttribute('disabled')) {
btn.removeAttribute('disabled')
btn.classList.remove('AddSelectedToCart_disabled_PbKpU')
}
}
}
}
function setElementInterval(elementSelector, callbackFn, interval) {
const element = { interval: false, defined: false }
function modifyElement(elementSelector) {
const optionContainer = document.querySelector(elementSelector);
if (!optionContainer) {
return null
}
callbackFn()
element.defined = true
if (element.interval) {
clearInterval(elementInterval)
}
}
if (!element.interval) {
element.interval = setInterval(modifyElement(elementSelector), interval)
}
}
for (methodObj in pageFunctions) {
setElementInterval(pageFunctions[methodObj].selector, pageFunctions[methodObj].callback, 100)
}
//
const showPopupButton = document.querySelector('#testuj > div.ec-section__button > a')
const showPopupButtonContainer = document.querySelector('#testuj > div.ec-section__button')
const ATFContainer = document.querySelector('#page > div.page__wrapper > div:nth-child(2) > section.ec-banner > div > div > div.col-12.col-lg-6.order-2.order-lg-1')
const newButton = ATFContainer.appendChild(showPopupButton.cloneNode(true))
const showPopupButtonSection = document.querySelector('#testuj')
// array of section__button children
const divTypeChildren = Array.from(showPopupButtonContainer.children).filter(el => el.nodeName.toLowerCase() === 'div')
// hide thank you div, show popup and popup bg
newButton.addEventListener('click', () => {
divTypeChildren.map((el, idx) => {
if (idx > 3) {
el.style.display = 'flex'
} else {
el.style.display = 'none'
}
})
showPopupButtonSection.style.position = 'static'
})
(function() {
})()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment