Где допустила ошибку
Подскажите пожалуйста, где я допустила ошибку?
// Conversionpirate.com if (window.location.href.indexOf('checkout') > -1) { /////// var html = `<style> .cro-block { width: 100%; position: absolute; bottom: 0; margin-bottom: 20px; } </style> <div class="cro-block"> </div>`; document.querySelector('.total-line-table').insertAdjacentHTML('afterEnd', html); var html = `<style> img { border: 0; max-width: 100%; } .cro-checkout-trustsection { background-color: white; border-radius: 5px; padding-top: 15px; border: 1px solid rgb(229, 229, 229); } .cro-checkout-payment-methods { width: 90%; margin: 15px auto; } .cro-checkout-trustsection-title { color: rgb(115, 115, 115); text-align: center; padding-bottom: 15px; } .cro-guarantee-details-text { color: rgb(83, 83, 83); line-height: 18px; } .cro-guarantee-details { border-radius: 5px 5px 0 0; } .cro-boleto-details { border-radius: 0 0 5px 5px; } .cro-gb-details { background-color: rgb(250, 250, 250); box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px; border: 1px solid rgb(204, 204, 204); width: 90%; padding: 10px; margin: auto; } .left { float: left; width: 30px; margin-right: 10px; } </style> <div class="cro-checkout-trustsection"> <div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div> <div class="cro-guarantee-details cro-gb-details"> <div class="left"> <img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item"> </div> <div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div> </div> <div class="cro-boleto-details cro-gb-details"> <div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div> <div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div> </div> <div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div> </div>`; /////// window.onload = function() { window.innerWidth < 1000 && document.querySelector('.step__footer').insertAdjacentHTML('afterEnd', html) document.querySelector('.cro-block').insertAdjacentHTML('afterEnd', html); }; } |
Jolly,
скорее всего нет элементов на стрнице с которыми работет скрипт строка 81 должна идти первой |
В 82 строке точки с запятой не хватает, не благодари :dance:
Но боже мой, что это? :blink: Чего вы хотите добиться, изменить стили при срабатывании условия? Я не специалист, мне просто интересно. |
Jolly,
примерно так, при условии, что все элементы есть. window.addEventListener('load', function() { // Conversionpirate.com if (window.location.href.indexOf('checkout') > -1) { /////// var html = `<style> .cro-block { width: 100%; position: absolute; bottom: 0; margin-bottom: 20px; } </style> <div class="cro-block"> </div>`; document.querySelector('.total-line-table').insertAdjacentHTML('afterEnd', html); var html = `<style> img { border: 0; max-width: 100%; } .cro-checkout-trustsection { background-color: white; border-radius: 5px; padding-top: 15px; border: 1px solid rgb(229, 229, 229); } .cro-checkout-payment-methods { width: 90%; margin: 15px auto; } .cro-checkout-trustsection-title { color: rgb(115, 115, 115); text-align: center; padding-bottom: 15px; } .cro-guarantee-details-text { color: rgb(83, 83, 83); line-height: 18px; } .cro-guarantee-details { border-radius: 5px 5px 0 0; } .cro-boleto-details { border-radius: 0 0 5px 5px; } .cro-gb-details { background-color: rgb(250, 250, 250); box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px 0px; border: 1px solid rgb(204, 204, 204); width: 90%; padding: 10px; margin: auto; } .left { float: left; width: 30px; margin-right: 10px; } </style> <div class="cro-checkout-trustsection"> <div class="cro-checkout-trustsection-title">Informações de pagamento e garantias:</div> <div class="cro-guarantee-details cro-gb-details"> <div class="left"> <img src="https://cdn.shopify.com/s/files/1/2459/3871/files/money-back.png?10304968336471885750" class="fireapps-shipping-icon-item"> </div> <div class="cro-guarantee-details-text">Suas compras são seguras com devolução gratuita e garantia de reembolso</div> </div> <div class="cro-boleto-details cro-gb-details"> <div class="left"><img src="https://cdn.shopify.com/s/files/1/2459/3871/files/boleto-bancario-logo_3x_cc7fde39-1430-45cb-9e51-991fc74b8bb5.png?890146874979855205" class="fireapps-shipping-icon-item"></div> <div class="cro-guarantee-details-text">Você pode pagar com Boleto Bancario. Os pagamentos expiram em 24 horas</div> </div> <div class="cro-checkout-payment-methods"><img class="cro-checkout-payment-methods-img" src="https://cdn.shopify.com/s/files/1/2569/8774/files/brazil-payment-methods-optimized.jpg?17084784513000531164"></div> </div>`; window.innerWidth < 1000 && document.querySelector('.step__footer').insertAdjacentHTML('afterEnd', html) document.querySelector('.cro-block').insertAdjacentHTML('afterEnd', html); }; }) |
Цитата:
|
Цитата:
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем :write: |
Цитата:
|
Цитата:
if (window.location.href.indexOf('checkout') > -1) { document.getElementsByClassName("cro-block").style.width = "100%"; } А еще лучше использовать jquery: if (window.location.href.indexOf('checkout') > -1) { $(".cro-block).css({"width":"100%", "position": "absolute","bottom": "0", "margin-bottom": "20px"}); } |
Цитата:
Нашла сайт где проверяют валидность js и подсказывают что не так, вот он |
Цитата:
|
Часовой пояс GMT +3, время: 12:15. |