16.08.2018, 16:08
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 40
|
|
|
Где допустила ошибку
Подскажите пожалуйста, где я допустила ошибку?
// 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);
};
}
|
|
16.08.2018, 16:22
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Jolly,
скорее всего нет элементов на стрнице с которыми работет скрипт
строка 81 должна идти первой
|
|
16.08.2018, 16:27
|
|
Профессор
|
|
Регистрация: 13.03.2018
Сообщений: 278
|
|
В 82 строке точки с запятой не хватает, не благодари 
Но боже мой, что это?  Чего вы хотите добиться, изменить стили при срабатывании условия? Я не специалист, мне просто интересно. |
|
16.08.2018, 16:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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);
};
})
|
|
16.08.2018, 16:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Artur_Hopf
|
|
В 82 строке точки с запятой не хватает
|
нужна, но проблема не в этом |
|
17.08.2018, 09:25
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 40
|
|
|
|
|
17.08.2018, 09:34
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от Jolly
|
|
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем
|
такое под силу даже css |
|
17.08.2018, 09:48
|
|
Профессор
|
|
Регистрация: 13.03.2018
Сообщений: 278
|
|
Сообщение от Jolly
|
Спасибо)
Хочу блок добавить с помощью js на сайт, и чтобы в разных разрешениях он находился в разных местах с чуть разным стилем 
|
js же работает с css. Напиши что то вроде:
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"});
}
|
|
17.08.2018, 12:14
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 40
|
|
|
Сообщение от рони
|
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 и подсказывают что не так, вот он
|
|
17.08.2018, 12:17
|
|
Аспирант
|
|
Регистрация: 11.03.2017
Сообщений: 40
|
|
|
Сообщение от j0hnik
|
|
такое под силу даже css
|
css там не воспринимается, только js, поэтому и ломала голову  |
|
|
|
