2

I'm looking to add a "Buy Now" button to specific simple products that are part of a configurable product. This button would link to a third party site with the SKU of the chosen simple product. Not all of the products would need this button added - only ones with a certain attribute added to them.

I seem to be having some issues doing this, as I can only get the Buy Now button to appear on the configurable product no matter what product has been selected from the dropdown. I also can't seem to get the SKU of the simple products to attach to the URL the Buy Now button links to. This was done creating a module that overwrites the configurable_product_view files.

test Configurable

From this image only the top two simple products would replace the "add to cart" button with a "buy now"; with the bottom two keeping the add to cart process as normal.

Under the "in stock" label I have the SKU of the selected simple product displaying, and this changes based on which one is selected by the user.

Any help would be appreciated.

Thanks.

Improve this question

1 Answer 1

Reset to default
0

I seem to have somewhat stumbled my way through this; probably not in the most elegant of ways but it will do as a base unless someone else answers here.

Using the examples here -

How to add "Buy Now" button in Magento 2.1?

Magento 2 - Why do SKU not change dynamically in configurable product view page

I managed to pull together a couple modules that do what I need. At the moment this is across two different modules - i'll try and condense it into one and revise this answer with the final product.

The essential files are -

Configurable.php 

<?php

    namespace Vendor\Module\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type;

    class Configurable
     {

public function afterGetJsonConfig(
    \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
    $result
) {

    $jsonResult = json_decode($result, true);

    $jsonResult['skus'] = [];
    foreach ($subject->getAllowProducts() as $simpleProduct) {
        $jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
    }


    $result = json_encode($jsonResult);

    return $result;
}
}

catalog_product_view_type_configurable.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="product.info.addtocart">

        <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::buynow.phtml"/>
    </referenceBlock>
    <referenceBlock name="product.info.addtocart.additional">

        <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::buynow.phtml"/>
    </referenceBlock>
</body>

buynow.phtml

<button type="submit" title="<?php /* @escapeNotVerified */ echo __('Buy Now') ?>" id="buy-now" class="action buynow primary" data-mage-init='
{
"Vendor_Module/js/buy-now": {
    "form": "#product_addtocart_form"
}
}
'>
<span><?php /* @escapeNotVerified */ echo __('Buy Now') ?></span>
</button>

buy-now.js

     /*jshint browser:true jquery:true*/
        /*global alert*/
        define([
            'jquery',
            'mage/utils/wrapper'
        ], function ($, wrapper) {
            'use strict';

            return function(targetModule){

                var reloadPrice = targetModule.prototype._reloadPrice;
                var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
                    //do extra stuff

                    //call original method
                    var result = original();

                    //do extra stuff
                    var simpleSku = this.options.spConfig.skus[this.simpleProduct];

                    if( simpleSku != '' && simpleSku.indexOf('ADD PART OF SKU HERE') != -1 ) {
                        $('#product-addtocart-button').hide();
                        $('.field .label').hide();
                        $('.field .qty').hide();
                        $('div.product-info-main .sku .value').html(simpleSku);
                        $('#buy-now').show();
                        $('#buy-now').click(function() {
                            window.location.href = 'http://www.WEBSITETOLINKTO.com?sku=' +simpleSku;
                            return false;
                        });
                        console.log('this worked');
                    }
                        else {
                        $('.field .label').show();
                        $('.field .qty').show();
                        $('#product-addtocart-button').show();
                        $('#buy-now').hide();

                    }


                    //return original value
                    return result;
                });

                targetModule.prototype._reloadPrice = reloadPriceWrapper;
                return targetModule;
            };
        });

So in essence one module adds the actual Buy Now button on the page, another gets the SKU from the configurable product and then does some javascript around checking this. Thanks to the answers linked above.

Should be able to combine these into one module.

Example screenshots -

Buy now button

Add to basket button

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.