Страниците на магазина и блоковете за поръчка

Модул 2: Инсталиране и настройка · Време за четене: 9 минути

Учебна цел: След този урок ще можете да разпознавате страниците на магазина в WooCommerce и да ги свързвате правилно, а също така ще избирате съзнателно между блоковете и шорткодовете за количката и поръчката.

Основни понятия: страница на магазина, количка, поръчка, Моят профил, страница с условия, настройка на страниците, блокове, шорткодове, блокова тема, класическа тема, съвместимост на разширенията, noindex

Четири страници със специална роля

Един сайт с WordPress се състои от страници и публикации (курс по WordPress, урок 4.2). WooCommerce добавя продуктите като отделен тип публикация и дава на няколко обикновени страници специална роля. В списъка в Страници те изглеждат като всяка друга страница, но WooCommerce знае коя страница каква задача има. Това е записано в настройките, а не в името или адреса на страницата.

Тъй като връзката е в настройките, можете да дадете на страниците друго заглавие и друг адрес. Чайна Example от Утрехт (Холандия) нарича количката „Mandje“ (кошница) на адрес /mandje/ и това работи, докато тази страница е зададена като количка в Настройка на страниците.

Ако връзката се обърка, ще го забележите на неочаквани места. Няколко чести примера:

• Някой изтрива страницата Количка, защото „беше два пъти“. След това посетител, който натисне Добави в количката, попада на страница за грешка, а някои теми вече не показват количката в заглавната част.
• След преместване или импортиране към Поръчка е свързана друга страница, а не тази с блока за поръчка. Посетителят вижда празна страница и не може да поръча.
• След второ пускане на съветника се появява втора страница „Поръчка-2“. Едната страница е свързана, а другата е в менюто.

Затова след всяка голяма промяна (тема, преместване, импортиране) проверете в Настройка на страниците коя страница е свързана и отворете тази страница.

Блокове или шорткодове

Има два начина, по които количката и поръчката се появяват на страницата.

Шорткодовете са старият начин: на страницата стои кратък код в квадратни скоби, например [woocommerce_cart] и [woocommerce_checkout]. При показване WooCommerce ги заменя с формуляра. Оформлението идва от темата, а много разширения години наред са създавани за тази форма.

Блоковете са новият начин: страницата съдържа блока Количка или Поръчка, съставен от по-малки блокове (адрес, доставка, начин на плащане, обобщение, бутонът за поръчка). Виждате и редактирате ги в блоковия редактор (курс по WordPress, урок 4.1). Блоковете комуникират със сървъра чрез Store API (урок 2.4): формулярът работи направо в браузъра, без страницата да се зарежда отново всеки път.

От WooCommerce 8.3 (ноември 2023) всяка нова инсталация получава блоковете. Съществуващ магазин, който се обновява, запазва това, което е имал. Шорткодовете остават на разположение.

Кое да изберете? Няколко въпроса помагат:

• Работят ли Вашите разширения с блоковете? Това е най-важният въпрос. Разширение, което добавя поле към поръчката (дата за доставка, ДДС номер, съобщение към подарък), трябва да е отделно пригодено за блоковете. На страницата на разширението обикновено пише дали то е „съвместимо с блока за поръчка“. В редактора на блока за поръчка WooCommerce може да покаже съобщение за активни разширения, които не са отбелязани като съвместими.
• Каква тема имате? С блокова тема (курс по WordPress, урок 5.1) блоковете пасват най-добре. С класическа тема също работят, но оформлението не съвпада толкова от само себе си.
• Трябва ли да промените бутона за поръчка? В блоковете задавате текста на бутона в редактора. Това е удобно с оглед на правилата, които важат за него (урок 5.4).
• Искате ли Store API да е публичен? При блоковете той трябва да е достъпен; приставка за сигурност, която затваря REST API, поврежда поръчката.

Чайна Example не използва разширения, които добавят полета, и има блокова тема. Магазинът запазва блоковете. Друг магазин с приставка за дата на доставка, която работи само с шорткода, временно избира шорткода и при всяко голямо обновяване на тази приставка проверява отново.

Ако сменяте формата, направете го в тестовия си магазин и след това тествайте цяла поръчка (урок 4.5). В WooCommerce > Състояние > Инструменти WooCommerce има инструмент за повторно създаване на липсващи страници на магазина; той създава нови страници, но не преобразува съществуващите.

Защо количката и поръчката не трябва да са в търсачките

Количката е различна за всеки посетител, а за търсачката винаги е празна. Празна количка в резултатите от търсенето не помага на никого. Затова WooCommerce сам поставя noindex на страниците за количка, поръчка и Моят профил: търсачката може да посети страницата, но не я включва в резултатите от търсенето. В изходния код това изглежда така:

<meta name='robots' content='noindex, follow' />

SEO приставка или тема може да презапише този ред. Това рядко е умишлено. В задачата към този урок проверявате дали редът е налице.

Същите три страници също не трябва да попадат в кеша на страниците. WooCommerce изпраща към тях заглавни редове, които казват на кешовете, че не бива да запазват страницата. Как да проверите дали Вашият кеш спазва това, ще видите в урок 6.4.

Какво вижда посетител с празна количка

Ако отворите страницата за поръчка без нищо в количката, се случва нещо различно в сравнение с пълна количка:

• С блоковете страницата за поръчка обикновено показва съобщение, че количката е празна, с бутон за връщане към магазина.
• Със шорткода WooCommerce често Ви пренасочва към количката.

И двете са нормални. Проверката в този урок отчита това: програмата никога не слага нищо в количката Ви и гледа само какво вижда посетител с празна количка.

На практика: така изглежда в WooCommerce

С други теми и хостинг доставчици работи по подобен начин; различно е само оформлението.

1. Отидете в WooCommerce > Настройки > Разширени (Advanced) и отворете Настройка на страниците (Page setup). Запишете коя страница е зададена за Количка, Поръчка, Моят профил и Общи условия.
2. В Страници отворете всяка от тези страници и проверете дали блокът (или шорткодът) е на нея.
3. Отворете страницата за поръчка в редактора. Щракнете върху блока Поръчка и разгледайте частите в изгледа на списъка: данни за контакт, адрес за доставка, опции за доставка, опции за плащане, бележка, условия, бутонът.
4. Проверете в редактора на блока за поръчка (и при самите разширения) дали има съобщение за разширения, които не са съвместими с блоковете.
5. Отворете количката в частен прозорец и разгледайте изходния код (Ctrl+U): потърсете noindex.

Обобщение

• WooCommerce дава роля на четири страници (магазин, количка, поръчка, Моят профил), плюс страницата с условия; връзката е в настройките, а не в името.
• След преместване, импортиране или смяна на темата проверете връзките в Настройка на страниците.
• От WooCommerce 8.3 новите магазини получават блоковете; шорткодовете все още съществуват. Изберете според разширенията и темата си.
• Блоковете се нуждаят от Store API; не затваряйте REST API.
• Количката, поръчката и Моят профил получават noindex от WooCommerce и не трябва да са в кеша.

Тест (quiz)

Задача

Задача A2.2: Страниците на Вашия магазин. Въведете адреса на Вашия (тестов) магазин и адресите на количката, страницата за поръчка и Моят профил (път, например /kolichka/, или пълният URL на същия хост). Програмата зарежда всяка страница веднъж, без бисквитки и без да слага нищо в количката.

За всяка страница резултатът е добър, ако:

• страницата отговаря през https със статус 200;
• HTML кодът съдържа белег на WooCommerce: за количката блока wp-block-woocommerce-cart или класа на body woocommerce-cart, за поръчката wp-block-woocommerce-checkout или woocommerce-checkout, за Моят профил woocommerce-account или формуляр за вход на WooCommerce;
• има noindex (meta robots или заглавен ред X-Robots-Tag).

Ако при празна количка страницата за поръчка пренасочва към въведената от Вас количка, това също е добре.

Оранжева: няма noindex (проверете дали SEO приставка или темата Ви го премахва); страницата използва шорткода вместо блока (не е грешка, но е въпрос дали това е съзнателен избор). Червена: статус за грешка, например 404, страница без белег на WooCommerce (свържете правилната страница в Настройка на страниците), пренасочване към друг хост или http без https.

След това запишете за себе си коя форма (блокове или шорткод) използвате и защо.

Прочетете още

• Безплатен курс по WordPress 5.1: Теми: блок теми и класически теми
• Безплатен курс по WordPress 4.2: Страници, публикации, категории и тагове
• Безплатен курс по WordPress 4.1: Блоковият редактор
• WooCommerce 8.3: блоковете по подразбиране за нови магазини (developer.woocommerce.com, на английски): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Store API (developer.woocommerce.com, на английски): https://developer.woocommerce.com/docs/apis/store-api/