diff options
Diffstat (limited to 'views/mods')
| -rw-r--r-- | views/mods/mod_smartcheckout/checkout.phtml | 441 | ||||
| -rw-r--r-- | views/mods/mod_smartcheckout/settings_edit.phtml | 13 |
2 files changed, 253 insertions, 201 deletions
diff --git a/views/mods/mod_smartcheckout/checkout.phtml b/views/mods/mod_smartcheckout/checkout.phtml index 947f3d8..043b151 100644 --- a/views/mods/mod_smartcheckout/checkout.phtml +++ b/views/mods/mod_smartcheckout/checkout.phtml @@ -46,269 +46,281 @@ <div class="sc_main"> - <?php /* Schritt 1: Warenkorb */ ?> - <section class="sc_box" aria-labelledby="sc_title_basket"> - <h2 class="sc_title" id="sc_title_basket"><span class="sc_step">1</span><?php echo esc_html__('Ihr Warenkorb', 'wpsg'); ?></h2> - - <div class="sc_modul_basket sc_modul_dynamic" v-if="state.html.basketTop" v-html="state.html.basketTop"></div> + <?php /* Bestätigungsschritt beim Bestellabschluss „Zusammenfassung vor Abschluss“ */ ?> + <div class="sc_confirm_note" v-if="confirm" role="status"> + <strong><?php echo esc_html__('Bitte prüfen Sie Ihre Angaben', 'wpsg'); ?></strong> + <p><?php echo esc_html__('Alle Eingaben sind jetzt gesperrt. Stimmt alles, schließen Sie die Bestellung in der Zusammenfassung ab. Um etwas zu korrigieren, klicken Sie auf „Angaben ändern“.', 'wpsg'); ?></p> + <button type="button" class="sc_button sc_button_secondary" @click="editConfirm" :disabled="busy"><?php echo esc_html__('Angaben ändern', 'wpsg'); ?></button> + </div> - <div class="sc_products"> + <?php /* Im Bestätigungsschritt sind alle Eingaben gesperrt, vor dem Absenden gibt smartcheckout.js sie wieder frei */ ?> + <fieldset class="sc_fieldset" :disabled="confirm"> - <div class="sc_product" v-for="product in state.products" :key="product.index"> + <?php /* Schritt 1: Warenkorb */ ?> + <section class="sc_box" aria-labelledby="sc_title_basket"> + <h2 class="sc_title" id="sc_title_basket"><span class="sc_step">1</span><?php echo esc_html__('Ihr Warenkorb', 'wpsg'); ?></h2> - <div class="sc_product_image" v-if="product.image"> - <img :src="product.image" :alt="product.name" loading="lazy" /> - </div> + <div class="sc_modul_basket sc_modul_dynamic" v-if="state.html.basketTop" v-html="state.html.basketTop"></div> - <div class="sc_product_body"> + <div class="sc_products"> - <?php /* Angaben der Module vor dem Produkt, z.B. Maße beim Druckshop */ ?> - <div class="sc_product_before sc_modul_dynamic" v-if="product.before" v-html="product.before"></div> + <div class="sc_product" v-for="product in state.products" :key="product.index"> - <div class="sc_product_name"> - <a v-if="product.link" :href="product.link">{{ product.name }}</a> - <span v-else>{{ product.name }}</span> + <div class="sc_product_image" v-if="product.image"> + <img :src="product.image" :alt="product.name" loading="lazy" /> </div> - <div class="sc_product_desc" v-if="product.shortdesc" v-html="product.shortdesc"></div> - <div class="sc_product_extra sc_modul_dynamic" v-if="product.extra" v-html="product.extra"></div> - <div class="sc_product_garan" v-if="product.garan" v-html="product.garan"></div> - <div class="sc_product_revocation" v-if="product.revocation" v-html="product.revocation"></div> + <div class="sc_product_body"> - <div class="sc_product_tax" v-if="state.showTax"> - <?php echo esc_html__('MwSt.', 'wpsg'); ?> {{ product.tax_value }} - </div> + <?php /* Angaben der Module vor dem Produkt, z.B. Maße beim Druckshop */ ?> + <div class="sc_product_before sc_modul_dynamic" v-if="product.before" v-html="product.before"></div> - </div> + <div class="sc_product_name"> + <a v-if="product.link" :href="product.link">{{ product.name }}</a> + <span v-else>{{ product.name }}</span> + </div> - <div class="sc_product_amount"> + <div class="sc_product_desc" v-if="product.shortdesc" v-html="product.shortdesc"></div> + <div class="sc_product_extra sc_modul_dynamic" v-if="product.extra" v-html="product.extra"></div> + <div class="sc_product_garan" v-if="product.garan" v-html="product.garan"></div> + <div class="sc_product_revocation" v-if="product.revocation" v-html="product.revocation"></div> + + <div class="sc_product_tax" v-if="state.showTax"> + <?php echo esc_html__('MwSt.', 'wpsg'); ?> {{ product.tax_value }} + </div> - <div class="sc_stepper" v-if="!product.fixed"> - <button type="button" class="sc_stepper_btn" @click="changeAmount(product, -1)" :disabled="busy" :aria-label="'<?php echo esc_js(__('Menge verringern', 'wpsg')); ?>'">−</button> - <input - type="text" - inputmode="numeric" - class="sc_stepper_input" - :name="'wpsg[menge][' + product.index + ']'" - v-model="amounts[product.index]" - @change="refresh" - :aria-label="'<?php echo esc_js(__('Menge', 'wpsg')); ?>'" - /> - <button type="button" class="sc_stepper_btn" @click="changeAmount(product, 1)" :disabled="busy" :aria-label="'<?php echo esc_js(__('Menge erhöhen', 'wpsg')); ?>'">+</button> </div> - <div class="sc_stepper sc_stepper_fixed" v-else> - <input type="hidden" :name="'wpsg[menge][' + product.index + ']'" :value="product.amount" /> - <span class="sc_stepper_static">{{ product.amount }}</span> + <div class="sc_product_amount"> + + <div class="sc_stepper" v-if="!product.fixed"> + <button type="button" class="sc_stepper_btn" @click="changeAmount(product, -1)" :disabled="busy" :aria-label="'<?php echo esc_js(__('Menge verringern', 'wpsg')); ?>'">−</button> + <input + type="text" + inputmode="numeric" + class="sc_stepper_input" + :name="'wpsg[menge][' + product.index + ']'" + v-model="amounts[product.index]" + @change="refresh" + :aria-label="'<?php echo esc_js(__('Menge', 'wpsg')); ?>'" + /> + <button type="button" class="sc_stepper_btn" @click="changeAmount(product, 1)" :disabled="busy" :aria-label="'<?php echo esc_js(__('Menge erhöhen', 'wpsg')); ?>'">+</button> + </div> + + <div class="sc_stepper sc_stepper_fixed" v-else> + <input type="hidden" :name="'wpsg[menge][' + product.index + ']'" :value="product.amount" /> + <span class="sc_stepper_static">{{ product.amount }}</span> + </div> + + <button type="button" class="sc_remove" @click="removeProduct(product)" :disabled="busy"> + <?php echo esc_html__('Entfernen', 'wpsg'); ?> + </button> + </div> - <button type="button" class="sc_remove" @click="removeProduct(product)" :disabled="busy"> - <?php echo esc_html__('Entfernen', 'wpsg'); ?> - </button> + <div class="sc_product_price"> + <div class="sc_product_price_total">{{ product.price_total }}</div> + <div class="sc_product_price_single" v-if="product.amount !== 1">{{ product.price }} <?php echo esc_html__('je Stück', 'wpsg'); ?></div> + </div> - </div> + <?php /* Eingabefelder der Module (z.B. Produktvariablen) über die volle Breite der Position */ ?> + <div class="sc_product_fields sc_modul_dynamic" v-if="product.fields" v-html="product.fields"></div> - <div class="sc_product_price"> - <div class="sc_product_price_total">{{ product.price_total }}</div> - <div class="sc_product_price_single" v-if="product.amount !== 1">{{ product.price }} <?php echo esc_html__('je Stück', 'wpsg'); ?></div> </div> - <?php /* Eingabefelder der Module (z.B. Produktvariablen) über die volle Breite der Position */ ?> - <div class="sc_product_fields sc_modul_dynamic" v-if="product.fields" v-html="product.fields"></div> - </div> - </div> + <div class="sc_modul_basket sc_modul_dynamic" v-if="state.html.basketAfterProducts" v-html="state.html.basketAfterProducts"></div> - <div class="sc_modul_basket sc_modul_dynamic" v-if="state.html.basketAfterProducts" v-html="state.html.basketAfterProducts"></div> - - <?php if ($this->hasMod('wpsg_mod_gutschein')) { ?> - <div class="sc_voucher"> - - <label class="sc_voucher_label" for="wpsg_smartcheckout_voucher"><?php echo esc_html__('Gutscheincode', 'wpsg'); ?></label> - - <div class="sc_voucher_row"> - <input - type="text" - id="wpsg_smartcheckout_voucher" - class="sc_voucher_input" - :class="{ 'sc_invalid': voucherError }" - name="wpsg[gutschein]" - v-model="voucher" - @keydown.enter.prevent="addVoucher" - /> - <button type="button" class="sc_button sc_button_secondary" @click="addVoucher" :disabled="busy || voucher === ''"> - <?php echo esc_html__('Einlösen', 'wpsg'); ?> - </button> - </div> + <?php if ($this->hasMod('wpsg_mod_gutschein')) { ?> + <div class="sc_voucher"> + + <label class="sc_voucher_label" for="wpsg_smartcheckout_voucher"><?php echo esc_html__('Gutscheincode', 'wpsg'); ?></label> - <div class="sc_voucher_list" v-if="state.hasVouchers"> - <div class="sc_voucher_item" v-for="item in state.vouchers" :key="item.id"> - <span class="sc_voucher_code"><template v-if="item.coupon"><?php echo esc_html__('Wertgutschein', 'wpsg'); ?> </template>{{ item.code }}</span> - <span class="sc_voucher_partial" v-if="item.partial"><?php echo esc_html__('teilweise angerechnet', 'wpsg'); ?></span> - <span class="sc_voucher_value">{{ item.value }}</span> - <button type="button" class="sc_remove" @click="removeVoucher(item)" :disabled="busy"><?php echo esc_html__('Entfernen', 'wpsg'); ?></button> + <div class="sc_voucher_row"> + <input + type="text" + id="wpsg_smartcheckout_voucher" + class="sc_voucher_input" + :class="{ 'sc_invalid': voucherError }" + name="wpsg[gutschein]" + v-model="voucher" + @keydown.enter.prevent="addVoucher" + /> + <button type="button" class="sc_button sc_button_secondary" @click="addVoucher" :disabled="busy || voucher === ''"> + <?php echo esc_html__('Einlösen', 'wpsg'); ?> + </button> </div> + + <div class="sc_voucher_list" v-if="state.hasVouchers"> + <div class="sc_voucher_item" v-for="item in state.vouchers" :key="item.id"> + <span class="sc_voucher_code"><template v-if="item.coupon"><?php echo esc_html__('Wertgutschein', 'wpsg'); ?> </template>{{ item.code }}</span> + <span class="sc_voucher_partial" v-if="item.partial"><?php echo esc_html__('teilweise angerechnet', 'wpsg'); ?></span> + <span class="sc_voucher_value">{{ item.value }}</span> + <button type="button" class="sc_remove" @click="removeVoucher(item)" :disabled="busy"><?php echo esc_html__('Entfernen', 'wpsg'); ?></button> + </div> + </div> + </div> + <?php } ?> - </div> - <?php } ?> + </section> - </section> + <?php /* Schritt 2: Kundendaten */ ?> + <section class="sc_box" aria-labelledby="sc_title_customer"> + <h2 class="sc_title" id="sc_title_customer"><span class="sc_step">2</span><?php echo esc_html__('Ihre Daten', 'wpsg'); ?></h2> - <?php /* Schritt 2: Kundendaten */ ?> - <section class="sc_box" aria-labelledby="sc_title_customer"> - <h2 class="sc_title" id="sc_title_customer"><span class="sc_step">2</span><?php echo esc_html__('Ihre Daten', 'wpsg'); ?></h2> + <?php /* Login und Registrierung der Kundenverwaltung, serverseitig gerendert */ ?> + <div class="sc_modul_login" v-pre> + <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_kundenverwaltung', 'checkout_login'); ?> + </div> - <?php /* Login und Registrierung der Kundenverwaltung, serverseitig gerendert */ ?> - <div class="sc_modul_login" v-pre> - <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_kundenverwaltung', 'checkout_login'); ?> - </div> + <div class="sc_fields"> - <div class="sc_fields"> - - <div - class="sc_field" - v-for="field in state.fields" - :key="field.name" - :class="['sc_field_' + field.width, { 'sc_invalid': hasError(field.name) }]" - > - - <label class="sc_label" :for="'wpsg_sc_' + field.name"> - {{ field.label }}<span class="sc_required" v-if="field.required" aria-hidden="true">*</span> - </label> - - <select - v-if="field.type === 'select'" - class="sc_input" - :id="'wpsg_sc_' + field.name" - :name="fieldName(field)" - :required="field.required" - v-model="form[field.name]" - @change="refresh" + <div + class="sc_field" + v-for="field in state.fields" + :key="field.name" + :class="['sc_field_' + field.width, { 'sc_invalid': hasError(field.name) }]" > - <option value="-1"><?php echo esc_html__('Bitte auswählen', 'wpsg'); ?></option> - <option v-for="option in field.options" :key="option.value" :value="option.value">{{ option.label }}</option> - </select> - <template v-else-if="field.type === 'checkbox'"> - <input type="hidden" :name="fieldName(field)" value="0" /> + <label class="sc_label" :for="'wpsg_sc_' + field.name"> + {{ field.label }}<span class="sc_required" v-if="field.required" aria-hidden="true">*</span> + </label> + + <select + v-if="field.type === 'select'" + class="sc_input" + :id="'wpsg_sc_' + field.name" + :name="fieldName(field)" + :required="field.required" + v-model="form[field.name]" + @change="refresh" + > + <option value="-1"><?php echo esc_html__('Bitte auswählen', 'wpsg'); ?></option> + <option v-for="option in field.options" :key="option.value" :value="option.value">{{ option.label }}</option> + </select> + + <template v-else-if="field.type === 'checkbox'"> + <input type="hidden" :name="fieldName(field)" value="0" /> + <input + type="checkbox" + class="sc_checkbox" + :id="'wpsg_sc_' + field.name" + :name="fieldName(field)" + value="1" + :required="field.required" + v-model="form[field.name]" + true-value="1" + false-value="0" + @change="refresh" + /> + </template> + <input - type="checkbox" - class="sc_checkbox" + v-else + class="sc_input" + :type="field.type" :id="'wpsg_sc_' + field.name" :name="fieldName(field)" - value="1" :required="field.required" + :autocomplete="field.autocomplete || 'off'" v-model="form[field.name]" - true-value="1" - false-value="0" @change="refresh" + @paste="field.nopaste ? $event.preventDefault() : null" /> - </template> - - <input - v-else - class="sc_input" - :type="field.type" - :id="'wpsg_sc_' + field.name" - :name="fieldName(field)" - :required="field.required" - :autocomplete="field.autocomplete || 'off'" - v-model="form[field.name]" - @change="refresh" - @paste="field.nopaste ? $event.preventDefault() : null" - /> + + </div> </div> - </div> + <?php /* Erweiterungen der Module innerhalb der Kundendaten */ ?> + <div class="sc_modul_customer" v-pre> + <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_kundenverwaltung', 'checkout_customer_inner'); ?> + <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_nlsatolo', 'checkout_customer_inner'); ?> + <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_trustedshops', 'checkout_customer_inner'); ?> + <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_newsletter', 'checkout_customer_inner'); ?> + </div> - <?php /* Erweiterungen der Module innerhalb der Kundendaten */ ?> - <div class="sc_modul_customer" v-pre> - <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_kundenverwaltung', 'checkout_customer_inner'); ?> - <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_nlsatolo', 'checkout_customer_inner'); ?> - <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_trustedshops', 'checkout_customer_inner'); ?> - <?php echo \wpsgSmartcheckout\State::renderMod('wpsg_mod_newsletter', 'checkout_customer_inner'); ?> - </div> + <div class="sc_hint"> + <?php echo wpsg_translate(__('Mit #1# gekennzeichnete Felder sind Pflichtfelder.', 'wpsg'), '<span class="sc_required">*</span>'); ?> + </div> - <div class="sc_hint"> - <?php echo wpsg_translate(__('Mit #1# gekennzeichnete Felder sind Pflichtfelder.', 'wpsg'), '<span class="sc_required">*</span>'); ?> - </div> + </section> - </section> + <?php /* Abweichende Lieferanschrift und weitere Module vor dem Abschluss */ ?> + <?php $strPreButton = \wpsgSmartcheckout\State::renderHook('checkout_inner_prebutton', [&$this->view]); ?> + <?php if (trim($strPreButton) !== '') { ?> + <section class="sc_box sc_modul_extra" v-pre> + <?php echo $strPreButton; ?> + </section> + <?php } ?> - <?php /* Abweichende Lieferanschrift und weitere Module vor dem Abschluss */ ?> - <?php $strPreButton = \wpsgSmartcheckout\State::renderHook('checkout_inner_prebutton', [&$this->view]); ?> - <?php if (trim($strPreButton) !== '') { ?> - <section class="sc_box sc_modul_extra" v-pre> - <?php echo $strPreButton; ?> - </section> - <?php } ?> + <?php /* Blöcke der Module, die sich mit jeder Antwort ändern (z.B. Bestellupload) */ ?> + <section class="sc_box sc_modul_upload sc_modul_dynamic" v-if="state.html.checkoutDynamic" v-html="state.html.checkoutDynamic"></section> - <?php /* Blöcke der Module, die sich mit jeder Antwort ändern (z.B. Bestellupload) */ ?> - <section class="sc_box sc_modul_upload sc_modul_dynamic" v-if="state.html.checkoutDynamic" v-html="state.html.checkoutDynamic"></section> + <?php /* Schritt 3: Versandart */ ?> + <section class="sc_box" v-if="state.shipping.show" aria-labelledby="sc_title_shipping"> + <h2 class="sc_title" id="sc_title_shipping"><span class="sc_step">3</span><?php echo esc_html__('Versandart', 'wpsg'); ?></h2> - <?php /* Schritt 3: Versandart */ ?> - <section class="sc_box" v-if="state.shipping.show" aria-labelledby="sc_title_shipping"> - <h2 class="sc_title" id="sc_title_shipping"><span class="sc_step">3</span><?php echo esc_html__('Versandart', 'wpsg'); ?></h2> + <div class="sc_choices" :class="{ 'sc_invalid': hasError('shipping') }"> - <div class="sc_choices" :class="{ 'sc_invalid': hasError('shipping') }"> + <?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten */ ?> + <div class="sc_choice" v-for="item in state.shipping.list" :key="item.id" :class="{ 'sc_choice_active': form.shipping === item.id }" @click="selectChoice('shipping', item.id, $event)"> - <?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten */ ?> - <div class="sc_choice" v-for="item in state.shipping.list" :key="item.id" :class="{ 'sc_choice_active': form.shipping === item.id }" @click="selectChoice('shipping', item.id, $event)"> + <?php /* Radio, Logo und Bezeichnung auf einer Zeile, die Beschreibung darunter */ ?> + <label class="sc_choice_head"> + <input type="radio" name="wpsg[checkout][shipping]" :value="item.id" v-model="form.shipping" @change="refresh" /> + <img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" /> + <span class="sc_choice_name">{{ item.name }}</span> + <span class="sc_choice_price" v-if="item.price">{{ item.price }}</span> + </label> + <div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div> - <?php /* Radio, Logo und Bezeichnung auf einer Zeile, die Beschreibung darunter */ ?> - <label class="sc_choice_head"> - <input type="radio" name="wpsg[checkout][shipping]" :value="item.id" v-model="form.shipping" @change="refresh" /> - <img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" /> - <span class="sc_choice_name">{{ item.name }}</span> - <span class="sc_choice_price" v-if="item.price">{{ item.price }}</span> - </label> - <div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div> + </div> </div> - </div> + </section> - </section> + <?php /* Schritt 4: Zahlungsart */ ?> + <section class="sc_box" v-if="state.payment.show" aria-labelledby="sc_title_payment"> + <h2 class="sc_title" id="sc_title_payment"><span class="sc_step">4</span><?php echo esc_html__('Zahlungsart', 'wpsg'); ?></h2> - <?php /* Schritt 4: Zahlungsart */ ?> - <section class="sc_box" v-if="state.payment.show" aria-labelledby="sc_title_payment"> - <h2 class="sc_title" id="sc_title_payment"><span class="sc_step">4</span><?php echo esc_html__('Zahlungsart', 'wpsg'); ?></h2> + <div class="sc_choices" :class="{ 'sc_invalid': hasError('payment') }"> - <div class="sc_choices" :class="{ 'sc_invalid': hasError('payment') }"> + <?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten (z.B. Kreditkarte) */ ?> + <div class="sc_choice" v-for="item in state.payment.list" :key="item.id" :class="{ 'sc_choice_active': form.payment === item.id }" @click="selectChoice('payment', item.id, $event)"> - <?php /* Das label umfasst nur die Kopfzeile, Hinweise der Module können eigene Eingabefelder enthalten (z.B. Kreditkarte) */ ?> - <div class="sc_choice" v-for="item in state.payment.list" :key="item.id" :class="{ 'sc_choice_active': form.payment === item.id }" @click="selectChoice('payment', item.id, $event)"> + <?php /* Radio, Logo und Bezeichnung auf einer Zeile, Beschreibung und Zusatzangaben darunter */ ?> + <label class="sc_choice_head"> + <input type="radio" name="wpsg[checkout][payment]" :value="item.id" v-model="form.payment" @change="refresh" /> + <img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" /> + <span class="sc_choice_name">{{ item.name }}</span> + <span class="sc_choice_price" v-if="item.price">{{ item.price }}</span> + </label> + <div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div> + <div class="sc_choice_extra" v-if="item.extra" v-html="item.extra"></div> - <?php /* Radio, Logo und Bezeichnung auf einer Zeile, Beschreibung und Zusatzangaben darunter */ ?> - <label class="sc_choice_head"> - <input type="radio" name="wpsg[checkout][payment]" :value="item.id" v-model="form.payment" @change="refresh" /> - <img class="sc_choice_logo" v-if="item.logo" :src="item.logo" :alt="item.name" /> - <span class="sc_choice_name">{{ item.name }}</span> - <span class="sc_choice_price" v-if="item.price">{{ item.price }}</span> - </label> - <div class="sc_choice_hint" v-if="item.hint" v-html="item.hint"></div> - <div class="sc_choice_extra" v-if="item.extra" v-html="item.extra"></div> + </div> </div> - </div> + <?php /* Zahlungsmodule, die eigene Eingabefelder mitbringen */ ?> + <div class="sc_modul_payment sc_modul_dynamic" v-if="state.html.paymentInner" v-html="state.html.paymentInner"></div> - <?php /* Zahlungsmodule, die eigene Eingabefelder mitbringen */ ?> - <div class="sc_modul_payment sc_modul_dynamic" v-if="state.html.paymentInner" v-html="state.html.paymentInner"></div> + </section> - </section> + <?php /* Bestellkommentar */ ?> + <section class="sc_box" aria-labelledby="sc_title_comment"> + <h2 class="sc_title" id="sc_title_comment"><?php echo esc_html__('Bestellkommentar', 'wpsg'); ?></h2> - <?php /* Bestellkommentar */ ?> - <section class="sc_box" aria-labelledby="sc_title_comment"> - <h2 class="sc_title" id="sc_title_comment"><?php echo esc_html__('Bestellkommentar', 'wpsg'); ?></h2> + <label class="sc_label sc_label_hidden" for="wpsg_sc_comment"><?php echo esc_html__('Bestellkommentar', 'wpsg'); ?></label> + <textarea class="sc_textarea" id="wpsg_sc_comment" name="wpsg[checkout][comment]" rows="4" v-model="form.comment"></textarea> - <label class="sc_label sc_label_hidden" for="wpsg_sc_comment"><?php echo esc_html__('Bestellkommentar', 'wpsg'); ?></label> - <textarea class="sc_textarea" id="wpsg_sc_comment" name="wpsg[checkout][comment]" rows="4" v-model="form.comment"></textarea> + </section> - </section> + </fieldset> </div> @@ -319,6 +331,14 @@ <h2 class="sc_title" id="sc_title_sum"><?php echo esc_html__('Zusammenfassung', 'wpsg'); ?></h2> + <?php /* Positionen in Kurzform, damit Ware, Menge und Preis unmittelbar über dem Bestellbutton stehen (§ 312j Abs. 2 BGB) */ ?> + <div class="sc_sum_products"> + <div class="sc_sum_product" v-for="product in state.products" :key="product.index"> + <span class="sc_sum_product_name">{{ product.amount }} × {{ product.name }}</span> + <span class="sc_sum_product_price">{{ product.price_total }}</span> + </div> + </div> + <div class="sc_sum_rows"> <div class="sc_sum_row"> @@ -398,11 +418,11 @@ <div class="sc_modul_conditions sc_modul_dynamic" :class="{ 'sc_invalid': state.errorConditions }" - v-if="state.html.conditions" + v-if="state.html.conditions && showFinal" v-html="state.html.conditions" ></div> - <div class="sc_agb" v-if="state.needAGB" :class="{ 'sc_invalid': hasError('agb') }"> + <div class="sc_agb" v-if="state.needAGB && showFinal" :class="{ 'sc_invalid': hasError('agb') }"> <label> <input type="checkbox" name="wpsg[agb]" value="1" v-model="agb" required /> <span><?php @@ -416,14 +436,35 @@ </div> <?php /* GARAN-Gewährleistungslabel direkt vor dem Bestellbutton */ ?> - <div class="sc_garan" v-if="state.warranty && state.warranty.need && !state.warranty.popup"> + <div class="sc_garan" v-if="state.warranty && state.warranty.need && !state.warranty.popup && showFinal"> <button type="button" class="sc_garan_zoom" @click="garanLightbox = true" title="<?php echo esc_attr__('Gewährleistungslabel vergrößern', 'wpsg'); ?>"> <img :src="state.warranty.image" alt="<?php echo esc_attr__('GARAN Gewährleistungslabel', 'wpsg'); ?>" width="1200" height="1697" /> </button> </div> + <?php /* Bestellabschluss „Zusammenfassung anzeigen“: Prüfen und weiter zur klassischen Zusammenfassung, dort wird bestellt */ ?> + <button + v-if="state.finish === 'overview'" + type="submit" + class="sc_button sc_button_order" + name="wpsg_smartcheckout_order" + value="1" + :disabled="busy" + ><?php echo esc_html__('Weiter zur Zusammenfassung', 'wpsg'); ?></button> + + <?php /* Bestellabschluss „Zusammenfassung vor Abschluss“: Prüfen und Eingaben für den Bestätigungsschritt sperren */ ?> + <button + v-if="state.canOrder && state.finish === 'confirm' && !confirm" + type="button" + class="sc_button sc_button_order" + @click="startConfirm" + :disabled="busy" + ><?php echo esc_html__('Weiter', 'wpsg'); ?></button> + + <input v-if="confirm" type="hidden" name="wpsg_smartcheckout_confirmed" value="1" /> + <button - v-if="state.canOrder" + v-if="state.canOrder && showFinal && state.finish !== 'overview'" type="submit" class="sc_button sc_button_order" name="wpsg_smartcheckout_order" @@ -435,6 +476,8 @@ <template v-else><?php echo esc_html__('zahlungspflichtig bestellen', 'wpsg'); ?></template> </button> + <button v-if="confirm" type="button" class="sc_button sc_button_secondary sc_button_edit" @click="editConfirm" :disabled="busy"><?php echo esc_html__('Angaben ändern', 'wpsg'); ?></button> + <div class="sc_sum_hint"> <?php echo wpsg_translate(__('Es gelten die Preise inklusive der gesetzlichen MwSt. zuzüglich #1#.', 'wpsg'), '<a target="_blank" rel="noopener" href="'.esc_url($state['url']['shipping']).'">'.esc_html__('Versandkosten', 'wpsg').'</a>'); ?> </div> diff --git a/views/mods/mod_smartcheckout/settings_edit.phtml b/views/mods/mod_smartcheckout/settings_edit.phtml index f713efe..46e43d8 100644 --- a/views/mods/mod_smartcheckout/settings_edit.phtml +++ b/views/mods/mod_smartcheckout/settings_edit.phtml @@ -10,17 +10,26 @@ '1' => __('Einspaltig', 'wpsg') ]; + // Reihenfolge wie im Bestellablauf: mit eigener Zusammenfassung zuerst + $arFinish = [ + wpsg_mod_smartcheckout::FINISH_OVERVIEW => __('Zusammenfassung anzeigen', 'wpsg'), + wpsg_mod_smartcheckout::FINISH_CONFIRM => __('Zusammenfassung vor Abschluss', 'wpsg'), + wpsg_mod_smartcheckout::FINISH_DIRECT => __('Direkt abschließen', 'wpsg') + ]; + ?> <?php echo wpsg_drawForm_Select('wpsg_mod_smartcheckout_page', __('Seite für den SmartCheckout', 'wpsg'), $this->view['arPages'], $this->get_option('wpsg_mod_smartcheckout_page'), ['hint' => __('Wählen Sie „Neu anlegen und zuordnen", damit beim Speichern automatisch eine eigene Seite erstellt wird — oder ordnen Sie eine bestehende Seite zu. Der Checkout wird automatisch in diese Seite eingebunden.', 'wpsg')]); ?> <?php echo wpsg_drawForm_Select('wpsg_mod_smartcheckout_layout', __('Aufteilung', 'wpsg'), $arLayout, $this->get_option('wpsg_mod_smartcheckout_layout'), ['hint' => __('Zweispaltig: Eingaben links, Zusammenfassung rechts mitlaufend. Einspaltig: Zusammenfassung unterhalb der Eingaben.', 'wpsg')]); ?> +<?php echo wpsg_drawForm_Select('wpsg_mod_smartcheckout_finish', __('Bestellabschluss', 'wpsg'), $arFinish, $this->get_option('wpsg_mod_smartcheckout_finish'), ['hint' => __('Zusammenfassung anzeigen: „Weiter zur Zusammenfassung“ führt auf die gesonderte Bestellübersicht, dort wird zahlungspflichtig bestellt. Zusammenfassung vor Abschluss: „Weiter“ prüft die Angaben und sperrt alle Felder, der Button wechselt auf „zahlungspflichtig bestellen“, mit „Angaben ändern“ lassen sich die Felder wieder bearbeiten. Direkt abschließen: Der Kunde bestellt direkt im SmartCheckout.', 'wpsg')]); ?> + <?php echo wpsg_drawForm_Checkbox('wpsg_mod_smartcheckout_image', __('Produktbilder im Warenkorb anzeigen', 'wpsg'), $this->get_option('wpsg_mod_smartcheckout_image')); ?> <p class="wpsg_note"> - <?php echo __('Solange das Modul aktiv ist, wird die Warenkorbseite auf den SmartCheckout umgeleitet — der klassische Ablauf (Warenkorb, Kasse, Versand/Zahlung, Zusammenfassung) wird nicht mehr angesteuert.', 'wpsg'); ?> + <?php echo esc_html__('Solange das Modul aktiv ist, wird die Warenkorbseite auf den SmartCheckout umgeleitet — der klassische Ablauf (Warenkorb, Kasse, Versand/Zahlung) wird nicht mehr angesteuert. Die klassische Zusammenfassung erscheint nur beim Bestellabschluss „Zusammenfassung anzeigen“.', 'wpsg'); ?> </p> <p class="wpsg_note"> - <?php echo __('Der SmartCheckout rechnet ausschließlich serverseitig — jede Änderung an Menge, Anschrift, Versand- oder Zahlungsart wird an den Shop geschickt und mit der regulären Kalkulation neu berechnet.', 'wpsg'); ?> + <?php echo esc_html__('Der SmartCheckout rechnet ausschließlich serverseitig — jede Änderung an Menge, Anschrift, Versand- oder Zahlungsart wird an den Shop geschickt und mit der regulären Kalkulation neu berechnet.', 'wpsg'); ?> </p> |