Страница пользовательского заказа [закрыто] ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Страница пользовательского заказа [закрыто]

Сообщение Anonymous »

Так что я использую WordPress больше COS об оптимизации SEO и все, и как это сейчас, я должен работать на странице пользовательского заказа с JavaScript HTML и CSS. Проблема в том, что я написал функцию, чтобы пользователи не выбирали более 5, но как мне
добавить фрукты, выбранные в размер бутылки, и добавляется в корзину в WordPress, потому что это не работает. Я занимаюсь этим уже 2 недели, и я должен представить сегодня, поэтому, пожалуйста, помогите 😌. Я попытался добавить JavaScript для его работы, позвольте мне также указать, что использование
это влияет на другие продукты на других страницах, так что это будет означать, что код не позволит нажимать другие продукты на других страницах после шестом выбора, который не предполагается быть. В этот момент я в замешательстве, поэтому я обращаюсь. Вот код, который я использовал < /p>

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
// Fruit selection logic
let selectedFruits = 0;
const maxFruits = 5;
const fruitButtons = document.querySelectorAll('.gona a.add_to_cart_button');

// Fruit selection handler
fruitButtons.forEach(button => {
button.addEventListener('click', function(e) {
if (selectedFruits >= maxFruits) {
e.preventDefault(); // Prevent adding more fruits
return;
}
selectedFruits++;

// Update UI if max reached
if (selectedFruits >= maxFruits) {
fruitButtons.forEach(btn =>  {
btn.classList.add('disabled');
});
}
});
});

// Add disabled state styles
const style = document.createElement('style');
style.textContent = `
.disabled {
pointer-events: none;
opacity: 0.6;
cursor: not-allowed;
}
`;
document.head.appendChild(style);
});

< /code>
.sec_2{
background-image: url('http://verdyur.com/wp-content/uploads/2025/02/Frame-113-1.png');
width: 100%;
padding: 20px 20px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-family: "Nunito", serif;
font-weight: 600;
font-size: 2.0rem;
box-sizing: border-box;
}
a1, a5, a3, a6, b1, b5, b6{
display: block;
}
a5{
font-family: "Nunito", serif;
padding: 40px 180px;
}
a3{
margin-top: 30px;
font-family: "Gochi Hand", serif;
font-size: 1.6rem;
margin-bottom: 25px;
}
a6{
font-family: "Nunito", serif;
line-height: 1.6rem;
}
b1{
font-family: "Gochi Hand", serif;
font-size: 2.0rem;
font-weight: 500;
margin-bottom: 25px;
}
.sec_3_tw{
display: flex;
gap: 20px;
padding: 60px 180px;
}
.sch{
width: 750px;
}
.sc_b{
border-style: none;
border-radius: 20px;
background-color: #258710;
color: #ffffff;
padding: 10px 25px;
font-family: "Nunito", serif;
cursor: pointer;
margin-top: 20px;
font-size: 1.1rem;
transition: all 0.4s ease;
}
.sc_b:hover{
background-color: #19580a;
}
bs{
color: #FF6201;
}
b6{
font-family: "Nunito", serif;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 25px;
}
b5{
font-family: "Nunito", serif;
font-size: 1.3rem;
font-weight: 700;
text-align: left;
}
.sec_4{
background-color: #FBFBFB;
width: 100%;
text-align: center;
padding: 80px 140px;
box-sizing: border-box;
}
.fri{
width: 140px;
height: 110px;
}
.gona{
margin-top: 40px;
font-family: "Gochi Hand", serif;
font-size: 1.5rem;
font-weight: 600;
display: grid;
width: 220px;
}
.gona_2{
background-color: #F6F4F4;
width: 200px;
padding: 50px 10px;
border-radius: 20px;
margin-bottom: 18px;
cursor: pointer;
transition: all 0.4s ease;
}
.gona_2:hover{
background-color: #ececec;
}

.gona_3{
background-color: #FFFCF5;
width: 200px;
padding: 50px 10px;
border-radius: 20px;
margin-bottom: 18px;
cursor: pointer;
transition: all 0.4s ease;
}
.gona_3:hover{
background-color: #fff8e9;
}

.gona_4{
background-color: #FFF7F2;
width: 200px;
padding: 50px 10px;
border-radius: 20px;
margin-bottom: 18px;
cursor: pointer;
transition: all 0.4s ease;
}
.gona_4:hover{
background-color: #fff0cf;
}
.gona_5{
background-color: #F4F9F3;
width: 200px;
padding:  50px 10px;
border-radius: 20px;
margin-bottom: 18px;
cursor: pointer;
transition: all 0.4s ease;
}
.gona_5:hover{
background-color: #dcffd5;
}

.tbl_4{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
d1{
font-family: "Nunito", serif;
text-align: left;
display: flex;
margin-top: 80px;
font-weight: 700;
font-size: 1.5rem;
padding-left: 40px;
}
.sci{
text-decoration: none;
color: rgb(255, 255, 255);
}
.cusy{
display: flex;
background-color: #FF6201;
border-style: none;
border-radius: 10px;
font-size: 1.6rem;
padding: 10px 25px;
font-family: "Nunito", serif;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
cursor: pointer;
transition: all 0.4s ease;
margin-bottom: 120px;
color: rgb(255, 255, 255);
}
.cusy:hover{
background-color: #d25000;
}
e1{
display: block;
}
.bs_z{
width: 180px;
}
.bt_s{
display: flex;
gap: 100px;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 40px;
}
.bt_s1{
font-family: "Gochi Hand", serif;
font-size: 1.8rem;
font-weight: 700;
color:#258710;
display: grid;

}
.bt_s2{
font-family: "Gochi Hand", serif;
font-size: 1.8rem;
font-weight: 700;
color:#258710;
display: grid;
width: 400px;
}
.sec_7 {
background-image: url('http://verdyur.com/wp-content/uploads/2025/02/Frame-113.png');
width: 100%;
height: 20vh;
background-size: cover;
background-repeat: no-repeat
}
< /code>

[url=?add-to-cart=2768]Add to cart[/url]

bananas






[img]http://verdyur.com/wp-content/uploads/2025/02/Pineapple.png[/img]

[url=?add-to-cart=2743]Add to cart[/url]

pineapple






[img]http://verdyur.com/wp-content/uploads/2025/02/Papaya.png[/img]

[url=?add-to-cart=2756]Add to cart[/url]

papaya






[img]http://verdyur.com/wp-content/uploads/2025/02/2148440471-removebg-preview-1-1.png[/img]

[url=?add-to-cart=2756]Add to cart[/url]

chia seeds








[img]http://verdyur.com/wp-content/uploads/2025/02/diced-raw-beetroot-isolated-white-background_434193-7466-removebg-preview-2.png[/img]

[url=?add-to-cart=2747]Add to cart[/url]

beetroot






[img]http://verdyur.com/wp-content/uploads/2025/02/Peanut-Butter.png[/img]

[url=?add-to-cart=2779]Add to cart[/url]

peanut butter






[img]http://verdyur.com/wp-content/uploads/2025/02/Cucumbers.png[/img]

[url=?add-to-cart=2742]Add to cart[/url]

cucumber






[img]http://verdyur.com/wp-content/uploads/2025/02/2147906798-removebg-preview-1.png[/img]

[url=?add-to-cart=2780]Add to cart[/url]

coconut







[img]http://verdyur.com/wp-content/uploads/2025/02/Ginger.png[/img]

[url=?add-to-cart=2781]Add to cart[/url]

ginger






[img]http://verdyur.com/wp-content/uploads/2025/02/45117-removebg-preview-1.png[/img]

[url=?add-to-cart=2782]Add to cart[/url]

almond milk






[img]http://verdyur.com/wp-content/uploads/2025/02/27066-removebg-preview-1.png[/img]

[url=?add-to-cart=2783]Add to cart[/url]

greek yoghurt






[img]http://verdyur.com/wp-content/uploads/2025/02/Oats.png[/img]

[url=?add-to-cart=2784]Add to cart[/url]

oats








[img]http://verdyur.com/wp-content/uploads/2025/02/31902-removebg-preview-1.png[/img]

[url=?add-to-cart=2785]Add to cart[/url]

strawberries






[img]http://verdyur.com/wp-content/uploads/2025/02/3673-removebg-preview-1.png[/img]

[url=?add-to-cart=2786]Add to cart[/url]

blueberries






[img]http://verdyur.com/wp-content/uploads/2025/02/image_10-removebg-preview-1.png[/img]

[url=?add-to-cart=2750]Add to cart[/url]

spinach










[url=https://verdyur.com/checkout/]

Procced

[/url]



Подробнее здесь: https://stackoverflow.com/questions/794 ... order-page
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»