รายการผลิตภัณฑ์ Magento2 - แสดงตัวเลือกผลิตภัณฑ์


10

ฉันกำลังทำงานกับชุด Magento 2 ใหม่ในขณะนี้ สำหรับชุดรูปแบบนี้ฉันต้องการแสดงตัวเลือกผลิตภัณฑ์ทั้งหมด (ตัวเลือกที่กำหนดเองและตัวเลือกผลิตภัณฑ์ที่กำหนดรูปแบบได้) ในรายการผลิตภัณฑ์ วิธีนี้ผู้ใช้สามารถเพิ่มผลิตภัณฑ์ลงในรถเข็นได้อย่างรวดเร็ว

ฉันลองเพิ่มproduct.infoบล็อกเข้าไปcatalog_category_view.xmlและตั้งค่าผลิตภัณฑ์สำหรับบล็อกนั้น ตัวเลือกจะปรากฏขึ้นสำหรับทุกผลิตภัณฑ์ปัญหาคือตัวเลือกที่แสดงนั้นมาจากผลิตภัณฑ์แรกเท่านั้น ดังนั้นผลิตภัณฑ์อื่น ๆ ทั้งหมดจึงมีตัวเลือกนี้

--- ปรับปรุง ---

ฉันจัดการเพื่อแสดงตัวเลือกผลิตภัณฑ์ แต่ราคาไม่ได้รับการปรับปรุง ใครบางคนชี้ให้ฉันในทิศทางที่ถูกต้อง?

<form id='product_addtocart_form_<?php echo $product->getId(); ?>' class="c-product__details__add-to-cart" data-role="tocart-form" action="<?php echo $postParams[ 'action' ]; ?>" method="post">
    <input type="hidden" name="product" value="<?php echo $postParams[ 'data' ][ 'product' ]; ?>">
    <input type="hidden" name="<?php echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php echo $postParams[ 'data' ][ Action::PARAM_NAME_URL_ENCODED ]; ?>">
    <?php echo $block->getBlockHtml('formkey') ?>
    <div class="product-options-wrapper" id="product-options-wrapper" data-hasrequired="* Verplichte velden">
        <?php if($product->getTypeId() === 'configurable') : ?>
            <?php foreach($product->getTypeInstance()->getConfigurableAttributes($product) as $attribute) : ?>
                <div class="field">
                    <label class="label" for="select_<?php echo $attribute->getAttributeId(); ?>"><span><?php echo $attribute->getLabel() ?></span></label>
                    <?php $values = $attribute->getOptions(); ?>
                    <div class="control">
                        <select id="select_<?php echo $attribute->getAttributeId() ?>" name="options[<?php echo $attribute->getAttributeId() ?>]" class="product-option product-custom-option-<?php echo $attribute->getAttributeId() ?> admin__control-select" data-selector="options[<?php echo $attribute->getAttributeId() ?>]">
                            <?php foreach($values as $value): ?>

                                <option value="<?php echo $value['value_index'] ?>" price="2"><?php echo  $value['label'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php else : ?>
            <?php foreach($customOptions as $option): ?>
                <div class="field">
                    <label class="label" for="select_<?php echo $option->getId(); ?>"><span><?php echo $option->getTitle() ?></span></label>
                    <?php $values = $option->getValues(); ?>
                    <div class="control">
                        <select id="select_<?php echo $option->getId() ?>" data-id="<?php echo $product->getId() ?>" name="options[<?php echo $option->getId() ?>]" class="product-option product-custom-option-<?php echo $product->getId() ?> admin__control-select" data-selector="options[<?php echo $option->getId() ?>]">
                            <?php foreach($values as $value): ?>

                                <option value="<?php echo $value->getData('option_type_id') ?>" price="3"><?php echo $value->getTitle() ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
        <script>
            require([
                'jquery',
                'Magento_Catalog/js/price-box'
            ], function($){
                var priceBoxes = $('[data-product-id=<?php echo $product->getId(); ?>]');

                priceBoxes = priceBoxes.filter(function(index, elem){
                    return !$(elem).find('.price-from').length;
                });
                var priceBox = priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig($product, $customOptions) ?>});

                $('.product-option').on('change', function() {
                    priceBox.trigger('updatePrice');
                });
            });
        </script>
    </div>
    <button type="submit" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" class="action tocart primary im">
        <span><?php echo __('Add to cart'); ?></span>
    </button>
</form>

ฉันยังใช้getJsonConfigฟังก์ชันในคลาส ListProduct ของฉันเอง


magento.stackexchange.com/questions/100801/…วิธีการสำหรับตัวเลือกที่กำหนดเองอาจนำคุณไปสู่ตัวเลือกปกติเช่นกัน เพิ่มในรถเข็นในรายการหมวดหมู่: magento.stackexchange.com/a/125813/69
B00MER

value_index คืออะไรและ option_type_id ในรหัสของคุณ value_index เป็นดัชนีของค่าตัวเลือกและ option_type_id เป็นรหัสตัวเลือก
Sarvesh Tiwari

ฉันได้รับข้อผิดพลาดตัวแปรที่ไม่ได้กำหนด $ customOptions คุณสามารถตรวจสอบและเปลี่ยนกลับเป็นฉันได้ฉันรอการตอบกลับของคุณ
Sarvesh Tiwari

คำตอบ:


1

คุณสามารถใช้เป็นตัวอย่างโมดูล Magento_Swatch

บล็อกถูกเพิ่มลงในบล็อกที่มีชื่อMagento\Swatches\Block\Product\Renderer\Listing\Configurablecategory.product.type.details.renderers

ดังที่นี่: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

แม่แบบเริ่มต้น JS ที่ใช้กับ swatches: Magento_Swatches :: product / listing / renderer.phtml

https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

และทุกสิ่งที่สำคัญจะถูกนำไปใช้กับ JS ของสวอตช์ https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js ชอบฟังก์ชั่น: _RenderControls, _RenderFormInput, _EventListener, _UpdatePriceและอื่น ๆ JS ดูใหญ่ แต่มีรหัสจำนวนมากรอบ ๆ การเรนเดอร์รูปภาพที่ดึงมาผ่าน AJAX คุณอาจไม่ต้องการมันง่ายกว่าที่จะใช้

ที่นี่ตัวเลือก (คุณสมบัติขั้นสูงและผลิตภัณฑ์ที่เกี่ยวข้อง) แท็ก html (swatches divs) ถูกสร้างและจัดการ จัดการราคาที่นี่ด้วย ในกรณีของคุณคุณจะมีเมนูแบบเลื่อนลง

คุณต้องเขียนโมดูลของคุณเองเพื่อใช้งานทั้งหมดข้างต้น ในทางทฤษฎีคุณสามารถเพิ่มตัวเลือกใด ๆ จากทุกประเภทของผลิตภัณฑ์ (กลุ่ม, จัดกลุ่ม, .. ) ค่าใช้จ่ายคือประสิทธิภาพเนื่องจากคุณจะต้องโหลดข้อมูลเพิ่มเติมลงในโมเดลสำหรับทุกผลิตภัณฑ์ในหน้าหมวดหมู่ที่มีตัวเลือก

เป็นอีกทางเลือกหนึ่งคุณสามารถลองตั้งค่าเป็น swatches ที่เกี่ยวข้องกับผลิตภัณฑ์ที่สามารถกำหนดค่าได้ / ไม่ซับซ้อน (โดยไม่มีรูปภาพ)


0

สำหรับผลิตภัณฑ์ที่กำหนดค่าได้: คุณต้องตั้งค่าประเภทแอตทริบิวต์ " Text Swatch " และแก้ไขเทมเพลตเพื่อแสดงแถบ (เป็นค่าเริ่มต้นใน Magento 2) หากต้องการนี่เป็นวิธีที่ง่ายที่สุดหรือขยายฟังก์ชั่นสวอตช์ผ่านโมดูลซึ่งเพิ่มใหม่ ตัวเลือกที่ประเภทของคุณลักษณะและสร้างแม่แบบใหม่สำหรับตัวเลือกนั้น


นี่ไม่ใช่ตัวเลือกที่ดีที่สุดดูคำถามที่อัปเดตของฉันเฉพาะราคาไม่สามารถใช้งานได้ในขณะนี้
Silvan

0

ในรายการเมนูด้านซ้าย -> ไปที่ส่วนแอททริบิวต์และคลิกที่ผลิตภัณฑ์ -> ค้นหาตัวเลือกผลิตภัณฑ์ที่คุณต้องแสดงและคลิกที่แอททริบิวนั้น -> ไปที่คุณสมบัติของหน้าร้าน -> และเปลี่ยน -> ในปรากฏบนหน้าแคตตาล็อก ในรายการผลิตภัณฑ์ -> ไม่เป็นใช่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.